تصميم بلا حدود

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

الشكل 1. نحو اليسار تطبيق لا يشغل الشاشة بالكامل نحو اليمين تطبيق معروض على الشاشة بالكامل

الخلاصات

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

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

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

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

انتبه إلى الأنواع التالية من الأجزاء المُدمَجة عند تصميم حالات الاستخدام التي تمتد من الحافة إلى الحافة:

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

اعتبارات شريط الحالة

اطّلِع على أشرطة نظام Android للحصول على إرشادات أساسية حول تصميم أشرطة النظام. يناقش القسم التالي اعتبارات إضافية حول شريط الحالة.

المحتوى الذي يمكن التمرير فيه

يجب تصغير أشرطة التطبيقات العلوية أثناء التمرير. تعرَّف على كيفية تصغير شريط التطبيقات العلوي في Material 3.

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

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

الشكل 3. تطبيق يتضمّن إيماءات مضمّنة مميّزة باللون الأخضر

بالنسبة إلى التنسيقات التكيُّفية، تأكَّد من توفُّر وسائل حماية منفصلة للوحات التي تحتوي على ألوان خلفية مختلفة.

أن تتضمّن حماية متدرجة لا تتطابق مع خلفية كل مربّع
أن تتضمّن حماية متدرجة تتطابق مع خلفية كل مربّع

وبالمثل، يجب أن تتمتع أدراج التنقّل أيضًا بحماية منفصلة عن باقي أجزاء التطبيق.

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

لا تضع عدة عناصر حماية على شريط الحالة، على سبيل المثال، باستخدام كلّ من الحماية المضمّنة في Material 3 TopAppBar والحماية المخصّصة.

اطّلِع على أشرطة نظام Android للحصول على إرشادات أساسية حول تصميم شريط التنقّل. يتضمّن القسم التالي اعتبارات إضافية حول شريط التنقّل.

المحتوى القابل للتمرير

يجب تصغير أشرطة التطبيقات في أسفل الشاشة أثناء الانتقال للأعلى أو للأسفل.

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

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

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

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

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

الشكل 5. يتم رسم خلفيات شريط التطبيقات الصلبة في مساحة الشاشة المخصّصة للكاميرا، بينما يتم إدراج واجهة المستخدم المهمة.

تأكَّد من أنّ الرفوف الدوّارة الأفقية تظهر في مساحة الشاشة المخصّصة للعرض.

الشكل 6. شاشة أفقية من الحافة إلى الحافة، حيث يتم الانتقال في لوحة العرض الدوّارة من خلال فتحة الشاشة

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

إرشادات أخرى

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