تُعد أدراج التنقل مكونات أساسية في أي تطبيق تلفزيون لأنها تسمح للمستخدمين بالوصول إلى وجهات وميزات مختلفة. يعد درج التنقل العمود الفقري لبنية معلومات التطبيق، حيث يوفر طريقة واضحة وبديهية للتنقل عبر التطبيق.
على عكس لائحة التنقل على الأجهزة الجوّالة، يحتوي درج التنقل على التلفزيون على كل من الحالات الموسَّعة والمصغَّرة المرئية للمستخدم.
المراجع
Type | رابط | الحالة |
---|---|---|
التصميم | مصدر التصميم (Figma) | متوفرة |
التنفيذ |
Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer) |
متوفرة |
أهمّ الميزات
- يتم ترتيب الوجهات حسب أهمية المستخدم، مع تجميع الوجهات المتكررة أولاً والوجهات ذات الصلة معًا.
- يجب استخدام سكة حديدية لكل من أدراج التنقل العادية والنمطية عند تصغيرها.
الصيغ
هناك نوعان من أنماط لائحة التنقل:
- درج التنقل العادي - يتم توسيع هذا الدرج لإنشاء مساحة إضافية للتنقل، ودفع محتوى الصفحة جانبًا.
- درج التنقل النموذجي - يظهر كتراكب في أعلى محتوى التطبيق مزوّد بحاجز يساعد في تحسين سهولة القراءة عند توسيع الدرج.
لائحة التنقّل العادية
علم التشريح
- القسم العلوي: يعرض شعار التطبيق. يعمل كزر لتبديل الملفات الشخصية أو لتشغيل إجراء البحث. في الحالة المصغّرة، يظل الرمز فقط مرئيًا في الحاوية العلوية.
- عنصر التنقل: يتميز كل عنصر في شريط التنقل بمزيج من الرمز والنص، مع إمكانية رؤية الرمز فقط في الحالة المصغّرة.
- شريط التنقل: عمود "التنقل" هو عمود يعرض من 3 إلى 7 وجهات للتطبيق، وهو القائمة الرئيسية. تتضمّن كل وجهة تصنيفًا نصيًا ورمزًا اختياريًا، مع إمكانية تجميع عناصر القائمة من أجل تقديم سياق أفضل.
- القسم السفلي: يمكن أن يحتوي على زر إجراء واحد إلى ثلاثة أزرار، وهي مثالية للصفحات مثل الإعدادات أو المساعدة أو الملف الشخصي.
السُلوك
- توسيع لائحة التنقل: عند توسيع درج التنقل، يدفع محتوى الصفحة إلى توفير مساحة للإصدار الموسّع للتنقل.
- تحديثات التنقل: عند الانتقال من عنصر تنقل إلى آخر، يتم تحديث الصفحة تلقائيًا إلى الوجهة الجديدة.
لائحة التنقّل الشرطية
علم التشريح
- القسم العلوي: يعرض شعار التطبيق. يعمل كزر لتبديل الملفات الشخصية أو لتشغيل إجراء بحث. في الحالة المصغّرة، يظلّ الرمز فقط مرئيًا في الحاوية العلوية.
- عنصر التنقل: يعرض كل عنصر في شريط التنقل مزيجًا من رمز ونص، مع ظهور الرمز فقط في الحالة المصغّرة.
- مسار التنقل: عمود يعرض ثلاث إلى سبع وجهات للتطبيق، ليكون القائمة الرئيسية. وتحتوي كل وجهة على تصنيف نصي ورمز اختياري، مع خيار تجميع عناصر القائمة من أجل توفير سياق أفضل.
- Scrim: لقراءة نص عنصر التنقّل بشكل أفضل.
- القسم السفلي: يمكن أن يحتوي على زر إجراء واحد إلى ثلاثة أزرار، وهي مثالية للصفحات مثل الإعدادات أو المساعدة أو الملف الشخصي.
السُلوك
- توسيع الدرج: يظهر كتراكب على أعلى محتوى التطبيق، مع شاشة تعمل على تحسين سهولة القراءة عند توسيع الدرج.
- تحديثات التنقل: تحدث عندما يحدد المستخدم أحد عناصر التنقل.
تمويه
بالنسبة إلى لائحة التنقّل المشروطة، تضمن لك مشبك خلف الدرج أن يكون محتوى الدرج قابلاً للقراءة. يمكنك استخدام سطح متدرج أو صلب خلف لائحة التنقل لإنشاء أشكال مختلفة من واجهة المستخدم.
![درج التنقل العادي](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/gradient-scrim.webp?authuser=5&hl=ar)
حاجب متدرج
![درج التنقّل المشروط](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/solid-scrim.webp?authuser=5&hl=ar)
حاجب صلب
المواصفات
الاستخدام
المؤشر النشط
المؤشر النشط هو إشارة مرئية تبرز وجهة لائحة التنقل المعروضة. يتم تمثيل المؤشر عادةً بشكل خلفية يختلف بصريًا عن العناصر الأخرى في الدرج. يساعد مؤشر النشاط المستخدمين على معرفة مكان وجودهم في التطبيق والوجهة التي يتصفّحونها. يُرجى التأكّد من أنّ المؤشر النشط مرئي بوضوح ويسهل تمييزه عن العناصر الأخرى في لائحة التنقّل.
![مؤشر نشط](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/modal-drawer-selected.webp?authuser=5&hl=ar)
الفواصل (اختياري)
يمكن استخدام الفواصل لفصل مجموعات من الوجهات داخل لائحة التنقل لتنظيمها بشكل أفضل. ومع ذلك، من المهم استخدامها باعتدال لأن الكثير جدًا من الفواصل يمكن أن يخلق ضوضاء مرئية ويضيف عبئًا معرفيًا غير ضروري للمستخدمين.
![مؤشر نشط](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/dividers.webp?authuser=5&hl=ar)
الشارات
الشارات هي إشارات مرئية يمكن إضافتها إلى عناصر التنقل لتوفير معلومات إضافية. على سبيل المثال، يمكن استخدام شارة للإشارة إلى عدد الأفلام الجديدة المتوفرة في تطبيق بثّ. ويمكنك استخدام الشارات باعتدال وعند الضرورة فقط، لأنّها قد تجعل واجهة المستخدم تبدو مزدحمة ومزدحمة. عند استخدام الشارات، تأكَّد من أنّها واضحة وسهلة الفهم وأنّها لا تتداخل مع قدرة المستخدم على التنقّل في التطبيق.
![تم توسيع الشارة.](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/badge-expand.webp?authuser=5&hl=ar)
تم توسيع الشارة.
![تم تصغير الشارة.](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/badge-collapse.webp?authuser=5&hl=ar)
تم تصغير الشارة.
Labels (التصنيفات)
يجب أن تكون التسميات الموجودة في درج التنقل واضحة وموجزة بحيث تسهل قراءتها.
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/labels-do.webp?authuser=5&hl=ar)
تنبيه
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/label-dont.webp?authuser=5&hl=ar)
الإجراءات غير المُوصى بها
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/no-icons.webp?authuser=5&hl=ar)
الإجراءات غير المُوصى بها
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/no-mixing-icons.webp?authuser=5&hl=ar)
الإجراءات غير المُوصى بها
تُعد أدراج التنقل عناصر أساسية تمثل التسلسل الهرمي لتطبيقك ويجب استخدامها لسرد من خمس إلى ست وجهات تنقل أساسية فقط.
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/navigation-count-do.webp?authuser=5&hl=ar)
الإجراءات التي يُنصح بها
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/navigation-drawer/navigation-count-dont.webp?authuser=5&hl=ar)