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

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


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

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

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

حاجب متدرّج

حاجب صلب
المواصفات



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

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

الشارة مصغّرة
التصنيفات
يجب أن تكون التصنيفات في مربّع التنقّل واضحة وموجزة لكي
يسهل قراءتها.
warning
تنبيه
إذا كان من المستحيل تجنُّب استخدام تصنيفات طويلة، يمكنك اقتطاع التصنيف باستخدام علامة شرطة منقطة.
cancel
الإجراءات غير المُوصى بها
تجنَّب استخدام تصنيفات نصية طويلة تتطلّب التفاف النص.
cancel
الإجراءات غير المُوصى بها
تجنَّب إنشاء درج تنقّل بدون رموز، لأنّ ذلك قد يجعل من الصعب على المستخدمين التنقّل في التطبيق.
cancel
الإجراءات غير المُوصى بها
تجنَّب خلط عناصر التنقّل باستخدام الرموز بعناصر التنقّل غير المستندة إلى الرموز، لأنّ ذلك قد يؤدي إلى إرباك تجربة التنقّل للمستخدمين.
أدراج التنقّل هي عناصر أساسية تمثّل التسلسل الهرمي لتطبيقك، ويجب استخدامها لعرض خمسة إلى ستة وجهات تنقّل أساسية فقط.
check_circle
الإجراءات التي يُنصح بها
لكي تقدّم تجربة أفضل للمستخدم، حدِّد عدد وجهات التنقّل الرئيسية في مربّع التنقّل من خمسة إلى ستة.
cancel
الإجراءات غير المُوصى بها
تجنَّب إضافة عناصر تنقّل كثيرة جدًا، لأنّ ذلك قد يؤدي إلى إنشاء شريط تمرير عمودي ويصعّب على المستخدمين التنقّل في التطبيق.
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-07-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Navigation drawers are essential components in any TV app as they allow users\nto access different destinations and features. A navigation drawer is the\nbackbone of the app's information architecture, providing a clear and intuitive\nway to navigate through the app.\n\nIn contrast to the mobile navigation drawer, the navigation drawer on\nTV has both expanded and collapsed states visible to the user.\n\nResources\n---------\n\n| Type | Link | Status |\n|----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------|\n| Design | [Design source (Figma)](https://goo.gle/tv-desing-kit) | Available |\n| Implementation | [Jetpack Compose (NavigationDrawer)](/reference/kotlin/androidx/tv/material3/package-summary#NavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,kotlin.Function0)) [Jetpack Compose (ModalNavigationDrawer)](/reference/kotlin/androidx/tv/material3/package-summary#ModalNavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,androidx.compose.ui.graphics.Brush,kotlin.Function0)) | Available |\n\nHighlights\n----------\n\n- Destinations are ordered according to user importance, with frequent destinations first and related destinations grouped together.\n- A navigation rail is required for both standard and modal navigation drawers when collapsed.\n\nVariants\n--------\n\nThere are two type of navigation drawer styles:\n\n1. **Standard navigation drawer** --- Expands to create additional space for navigation, pushing the page content aside.\n2. **Modal navigation drawer** --- Appears as an overlay on top of the app's content with a scrim that helps to improve readability when the drawer is expanded.\n\nStandard navigation drawer\n--------------------------\n\n### Anatomy\n\n1. **Top section:** Features the app logo. Serves as a button to switch profiles or to trigger search action. In the collapsed state, only the icon remains visible in the top container.\n2. **Navigation item:** Each item in the navigation rail features a combination of an icon and text, with only the icon visible in the collapsed state.\n3. **Navigation rail:** The Navigation Rail is a column that shows 3 to 7 app destinations, acting as the main menu. Each destination has a text label and an optional icon, with the option of grouping menu items for better contextuality.\n4. **Bottom section:** Can have one to three action buttons, which are ideal for pages like settings, help, or profile.\n\n### Behavior\n\n- **Navigation drawer expansion:** When expanded the standard navigation drawers pushes the page content making space for the expanded version for the navigation.\n- **Navigation updates:** Moving from one nav item to another, the page automatically updates to the new destination.\n\nModal navigation drawer\n-----------------------\n\n### Anatomy\n\n1. **Top section:** Features the app logo. Serves as a button to switch profiles or to trigger a search action. In the collapsed state, only the icon remains visible in the top container.\n2. **Navigation item:** Each item in the navigation rail features a combination of an icon and text, with only the icon visible in the collapsed state.\n3. **Navigation rail:** Column that shows three to seven app destinations, acting as the main menu. Each destination has a text label and an optional icon, with the option of grouping menu items for better contextuality.\n4. **Scrim:** For better readability of navigation item text.\n5. **Bottom section:** Can have one to three action buttons, which are ideal for pages like settings, help, or profile.\n\n### Behavior\n\n- **Drawer expansion:** Appears as an overlay on top of the app's content, with a scrim that improves readability when the drawer is expanded.\n- **Navigation updates:** Occur when the user selects a navigation item.\n\n### Scrim\n\nFor the modal navigation drawer, a scrim behind the\ndrawer ensures the drawer content is readable. You can\nuse a gradient or solid surface behind the navigation drawer to create different\nvariations of the UI.\n\n\nGradient scrim \n\nSolid scrim\n\n\u003cbr /\u003e\n\nSpec\n----\n\nUsage\n-----\n\n\n### Active Indicator\n\nThe active indicator is a visual cue that highlights the navigation drawer\ndestination that is displayed. The indicator is typically represented by a\nbackground shape that is visually distinct from the other items in the drawer.\nThe active indicator helps users understand where they are in the app and which\ndestination they are browsing. Ensure that the active indicator is clearly\nvisible and easier to distinguish from the other items in the navigation drawer. \n\n\u003cbr /\u003e\n\n\n### Dividers (optional)\n\nDividers can be used to separate groups of destinations within the navigation\ndrawer for better organization. However, it's important to use them sparingly as\ntoo many dividers can create visual noise and add unnecessary cognitive overload\nfor users. \n\n\u003cbr /\u003e\n\n### Badges\n\nBadges are visual cues that can be added to navigation items to provide\nadditional information. For example, a badge could be used to\nindicate the number of new movies available in a streaming app. Use\nbadges sparingly and only when necessary, as they can\nmake the UI appear busy and cluttered. When using badges, ensure that\nthey are clear and easier to understand and that they don't\ninterfere with the user's ability to navigate the app.\n\n\nBadge expanded \n\nBadge collapsed\n\n\u003cbr /\u003e\n\n### Labels\n\nLabels in the navigation drawer should be clear and concise so that they\nare easier to read. \nwarning\n\n### Caution\n\nIf it's impossible to avoid using long labels, truncate the label using an ellipsis. \ncancel\n\n### Don't\n\nAvoid using long text labels that require wrapping. \ncancel\n\n### Don't\n\nAvoid creating a navigation drawer without icons, as this can make it difficult for users to navigate the app. \ncancel\n\n### Don't\n\nAvoid mixing icon navigation items with non-icon navigation items, as this can make the navigation experience confusing for users.\n\nNavigation drawers are foundational elements that represent your app's\nhierarchy and should be used to list only five to six primary\nnavigation destinations. \ncheck_circle\n\n### Do\n\nLimit the number of main navigation destinations in the navigation drawer to five to six for a better user experience. \ncancel\n\n### Don't\n\nAvoid adding too many navigation items as this can create a vertical scroll and make it harder for users to navigate the app."]]