חלונית הזזה לניווט
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
תיבות הניווט הן רכיבים חיוניים בכל אפליקציה לטלוויזיה, כי הן מאפשרות למשתמשים לגשת ליעדים ולתכונות שונים. תפריט הניווט הוא עמוד השדרה של ארכיטקטורת המידע של האפליקציה, והוא מספק דרך ברורה ואינטואיטיבית לנווט באפליקציה.
בניגוד למגירה הניווט בנייד, במגירה הניווט בטלוויזיה יש מצבים מורחבים ומוקטנים שגלויים למשתמש.
משאבים
המיטב
- היעדים ממוינים לפי מידת החשיבות שלהם למשתמשים, כאשר היעדים הנפוצים מופיעים קודם ויעדים קשורים מקובצים יחד.
- כשמסנני הניווט מצומצמים, צריך להשתמש בסרגל הניווט גם בחלוניות הניווט הרגילות וגם בחלוניות הניווט המודאליות.
וריאנטים
יש שני סגנונות של תיבות ניווט:
- חלונית ניווט רגילה – היא מתרחבת כדי ליצור מקום נוסף לניווט, ומזיזה את תוכן הדף הצידה.
- חלונית ניווט מודאלית – מוצגת כשכבת-על מעל התוכן של האפליקציה, עם שכבת-מסך שמסייעת לשפר את הקריאוּת כשהחלונית מורחבת.
חלונית ההזזה לניווט הרגילה
אנטומיה
- החלק העליון: הלוגו של האפליקציה. משמש כלחצן להחלפת פרופילים או להפעלת פעולת חיפוש. במצב מכווץ, רק הסמל נשאר גלוי במכל העליון.
- פריט ניווט: כל פריט בסרגל הניווט כולל שילוב של סמל וטקסט, כאשר רק הסמל גלוי במצב מכווץ.
- סרגל הניווט: סרגל הניווט הוא עמודה שמציגה 3 עד 7 יעדי אפליקציות, והוא משמש בתור התפריט הראשי. לכל יעד יש תווית טקסט וסמל אופציונלי, ואפשר לקבץ את הפריטים בתפריט כדי לשפר את ההקשר.
- הקטע התחתון: יכול לכלול בין אחד לשלושה לחצני פעולה, שמתאימים לדפים כמו הגדרות, עזרה או פרופיל.
התנהגות
- הרחבה של חלונית הניווט: כשהיא מורחבת, חלונית הניווט הרגילה דוחפת את תוכן הדף כדי לפנות מקום לגרסה המורחבת של הניווט.
- עדכוני ניווט: כשעוברים מפריט ניווט אחד לפריט אחר, הדף מתעדכן באופן אוטומטי ליעד החדש.
חלונית הזזה מודלית לניווט
אנטומיה
- החלק העליון: הלוגו של האפליקציה. משמש כלחצן להחלפת פרופילים או להפעלת פעולת חיפוש. במצב מכווץ, רק הסמל יישאר גלוי במאגר העליון.
- פריט ניווט: כל פריט בסרגל הניווט כולל שילוב של סמל וטקסט, כאשר רק הסמל גלוי במצב מכווץ.
- פס הניווט: עמודה שמציגה שלושה עד שבעה יעדים של אפליקציות, ומתפקדת בתור התפריט הראשי. לכל יעד יש תווית טקסט וסמל אופציונלי, ואפשר לקבץ את הפריטים בתפריט כדי לשפר את ההקשר.
- Scrim: לשיפור הקריאות של הטקסט של פריטי הניווט.
- הקטע התחתון: יכול לכלול בין אחד לשלושה לחצני פעולה, שמתאימים לדפים כמו הגדרות, עזרה או פרופיל.
התנהגות
- הרחבת התפריט: מופיע כשכבת-על מעל התוכן של האפליקציה, עם שכבת-על שקופה שמשפרת את הקריאוּת כשהתפריט מורחב.
- עדכוני ניווט: מתרחשים כשהמשתמש בוחר פריט ניווט.
מיסוך
בחלונית הניווט המוצגת בחלון עזר, שכבת 'מסך מעבר' מאחורי התיבה מבטיחה שתוכלו לקרוא את התוכן שבה. אפשר להשתמש בצבעים כהים או בהדרגה מאחורי חלונית הניווט כדי ליצור וריאציות שונות של ממשק המשתמש.
מיסוך בגוון מדורג
מיסוך מלא
המפרט
שימוש
אינדיקטור פעיל
האינדיקטור הפעיל הוא סימן חזותי שמדגיש את היעד שמוצג בחלונית הניווט. בדרך כלל, האינדיקטור מיוצג על ידי צורה ברקע ששונה מבחינה ויזואלית מהפריטים האחרים בחלונית.
האינדיקטור הפעיל עוזר למשתמשים להבין איפה הם נמצאים באפליקציה ואת היעד שבו הם צופים. חשוב לוודא שהסמל של המצב הפעיל גלוי בבירור וקל יותר להבדיל אותו מהפריטים האחרים בחלונית הניווט.
מחוגות וקליפרים (אופציונלי)
אפשר להשתמש בקווים מפרידים כדי להפריד בין קבוצות של יעדים בחלונית הניווט, וכך לארגן אותם טוב יותר. עם זאת, חשוב להשתמש בהם במשורה, כי יותר מדי מחיצות עלולות ליצור רעש חזותי ולהעמיס על המשתמשים מבחינה קוגניטיבית.
תגים
תגים הם סימנים חזותיים שאפשר להוסיף לפריטי הניווט כדי לספק מידע נוסף. לדוגמה, אפשר להשתמש בתג כדי לציין את מספר הסרטים החדשים שזמינים באפליקציית סטרימינג. מומלץ להשתמש בתגים במשורה ורק כשצריך, כי הם עלולים להפוך את ממשק המשתמש לעמוס ומבולגן. כשמשתמשים בתגים, חשוב לוודא שהם ברורים וקלים להבנה, ושהם לא מפריעים למשתמש לנווט באפליקציה.
תג מורחב
התג כוּוץ
תוויות
התוויות במגירה הניווט צריכות להיות ברורות ותמציתיות כדי שיהיה קל יותר לקרוא אותן.
warning
זהירות
אם אי אפשר להימנע משימוש בתוויות ארוכות, אפשר לקצר את התווית באמצעות נקודה-שלוש-נקודות.
cancel
מה אסור לעשות
להימנע משימוש בתוויות טקסט ארוכות שדורשות גלישת טקסט.
cancel
מה אסור לעשות
מומלץ לא ליצור תפריט ניווט בלי סמלים, כי זה עלול להקשות על המשתמשים לנווט באפליקציה.
cancel
מה אסור לעשות
מומלץ להימנע מהשילוב של פריטים עם סמלים לניווט עם פריטים לניווט ללא סמלים, כי זה עלול לבלבל את המשתמשים בתהליך הניווט.
תיבות הניווט הן רכיבים בסיסיים שמייצגים את היררכיית האפליקציה, וצריך להשתמש בהן כדי לרשום רק חמישה עד שישה יעדים ראשיים לניווט.
check_circle
מה צריך לעשות
כדי לשפר את חוויית המשתמש, כדאי להגביל את מספר יעדי הניווט הראשיים בחלונית הניווט לחמישה עד שישה.
cancel
מה אסור לעשות
מומלץ להימנע מהוספה של יותר מדי פריטים לניווט, כי זה עלול לגרום לגלילה אנכית ולהקשות על המשתמשים לנווט באפליקציה.
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-27 (שעון UTC).
[null,null,["עדכון אחרון: 2025-07-27 (שעון UTC)."],[],[],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."]]
