أشرطة النظام في Android

يُطلق على شريط الحالة وشريط التنقّل معًا اسم أشرطة النظام. تعرض معلومات مهمة مثل مستوى البطارية والوقت وتنبيهات بالإشعارات، وتوفر تفاعلاً مباشرًا مع الجهاز من أي مكان.

من الأهمية بمكان أخذ بروز أشرطة النظام في الاعتبار، سواء كنت تصميم واجهة المستخدم للتفاعلات مع نظام التشغيل Android أو أساليب الإدخال أو غير ذلك إمكانات الجهاز. ضع أشرطة النظام في أعلى معظم الطبقات للتأكد يتم أخذها في الحسبان.

الشكل 1: الصور خلف أشرطة النظام

الخلاصات

  • تضمين أشرطة النظام في تصميماتك لاحتساب المناطق الآمنة لواجهة المستخدم والنظام والتفاعلات وطرق الإدخال وقواطع العرض وإمكانات الجهاز الأخرى. تأكد من وضع أشرطة النظام في أعلى الطبقة في الاعتبار.

  • اجعل أشرطة النظام شفافة مع عرض التطبيق في وضع ملء الشاشة، متابعة واجهة المستخدم أسفل الأشرطة لتقديم تجربة شاملة.

  • تجنَّب إضافة إيماءات النقر أو اسحب الأهداف ضمن مجموعات الإيماءات. هذه يتعارض مع التنقل من الحافة إلى الحافة والتنقل بالإيماءات.

    الشكل 2: إدخالات إيماءات النظام تجنَّب وضع النقر المستهدفة ضمن هذه المجالات

عرض المحتوى خلف أشرطة النظام

تسمح ميزة الحافة إلى الحافة لنظام التشغيل Android برسم واجهة المستخدم أسفل أشرطة النظام تجربة أكثر شمولية لذا، نوصي باستخدام البيانات التفصيلية من الحافة إلى الحافة شريط التنقل الشفاف هو طلب شائع من المستخدمين. (تعرف على كيفية متوافقة مع البيانات الممتدة بين الأطراف).

يمكن للتطبيق معالجة التداخلات في المحتوى من خلال التفاعل مع المجموعات. تصف الإدخالات مقدار المحتوى الذي تريد أن تتم إضافته إلى تطبيقك لتجنّب التداخل مع من واجهة مستخدم نظام التشغيل Android مثل شريط التنقل أو شريط الحالة، أو التي تحتوي ميزات الجهاز الفعلية، مثل صور مقطوعة للشاشة.

ضع في اعتبارك الأنواع التالية من الأجزاء الداخلية عند التصميم للاستخدام الشامل الحالات:

  • تنطبق العناصر الداخلية لأشرطة النظام على واجهة المستخدم القابلة للنقر والتي يجب ألا تكون تحجبها أشرطة النظام بصريًا.
  • تنطبق وحدات إيماءة النظام على مناطق التنقّل بالإيماءات التي يستخدمها النظام. التي لها الأولوية على تطبيقك.

شريط الحالة

في نظام التشغيل Android، يحتوي شريط الحالة على رموز الإشعارات ورموز النظام. تشير رسالة الأشكال البيانية يتفاعل المستخدم مع شريط الحالة من خلال سحبه لأسفل للوصول إلى الإشعار ظل.

الشكل 3: يتم تمييز منطقة شريط الحالة أعلى شريط التطبيق العلوي

قد يظهر شريط الحالة بشكل مختلف حسب السياق والوقت الإعدادات المفضّلة أو المظاهر التي يحدّدها المستخدمون والمَعلمات الأخرى يمكنك أيضًا تعيين نمط شريط الحالة، كما في الأمثلة التالية.

الشكل 4: شريط الحالة في المظهر الفاتح والداكن

يُرجى التأكد من أن محتوى تطبيقك يمتد إلى الشاشة بأكملها بعد أن تم عرضها بشكل شامل. مطلوبة. استخدم أشرطة النظام الشفافة التي تعرض محتوى من الحافة إلى الحافة، كما هو موضح في قسم المثال التالي.

الشكل 5: الأشرطة الشفافة التي تستخدم ميزة شاملة، وهي مثالية لتقديم محتوى رائع باستخدام أكبر مساحة ممكنة على الشاشة.


الشكل 6: تصميم أشرطة النظام لتحسين المحتوى أو مطابقة محتوى التطبيق الهوية البصرية للعلامة التجارية. ولا تترك أشرطة النظام مضبوطة على السمات التلقائية.

عندما يصل إشعار، يظهر رمز عادةً في شريط الحالة. هذا النمط المستخدم إلى أن هناك شيئًا يراه في درج الإشعارات. يمكن أن يكون رمز التطبيق أو هذا الرمز لتمثيل القناة. عرض تصميم الإشعارات:

الشكل 7: رمز الإشعار في شريط الحالة

ضبط نمط شريط الحالة

اختيار تصميم لخلفية شريط الحالة كجزء من مظهر التطبيق، باستخدام لون مخصّص أو النمط، إلى جانب تعيين الشفافية والتعتيم.

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

إذا كنت تضبط لون الخلفية يدويًا، يمكنك اختياريًا تحديد حالة النمط باللون الفاتح أو الداكن للحصول على التباين الأمثل.

القواطع المعروضة وشريط الحالة

الصورة المقطوعة للشاشة هي منطقة على بعض الأجهزة تمتد إلى الشاشة السطح لتوفير مساحة لأجهزة الاستشعار الأمامية. يمكن أن تؤثر على مظهر من أشرطة الحالة. يمكن أن تختلف الصور المقطوعة للشاشة حسب الشركة المصنّعة.

تعرَّف على كيفية إتاحة الصور المقطوعة للشاشة.

الشكل 8: أمثلة على الصور المقطوعة للشاشة

يتيح Android للمستخدمين التحكّم في التنقّل باستخدام عناصر التحكّم في الرجوع والصفحة الرئيسية والنظرة العامة:

  • يعود زر الرجوع مباشرةً إلى العرض السابق.
  • يؤدي النقر على "الصفحة الرئيسية" إلى الانتقال من التطبيق إلى الشاشة الرئيسية للجهاز.
  • تعرض علامة التبويب "نظرة عامة" التطبيقات المفتوحة وفتحها مؤخرًا.

يمكن للمستخدمين الاختيار من بين العديد من إعدادات شريط التنقّل، بما في ذلك الإيماءات. التنقل (موصى به) والتنقل بثلاثة أزرار.

التنقل بالإيماءات

تم طرح هذه الميزة في نظام التشغيل Android 10 (المستوى 29 من واجهة برمجة التطبيقات)، ويُنصح باستخدام ميزة التنقّل بالإيماءات. ونوع التنقل، على الرغم من أنه لا يمكنك تجاوز تفضيل المستخدم. الإيماءة لا يستخدم التنقل أزرار الرجوع والصفحة الرئيسية والنظرة العامة، بل يعرض مقبض إيماءة واحدة للوظائف. يتفاعل المستخدمون من خلال التمرير السريع من اليمين أو الحافة اليمنى للشاشة للرجوع للأمام وللأمام وللأعلى من أسفل للانتقال الْمَنْزِلْ. يؤدي التمرير السريع للأعلى مع الاستمرار إلى فتح النظرة العامة.

التنقل بالإيماءات هو نمط تنقل أكثر قابلية للتطور للتصميم عبر للهاتف المحمول وشاشات أكبر. لتقديم أفضل تجربة للمستخدم، ضع في الاعتبار التنقّل بالإيماءات حسب:

  • إتاحة المحتوى الشامل.
  • تجنَّب إضافة تفاعلات أو مساحات لمس ضمن الإعدادات الداخلية للتنقّل بالإيماءات.

يُرجى الاطّلاع على تنفيذ ميزة التنقّل بالإيماءات.

الشكل 9: شريط التنقّل بمقبض الإيماءات

التنقُّل باستخدام ثلاثة أزرار

يوفّر التنقُّل باستخدام ثلاثة أزرار ثلاثة أزرار لكلٍّ من الرجوع والشاشة الرئيسية والنظرة العامة.

الشكل 10: شريط تنقّل يتضمّن ثلاثة أزرار

الأشكال الأخرى لشريط التنقّل

استنادًا إلى إصدار Android والجهاز، قد تتضمن إعدادات شريط التنقّل الأخرى إتاحتها للمستخدمين. على سبيل المثال، يوفر التنقل باستخدام زرين اثنين زري "الصفحة الرئيسية" و"رجوع"

الشكل 11: شريط تنقُّل بزرَين

ضبط نمط للتنقل

يوضح المثال التالي كيفية تنفيذ نمط للتنقل.

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

يعالج Android كل إجراءات الحماية المرئية لواجهة المستخدم من خلال الإيماءات. وضع التنقل أو في أوضاع الأزرار.

  • وضع التنقل بالإيماءات: يطبق النظام على التكيف الديناميكي للألوان، في يتغير لون محتويات أشرطة النظام بناءً على المحتوى وراءها. في المثال التالي، يشير المقبض في شريط التنقل يتغير إلى اللون الداكن في حال وضعه فوق المحتوى الفاتح، والعكس صحيح.

    الشكل 12: التكيّف الديناميكي للألوان
  • أوضاع الأزرار: يطبِّق النظام حافة شبه شفافة خلف النظام. أشرطة (لمستوى واجهة برمجة التطبيقات 29 أو أعلى) أو شريط نظام شفاف (لمستوى واجهة برمجة التطبيقات) 28 أو أقل).

    الشكل 13: التكيّف الديناميكي للألوان، حيث تظهر أشرطة النظام تغيير اللون بناءً على المحتوى وراءها

لوحة المفاتيح والتنقل

الشكل 14: لوحة مفاتيح على الشاشة مع أشرطة تنقل

يتفاعل كل نوع تنقُّل بشكل مناسب مع لوحة المفاتيح على الشاشة تسمح للمستخدم بتنفيذ إجراءات مثل رفض الإعلان أو تغييره نوع لوحة المفاتيح. لضمان انتقال سلس للوحة المفاتيح، لضمان انتقال سلس للوحة المفاتيح انتقال يتزامن انتقال التطبيق مع تمرير لوحة المفاتيح لأعلى ولأسفل من أسفل الشاشة، استخدم WindowInsetsAnimationCompat

وضع مجسم

الشكل 15: الوضع المجسم يعرض تجربة بملء الشاشة على جهاز جوّال باتجاه أفقي

يمكنك إخفاء أشرطة النظام عند الحاجة إلى تجربة وضع ملء الشاشة، على سبيل المثال. عندما يشاهد المستخدم فيلمًا. من المفترض أن يظل المستخدم قادرًا على النقر إظهار أشرطة النظام وواجهة المستخدم للتنقل بين عناصر تحكم النظام أو التفاعل معها. يمكنك الاطّلاع على مزيد من المعلومات حول التصميم لاستخدام أوضاع ملء الشاشة أو قراءة كيفية إخفاء أشرطة النظام لتفعيل الوضع المجسم.