Fanebjælker og bundnavigation: Designregler, der holder
Sådan designes fanebjælker og bundnavigation på iOS og Android: 3 til 5 destinationer, navigation ikke handlinger, etiketter, badges, synlighed og animerede aktive tilstande.
Core Takeaway
Brug en fanelinje eller bundnavigation til tre til fem destinationer på øverste niveau, ikke til handlinger. Giv hver fane et ikon og en etiket, hold bjælken synlig, når folk bevæger sig mellem sektioner, undgå overfyldte "Flere"-faner, hvor du kan, og brug badges sparsomt. Animer den aktive tilstand subtilt, så folk kan se, hvor de er.
Hvad siger platformene
Material Design 3 siger, at navigationslinjer giver adgang til tre til fem destinationer, hver med et ikon og en etiket, og en destination er altid aktiv. Apples retningslinjer siger, at man skal bruge en fanelinje til navigation, ikke for at give handlinger, for at holde den synlig, når folk bevæger sig mellem sektioner (undtagen når en modal dækker den), og for at undgå overløbsfaner.
Valg af faner
Faner repræsenterer appens struktur:
- Vælg de sektioner, folk bruger oftest, ikke alle sektioner, du har.
- Brug navneord til destinationer ("Bibliotek"), ikke verber til handlinger ("Upload").
- Indsæt handlinger på selve skærmen, i en værktøjslinje eller en flydende handlingsknap.
- Hvis du har brug for mere end fem, skal du genoverveje din struktur, før du tilføjer fanen "Mere".
Etiketter og badges
Faner, der kun indeholder ikoner, sparer plads, men tvinger folk til at gætte. Etiketter gør navigationen klarere, især for mindre almindelige ikoner. Badges skal signalere noget, folk skal handle på; et badge, der altid er til stede, stopper med at blive bemærket.
Bevar tilstand pr. fane
Apple bemærker, at fanebjælker lader folk skifte sektion, mens de bevarer den aktuelle navigationstilstand inden for hver sektion. At vende tilbage til en fane skal vise, hvor de slap, ikke nulstilles til toppen.
Bevægelse
En lille overgang på den aktive indikator, såsom en pille, der glider eller et ikon, der fylder, hjælper folk med at spore, hvor de er. Hold det hurtigt, under omkring 250 millisekunder, undgå at hoppe hvert ikon ved hvert tryk, og forenkle det, når reduceret bevægelse er aktiveret.
Tast Principles for at huske
- Tre til fem destinationer på topniveau
- Navigation, ikke handlinger
- Ikon plus etiket for hver fane
- Hold det synligt, og bevar hver fanes tilstand
- Subtil, hurtig bevægelse i aktiv tilstand
Ofte stillede spørgsmål
Kilder
- Navigation bar guidelines — Material Design 3
- Tab bars — Apples retningslinjer for menneskelig grænseflade