لائحة التنقل

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

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

تغطية لائحة التنقّل

المراجع

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

أهم التفاصيل

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

المتغيرات

هناك نوعان من أنماط أدراج التنقّل:

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

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

لائحة التنقّل في وضع النافذة المنبثقة

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

علم التشريح

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

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

السُلوك

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

بنية لائحة التنقّل المشروطة

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

تمويه

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

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

حاجب متدرّج

لائحة التنقّل في وضع النافذة المنبثقة

حاجب صلب

المواصفات

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

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

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

الاستخدام

مؤشر النشاط

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

مؤشر نشط

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

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

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

الشارات

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

الشارة الموسّعة

الشارة الموسّعة

الشارة مصغّرة

الشارة مصغّرة

التصنيفات

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

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

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

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