En primer til Android-navigation

Ethvert køretøj nogen bruger for at flytte mellem scener i din interface - det er navigation

Så snart du forbinder to skærme sammen i en app, har du navigation. Dette link - uanset hvad det måtte være - er det køretøj, der fører brugere mellem disse skærme. Og selv om det er relativt enkelt at oprette navigation, er det ikke altid lige at oprette den rigtige navigation til dine brugere. I dette indlæg tager vi et kig på nogle af de mest almindelige navigationsmønstre, der bruges på Android, hvordan de påvirker navigationsniveauet på systemet og hvordan man blander og matcher mønstre, der passer til din interface og dine brugere.

Definition af navigation

Før du graver ned i fælles navigationsmønstre, er det værd at gå tilbage og finde et udgangspunkt for at tænke over navigation i din app.

Material Design spec har nogle gode vejledninger til, hvordan man nærmer sig definition af navigationsstrukturer, men med henblik på dette indlæg kan vi koge alt ned til to enkle punkter:

  • Opbyg navigation baseret på opgaver og indhold
  • Lav navigation for mennesker

At opbygge navigation baseret på opgaver og indhold betyder at nedbryde, hvilke opgaver folk vil udføre, og hvad de vil se undervejs, og kortlægge forholdet mellem de to. Bestem, hvordan opgaver forholder sig til hinanden - hvilke opgaver der er mere eller mindre vigtige, hvilke opgaver er søskende, hvilke opgaver der er inde i hinanden, og hvilke opgaver der udføres mere eller mindre ofte.

Det er her, bygning af navigation for folk kommer ind - de mennesker, der bruger din interface, kan fortælle dig, om det fungerer for dem eller ej, og din navigation skal være bygget op omkring, så de får succes med din app.

Når du ved, hvordan opgaverne i din app fungerer sammen, kan du beslutte, hvilket indhold brugere har brug for at se undervejs, og hvornår og hvordan de skal præsenteres - denne øvelse skal give et godt grundlag for at beslutte, hvilke mønstre der bedst tjener din app's oplevelse.

Find mere detaljeret vejledning om opdeling af opgaver og adfærd til navigation i materialespecifikationen.

🗂 Faner

Definition

Faner giver hurtig navigation mellem søskendevisninger på den samme overordnede skærm. De er coplanar, hvilket betyder, at de kan svejses rundt, og de lever i en udvidelig, identificerbar fanebjælke.

Faner er gode til filtrering, segmentering eller tilvejebringelse af dybde til relaterede stykker indhold. Urelaterede stykker indhold eller indhold med sit eget dybe hierarki kan muligvis betjenes bedre ved hjælp af andre navigationsmønstre.

Find alle detaljer om design af faner her og om implementering af faner her.

Faner i aktion

Spil musik, Google+, Play kiosk

Afspil musik (ovenfor, til venstre) bruger faner til at tilføje dybde til musikbiblioteket og organisere det samme generelle indhold på forskellige måder for at imødekomme forskellige udforskningsmetoder.

Google+ (ovenfor, midt) bruger faner til at segmentere samlinger, en enkelt indholdstype, der fører til meget heterogent indhold dybere i appen.

Play Newsstand (ovenfor, til højre) bruger faner på biblioteksskærmen til at præsentere forskellige sæt af samme information - den ene fane viser en holistisk, flerlags samling, mens den anden viser et kondenseret sæt overskrifter.

Historie

Faner findes på et niveau sammen inden i den samme overordnede skærm. Så at navigere mellem faner bør ikke oprette historie hverken til systemets tilbage-knap eller til appens op-knap.

Nav-skuffer

Definition

Navigationsskuffen er generelt en lodret rude fastgjort til lærredets venstre kant. Skuffer kan manifestere off-screen eller på, vedvarende eller ej, men de har altid nogle fælles egenskaber.

Navskuffen viser typisk forældredestinationer, der er kammerater eller søskende med hinanden. En nav-skuffe kan bruges i apps med flere primære destinationer og nogle unikke understøttende destinationer som indstillinger eller hjælp.

Hvis du kombinerer skuffen med en anden primær navigationskomponent - for eksempel nederste nav - kan skuffen indeholde sekundære destinationer eller vigtige destinationer, der ikke følger direkte i hierarkiet fra den nederste nav.

Når du bruger nav-skuffen, skal du være opmærksom på, hvilken slags destinationer du præsenterer - at tilføje for mange destinationer eller destinationer, der repræsenterer forskellige niveauer i appens hierarki, kan blive forvirrende.

Vær også opmærksom på synlighed - skuffen kan være god til at reducere synligheden eller komprimere navigation væk fra hovedindholdsområdet, men det kan også være en ulempe afhængigt af, hvordan destinationerne i din app skal præsenteres og fås adgang til.

Få detaljeret vejledning om design af nav-skuffe her og implementering her.

Nav skuffer i aktion

Play Store, Google Camera, Indbakke

Play Store (ovenfor, til venstre) bruger nav-skuffen til at pege på forskellige sektioner i butikken, der hver især er dedikeret til en anden type indhold.

Google Camera (ovenfor, centrum) bruger skuffen til understøttelse af destinationer - dette er for det meste destinationer, der øger optagelsesoplevelsen plus en sti til indstillinger.

Indbakke (ovenfor til højre) har en udvidelig nav-skuffe, der kan blive ret lang. Øverst er primære destinationer, der præsenterer forskellige segmenter af din e-mail, og under dem understøtter segmenter, der kaldes bundter.

Fordi nav-skuffen i indbakke kan blive så lang, vises "indstillinger" og "hjælp & feedback" -emner på et vedvarende ark, der er tilgængeligt hvor som helst i skuffen.

Historie

Nav-skuffer skal generelt oprette historie til systemets tilbage-knap, når appen har en markant "Hjem" -destination. I Play Store er hjemmedestinationen Apps & Games-indgangen, der faktisk giver brugeren en fanenavigation for at se fremhævet indhold af alle typer. Så Play Store opretter historie for at komme tilbage til denne destination fra andre områder af appen.

Google Camera bringer ligeledes brugerne tilbage til standard, primær optagefunktion minus enhver forøgelse.

Posten

Det samme gælder Google Maps (ovenfor) - enhver destination i skuffen præsenteres som enten et lag oven på eller som en forøgelse til den primære kortskærm, så tilbage-knappen bringer os tilbage til en ren skifer.

Du kan bemærke, at Play Store (ovenfor) ikke ændrer nav-skuffe-indikatoren i værktøjslinjen til en “op” -knap, når du navigerer til en destination. Dette skyldes, at de primære destinationer i skuffen er på et lige niveau i appens navigationshierarki. Da du ikke bevæger dig dybere ind i appen ved at vælge "Film & TV" fra skuffen, kan du ikke gå længere op. Du er stadig på øverste niveau, bare på en parallel skærm.

Nederste nav

Definition

På Android består den nederste nav-komponent af mellem tre og fem primære destinationer. Vigtigere er, at "mere" ikke er en destination. Hverken er menuer eller dialoger.

Bundnavigation fungerer bedst, når din app har et begrænset antal forskellige destinationer på øverste niveau (nederste nav skal aldrig rulle), der skal være øjeblikkeligt tilgængelig. En af de vigtigste fordele ved en "bundlinje" er at være i stand til at hoppe fra en børneskærm til en ikke-relateret forælderskærm med det samme uden først at navigere tilbage til den nuværende forælder.

Det er vigtigt at bemærke, at selvom destinationer i den nederste bjælke alle skal være ens i appens navigationshierarki, er emner i den nederste bjælke ikke coplanar, som fanerne er, og de bør ikke præsenteres som sådan.

Strygning mellem destinationer i den nederste bjælke antyder et forhold mellem destinationer, der ikke findes. Hver destination skal være en diskret forælder og ikke et søskende til de andre destinationer. Hvis destinationerne i din app er ens eller har lignende indhold, kan de være bedre egnet til faner.

Find mere detaljeret designvejledning til nederste nav her og implementeringsdetaljer her.

Nederste nav i aktion

Google Fotos

Nederste nav har nogle interessante overvejelser ud over dens grundlæggende definition. Den mest komplicerede er forestillingen om, hvor vedvarende den nederste bjælke skal være. Som med så mange designbeslutninger er svaret "det afhænger."

Typisk forbliver bundlinjen på tværs af hele appen, men der er nogle tilfælde, der kan retfærdiggøre skjulning af bundlinjen. Hvis brugeren går ind i et meget lavt hierarki - på skærme med en enkelt formål som meddelelsens sammensætning - eller hvis appen vil præsentere en mere fordybende oplevelse et trin eller to dybt ind i hierarkiet, kan bundlinjen muligvis være skjult.

I Google Fotos (ovenfor) forsvinder den nederste nav inden i albums. Album præsenteres som et sekundært lag i hierarkiet, og den eneste yderligere navigationshandling er at åbne et foto, som selv åbnes oven på albumgrænsefladen. Denne implementering tilfredsstiller "enkeltformål" -reglen for at skjule den nederste nav, mens den tjener målet om at skabe en mere fordybende oplevelse, når brugeren kommer over det øverste niveau.

Yderligere overvejelser

Hvis linjen er vedvarende på tværs af hele appen, ville den næste logiske overvejelse være adfærd, når man hopper mellem destinationer, der bruger linjen. Hvis brugeren er flere lag dybt i et hierarki, der stammer fra en destination, og de skifter til en anden destination og derefter skifter tilbage til den første, hvad skal de da se? Forældreskærmen eller børneskærmen, som de slap fra?

Denne beslutning skal informeres af dem, der bruger din app. Generelt skal tappe på et element i bundlinjen gå direkte til den tilknyttede skærm, ikke til et dybere lag af hierarkiet, men som med enhver retningslinje - afvig med formålet.

Historie

Bundnavne skal ikke oprette historik til systemets tilbage-knap. At gå dybere ind i hierarkier, der stammer fra bundnav-destinationer, kan skabe historie for system-tilbage-knappen og appens op-knap, men den nederste bjælke kan også fungere som sin egen slags historisk navigation.

Hvis du trykker på et element i nederste nav, skal du tage dig direkte til den tilknyttede destination, og trykke på det igen skal navigere tilbage til overordnet niveau eller opdatere overordnet niveau, hvis brugeren allerede er der.

Navigation Navigation i kontekst

Definition

In-context navigation består af enhver navigationsinteraktion uden for de komponenter, der er beskrevet ovenfor. Dette inkluderer ting som knapper, fliser, kort og alt andet, der tager brugeren et andet sted i en app.

Navigation i kontekst er typisk mindre lineær end eksplicit navigation - interaktioner kan transportere brugeren gennem et hierarki, mellem forskellige trin i diskrete hierarkier eller helt ud af appen.

Se efter mere vejledning til navigation i konteksten her.

In-context navigation i handling

Ur, Google og Google Kalender

I ur-appen (ovenfor, til venstre) er der en FAB; Google-appen (ovenfor, midten) er primært afhængig af oplysninger, der er arrangeret inden i kortene; og Google Kalender (ovenfor til højre) opretter fliser til begivenheder.

Aktivering af FAB i uret (ovenfor, til venstre) bringer dig til et valg af verdensurskærm, ved at trykke på vejrkortet i Google-appen (ovenfor, centrum) bringer du dig til en søgeresultatside for “vejr” og trykke på en begivenhedsflise i Kalender (ovenfor, til højre) fører dig til den begivenheds detaljer.

Vi ser også i disse skærmbilleder de forskellige måder i forbindelse med navigation at transportere brugeren. I ur-appen er vi et niveau nede fra selve uret, i Google-appen endte vi med en forøgelse af hovedskærmen, og i Kalender har vi åbnet en fuldskærmsdialog.

Historie

Der er ingen hård regel for at oprette historie via navigation i konteksten. Hvorvidt historie oprettes er helt afhængig af, hvilken slags navigation i konteksten appen bruger, og hvor brugeren tages. I tilfælde, hvor det ikke er klart nøjagtigt, hvilken slags historie der skal oprettes, er det godt at vide, hvad op- og tilbage-knapperne generelt gør.

Buttons Op, tilbage og luk knapper

Knapperne tilbage, op og luk er alle vigtige for at navigere i en Android-brugergrænseflade, men misforstås ofte. De tre knapper har faktisk ret simpelt opførsel fra et UX-perspektiv, så at huske på følgende regler skulle hjælpe dig med at få dig ud af enhver forvirrende situation.

  • Op findes i appens værktøjslinje, når brugeren er faldet ned efter appens hierarki. Den navigerer tilbage i hierarkiet i kronologisk rækkefølge, indtil brugeren når en forældreskærm. Da op-knappen ikke vises på overordnede skærme, bør den aldrig føre ud af en app.
  • Tilbage er altid til stede i systemnavlinjen. Den navigerer bagud kronologisk uanset apphierarki, selvom den forrige kronologiske skærm var inde i en anden app. Det afviser også midlertidige elementer som dialoger, bundark og overlejringer.
  • Luk bruges typisk til at afvise kortvarige lag i grænsefladen eller kassere ændringer i en fuldskærmsdialog. Overvej skærmen med begivenhedsdetaljer i Google Kalender (vist nedenfor). Den midlertidige karakter af detaljeskærmen bliver endnu mere klar på større skærme. I indbakke (nedenfor) antyder overgangen fra indbakke til besked, at beskeden er et lag øverst på indbakken, så luk-knappen er passende. Gmail (nedenfor) placerer beskeden som et distinkt niveau af appen og bruger op-knappen.
Kalender, indbakke og Gmail

Se specifikt back-up-up-opførsel i materialespecifikationen her.

Kombination af mønstre

I denne primer har vi set eksempler på apps, der med succes implementerer hver af de forskellige eksplicitte navigationskomponenter. Mange af disse eksempler lykkes også med at kombinere navigationsmønstre til at danne en struktur, der giver mening for brugerne. Lad os gennemgå et par af disse eksempler med det øje at blande og matche for at afslutte det.

Google+

Det mest åbenlyse eksempel er Google+ (ovenfor), der blander alle de mønstre, vi har diskuteret - faner, en nav-skuffe, bundnavigation og in-context navigation.

For at nedbryde det er den nederste nav i fokus i G +. Det giver adgang til fire destinationer på øverste niveau. Faner forøger to af disse destinationer ved at opdele deres indhold i fornuftige kategorier. Navskuffen indeholder andre destinationer, både primære og sekundære, som der muligvis er adgang til mindre ofte.

Legetøjsforretning

Play Store (ovenfor) bruger primært en nav-skuffe, bruger ofte in-context navigation og bruger lejlighedsvis faner.

I billederne ovenfor ser vi destinationer nået gennem nav-skuffen. Skuffen er stadig tilgængelig på disse skærme, fordi de alle er primære destinationer. Lige under værktøjslinjen ser vi chips til at navigere til valg af filtreret indhold, et eksempel på navigation i konteksten. I appdiagrammer bruges faner til at sortere hele det kartlagte bibliotek i specifikke segmenter.

Google Kalender

Google Kalender (ovenfor) bruger en nav-skuffe og navigation i konteksten og bruger begge på virkelig interessante måder.

Skuffen i kalender er ikke-standard, bruges mest til at udvide kalenderen. Selve kalenderen styres af et ekspanderende værktøjslinjepanel, og farverige fliser fører brugerne til begivenhedsdetaljer.

Læs mere om at kombinere navigationsmønstre her.

Har du flere spørgsmål?

Navigation er et komplekst emne. Forhåbentlig giver denne primer et godt grundlag for at forstå almindelige navigationsprincipper på Android. Hvis du stadig har spørgsmål, skal du give et svar eller indhente vores første #AskMaterial-session med teamet Material Design & Design Relations på Twitter her!