Flikar och bottennavigering: Designregler som håller
Hur man designar flikfält och bottennavigering på iOS och Android: 3 till 5 destinationer, navigering inte åtgärder, etiketter, märken, synlighet och animerade aktiva tillstånd.
Core Takeaway
Använd en flikrad eller bottennavigering för tre till fem destinationer på toppnivå, inte för åtgärder. Ge varje flik en ikon och en etikett, håll fältet synligt när människor flyttar mellan sektioner, undvik överfyllda "Mer"-flikar där du kan och använd märken sparsamt. Animera det aktiva tillståndet subtilt så att folk ser var de är.
Vad säger plattformarna
Material Design 3 säger att navigeringsfält ger tillgång till tre till fem destinationer, var och en med en ikon och etikett, och en destination är alltid aktiv. Apples riktlinjer säger att man ska använda en flikrad för navigering, inte för att tillhandahålla åtgärder, för att hålla den synlig när människor flyttar mellan sektioner (förutom när en modal täcker den) och för att undvika flikar som flödar över.
Att välja flikar
Flikar representerar appens struktur:
- Välj de avsnitt som folk använder oftast, inte alla avsnitt du har.
- Använd substantiv för destinationer ("Bibliotek"), inte verb för handlingar ("Ladda upp").
- Placera åtgärder på själva skärmen, i ett verktygsfält eller en flytande åtgärdsknapp.
- Om du behöver fler än fem, ompröva din struktur innan du lägger till en "Mer"-flik.
Etiketter och märken
Flikar med endast ikoner sparar utrymme men tvingar folk att gissa. Etiketter gör navigeringen tydligare, särskilt för mindre vanliga ikoner. Märken ska signalera något som människor behöver agera på; ett märke som alltid är närvarande slutar märkas.
Bevara tillstånd per flik
Apple noterar att flikfält låter människor byta sektion samtidigt som det aktuella navigeringsläget bevaras inom varje sektion. Återgå till en flik ska visa var de slutade, inte återställas till toppen.
Rörelse
En liten övergång på den aktiva indikatorn, till exempel ett piller som glider eller en ikon som fylls, hjälper människor att spåra var de är. Håll det snabbt, under cirka 250 millisekunder, undvik att studsa varje ikon vid varje tryck och förenkla det när reducerad rörelse är på.
Nyckel Principles att komma ihåg
- Tre till fem destinationer på toppnivå
- Navigering, inte åtgärder
- Ikon plus etikett för varje flik
- Håll det synligt och bevara varje fliks tillstånd
- Subtila, snabba aktiva rörelser
Vanliga frågor
Källor
- Navigation bar guidelines — Material Design 3
- Tab bars — Apples riktlinjer för mänskligt gränssnitt