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

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

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

الشكل 1. الصور التي تظهر خلف أشرطة النظام

الخلاصات

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

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

شريط الحالة

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

الشكل 2. تم تمييز منطقة شريط الحالة أعلاه شريط التطبيق العلوي.

رموز شريط الحالة

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

الشكل 3. رموز شريط الحالة في المظهرَين الفاتح والداكن

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

الشكل 4. رمز الإشعار في شريط الحالة

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

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

يتم فرض ميزة "العرض حتى حافة الشاشة" على Android 15، ما يجعل شريط الحالة شفافًا بشكل تلقائي. استدعِ الدالة enableEdgeToEdge() للتوافق مع الأنظمة القديمة.

في الصورة التالية على اليمين، شريط الحالة شفاف، ويظهر لون الخلفية الأخضر الخاص بـ TopAppBar خلف شريط الحالة.

الشكل 5. استخدِم وضع ملء الشاشة لتحسين المحتوى. لا تتضمّن أشرطة نظام غير شفافة.

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

الشكل 6. تطبيق من الحافة إلى الحافة مع حماية متدرّجة بلونين تمتد على لوحتين خلف شريط حالة النظام

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

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

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

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

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

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

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

لمزيد من المعلومات، يُرجى الاطّلاع على إضافة إمكانية استخدام ميزة "التنقّل بالإيماءات".

الشكل 7. شريط التنقّل بمؤشر الإيماءات

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

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

الشكل 8. شريط التنقّل باستخدام ثلاثة أزرار

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

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

الشكل 9. شريط التنقّل باستخدام زرَّين

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

ضبط نمط شريط التنقّل

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

وضع التنقّل بالإيماءات

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

الشكل 10. تكيُّف الألوان الديناميكية

ننصح دائمًا باستخدام أشرطة التنقّل الشفافة المستندة إلى الإيماءات.

إبقاء شريط التنقّل بالإيماءات شفافًا
إضافة خلفية إلى شريط التنقّل بالإيماءات

أوضاع الزر

بعد استهداف الإصدار 15 من نظام التشغيل Android أو استدعاء enableEdgeToEdge في Activity، يطبّق النظام طبقة شبه شفافة خلف أشرطة التنقّل التي تتضمّن أزرارًا، ويمكنك إزالتها من خلال ضبط Window.setNavigationBarContrastEnforced() على "خطأ".

الشكل 11. تكيُّف الألوان الديناميكي مع طبقة شفافة

ننصح باستخدام أشرطة تنقّل شفافة بثلاثة أزرار عند توفّر شريط تطبيق سفلي أو شريط تنقّل سفلي في التطبيق، أو عندما لا تتوفّر إمكانية التمرير في واجهة المستخدم أسفل شريط التنقّل بثلاثة أزرار. للحصول على شريط تنقّل شفاف، اضبط Window.setNavigationBarContrastEnforced() على false واملأ أشرطة التطبيق السفلية للرسم تحت أشرطة التنقّل في النظام، كما هو موضّح في الأشكال 7 و8 و9. يمكنك الاطّلاع على مقالة حماية شريط النظام لمزيد من المعلومات.

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

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

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

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

الأجزاء المقطوعة من الشاشة

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

الشكل 13. أمثلة على الفتحات على الشاشة

الوضع المجسم

الشكل 14. وضع العرض الغامر الذي يعرض تجربة ملء الشاشة على جهاز جوّال في الوضع الأفقي

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