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

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

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

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

الخلاصات

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

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

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

  • استخدِم التصاميم الأساسية التي تستفيد من مساحة الشاشة بكفاءة.

شريط الحالة

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

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

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

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

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

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

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

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

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

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

في الصورة التالية على اليمين، يكون شريط الحالة شفافًا ويتم عرض الخلفية الخضراء لـ TopAppBar خلف شريط الحالة.

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

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

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

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

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

يمكن للمستخدمين الاختيار من بين إعدادات التنقّل المختلفة، بما في ذلك التنقّل بالإيماءات والتنقّل التكيُّفي. لتقديم تجربة مستخدم مثالية، ضع في اعتبارك أنواعًا متعددة من التنقل.

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

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

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

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

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

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

التنقّل التكيُّفي

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

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

لمزيد من المعلومات، يُرجى الاطّلاع على إنشاء تنقّل تكيُّفي.

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

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

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

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

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

الشكل 8 تكيُّف الألوان الديناميكي

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

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

أوضاع الأزرار

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

الشكل 9: تتكيّف الألوان ديناميكيًا مع تراكب شفاف.

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

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

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

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

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

التنسيقات

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

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

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

لمزيد من المعلومات، يُرجى الاطّلاع على التصاميم الأساسية.

الصور المقطوعة للشاشة

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

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

الوضع المجسم

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

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