Primer Android-navigoinnissa

Kaikki ajoneuvot, joita joku käyttää liikkua kohtausten välillä käyttöliittymässäsi - se on navigointi

Heti kun linkität kaksi näyttöä toisiinsa sovelluksessa, sinulla on navigointi. Tämä linkki - riippumatta siitä, mikä se voi olla - on ajoneuvo, joka kuljettaa käyttäjiä näiden näyttöjen välillä. Ja vaikka navigoinnin luominen on suhteellisen yksinkertaista, oikean navigoinnin luominen käyttäjillesi ei ole aina suoraviivaista. Tässä viestissä tarkastellaan joitain yleisimpiä Android-navigointimalleja, miten ne vaikuttavat järjestelmätason navigointiin ja miten sekoittaa ja sovittaa malleja käyttöliittymän ja käyttäjien tarpeisiin.

Navigation️ Navigoinnin määritteleminen

Ennen kuin harkitset yleisiä navigointimalleja, on syytä astua taaksepäin ja löytää lähtökohta harkitsemaan navigointia sovelluksessasi.

Material Design -spesifikaatiossa on hienoja ohjeita navigointirakenteiden määrittelemiseen, mutta tätä viestiä varten voimme keittää kaiken kahteen yksinkertaiseen pisteeseen:

  • Rakenna navigointi tehtävien ja sisällön perusteella
  • Rakenna navigointi ihmisille

Navigoinnin rakentaminen tehtävien ja sisällön perusteella tarkoittaa erittelemistä, mitä tehtäviä ihmiset suorittavat ja mitä he näkevät matkan varrella, sekä näiden kahden välisten suhteiden kartoittamista. Selvitä, miten tehtävät liittyvät toisiinsa - mitkä tehtävät ovat enemmän tai vähemmän tärkeitä, mitkä tehtävät ovat sisaruksia, mitkä pesivät sisäkkäin ja mitkä tehtävät suoritetaan enemmän tai harvemmin.

Siellä tapahtuu suunnistuksen rakentaminen ihmisille - käyttöliittymääsi käyttävät ihmiset voivat kertoa, toimiiko se heidän hyväkseen, ja navigoinnin tulisi rakentaa ympärille, jonka avulla he voivat menestyä sovelluksessasi.

Kun tiedät, kuinka sovelluksesi tehtävät toimivat yhdessä, voit päättää, minkä sisällön käyttäjien on näytettävä matkalla ja milloin ja miten se on esitettävä - tämän tehtävän pitäisi olla hyvä perusta päättää, mitkä kuviot palvelevat parhaiten sovelluksesi kokemusta.

Löydä tarkempia ohjeita navigointiin liittyvien tehtävien ja käyttäytymisten jakautumisesta Materiaalispesifikaatiosta.

Välilehdet

Määritelmä

Välilehdet tarjoavat nopean navigoinnin sisaruksenäkymien välillä saman vanhemman näytön sisällä. Ne ovat tasomaisia, mikä tarkoittaa, että niitä voidaan liikuttaa, ja he asuvat laajennettavassa, tunnistettavassa välilehtipalkissa.

Välilehdet sopivat hyvin suodattamiseen, segmentointiin tai syvyyden tarjoamiseen liittyvään sisältöön. Epäyhteydetöntä sisältöä tai omaa syvää hierarkiaansa omaavaa sisältöä voidaan palvella paremmin käyttämällä muita navigointimalleja.

Löydä kaikki tiedot välilehtien suunnittelusta täältä ja välilehtien toteuttamisesta täältä.

Välilehdet toiminnassa

Soita musiikkia, Google+, Play Lehtikioski

Play Music (yllä, vasemmalla) lisää välilehtiä syvyyden lisäämiseen musiikkikirjastoon järjestämällä saman yleisen sisällön eri tavoin erilaisille tutkimuskeinoille.

Google+ (yllä, keskellä) käyttää välilehtiä kokoelmien segmentoimiseksi. Yksi sisältötyyppi johtaa erittäin heterogeeniseen sisältöön sovelluksen syvemmälle.

Play Lehtikioski (yllä, oikealla) käyttää kirjaston näytön välilehtiä esittämään saman tiedon eri sarjoja - yksi välilehti esittelee kokonaisvaltaisen, monikerroksisen kokoelman, kun taas toinen näyttää tiivistetyn otsikkojoukon.

Historia

Välilehdet ovat yhdellä tasolla yhdessä saman vanhemman näytön sisällä. Joten välilehtien välillä selaamisen ei pitäisi luoda historiaa joko järjestelmän takaisin-painikkeelle tai sovelluksen ylös-painikkeelle.

Navigointilaatikot

Määritelmä

Navigointilaatikko on yleensä pystysuora ruutu, joka on kiinnitetty kankaan vasempaan reunaan. Laatikot voivat näkyä näytön ulkopuolella tai päällä, pysyviä tai pysyviä, mutta niillä on aina joitain yhteisiä ominaisuuksia.

Tyypillisesti navigointilaatikossa luetellaan vanhemmat kohteet, jotka ovat ikätovereita tai sisaruksia keskenään. Navigointilaatikkoa voidaan käyttää sovelluksissa, joissa on useita ensisijaisia ​​kohteita ja joitain yksilöllisiä tukikohteita, kuten asetukset tai ohje.

Jos yhdistät laatikon toiseen ensisijaiseen navigointikomponenttiin - esimerkiksi alanavigointilaatikkoon -, vetolaatikko voi sisältää toissijaisia ​​kohteita tai tärkeitä kohteita, joita ei seuraa suoraan hierarkiassa alanavigoinnista.

Kun käytät navigointilaatikkoa, ole tietoinen siitä, millaisia ​​kohteita esität - liian monen määränpään tai määränpään lisääminen sovelluksen hierarkian eri tasoille lisäämällä voi saada hämmentävää.

Ole tietoinen myös näkyvyydestä - laatikko voi olla hyvä vähentämään näkyvyyttä tai tiivistämään navigointia pääsisältöalueelta, mutta se voi olla myös haittapuoli riippuen siitä, kuinka sovelluksesi kohteet on esitettävä ja käsiksi.

Täältä löydät yksityiskohtaiset ohjeet navigointilaatikoiden suunnittelusta ja toteutuksesta.

Nav-laatikot toiminnassa

Play Kauppa, Google Kamera, Saapuneet

Play Kauppa (yllä, vasen) käyttää navigointilaatikkoa osoittamaan kaupan eri osioita, joista kukin on omistettu erityyppiselle sisällölle.

Google-kamera (yllä, keskellä) käyttää laatikkoa kohteiden tukemiseen - nämä ovat useimmiten kohteita, jotka parantavat sieppauskokemusta, ja polku asetuksiin.

Saapuneet-kansiossa (yllä, oikealla) on laajennettava navigointilaatikko, joka voi kestää melko kauan. Yläosassa on ensisijaisia ​​kohteita, jotka esittävät sähköpostisi eri segmentit, ja niiden alapuolella ovat tukisegmentit, nimeltään niput.

Koska Saapuneet-kansion navigointilaatikko voi kestää niin kauan, ”asetukset” ja “ohje ja palaute” -kohdat esitetään pysyvänä arkkina, johon pääsee mistä tahansa laatikon kohdasta.

Historia

Nav-laatikoiden tulisi yleensä luoda historia järjestelmän takaisin-painikkeelle, kun sovelluksella on selkeä ”Koti” -kohde. Play Kaupassa kotikohde on Sovellukset ja pelit, joka oikeastaan ​​antaa käyttäjälle välilehden navigoinnin nähdäksesi kaiken tyyppisen korostetun sisällön. Joten Play Kauppa luo historiaa palatakseen määränpäähän sovelluksen muilta alueilta.

Google Camera vie käyttäjän myös takaisin oletusasetukseen, ensisijaiseen sieppaustilaan vähennettynä kaikilla lisäyksillä.

”Aloita ajo” -kohta lisää ensisijaista karttanäkymää

Sama koskee Google Mapsia (yllä) - mikä tahansa laatikossa oleva kohde esitetään joko pääkerroksena tai suurennuksena ensisijaiselle karttanäytölle, joten takaisin-painike tuo meidät takaisin puhtaalle liuskalle.

Saatat huomata, että Play Kauppa (yllä) ei muuta työkalurivin navigointilaatikon osoitinta “ylös” -painikkeelle, kun navigoit määränpäähän. Tämä johtuu siitä, että laatikon ensisijaiset kohteet ovat samalla tasolla sovelluksen navigointihierarkiassa. Koska et siirry syvemmälle sovellukseen valitsemalla “Elokuvat ja TV” laatikosta, et voi mennä pidemmälle. Olet edelleen ylimmällä tasolla, vain rinnakkaisnäytöllä.

Nav Pohjanavigointi

Määritelmä

Android-käyttöjärjestelmässä alaosa nav-komponentti koostuu kolmesta viiteen ensisijaiseen kohteeseen. Tärkeää on, että ”lisää” ei ole määränpää. Valikot eivät ole myöskään valintaikkunat.

Pohjanavigointi toimii parhaiten, kun sovelluksessasi on rajoitettu määrä erilaisia ​​korkean tason kohteita (alanavigoinnin ei tulisi koskaan vierittää), joiden on oltava heti käytettävissä. Yksi "alapalkin" tärkeimmistä eduista on kyky siirtyä alaruudulta riippumattomaan vanhemmuusnäyttöön heti, navigoimatta takaisin nykyiseen vanhempaan.

On tärkeätä huomata, että vaikka alareunan palkkien kaikkien tulee olla yhtä suuret sovelluksen navigointihierarkiassa, alareunan kohteet eivät ole samansuuntaisia ​​välilehtien tapaan, joten niitä ei tule esittää sellaisenaan.

Siirtyminen määränpään välillä alapalkissa viittaa suhteeseen kohteiden välillä, joita ei ole olemassa. Jokaisen määränpään tulee olla erillinen vanhempi, ei sisaruksen muista kohteista. Jos sovelluksesi kohteet ovat samanlaisia ​​tai sisältävät samanlaista sisältöä, ne saattavat sopia paremmin välilehdille.

Löydä tarkemmat pohjanavigoinnin suunnitteluohjeet täältä ja toteutustiedot täältä.

Pohjanavigointi toiminnassa

Google-kuvat

Pohjanavigoinnissa on mielenkiintoisia näkökohtia, jotka ovat sen perusmäärittelyn ulkopuolella. Todennäköisesti monimutkaisin on käsitys siitä, kuinka pysyvän pohjapalkin tulisi olla. Kuten niin monissa suunnittelupäätöksissä, vastaus on ”se riippuu”.

Tyypillisesti alapalkki pysyy koko sovelluksen ajan, mutta on joitain tapauksia, jotka voivat perustella alapalkin piilottamisen. Jos käyttäjä siirtyy erittäin matalaan hierarkiaan - yksikäyttöön tarkoitetuilla näytöillä, kuten viestin koostumuksella - tai jos sovellus haluaa esitellä syvemmälle hierontaan askeleen tai kaksi syvällisempää kokemusta, alapalkki voi olla piilotettu.

Google-kuvissa (yllä) alanavigointi katoaa albumeista. Albumit esitetään hierarkiassa toissijaisena kerroksena, ja ainoa lisätoiminto on kuvan avaaminen, joka itsessään aukeaa albumin käyttöliittymän yläpuolelle. Tämä toteutus täyttää "yhden käyttötarkoituksen" säännön pohjanavigoinnin piilottamisesta samalla kun tavoitteena on luoda entistä syvällisempi kokemus, kun käyttäjä pääsee ylemmälle tasolle.

Muita huomioita

Jos palkki on pysyvä koko sovelluksen ajan, seuraava looginen huomio olisi käyttäytyminen hyppäämällä kohteiden välillä palkin avulla. Jos käyttäjä on useita kerroksia syvässä hierarkiassa, joka johtuu yhdestä kohdesta, ja hän vaihtaa toiseen määränpäähän ja sitten takaisin ensimmäiseen, mitä heidän pitäisi nähdä? Vanhemman tai lapsen näytön, josta he lopettivat?

Sovelluksesi käyttäjien tulee ilmoittaa tästä päätöksestä. Yleensä napauttamalla kohdetta alapalkissa tulisi mennä suoraan siihen liittyvälle näytölle, ei hierarkian syvemmälle kerrokselle, mutta kuten kaikissa ohjeissa - poiketa tarkoituksesta.

Historia

Pohjanavigoinnin ei pitäisi luoda historiaa järjestelmän takaisin-painikkeelle. Menemällä syvemmälle hierarkioihin, jotka perustuvat navigointikohdista alhaalta, voidaan luoda historia järjestelmän takaisin-painikkeelle ja sovelluksen ylös-painikkeelle, mutta alapalkki voi toimia myös omanlaisena historiallisena navigointina.

Napauttamalla kohdetta alanavigointivälineessä, vie sinut suoraan siihen liittyvään määränpäähän, ja napauttamalla sitä uudelleen, sinun pitäisi siirtyä takaisin vanhemmustasolle tai päivittää vanhemmustasolle, jos käyttäjä on jo siellä.

Navigation Navigointi kontekstiyhteydessä

Määritelmä

Kontekstin sisällä tapahtuva navigointi koostuu kaikesta navigoinnin vuorovaikutuksesta yllä kuvattujen osien ulkopuolella. Tähän sisältyy painikkeita, laattoja, kortteja ja kaikkea muuta, mikä vie käyttäjän muualle sovellukseen.

Kontekstin sisäinen navigointi on tyypillisesti vähemmän lineaarista kuin eksplisiittinen navigointi - vuorovaikutukset voivat kuljettaa käyttäjän hierarkian kautta, erillisten hierarkioiden eri vaiheiden välillä tai kokonaan sovelluksesta.

Etsi täältä lisää ohjeita kontekstin sisäiseen navigointiin.

Integroitu navigointi toiminnassa

Kello, Google ja Google-kalenteri

Kello-sovelluksessa (yllä, vasemmalla) on FAB; Google-sovellus (yllä, keskellä) luottaa ensisijaisesti sisäkortteihin järjestettyihin tietoihin; ja Google-kalenteri (yllä, oikealla) luo laattoja tapahtumiin.

FAB: n aktivoiminen kellossa (yllä, vasen) tuo sinut maailmankellon valintanäyttöön, napauttamalla sääkorttia Google-sovelluksessa (yllä, keskellä) vie sinut hakutulossivulle ”sää” ja napauttamalla tapahtumapaikkaa Kalenteri (yllä, oikealla) vie sinut tapahtuman yksityiskohtiin.

Näemme myös näissä ruutukuvissa erilaiset tapoja kontekstin selaamisen avulla kuljettaa käyttäjää. Kello-sovelluksessa olemme yhden tason päässä itse kellasta, Google-sovelluksessa olemme päätyneet olennaisesti päänäytön suurentamiseen, ja Kalenterissa olemme avanneet koko näytön valintaikkunan.

Historia

Historiaa ei voi luoda kontekstinavigoinnin avulla. Historia luodaan täysin riippuen siitä, millaista kontekstissa tapahtuvaa navigointia sovellus käyttää ja mihin käyttäjä viedään. Tapauksissa, joissa ei ole selvää, millainen historia tulisi luoda, on hyvä tietää, mitä ylös- ja takaisin-painikkeet yleensä tekevät.

Ylös, takaisin ja sulje painikkeet

Takaisin-, ylös- ja sulkemispainikkeet ovat kaikki tärkeitä liikkuessasi Android-käyttöliittymässä, mutta ymmärretään usein väärin. Kolmella painikkeella on käytännössä melko yksinkertainen käyttäytyminen UX-näkökulmasta, joten seuraavien sääntöjen muistamisen pitäisi auttaa sinua pääsemään pois hämmentävästä tilanteesta.

  • Ylös löytyy sovelluksen työkaluriviltä, ​​kun käyttäjä on laskeutunut sovelluksen hierarkiaan. Se navigoi hierarkiassa taaksepäin aikajärjestyksessä, kunnes käyttäjä saavuttaa vanhemman näytön. Koska ylös-painiketta ei näy vanhemmissa näytöissä, sen ei tulisi koskaan johtaa sovelluksesta.
  • Takaisin on aina läsnä järjestelmän navigointipalkissa. Se navigoi taaksepäin aikajärjestyksessä sovellushierarkiasta riippumatta, vaikka edellinen aikajärjestysnäyttö oli toisen sovelluksen sisällä. Se myös hylkää väliaikaiset elementit, kuten valintaikkunat, pohja-arkit ja peittokuvat.
  • Sulkemista käytetään tyypillisesti rajapinnan ohimenevien kerrosten hylkäämiseen tai muutosten hylkäämiseen koko näytön valintaikkunassa. Tarkastele tapahtuman yksityiskohtien näyttöä Google-kalenterissa (esitetty alla). Yksityiskohtaisen näytön väliaikainen luonne tulee entistä selvemmäksi suuremmissa näytöissä. Saapuneet-kansiossa (alla) siirtyminen postilaatikosta viestiin ehdottaa, että viesti on kerros postilaatikon päällä, joten sulkemispainike on sopiva. Gmail (alla) sijoittaa viestin sovelluksen erilliseksi tasoksi ja käyttää ylös-painiketta.
Kalenteri, Saapuneet ja Gmail

Katso tässä materiaalispesifikaation varmuuskopiointikäyttäytymistä.

Patterns Kuvioiden yhdistäminen

Koko tämän alustan aikana olemme nähneet esimerkkejä sovelluksista, jotka toteuttavat onnistuneesti jokaisen eri nimenomaisen navigointikomponentin. Monet näistä esimerkeistä onnistuvat myös yhdistämään navigointimalleja käyttäjille järkevän rakenteen muodostamiseksi. Kääritäkäämme tarkistamaan muutama esimerkki näistä silmäyksellä kohti sekoittamista ja sovittamista.

Google+

Ehkä ilmeisin esimerkki on Google+ (yllä), joka sekoittaa kaikki keskustellamme mallit - välilehdet, navigointilaatikko, alanavigointi ja kontekstissa tapahtuva navigointi.

Hajottaaksesi sen, pohjanavigointi on G +: n painopiste. Se tarjoaa pääsyn neljään ylimmän tason määränpäähän. Välilehdet täydentävät kahta näistä kohteista segmentoimalla niiden sisältö järkeviin luokkiin. Navigointilaatikko sisältää muita kohteita, sekä ensisijaisia ​​että toissijaisia, joihin voidaan päästä harvemmin.

Pelikauppa

Play Kauppa (yllä) käyttää pääasiassa navigointilaatikkoa, käyttää usein kontekstissa tapahtuvaa navigointia ja joskus välilehtiä.

Yllä olevissa kuvissa näemme kohteet, jotka on saavutettu navigointilaatikon kautta. Laatikko on edelleen käytettävissä näillä näytöillä, koska ne ovat kaikki pääkohteita. Juuri työkalurivin alapuolella näemme sirut, joilla navigoidaan suodatettuihin sisältövalintoihin, esimerkki sisäisessä selauksessa. Sovelluskaavioissa välilehtiä käytetään lajittelemaan koko kartoitettu kirjasto tiettyihin segmentteihin.

Google-kalenteri

Google-kalenteri (yllä) käyttää navigointilaatikkoa ja kontekstinavigointia, ja käyttää molempia todella mielenkiintoisilla tavoilla.

Kalenterin laatikko on epästandardi, sitä käytetään enimmäkseen kalenterin lisäämiseen. Itse kalenteria hallitsee laajeneva työkalurivipaneeli, ja värikkäät ruudut johtavat käyttäjät tapahtuman yksityiskohtiin.

Lue lisää navigointimallien yhdistämisestä täältä.

Onko sinulla muita kysymyksiä?

Navigointi on monimutkainen aihe. Toivottavasti tämä pohjustus tarjoaa hyvän perustan Androidin yhteisten navigointiperiaatteiden ymmärtämiselle. Jos sinulla on vielä kysyttävää, jätä vastaus tai seuraa ensimmäistä #AskMaterial -istuntoamme materiaalisuunnittelun ja suunnittelusuhteiden ryhmien kanssa Twitterissä täällä!