لائحة التنقل

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

على عكس لائحة التنقل على الأجهزة الجوّالة، يحتوي درج التنقل على التلفزيون على كل من الحالات الموسَّعة والمصغَّرة المرئية للمستخدم.

دُرج التنقل في الغطاء

المراجع

Type رابط الحالة
التصميم مصدر التصميم (Figma) متوفرة
التنفيذ Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer)
متوفرة

أهمّ الميزات

  • يتم ترتيب الوجهات حسب أهمية المستخدم، مع تجميع الوجهات المتكررة أولاً والوجهات ذات الصلة معًا.
  • يجب استخدام سكة حديدية لكل من أدراج التنقل العادية والنمطية عند تصغيرها.

الصيغ

هناك نوعان من أنماط لائحة التنقل:

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

درج التنقل العادي

درج التنقّل المشروط

لائحة التنقّل العادية

علم التشريح

بنية درج التنقل العادي

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

السُلوك

  • توسيع لائحة التنقل: عند توسيع درج التنقل، يدفع محتوى الصفحة إلى توفير مساحة للإصدار الموسّع للتنقل.
  • تحديثات التنقل: عند الانتقال من عنصر تنقل إلى آخر، يتم تحديث الصفحة تلقائيًا إلى الوجهة الجديدة.

بنية درج التنقل المشروط

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

تمويه

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

درج التنقل العادي

حاجب متدرج

درج التنقّل المشروط

حاجب صلب

المواصفات

عرض المواصفات

المساحة المتروكة للمواصفات

مواصفات عناصر التنقّل

الاستخدام

المؤشر النشط

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

مؤشر نشط

الفواصل (اختياري)

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

مؤشر نشط

الشارات

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

تم توسيع الشارة.

تم توسيع الشارة.

تم تصغير الشارة.

تم تصغير الشارة.

Labels (التصنيفات)

يجب أن تكون التسميات الموجودة في درج التنقل واضحة وموجزة بحيث تسهل قراءتها.

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

تُعد أدراج التنقل عناصر أساسية تمثل التسلسل الهرمي لتطبيقك ويجب استخدامها لسرد من خمس إلى ست وجهات تنقل أساسية فقط.

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