Układy i wzorce nawigacji

Jeśli Twoja aplikacja zawiera wiele miejsc docelowych, do których mogą przejść użytkownicy, zalecamy stosowanie układów i nawigacji, które są powszechnie używane w innych aplikacjach. Ponieważ wielu użytkowników ma już wyrobione nawyki związane z tymi układami, Twoja aplikacja będzie dla nich bardziej intuicyjna.

Układy i nawigacja

Pasek nawigacji i wysuwany panel nawigacji są używane jako podstawowe wzorce nawigacji w widokach układu nadrzędnego i podstawowych miejscach docelowych nawigacji.

Główny interfejs nawigacyjny

Pasek nawigacji może zawierać od 3 do 5 miejsc docelowych nawigacji na tym samym poziomie hierarchii. Ten komponent przekłada się na pasek nawigacji na dużych ekranach.

Chociaż wysuwany panel nawigacji może zawierać więcej niż 5 miejsc docelowych nawigacji, ten wzorzec nie jest tak idealny jak pasek nawigacji. Dzieje się tak, ponieważ w przypadku kompaktowych rozmiarów użytkownicy muszą sięgać do górnego paska.

Karty nawigacji dodatkowej

Karty Material 3 i pasek aplikacji u dołu ekranu to dodatkowe wzorce nawigacji , których możesz używać jako uzupełnienie nawigacji podstawowej lub które mogą pojawiać się w widokach podrzędnych.

W tym przypadku karty działają jako dodatkowa warstwa nawigacji, która grupuje treści pokrewne.

Działania związane z układem

Udostępnij elementy sterujące, które umożliwiają użytkownikom wykonywanie działań. Typowe wzorce to działania na górnym pasku, pływający przycisk polecenia (FAB) i menu.

W przypadku najważniejszych działań przycisk typu FAB zapewnia użytkownikowi duży i widoczny przycisk. Na tym poziomie udostępniaj tylko 1 działanie naraz. Przycisk typu FAB może mieć różne rozmiary i postać rozwiniętą, która zawiera etykietę. Użyj komponentu Scaffold, aby przypiąć przycisk typu FAB i zapewnić, że będzie on zawsze widoczny, nawet podczas przewijania.

Układ z pływającym przyciskiem polecenia

Pływający przycisk polecenia (FAB), który umożliwia użytkownikom dodawanie roślin do galerii roślin

Działania dodatkowe możesz umieścić na górnym pasku lub, jeśli są zgrupowane w pobliżu powiązanych treści, na stronie.

Działanie alertu na górnym pasku w widoku szczegółów (po lewej) i ikona przepełnienia w wierszu listy (po prawej)

Wszystkie dodatkowe działania, które nie są potrzebne od razu lub często, dodaj do rozszerzonego menu.

Nawigacja adaptacyjna

Użyj odpowiedniego układu dla klasy rozmiaru okna. Unikaj używania tego samego paska nawigacji u dołu ekranu w różnych rozmiarach.

Tak

Dostosuj nawigację, aby używać paska nawigacji na dużych ekranach. Pasek nawigacji jest bardziej ergonomiczny i wizualnie zrównoważony ze względu na ułożenie dłoni na większych urządzeniach i duże odstępy między elementami nawigacji.

Nie

Nie używaj paska nawigacji u dołu ekranu na dużych ekranach.

Nawigacja w orientacji poziomej W przypadku średnich rozmiarów można używać paska nawigacji lub poziomych elementów nawigacji.

Nawigacja na ekranie zewnętrznym Chociaż pasek nawigacji jest kompaktowy, może być bardziej ergonomiczny na ekranie okładki. Większe okładki mogą korzystać z dowolnej orientacji nawigacji. Zastanów się, jak użytkownik może wchodzić w interakcję z treścią.