Navigeringsmönster i mobilappar: flikar, navigeringspaneler och kapslade flöden
En praktisk guide till valet mellan flikfält, navigeringspaneler och kapslad navigering, med en beslutstabell och checklista för granskning.
Navigering bör göra formen på en app begriplig. Människor behöver veta vilka områden som finns, var de är och hur de kan navigera utan att förlora det de håller på med. Ett flikfält, en navigeringspanel eller ett kapslat flöde är inte en stilpreferens: var och en avslöjar olika relationer mellan destinationer.
Börja med uppgifterna som folk återvänder till och kartlägg sedan innehållshierarkin. Använd direktnavigering för jämbördiga destinationer, kapslad navigering för relationer mellan översikt och detalj och en navigeringspanel eller adaptiv navigering på större skärm när appen har fler destinationer än vad en kompakt skärm bekvämt kan visa.
Viktigaste lärdomarna
- Använd flikar eller ett navigeringsfält för en liten uppsättning distinkta, ofta återbesökta toppnivåområden.
- Använd kapslad navigering när en destination är meningsfullt inuti en annan, och bevara en tydlig tillbakaväg.
- Behandla navigeringspaneler som ett sätt att exponera en bredare destinationslista, inte som ett gömställe för viktiga uppgifter.
- Håll etiketter, valda tillstånd, fokusbeteende och tillståndsåterställning tydliga så att människor kan orientera sig och återhämta sig.
Börja med strukturen, inte komponenten
Lista appens destinationer och gruppera dem efter användarens mentala modell. En destination som Sök kan sitta bredvid Hem som ett jämbördigt område; information om ett sparat objekt hör hemma under Sparat. Om människor behöver hoppa mellan jämbördiga destinationer ofta, håll dessa val synliga. Om de vanligtvis flyttar från en samling till ett objekt och sedan tillbaka, kommunicerar en stack eller ett kapslat flöde detta förhållande naturligt.
Separera destinationer från åtgärder. Att skapa, dela, filtrera och sortera ändrar eller påverkar det aktuella sammanhanget; de är vanligtvis inte platser i appen. Placera dem i ett verktygsfält, meny eller kontextuell kontroll istället för att göra varje åtgärd till ett primärt navigeringsobjekt.
- Namnge de jobb som människor utför upprepade gånger och identifiera vilka områden som måste vara tillgängliga var som helst.
- Rita relationer mellan föräldrar och barn innan du väljer navigeringskontroller.
- Håll destinationer på samma hierarkinivå visuellt och beteendemässigt konsekventa.
Jämför de tre mönstren
Ett flikfält eller navigeringsfält gör några destinationer på toppnivå synliga och snabbt växlande. Det fungerar när destinationerna är jämbördiga och varje etikett känns igen utan förklaring. Behåll det aktuella området valt. Undvik att stoppa in orelaterade åtgärder i baren eller låta viktiga destinationer försvinna i ett överfullt fält.
En navigeringspanel kan innehålla en större, grupperad uppsättning destinationer och ibland konto- eller arbetsytabyte. En modalnavigeringspanel sparar skärmutrymme, men kräver ett extra öppna-och-välj-steg och täcker tillfälligt innehåll. På kompakta telefoner kan det kosta att mindre använda destinationer känns begravda. Material 3:s nuvarande Android-vägledning gynnar ett navigeringsfält för tre till fem kompakta destinationer och anpassar navigering för större fönsterstorlekar; äldre Materialvägledning som rekommenderar navigeringspaneler för fem eller fler destinationer ska inte förväxlas med en universell aktuell gräns.
Kapslad navigering använder en lista, kort eller länk för att öppna en underordnad vy, med en titel och bakåtkontroll som bevarar sökvägen. Den passar kategorier, inställningar, produktdetaljer och steg-för-steg-uppgifter. Djup kapsling blir frustrerande när hierarkin är dold, ryggbeteendet är inkonsekvent eller användarna upprepade gånger måste varva ner för att nå ett syskon. Lägg till sökning, genvägar eller en tydligare toppnivåstruktur när människor ofta hoppar över grenar.
| Mönster | Passar när | Håll utkik efter |
|---|---|---|
| Flikar/navigeringsfält | Ett fåtal jämbördiga områden förtjänar frekvent, direkt åtkomst | För många destinationer, tvetydiga ikoner, dolt spill, förlorat tillstånd per flik |
| Navigeringspanel | Människor behöver en organiserad lista över många eller grupperade destinationer | Viktiga områden gömda bakom en meny, lång rullningslista, fokus eller uppsägningsproblem |
| Kapslad navigering | Människor flyttar från en föräldrasamling till en relaterad detalj eller uppgift | Otydlig plats, inkonsekvent bakåtknapp, för stort djup, förlorad inmatad data |
Välj efter uppgiftsfrekvens och skärmstorlek
Fråga hur ofta människor byter mellan områden under en typisk session. En kompakt, stabil uppsättning högfrekventa destinationer gynnar en synlig bar. Om den mesta användningen är fokuserad på en uppgift eller att läsa en detalj, håll navigeringen tystare och bevara utrymme för innehåll. En navigeringspanel kan fungera för mindre frekventa avsnitt, men kontrollera att folk fortfarande kan hitta dem och återvända utan att gissa.
Planera för fönsterstorlek, orientering och plattformskonventioner. Apples aktuella riktlinjer för mänskligt gränssnitt beskriver flikfältet på iPhone som navigering på toppnivå och stöder en anpassningsbar presentation som flikfält eller sidofält på iPad. Material 3 kallar sitt kompakta mönster för navigeringsfält och erbjuder andra navigeringsformer när mer bredd finns tillgänglig. Dessa mönster delar ett syfte men är inte identiska komponenter; följ inbyggd placering, beteende och anpassning istället för att kopiera en plattforms krom till en annan.
Gör orientering och återhämtning pålitlig
Enbart ikoner gör navigering svårare att lära sig och kan vara otydliga för skärmläsare. Ge destinationer korta synliga etiketter, exponera det valda tillståndet semantiskt och se till att kontroller har tillgängliga namn och användbara träffområden. Kontrollera kontrasten i valda och omarkerade tillstånd, större text, lokalisering och höger-till-vänster-layouter. Testa med VoiceOver eller TalkBack och med tangentbords- eller switchnavigering där det stöds; fokus bör flyttas förutsägbart när en navigeringspanel öppnas, en destination väljs eller en vy avvisas.
Återhämtning är en del av navigeringen. Håll bakåt- och stängbeteende distinkt: Bakåt följer hierarkin, medan Stäng avslutar en tillfällig eller modal presentation. Bevara en användbar position och inmatade data när du byter toppnivåområden eller återgår från detaljer. När en destination är tom eller tillfälligt otillgänglig, håll dess plats stabil och förklara tillståndet istället för att tyst ta bort eller inaktivera navigering. För en destruktiv eller kostsam uppgift, gör returvägen tydlig innan användaren förbinder sig.
En praktisk navigationsrevision
Gå igenom appen med en verklig uppgift och upprepa sedan med tillgänglighetsfunktioner aktiverade. Registrera om människor kan identifiera det aktuella området, nå en frekvent destination och återhämta sig efter att ha gått fel. Jämför samma resa på en kompakt telefon och ett större fönster; en adaptiv layout bör bevara informationsarkitekturen när kontrollen ändrar form.
Använd skärmbiblioteket för att jämföra verkliga exempel på appsektioner och flöden, och utvärdera sedan varje mot produktens uppgifter. Det starkaste mönstret håller sin struktur läsbar när appen växer och gör returvägen tydlig efter ett avbrott.
- Kan en ny användare förklara toppnivåområdena enbart utifrån sina etiketter?
- Är jämbördiga destinationer lätt att växla mellan, med urval tydligt visat?
- Visar detaljskärmar en meningsfull titel och en förutsägbar tillbakaväg?
- Bevarar öppning och stängning av en navigeringspanel sammanhang och flyttar tillgänglighetsfokus på ett förnuftigt sätt?
- Förblir etiketter, mål, kontrast och valda tillstånd användbara med större text och hjälpmedel?
- Kan en person återvända utan att förlora utkastinmatning, rullningsposition eller en användbar plats i hierarkin?
- Anpassar strukturen sig till en större skärm utan att duplicera konkurrerande primärnavigering?
