Panely kariet a spodná navigácia: Pravidlá dizajnu, ktoré vydržia
Ako navrhnúť lišty kariet a spodnú navigáciu na iOS a Android: 3 až 5 cieľov, navigácia nie akcie, štítky, odznaky, viditeľnosť a animované aktívne stavy.
Core Takeaway
Použite panel kariet alebo spodnú navigáciu pre tri až päť cieľov najvyššej úrovne, nie pre akcie. Dajte každej karte ikonu a menovku, nechajte lištu viditeľnú, keď sa ľudia pohybujú medzi sekciami, zabráňte preplneniu kariet „Viac“ tam, kde môžete, a používajte odznaky s mierou. Jemne animujte aktívny stav, aby ľudia videli, kde sa nachádzajú.
Čo hovoria platformy
Material Design 3 hovorí, že navigačné lišty poskytujú prístup k trom až piatim cieľom, každý s ikonou a štítkom, a jeden cieľ je vždy aktívny. Pokyny spoločnosti Apple hovoria, že na navigáciu je potrebné použiť lištu kariet, nie na poskytovanie akcií, aby bola viditeľná, keď sa ľudia pohybujú medzi sekciami (okrem prípadov, keď ju zakrýva modál), a aby sa zabránilo pretečeniu kariet.
Výber kariet
Karty predstavujú štruktúru aplikácie:
- Vyberte sekcie, ktoré ľudia používajú najčastejšie, nie každú, ktorú máte.
- Pre ciele ("Knižnica") používajte podstatné mená, nie slovesá pre akcie ("Nahrať").
- Umiestnite akcie na samotnú obrazovku, na panel s nástrojmi alebo na plávajúce tlačidlo akcie.
- Ak potrebujete viac ako päť, pred pridaním karty „Viac“ prehodnoťte svoju štruktúru.
Štítky a odznaky
Karty obsahujúce iba ikony šetria miesto, ale nútia ľudí hádať. Štítky sprehľadňujú navigáciu, najmä pri menej bežných ikonách. Odznaky by mali signalizovať niečo, podľa čoho ľudia musia konať; odznak, ktorý je vždy prítomný, si prestane všímať.
Zachovať stav na kartu
Apple poznamenáva, že panely kariet umožňujú ľuďom prepínať sekcie pri zachovaní aktuálneho stavu navigácie v každej sekcii. Pri návrate na kartu by sa malo zobraziť miesto, kde prestali, a nie vrátiť sa na začiatok.
Pohyb
Malý prechod na aktívnom indikátore, napríklad tabletka, ktorá sa posúva alebo ikona, ktorá sa vypĺňa, pomáha ľuďom sledovať, kde sa nachádzajú. Udržujte ho rýchly, menej ako 250 milisekúnd, vyhýbajte sa poskakovaniu každej ikony pri každom klepnutí a zjednodušte to, keď je zapnutý obmedzený pohyb.
Kľúč Principle na zapamätanie
- Tri až päť destinácií najvyššej úrovne
- Navigácia, nie akcie
- Ikona plus štítok pre každú kartu
- Udržujte ho viditeľný a zachovajte stav každej karty
- Jemný, rýchly pohyb v aktívnom stave
Často kladené otázky
Zdroje
- Navigation bar guidelines — Material Design 3
- Tab bars — Pokyny pre ľudské rozhranie Apple