Primer Android-navigatsioonis

Mis tahes sõiduk, mida keegi kasutab teie liidese stseenide vahel liikumiseks - see on navigeerimine

Niipea, kui lingite rakenduses kaks ekraani omavahel, on teil navigeerimine. See link - ükskõik mis see ka pole - on sõiduk, mis viib kasutajaid nende ekraanide vahel. Ja kuigi navigeerimise loomine on suhteliselt lihtne, pole kasutajatele õige navigeerimise loomine alati sirgjooneline. Selles postituses vaatleme mõnda levinumat Android-is kasutatavat navigeerimismustrit, kuidas need mõjutavad süsteemitasemel navigeerimist ning kuidas segada ja sobitada mustreid vastavalt teie liidesele ja kasutajatele.

Navigeerimise määratlemine

Enne kui uurida tavalisi navigeerimisharjumusi, tasub tagasi minna ja leida lähtepunkt oma rakenduses navigeerimisele mõtlemiseks.

Materjalidisaini spetsifikatsioonis on mõned suurepärased juhised navigeerimisstruktuuride määratlemisele lähenemiseks, kuid selle postituse jaoks võime kõik kokku keerata kahe lihtsa punktini:

  • Looge navigeerimine ülesannete ja sisu põhjal
  • Ehitage inimestele navigeerimine

Ülesannetel ja sisul põhineva navigeerimise loomine tähendab nende ülesannete lagundamist, mida inimesed täidavad ja mida nad näevad, ning nendevaheliste suhete kaardistamist. Tehke kindlaks, kuidas ülesanded üksteisega seotud on - millised ülesanded on enam-vähem olulised, millised ülesanded on õed-vennad, millised pesakesed üksteise sees ja millised ülesanded täidetakse enam-vähem sageli.

Seal tuleb kõne alla inimestele mõeldud navigeerimise ehitamine - teie liidest kasutavad inimesed saavad teile öelda, kas see töötab nende jaoks või mitte, ja teie navigeerimine peaks olema üles ehitatud sellele, et aidata neil teie rakenduses edu saavutada.

Kui teate, kuidas rakenduse ülesanded koos töötavad, saate otsustada, millist sisu kasutajad peavad mööda teed nägema ning millal ja kuidas seda esitada - see harjutus peaks olema hea alus otsustamiseks, millised mustrid vastavad teie rakenduse kogemusele kõige paremini.

Leidke üksikasjalikumad juhised navigeerimisega seotud ülesannete ja käitumisharjumuste jaotuse kohta Materjalide spetsifikatsioonist.

🗂 vahelehed

Definitsioon

Vahelehed pakuvad kiiret navigeerimist samas vanemkuvas olevate õdede-vendade vaadete vahel. Need on tasapinnalised, mis tähendab, et neid saab ringi liikuda, ja nad elavad laiendatavas, tuvastatavas sakiribal.

Vahelehed sobivad suurepäraselt seotud sisu filtreerimiseks, segmentimiseks või sügavuse tagamiseks. Sõltumatut sisutükki või oma sügava hierarhiaga sisu saab paremini teenindada muude navigeerimismustrite abil.

Siit leiate kõik üksikasjad vahelehtede kujundamise ja vahekaartide rakendamise kohta.

Vahelehed tegutsevad

Play muusika, Google+, Play kiosk

Play muusika (ülal, vasakul) kasutab vahekaarte muusikakogu sügavuse lisamiseks, korraldades sama üldist sisu erinevatel viisidel, et see hõlmaks erinevaid uurimisvahendeid.

Google+ (ülaosas, keskel) kasutab sakke kollektsioonide segmentimiseks - see on üks sisutüüp, mis viib rakenduses väga heterogeense sisuni.

Play kiosk (ülal, paremal) kasutab raamatukogu ekraanil sakke, et esitada sama teabe erinevaid komplekte - ühel vahekaardil on terviklik, mitmekihiline kollektsioon, teisel aga lühendatud pealkirjade komplekt.

Ajalugu

Vahelehed eksisteerivad ühel tasandil koos, sama vanemakraani sees. Seega ei tohiks vahekaartide vahel navigeerimine luua ajalugu ei süsteemi tagasi nupule ega rakenduse üles nupule.

Nav sahtlid

Definitsioon

Navigeerimissahtel on üldiselt vertikaalne paan, mis on kinnitatud lõuendi vasakpoolsesse serva. Sahtlid võivad kuvada ekraaniväliselt või sisse, püsivad või mitte, kuid neil on alati mõned ühised omadused.

Tavaliselt loetleb navigeerimissahtel vanemsihtkohad, kes on üksteisega kaaslased või õed-vennad. Navi-sahtlit saab kasutada rakendustes, millel on mitu peamist sihtkohta ja mõned unikaalsed toetavad sihtkohad, näiteks seaded või abi.

Kui ühendate sahtli mõne muu peamise navigatsioonikomponendiga - näiteks põhjanavigatsioon -, võib sahtel sisaldada sekundaarseid sihtkohti või olulisi sihtkohti, mida alumise navigeerimise hierarhias otseselt ei järgne.

Navi-sahtli kasutamisel võtke arvesse, milliseid sihtkohti te esitate - liiga paljude sihtkohtade või sihtkohtade lisamine, mis tähistavad rakenduse hierarhias erinevaid tasandeid, võib tekitada segadust.

Samuti pidage silmas nähtavust - sahtel võib olla hea nähtavuse vähendamiseks või navigeerimise tihendamiseks peamisest sisupiirkonnast eemal, kuid see võib olla ka puudus olenevalt sellest, kuidas teie rakenduses sihtkohad tuleb esitada ja neile juurde pääseda.

Siit leiate üksikasjalikud juhised sahtlite kavandamise ja rakendamise kohta siit.

Nav sahtlid töös

Play pood, Google'i kaamera, postkast

Play pood (ülal, vasakul) kasutab navigeerimissahtlit poe eri sektsioonide osutamiseks, millest igaüks on pühendatud erinevat tüüpi sisule.

Google'i kaamera (ülaosas, keskel) kasutab sahtleid sihtkohtade toetamiseks - need on enamasti sihtkohad, mis suurendavad pildistamise kogemust, ja lisaks tee sätetele.

Postkastis (ülal paremal) on laiendatav navigeerimissahtl, mis võib üsna pikaks venida. Ülaosas on peamised sihtkohad, mis esitavad teie e-posti erinevad segmendid, ja allpool on toetavad segmendid, mida nimetatakse kimpudeks.

Kuna sisendkausta navigeerimissahtlid võivad nii kaua aega minna, kuvatakse üksused „seaded” ja „abi ja tagasiside” püsivas lehel, millele on juurdepääs sahtli ükskõik kust.

Ajalugu

Kui rakendusel on konkreetne sihtkoht „Kodu”, peaksid Nav-sahtlid looma süsteemi tagasi-nupu ajaloo. Play poes on koduseks sihtkohaks kirjed Rakendused ja mängud, mis tegelikult annab kasutajale navigeerimise vahekaardil, et näha igat tüüpi esiletõstetud sisu. Nii loob Play pood ajaloo, et rakenduse muudest piirkondadest sellesse sihtkohta tagasi jõuda.

Ka Google'i kaamera viib kasutajad tagasi vaikimisi, esmasele pildistusrežiimile, millest on maha arvatud kõik täiendused.

Kanne „Alusta sõitmist“ suurendab peamist kaardivaadet

Sama kehtib ka Google Mapsi kohta (ülal) - iga sahtlis olev sihtkoht kuvatakse kas peamise kaardiekraani pealmise kihina või suurendusena, nii et tagasi-nupp viib meid tagasi puhta kiltkivi juurde.

Võite märgata, et Play pood (ülal) ei muuda sihtpunkti navigeerimisel tööriistariba navigeerimissahtli indikaatorit nupule “üles”. Põhjus on see, et sahtli peamised sihtkohad on rakenduse navigeerimishierarhias võrdsel tasemel. Kuna te ei liiku rakendusest sügavamale, kui valite sahtlist filmi ja teleri, ei saa te edasi liikuda. Olete endiselt tipptasemel, lihtsalt paralleelsel ekraanil.

Nav Alumine navi

Definitsioon

Androidis koosneb alumine navigeerimise komponent kolmest kuni viiest peamisest sihtkohast. Oluline on see, et „rohkem” pole sihtkoht. Samuti pole menüüd ega dialoogid.

Altpoolt navigeerimine toimib kõige paremini, kui teie rakendusel on piiratud arv erinevaid kõrgel tasemel sihtkohti (alumine navigatsioon ei tohiks kunagi kerida), millele peab olema kohe juurde pääseda. Alumise riba üks peamisi eeliseid on võimalus hüpata lapseekraanilt sõltumatule vanematekraanile kohe, navigeerimata kõigepealt praeguse vanema juurde.

Oluline on arvestada, et kuigi alumises ribas olevad sihtkohad peaksid rakenduse navigeerimishierarhias olema võrdsed, pole alumise riba üksused sarnased vahekaartidega ja neid ei tohiks sellisena esitada.

Sihtkoha vahel alumisel ribal pühkimine viitab suhetele sihtkohtade vahel, mida pole olemas. Iga sihtkoht peaks olema diskreetne vanem, mitte teiste sihtkohtade õde-vend. Kui teie rakenduses olevad sihtkohad on sarnased või nende sisu on sarnane, võivad need vahekaartide jaoks paremini sobida.

Siit leiate põhjaliku navigeerimise üksikasjalikumad juhendid ja siit üksikasjad rakenduse kohta.

Alumine navigeerimine tegevuses

Google Photos

Alumises navigatsioonis on lisaks põhimääratlusele huvitavaid kaalutlusi. Tõenäoliselt on kõige keerulisem arusaam sellest, kui püsiv alumine riba peaks olema. Nagu nii paljude kujundusotsuste puhul, on vastus: "see sõltub".

Tavaliselt püsib alumine riba kogu rakenduses, kuid on juhtumeid, mis õigustavad alumise riba peitmist. Kui kasutaja siseneb väga madalasse hierarhiasse - üheotstarbelistel ekraanidel, näiteks sõnumite koosseis - või kui rakendus soovib esitada sügavamale hierarhiasse sammu või kaks, siis võib alumine riba olla peidetud.

Google Photosis (ülal) kaob alumine navigatsioon albumitest. Albumid esitatakse hierarhias sekundaarse kihina ja ainus edasine navigeerimistoiming on foto avamine, mis ise avaneb albumi kasutajaliidese ülaosas. See teostus vastab alumise navigatsiooni peitmise ühe eesmärgi reeglile, pakkudes samal ajal eesmärki luua kõikehaaravam kogemus, kui kasutaja jõuab kõrgemale tasemele.

Täiendavad kaalutlused

Kui riba on püsiv kogu rakenduses, oleks järgmine loogiline kaalutlus käitumine ribade vahel sihtkohtade vahel hüppamisel. Kui kasutaja on mitmest kihist sügaval hierarhias, mis tuleneb ühest sihtpunktist, ja nad vahetavad teise sihtkoha ning seejärel lülituvad tagasi esimesse sihtkohta, mida nad peaksid nägema? Vanemkuva või lapseekraan, millelt nad pooleli jäid?

Teie rakendust kasutavad inimesed peaksid sellest otsusest teavitama. Üldiselt peaks elemendi koputamine alumises ribas minema otse seotud ekraanile, mitte hierarhia sügavamasse kihti, kuid nagu iga juhendi puhul - erinema eesmärgist.

Ajalugu

Alumine navigeerimine ei tohiks süsteemi tagasi nupu ajalugu luua. Põhjalikest navigatsioonisihtkohtadest tulenevate hierarhiatesse süvenedes saate luua süsteemi tagasi nupu ja rakenduse üles nupu ajaloo, kuid alumine riba võib toimida ka omamoodi ajaloolise navigatsioonina.

Alumises navigeerimisüksuses üksuse koputamine peaks teid viima otse seotud sihtkohta ja selle uuesti koputamisel peaks navigeerima tagasi vanemtasemele või värskendama vanemustaset, kui kasutaja on juba seal.

Navigation kontekstis navigeerimine

Definitsioon

Kontekstisisene navigeerimine koosneb mis tahes navigatsioonilisest interaktsioonist väljaspool ülalkirjeldatud komponente. See hõlmab näiteks nuppe, plaate, kaarte ja kõike muud, mis viib kasutaja mujale rakenduses.

Kontekstisisene navigeerimine on tavaliselt vähem lineaarne kui selgesõnaline navigeerimine - interaktsioonid võivad kasutaja transportida hierarhia kaudu, diskreetsete hierarhiate eri sammude vahel või rakendusest täielikult välja.

Siit leiate lisateavet kontekstis navigeerimise kohta.

Tegevuses kontekstis navigeerimine

Kell, Google ja Google'i kalender

Rakenduses Clock (ülal vasakul) on FAB; Google'i rakendus (ülal, keskel) tugineb peamiselt sisekaartidele paigutatud teabele; ja Google Calendar (ülal paremal) loob sündmuste jaoks paanid.

FAB-i aktiveerimine kellas (ülal, vasakul) viib teid maailmakella valimisekraanile, kui koputate ilmakaarti Google'i rakenduses (ülal, keskel), kuvatakse otsingutulemite lehel sõna "ilm" ja sündmuse paanil koputatakse Kalender (ülal paremal) viib teid selle sündmuse üksikasjadeni.

Nendes ekraanipiltides näeme ka erinevaid viise, kuidas kontekstis navigeerimine saab kasutajat transportida. Rakenduses Kell oleme kellast endast ühe taseme võrra allapoole, Google'i rakenduses oleme põhiekraani suurendanud ja kalendris oleme avanud täisekraani dialoogi.

Ajalugu

Kontekstisisese navigeerimise kaudu ajaloo loomiseks pole ühtegi kindlat reeglit. Ajaloo loomine sõltub täielikult sellest, millist kontekstisisest navigeerimist rakendus kasutab ja kuhu kasutaja viib. Kui pole täpselt teada, millist ajalugu tuleks luua, on hea teada, mida üles ja tagasi nupud üldiselt teevad.

Üles-, tagasi- ja sulgemisnupud

Tagasi, üles ja sulgemisnupud on kõik Androidi kasutajaliideses navigeerimiseks olulised, kuid neist saadakse sageli valesti aru. Kolmel nupul on UX vaatenurgast tegelikult üsna lihtne käitumine, nii et järgmiste reeglite meeldejätmine peaks teid aitama kõigist seganetest olukordadest.

  • Üles leitakse rakenduse tööriistaribal, kui kasutaja on rakenduse hierarhiast laskunud. See navigeerib hierarhiast ülespoole kronoloogilises järjekorras, kuni kasutaja jõuab vanemkuvale. Kuna üles nuppu ei kuvata vanemkuvadel, ei tohiks see rakendusest kunagi välja tulla.
  • Tagasi on süsteemi navigeerimisribal alati olemas. See navigeerib kronoloogiliselt tahapoole, sõltumata rakenduse hierarhiast, isegi kui eelmine kronoloogiline ekraan oli teise rakenduse sees. Samuti lükatakse tagasi ajutised elemendid, näiteks dialoogid, põhjalehed ja ülekatted.
  • Sulgemist kasutatakse tavaliselt liidese mööduvate kihtide loobumiseks või muudatuste tühistamiseks täisekraanidialoogis. Mõelge sündmuse üksikasjade ekraanile Google'i kalendris (näidatud allpool). Detailide ekraani ajutine olemus saab veelgi selgemaks suurematel ekraanidel. Sisendkastis (allpool) näitab postkastist sõnumile üleminek, et kiri on postkasti peal olev kiht, nii et sulgemisnupp on sobiv. Gmail (allpool) positsioneerib sõnumi rakenduse selgelt eristatava tasemena ja kasutab üles-nuppu.
Kalender, postkast ja Gmail

Siin viidatakse konkreetselt materjali spetsiifikast varukoopiale ja vastupidisele käitumisele.

Patterns Mustrite kombineerimine

Selle algsuse jooksul oleme näinud näiteid rakendustest, mis rakendavad edukalt kõiki erinevaid selgesõnalisi navigeerimise komponente. Paljudel neist näidetest õnnestub navigatsioonimustreid ka kombineerida, et moodustada kasutajatele mõistlik struktuur. Kokkuvõtmiseks vaatame läbi paar neist näidetest, pidades silmas segamist ja sobitamist.

Google+

Võib-olla on kõige ilmsemaks näiteks Google+ (ülal), mis seob kõiki meie poolt arutletud mustreid - vahekaarte, navigeerimissahtlit, põhjanavigatsiooni ja kontekstis navigeerimist.

Selle lagundamiseks on G + -s fookuses alumine navigatsioon. See annab juurdepääsu neljale tipptasemel sihtkohale. Vahelehed täiendavad kahte neist sihtkohtadest, segmenteerides nende sisu mõistlikesse kategooriatesse. Navi-sahtlis on muid sihtkohti, nii primaarseid kui ka sekundaarseid, kuhu pääseb harvemini.

Play pood

Play pood (ülal) kasutab peamiselt navigeerimissahtleid, sageli kontekstis navigeerimist ja aeg-ajalt vahekaarte.

Ülaltoodud kaadrites näeme sihtkohti, kuhu navigeerimissahtli kaudu jõutakse. Sahtl on nendel ekraanidel endiselt juurdepääsetav, kuna need on kõik peamised sihtkohad. Vahetult tööriistariba all näeme kiibisid, et liikuda filtreeritud sisu valikute juurde, mis on kontekstisisese navigeerimise näide. Rakenduste diagrammides kasutatakse vahekaarte, et sortida kogu kaardistatud kogu konkreetseteks segmentideks.

Google'i kalender

Google'i kalender (ülal) kasutab navigeerimissahtlit ja kontekstis navigeerimist ning kasutab mõlemat tõeliselt huvitaval viisil.

Kalendri sahtel on mittestandardne, seda kasutatakse enamasti kalendri täiendamiseks. Kalendrit ennast juhib laienev tööriistariba paneel ja värvilised paanid viivad kasutajad sündmuse üksikasjadeni.

Lisateavet navigeerimismustrite ühendamise kohta leiate siit.

Kas teil on veel küsimusi?

Navigeerimine on keeruline teema. Loodetavasti loob see praimeri hea aluse Androidi ühiste navigeerimispõhimõtete mõistmiseks. Kui teil on endiselt küsimusi, jätke vastus või jälgige meie esimest #AskMaterial seanssi koos materjali kujundamise ja disaini suhete meeskondadega Twitteris siin!