Panele nawigacji to niezbędne komponenty każdej aplikacji na telewizory, ponieważ pozwalają użytkownikom na dostęp do różnych miejsc docelowych i funkcji. Panel nawigacji to podstawowa architektura informacji w aplikacji, która pozwala w jasny i intuicyjny sposób poruszać się po aplikacji.
W przeciwieństwie do szuflady nawigacji mobilnej ta szuflada na telewizorze ma zarówno stan rozwinięty, jak i zwinięty.
Materiały
| Typ | Link | Stan |
|---|---|---|
| Design | Źródło projektu (Figma) | Dostępna |
| Implementacja |
Jetpack Compose (NavigationDrawer)
Jetpack Compose (ModalNavigationDrawer) |
Dostępna |
W skrócie
- Miejsca docelowe są uporządkowane według ważności użytkowników. Miejsca docelowe często są uporządkowane na początku, a powiązane z nimi są pogrupowane.
- Kolumna nawigacji jest wymagana zarówno w przypadku standardowych, jak i modalnych szuflad nawigacyjnych po zwinięciu.
Warianty
Dostępne są 2 rodzaje stylów panelu nawigacji:
- Standardowy panel nawigacji – rozwija się, tworząc dodatkowe miejsce na nawigację, przesuwając zawartość strony na bok.
- Panel nawigacji modalnej – wyświetla się jako nakładka na treść aplikacji z kartą, która pomaga zwiększyć czytelność po rozwinięciu panelu.
Standardowy panel nawigacji
Anatomia
- Górna sekcja: zawiera logo aplikacji. Służy jako przycisk do przełączania profili lub uruchamiający wyszukiwanie. W stanie zwiniętym w górnym kontenerze widoczna jest tylko ikona.
- Element nawigacji: każdy element w kolumnie nawigacyjnej zawiera kombinację ikony i tekstu, przy czym w stanie zwiniętym widoczna jest tylko ikona.
- Kolejka nawigacji: kolumna nawigacji zawiera od 3 do 7 miejsc docelowych aplikacji i stanowi menu główne. Każde miejsce docelowe ma etykietę tekstową i opcjonalną ikonę oraz możliwość grupowania elementów menu, aby zapewnić szerszy kontekst.
- Dolna sekcja: może zawierać od 1 do 3 przycisków działań, które idealnie nadają się na stronach takich jak ustawienia, pomoc czy profil.
Działanie
- Rozwijanie panelu nawigacji: po rozwinięciu standardowych szuflad nawigacyjnych zawartość strony przesuwa się, przez co miejsce na nawigację jest w rozwiniętej wersji.
- Aktualizacje nawigacji: podczas przechodzenia z jednego elementu nawigacyjnego do drugiego strona automatycznie aktualizuje się do nowego miejsca docelowego.
Panel modalny nawigacji
Anatomia
- Górna sekcja: zawiera logo aplikacji. Służy jako przycisk do przełączania profili lub wywoływania wyszukiwania. W stanie zwiniętym w górnym kontenerze widoczna jest tylko ikona.
- Element nawigacji: każdy element w kolumnie nawigacyjnej zawiera kombinację ikony i tekstu, przy czym w stanie zwiniętym widoczna jest tylko ikona.
- Kolejka nawigacji: kolumna zawierająca 3–7 miejsc docelowych aplikacji i stanowi menu główne. Każde miejsce docelowe ma etykietę tekstową i opcjonalną ikonę oraz opcję grupowania elementów menu, która zwiększa kontekst.
- Scrim: dla lepszej czytelności tekstu elementu nawigacyjnego.
- Dolna sekcja: może zawierać od 1 do 3 przycisków działań, które idealnie nadają się na stronach takich jak ustawienia, pomoc czy profil.
Działanie
- Rozwijanie szuflady: wyświetla się jako nakładka na zawartość aplikacji wraz z kratką, która zwiększa czytelność po rozwinięciu panelu.
- Aktualizacje nawigacji: mają miejsce, gdy użytkownik wybiera element nawigacji.
Siatka
Ostre modalne panele nawigacji za szufladą dba o czytelność jego zawartości. Możesz użyć gradientu lub powierzchni jednolitej za panelem nawigacji, by utworzyć różne wersje interfejsu.
Skrypa gradientowa
Linia ciągła
Dane techniczne
Wykorzystanie
Wskaźnik aktywności
Aktywny wskaźnik to sygnał wizualny, który wyróżnia wyświetlane miejsce docelowe szuflady nawigacji. Jest on zwykle reprezentowany przez kształt tła, który wyraźnie odróżnia się od innych elementów w panelu. Wskaźnik aktywności pomaga użytkownikom dowiedzieć się, gdzie znajdują się w aplikacji i które strony odwiedzają. Upewnij się, że aktywny wskaźnik jest wyraźnie widoczny i jest łatwiejszy do odróżnienia od innych elementów w panelu nawigacji.
separatory (opcjonalnie),
Separatory pozwalają oddzielić grupy miejsc docelowych w panelu nawigacji, aby lepiej je uporządkować. Należy jednak używać ich z umiarem, ponieważ zbyt duża liczba rozdzielaczy może powodować szum wizualny i niepotrzebne przeciążenie funkcji poznawczych.
Odznaki
Plakietki to wskazówki wizualne, które można dodać do elementów nawigacyjnych, aby dostarczyć dodatkowych informacji. Plakietki można na przykład wykorzystać, aby wskazać liczbę nowych filmów dostępnych w aplikacji do odtwarzania strumieniowego. Z plakietek korzystaj tylko z umiarem i tylko wtedy, gdy jest to konieczne, ponieważ mogą sprawić, że interfejs będzie zaśmiecony. Dopilnuj, aby plakietki były przejrzyste i łatwe do zrozumienia, a także by nie zakłócały użytkownikom korzystania z aplikacji.
Plakietka rozwinięta
Plakietka zwinięta
Etykiety
Etykiety w panelu nawigacji powinny być przejrzyste i zwięzłe, aby były czytelne.
Ostrzeżenie
Nie wolno
Nie wolno
Nie wolno
Panele nawigacji to podstawowe elementy reprezentujące hierarchię aplikacji. Można ich używać do wyświetlania od 5 do 6 głównych miejsc docelowych nawigacji.
Tak
