Paski zakładek i dolna nawigacja: zasady projektowania, które się sprawdzają
Jak zaprojektować paski zakładek i dolną nawigację w iOS i Android: 3 do 5 miejsc docelowych, nawigacja, a nie akcje, etykiety, plakietki, widoczność i animowane stany aktywne.
Rdzeń na wynos
Użyj paska kart lub dolnej nawigacji, aby wyświetlić trzy do pięciu miejsc docelowych najwyższego poziomu, a nie do wykonywania czynności. Nadaj każdej karcie ikonę i etykietę, dbaj o to, aby pasek był widoczny, gdy ludzie poruszają się między sekcjami, unikaj przepełnienia zakładek „Więcej” tam, gdzie to możliwe, i oszczędnie korzystaj z plakietek. Subtelnie animuj stan aktywny, aby ludzie widzieli, gdzie się znajdują.
Co mówią platformy
Material Design 3 mówi, że paski nawigacyjne zapewniają dostęp do trzech do pięciu miejsc docelowych, każdy z ikoną i etykietą, a jeden cel jest zawsze aktywny. Wytyczne Apple mówią, aby używać paska kart do nawigacji, a nie do udostępniania akcji, aby był widoczny, gdy ludzie poruszają się między sekcjami (z wyjątkiem sytuacji, gdy zakrywa go moduł modalny) i aby unikać przepełnienia zakładek.
Wybór zakładek
Zakładki przedstawiają strukturę aplikacji:
- Wybierz sekcje, z których ludzie korzystają najczęściej, a nie każdą sekcję, którą posiadasz.
- Używaj rzeczowników do określenia miejsc docelowych („Biblioteka”), a nie czasowników do określenia działań („Prześlij”).
- Umieść akcje na samym ekranie, na pasku narzędzi lub pływającym przycisku akcji.
- Jeśli potrzebujesz więcej niż pięciu, przemyśl swoją strukturę przed dodaniem zakładki „Więcej”.
Etykiety i odznaki
Zakładki zawierające wyłącznie ikony oszczędzają miejsce, ale zmuszają ludzi do zgadywania. Etykiety ułatwiają nawigację, szczególnie w przypadku mniej popularnych ikon. Odznaki powinny sygnalizować, że ludzie powinni działać; odznaka, która jest zawsze obecna, przestaje być zauważana.
Zachowaj stan na karcie
Apple zauważa, że paski kart umożliwiają przełączanie sekcji przy jednoczesnym zachowaniu bieżącego stanu nawigacji w każdej sekcji. Powrót do karty powinien pokazywać miejsce, w którym został przerwany, a nie resetowany do góry.
Ruch
Niewielkie przejście na aktywnym wskaźniku, np. przesuwająca się pigułka lub wypełniająca się ikona, pomaga użytkownikom śledzić, gdzie się znajdują. Działaj szybko, poniżej około 250 milisekund, unikaj odbijania się każdej ikony przy każdym dotknięciu i upraszczaj, gdy włączony jest ograniczony ruch.
Klucz Principles do zapamiętania
- Trzy do pięciu miejsc docelowych na najwyższym poziomie
- Nawigacja, a nie działania
- Ikona i etykieta dla każdej karty
- Zachowaj widoczność i zachowaj stan każdej karty
- Subtelny, szybki ruch w stanie aktywnym
Często zadawane pytania
Źródła
- Navigation bar guidelines — Material Design 3
- Tab bars — Wytyczne Apple dotyczące interfejsu ludzkiego