Wzorce nawigacji w aplikacjach mobilnych: paski zakładek, menu boczne i nawigacja zagnieżdżona
Wybieraj wzorce nawigacji mobilnej według częstotliwości zadań, struktury informacji, potrzeb dostępności i łatwości powrotu do poprzedniego miejsca.
Nawigacja powinna ułatwiać zrozumienie struktury aplikacji. Użytkownicy muszą wiedzieć, jakie obszary istnieją, gdzie się znajdują i jak się poruszać bez utraty pracy. Pasek zakładek, menu boczne i zagnieżdżona ścieżka to nie kwestia stylu: każda z tych form pokazuje inną relację między miejscami docelowymi.
Zacznij od zadań, do których użytkownicy wracają, a potem zmapuj hierarchię treści. Stosuj bezpośrednią nawigację między równorzędnymi miejscami, nawigację zagnieżdżoną dla relacji nadrzędny–szczegół, a menu boczne lub adaptacyjną nawigację na większym ekranie, gdy miejsc jest więcej, niż da się wygodnie pokazać na małym.
Najważniejsze wnioski
- Używaj paska zakładek lub paska nawigacji dla niewielu odrębnych obszarów głównego poziomu, do których użytkownicy często wracają.
- Stosuj nawigację zagnieżdżoną, gdy miejsce docelowe rzeczywiście znajduje się wewnątrz innego, i zachowaj jasną drogę powrotu.
- Traktuj menu boczne jako sposób pokazania szerszej listy miejsc, a nie schowek na kluczowe zadania.
- Zadbaj o jasne etykiety, zaznaczone stany, zachowanie fokusu i przywracanie stanu, aby użytkownicy mogli się orientować i wracać.
Zacznij od struktury, nie od komponentu
Wypisz miejsca docelowe aplikacji i pogrupuj je według sposobu myślenia użytkownika. Wyszukiwanie może być równorzędne ze Stroną główną; szczegóły zapisanego elementu należą pod Zapisane. Jeśli użytkownicy często przełączają się między równorzędnymi miejscami, pokazuj te możliwości. Jeśli zwykle przechodzą z kolekcji do jednego elementu i z powrotem, stos lub zagnieżdżona ścieżka naturalnie oddają tę relację.
Oddziel miejsca docelowe od działań. Tworzenie, udostępnianie, filtrowanie i sortowanie zmieniają bieżący kontekst lub wykonują na nim czynność; zwykle nie są miejscami w aplikacji. Umieść je na pasku narzędzi, w menu lub kontrolce kontekstowej, zamiast zmieniać każde działanie w pozycję głównej nawigacji.
- Nazwij zadania wykonywane wielokrotnie i wskaż obszary, które muszą być dostępne z każdego miejsca.
- Narysuj relacje nadrzędny–podrzędny przed wyborem kontrolek nawigacji.
- Zachowaj spójność wizualną i funkcjonalną miejsc na tym samym poziomie hierarchii.
Porównaj trzy wzorce
Pasek zakładek lub pasek nawigacji pokazuje kilka miejsc głównego poziomu, między którymi można szybko przechodzić. Sprawdza się, gdy są równorzędne, a etykiety rozpoznawalne bez wyjaśnień. Zaznacz bieżący obszar. Nie upychaj niepowiązanych działań na pasku i nie ukrywaj ważnych miejsc w nadmiarowym menu.
Menu boczne może pomieścić większy, pogrupowany zbiór miejsc, a czasem również przełączanie konta lub obszaru roboczego. Modalne menu boczne oszczędza miejsce na ekranie, ale wymaga dodatkowego otwarcia i wyboru oraz tymczasowo zasłania treść. Na małych telefonach często odwiedzane miejsca mogą przez to wydawać się schowane. Obecne wskazówki Material 3 dla Androida preferują pasek nawigacji dla trzech do pięciu miejsc na małym ekranie i dostosowują nawigację do większych rozmiarów okna; starszych zaleceń Material dotyczących menu bocznego przy pięciu lub więcej miejscach nie należy uznawać za uniwersalny aktualny próg.
Nawigacja zagnieżdżona otwiera widok podrzędny z listy, karty lub linku, zachowując ścieżkę dzięki tytułowi i przyciskowi powrotu. Pasuje do kategorii, ustawień, szczegółów produktu i zadań krok po kroku. Głębokie zagnieżdżenie frustruje, gdy hierarchia jest ukryta, powrót działa niespójnie lub trzeba wielokrotnie cofać się, by dotrzeć do sąsiedniej gałęzi. Dodaj wyszukiwanie, skróty lub jaśniejszą strukturę głównego poziomu, jeśli użytkownicy często przeskakują między gałęziami.
| Wzorzec | Sprawdza się, gdy | Uważaj na |
|---|---|---|
| Pasek zakładek / pasek nawigacji | Kilka równorzędnych obszarów wymaga częstego, bezpośredniego dostępu | Zbyt wiele miejsc, niejasne ikony, ukryte menu nadmiarowe, utrata stanu poszczególnych kart |
| Menu boczne nawigacyjna | Użytkownicy potrzebują uporządkowanej listy wielu lub pogrupowanych miejsc | Kluczowe obszary ukryte za menu, długa przewijana lista, problemy z fokusem lub zamykaniem |
| Nawigacja zagnieżdżona | Użytkownicy przechodzą z kolekcji nadrzędnej do powiązanego szczegółu lub zadania | Niejasne położenie, niespójny przycisk Wstecz, nadmierna głębokość, utrata wpisanych danych |
Wybieraj według częstotliwości zadań i rozmiaru ekranu
Zapytaj, jak często użytkownicy przełączają się między obszarami podczas typowej sesji. Mały, stały zestaw często odwiedzanych miejsc przemawia za widocznym paskiem. Jeśli użytkowanie skupia się głównie na jednym zadaniu lub czytaniu szczegółów, ogranicz widoczność nawigacji i zostaw więcej miejsca na treść. Menu boczne może działać dla rzadziej odwiedzanych sekcji, ale sprawdź, czy nadal łatwo je znaleźć i wrócić bez zgadywania.
Uwzględnij rozmiar okna, orientację i zwyczaje platformy. Obecne wytyczne Apple opisują pasek zakładek iPhone’a jako nawigację głównego poziomu i wspierają adaptacyjne przełączanie paska zakładek i panelu bocznego na iPadzie. Material 3 nazywa wzorzec dla małych ekranów paskiem nawigacji i proponuje inne formy przy większej szerokości. Wzorce mają wspólny cel, ale nie są identycznymi komponentami; kieruj się natywnym położeniem, zachowaniem i adaptacją, zamiast kopiować oprawę jednej platformy na drugą.
Zapewnij niezawodną orientację i powrót
Same ikony utrudniają naukę nawigacji i mogą być niejasne dla użytkowników czytników ekranu. Daj miejscom krótkie widoczne etykiety, semantycznie udostępnij zaznaczony stan i zapewnij kontrolkom dostępne nazwy oraz wygodne obszary dotykowe. Sprawdź kontrast stanów zaznaczonych i niezaznaczonych, powiększony tekst, lokalizację oraz układy od prawej do lewej. Testuj z VoiceOver lub TalkBack oraz klawiaturą lub sterowaniem przełącznikami tam, gdzie są obsługiwane; fokus powinien przewidywalnie się przenosić po otwarciu menu bocznego, wyborze miejsca i zamknięciu widoku.
Powrót jest częścią nawigacji. Rozróżniaj Wstecz i Zamknij: pierwsze odtwarza hierarchię, drugie zamyka tymczasowy lub modalny widok. Zachowaj przydatną pozycję i wpisane dane po przełączeniu obszaru głównego poziomu lub powrocie ze szczegółów. Gdy miejsce docelowe jest puste lub tymczasowo niedostępne, pozostaw je na stałej pozycji i wyjaśnij stan, zamiast bez słowa usuwać je lub wyłączać. Przy zadaniu destrukcyjnym lub kosztownym pokaż jasną drogę powrotu przed zatwierdzeniem.
Praktyczny audyt nawigacji
Przejdź przez aplikację z rzeczywistym zadaniem, a potem powtórz próbę z włączonymi funkcjami dostępności. Zapisz, czy użytkownicy rozpoznają bieżący obszar, docierają do często używanego miejsca i wracają po błędnym wyborze. Porównaj tę samą podróż na małym telefonie i w większym oknie; układ adaptacyjny powinien zachować architekturę informacji, choć kontrolka zmienia formę.
Użyj biblioteki ekranów do porównania prawdziwych przykładów sekcji i ścieżek aplikacji, a następnie oceń każdy względem zadań własnego produktu. Najlepszy wzorzec pozostaje czytelny wraz z rozwojem aplikacji i jasno pokazuje drogę powrotu po przerwie.
- Czy nowy użytkownik potrafi wyjaśnić główne obszary na podstawie samych etykiet?
- Czy łatwo przełączać się między równorzędnymi miejscami i czy zaznaczenie jest jasne?
- Czy ekrany szczegółów mają znaczący tytuł i przewidywalną drogę Wstecz?
- Czy otwieranie i zamykanie menu bocznego zachowuje kontekst i rozsądnie przenosi fokus dostępności?
- Czy etykiety, obszary dotykowe, kontrast i stany zaznaczenia pozostają użyteczne przy większym tekście i technologiach wspomagających?
- Czy można wrócić bez utraty szkicu, pozycji przewijania lub przydatnego miejsca w hierarchii?
- Czy struktura dostosowuje się do większego ekranu bez dublowania konkurujących form głównej nawigacji?
