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

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

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

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

الخلاصات

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

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

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

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

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

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

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

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

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

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

شريط الحالة

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

الشكل 9: أمثلة على الخطوط المقطوعة للشاشة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

وضع مجسم

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

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