Panel nawigacji
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Menu nawigacyjne to kluczowe elementy każdej aplikacji na telewizory, ponieważ umożliwiają użytkownikom dostęp do różnych miejsc docelowych i funkcji. Szuflada nawigacyjna jest kręgosłupem architektury informacji aplikacji i zapewnia przejrzysty oraz intuicyjny sposób nawigacji po aplikacji.
W odróżnieniu od paska nawigacyjnego na urządzeniach mobilnych pasek nawigacyjny na telewizorze ma widoczne dla użytkownika stany rozszerzony i zwinięty.
Materiały
Najciekawsze
- Miejsca docelowe są uporządkowane według znaczenia dla użytkownika, przy czym na początku znajdują się najczęściej odwiedzane miejsca, a powiązane miejsca docelowe są grupowane razem.
- W przypadku standardowych i modalnych paneli nawigacyjnych szyna nawigacyjna jest wymagana w zwiniętej formie.
Warianty
Istnieją 2 rodzaje stylów szuflady nawigacyjnej:
- Standardowy panel nawigacji – po rozwinięciu tworzy dodatkową przestrzeń na nawigację, przesuwając treści strony na bok.
- Modalny panel nawigacyjny – pojawia się jako nakładka na zawartość aplikacji z przeźroczystym tłem, która ułatwia czytelność po rozwinięciu panelu.
Standardowy panel nawigacji
Anatomia
- Sekcja na górze: zawiera logo aplikacji. służy jako przycisk do przełączania profili lub wywoływania działania wyszukiwania; W skompresowanym stanie w górnym kontenerze widoczna jest tylko ikona.
- Element nawigacji: każdy element na pasku nawigacji zawiera kombinację ikony i tekstu, przy czym w skompresowanym stanie widoczna jest tylko ikona.
- Pasek nawigacyjny: to kolumna zawierająca od 3 do 7 miejsc docelowych w aplikacji, która pełni funkcję menu głównego. Każde miejsce docelowe ma etykietę tekstową i opcjonalną ikonę. Możesz też grupować elementy menu w celu lepszego kontekstu.
- Sekcja na dole: może zawierać od 1 do 3 przycisków akcji, które są idealne na stronach takich jak Ustawienia, Pomoc lub Profil.
Działanie
- Rozwijanie szuflady nawigacyjnej: po rozwinięciu standardowe szuflady nawigacyjne przesuwają zawartość strony, tworząc miejsce na rozszerzoną wersję nawigacji.
- Aktualizacje nawigacji: po przejściu z jednego elementu nawigacji do drugiego strona automatycznie aktualizuje się do nowego miejsca docelowego.
Panel nawigacji modalnej
Anatomia
- Sekcja na górze: zawiera logo aplikacji. Służy jako przycisk do przełączania profili lub uruchamiania działania wyszukiwania. W skompresowanym stanie w górnym kontenerze widoczna jest tylko ikona.
- Element nawigacji: każdy element na pasku nawigacji zawiera kombinację ikony i tekstu, przy czym w skompresowanym stanie widoczna jest tylko ikona.
- Pasek nawigacyjny: kolumna zawierająca od 3 do 7 miejsc docelowych aplikacji, która pełni funkcję głównego menu. Każde miejsce docelowe ma etykietę tekstową i opcjonalną ikonę. Możesz też grupować elementy menu, aby zwiększyć kontekstowość.
- Zasłona: służy do zwiększenia czytelności tekstu elementu nawigacyjnego.
- Sekcja na dole: może zawierać od 1 do 3 przycisków akcji, które są idealne na stronach takich jak Ustawienia, Pomoc lub Profil.
Działanie
- Rozwinięcie szuflady: pojawia się jako nakładka na zawartość aplikacji z przeźroczystą zasłoną, która poprawia czytelność po rozwinięciu szuflady.
- Aktualizacje nawigacji: występują, gdy użytkownik wybierze element nawigacji.
Scrim
W przypadku modalnego menu nawigacyjnego tło za nim zapewnia czytelność zawartości. Możesz użyć gradientu lub jednolitej powierzchni za panelem nawigacyjnym, aby tworzyć różne wersje interfejsu.
Siatka gradientowa
Jednolita siatka
Dane techniczne
Wykorzystanie
Wskaźnik aktywności
Aktywny wskaźnik to wizualny sygnał, który wyróżnia wyświetlane miejsce docelowe w drawerze nawigacji. Wskaźnik jest zwykle reprezentowany przez kształt tła, który wizualnie odróżnia się od innych elementów w szufladzie.
Wskaźnik aktywności pomaga użytkownikom zrozumieć, gdzie znajdują się w aplikacji i które miejsce przeglądają. Upewnij się, że wskaźnik aktywności jest wyraźnie widoczny i łatwiejszy do odróżnienia od innych elementów w drawerze nawigacji.
Separatory (opcjonalnie)
Separatorów można używać do oddzielania grup miejsc docelowych w panelu nawigacyjnym, aby ułatwić organizację. Należy jednak używać ich oszczędnie, ponieważ zbyt wiele separatorów może powodować wizualne zakłócenia i niepotrzebnie obciążać użytkowników.
Odznaki
Odznaki to wizualne wskazówki, które można dodawać do elementów nawigacji, aby wyświetlać dodatkowe informacje. Na przykład plakietkę można wykorzystać do wskazania liczby nowych filmów dostępnych w aplikacji do strumieniowego przesyłania danych. Używaj plakietek oszczędnie i tylko wtedy, gdy jest to konieczne, ponieważ mogą one sprawiać wrażenie, że interfejs jest zbyt zatłoczony. Jeśli używasz plakietek, upewnij się, że są one czytelne i łatwe do zrozumienia oraz nie utrudniają użytkownikowi poruszania się po aplikacji.
Plakietka rozwinięta
Plakietka jest zwinieta
Etykiety
Etykiety w drawerze nawigacji powinny być jasne i zwięzłe, aby były łatwe do odczytania.
warning
Ostrzeżenie
Jeśli nie możesz uniknąć stosowania długich etykiet, skróć je za pomocą wielokropka.
cancel
Nie
Unikaj długich etykiet tekstowych, które wymagają zawijania.
cancel
Nie
Unikaj tworzenia szuflady nawigacyjnej bez ikon, ponieważ może to utrudniać użytkownikom poruszanie się po aplikacji.
cancel
Nie
Nie mieszaj elementów nawigacji z ikonami z elementami nawigacji bez ikon, ponieważ może to wprowadzać użytkowników w błąd.
Szuflady nawigacyjne to podstawowe elementy, które odzwierciedlają hierarchię aplikacji. Należy je używać tylko do wyświetlania 5–6 głównych miejsc docelowych nawigacji.
check_circle
Tak
Aby zapewnić użytkownikom lepsze wrażenia, ogranicz liczbę głównych miejsc nawigacji w drawerze do 5–6.
cancel
Nie
Unikaj dodawania zbyt wielu elementów nawigacji, ponieważ może to spowodować konieczność przewijania w kierunku pionowym i utrudniać użytkownikom poruszanie się po aplikacji.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[null,null,["Ostatnia aktualizacja: 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."]]
