Fanelinjer og bunnnavigering: Designregler som holder
Hvordan designe fanelinjer og bunnnavigering på iOS og Android: 3 til 5 destinasjoner, navigasjon ikke handlinger, etiketter, merker, synlighet og animerte aktive tilstander.
Kjerne takeaway
Bruk en fanelinje eller bunnnavigering for tre til fem destinasjoner på toppnivå, ikke for handlinger. Gi hver fane et ikon og en etikett, hold linjen synlig når folk beveger seg mellom seksjoner, unngå overfylte «Mer»-faner der du kan, og bruk merker med måte. Animer den aktive tilstanden subtilt slik at folk ser hvor de er.
Hva sier plattformene
Material Design 3 sier at navigasjonslinjer gir tilgang til tre til fem destinasjoner, hver med et ikon og etikett, og en destinasjon er alltid aktiv. Apples retningslinjer sier å bruke en fanelinje for navigering, ikke for å gi handlinger, for å holde den synlig når folk beveger seg mellom seksjoner (bortsett fra når en modal dekker den), og for å unngå overløpsfaner.
Velge fanene
Faner representerer appens struktur:
- Velg seksjonene folk bruker oftest, ikke alle seksjoner du har.
- Bruk substantiver for destinasjoner ("Bibliotek"), ikke verb for handlinger ("Last opp").
- Sett handlinger i selve skjermen, i en verktøylinje eller en flytende handlingsknapp.
- Hvis du trenger mer enn fem, revurder strukturen din før du legger til en "Mer"-fane.
Etiketter og merker
Faner med bare ikoner sparer plass, men tvinger folk til å gjette. Etiketter gjør navigeringen klarere, spesielt for mindre vanlige ikoner. Merker skal signalisere noe folk trenger å handle på; et merke som alltid er tilstede slutter å bli lagt merke til.
Bevar tilstand per fane
Apple bemerker at fanelinjer lar folk bytte seksjon mens de beholder gjeldende navigasjonstilstand i hver seksjon. Gå tilbake til en fane skal vise hvor de slapp, ikke tilbakestilles til toppen.
Bevegelse
En liten overgang på den aktive indikatoren, for eksempel en pille som glir eller et ikon som fylles, hjelper folk med å spore hvor de er. Hold det raskt, under omtrent 250 millisekunder, unngå å sprette hvert ikon ved hvert trykk, og forenkle det når redusert bevegelse er på.
Tast Principles å huske
- Tre til fem destinasjoner på toppnivå
- Navigasjon, ikke handlinger
- Ikon pluss etikett for hver fane
- Hold den synlig og bevar hver fanes tilstand
- Subtile, raske aktive bevegelser
Ofte stilte spørsmål
Kilder
- Navigation bar guidelines — Material Design 3
- Tab bars — Apples retningslinjer for menneskelig grensesnitt