Panely záložek a spodní navigace: Pravidla návrhu, která vydrží
Jak navrhnout panely záložek a spodní navigaci na iOS a Android: 3 až 5 cílů, navigace ne akce, štítky, odznaky, viditelnost a animované aktivní stavy.
Core Takeaway
Použijte panel karet nebo spodní navigaci pro tři až pět cílů nejvyšší úrovně, nikoli pro akce. Dejte každé kartě ikonu a štítek, udržujte lištu viditelnou, když se lidé pohybují mezi sekcemi, vyhněte se přetečení karet „Další“, kde můžete, a používejte odznaky střídmě. Jemně animujte aktivní stav, aby lidé viděli, kde se nacházejí.
Co říkají platformy
Material Design 3 říká, že navigační lišty poskytují přístup ke třem až pěti cílům, každý s ikonou a štítkem, a jeden cíl je vždy aktivní. Pokyny společnosti Apple říkají, že pro navigaci je třeba používat panel karet, nikoli k poskytování akcí, aby byl viditelný, když se lidé pohybovali mezi sekcemi (kromě případů, kdy jej zakrývá modal), a aby se zabránilo přetečení karet.
Výběr karet
Karty představují strukturu aplikace:
- Vyberte sekce, které lidé používají nejčastěji, ne každou sekci, kterou máte.
- Používejte podstatná jména pro cíle ("Knihovna"), nikoli slovesa pro akce ("Nahrát").
- Umístěte akce na samotnou obrazovku, na panel nástrojů nebo na plovoucí akční tlačítko.
- Pokud potřebujete více než pět, přehodnoťte svou strukturu, než přidáte kartu „Další“.
Štítky a odznaky
Karty obsahující pouze ikony šetří místo, ale nutí lidi hádat. Popisky zpřehledňují navigaci, zejména u méně obvyklých ikon. Odznaky by měly signalizovat něco, podle čeho by lidé měli jednat; odznak, který je vždy přítomen, přestane být vnímán.
Zachovat stav na kartu
Apple poznamenává, že panely karet umožňují lidem přepínat sekce při zachování aktuálního stavu navigace v každé sekci. Při návratu na kartu by se mělo zobrazit místo, kde skončili, nikoli se vrátit na začátek.
Pohyb
Malý přechod na aktivním indikátoru, jako je pilulka, která klouže nebo ikona, která se vyplní, pomáhá lidem sledovat, kde se nacházejí. Udržujte to rychlé, pod asi 250 milisekund, vyhněte se poskakování každé ikony při každém klepnutí a zjednodušte to, když je zapnutý omezený pohyb.
Klíč Principle k zapamatování
- Tři až pět destinací nejvyšší úrovně
- Navigace, ne akce
- Ikona plus štítek pro každou kartu
- Udržujte ji viditelnou a zachovejte stav každé karty
- Jemný, rychlý pohyb v aktivním stavu
Často kladené otázky
Zdroje
- Navigation bar guidelines — Material Design 3
- Tab bars — Pokyny pro lidské rozhraní Apple