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

<img <="" character="" src="/static/images/design/ui/mobile/system-bars-hero.png" />

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

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

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

الخلاصات

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

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

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

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

    الشكل 3: إدراج الإيماءات في النظام. تجنَّب وضع أهداف النقر تحت هذه المناطق.

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

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

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

كن على دراية بالأنواع التالية من العناصر الداخلية عند التصميم لحالات الاستخدام الشاملة:

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

شريط الحالة

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

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

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

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


الشكل 6: الأشرطة التلقائية (باللون الأسود)


الشكل 7: أشرطة ملوّنة


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


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

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

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

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

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

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

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

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

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

تعرَّف على طريقة إتاحة استخدام خطوط الشاشة.

الشكل 11: أمثلة على خطوط عرض

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

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

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

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

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

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

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

تعرَّف على المزيد من المعلومات عن تنفيذ التنقّل بالإيماءات.

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

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

يوفر التنقل باستخدام ثلاثة أزرار ثلاثة أزرار للرجوع والصفحة الرئيسية والنظرة العامة.

الشكل 13: شريط تنقّل مزوّد بثلاثة أزرار

الأشكال المختلفة الأخرى لشريط التنقل

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

الشكل 14: شريط تنقّل يتضمّن زرّين

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

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

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

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

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

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

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

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

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

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

الوضع المجسَّم

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

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