Kehitetään Androidille tai iOS: lle: Navigointikuviot

Viime viikon artikkelissa aloitimme korkeatasoisella lähestymistavalla, jossa kuvailimme eroja iOS: n ja Android: n suunnittelukielissä: tasainen suunnittelu ja materiaalisuunnittelu.

Jos sinulla ei vielä ole ymmärrystä Flat vs Materiaalista, suosittelen, että luet sen ennen tämän artikkelin lukemista.

Seuraavien viikkojen aikana olemme menossa yli alkuperäisen vs. hybridi-matkapuhelinkehityksen ja muut erot Android-iOS-käyttöjärjestelmien välillä.

Puhutaan tällä viikolla navigoinnin suunnittelumallit.

Kun mietit, kuinka käyttäjät aikovat navigoida mobiilisovelluksessasi, sinun tulee kysyä itseltäsi seuraavia kysymyksiä:

  • Kuinka käyttäjän pitäisi navigoida sovellukseni eri osioissa?
  • Pitäisikö minun käyttää navigointilaatikkoa tai välilehtiä?
  • Pitäisikö välilehteideni olla näytön ylä- tai alareunassa?
  • Kuinka päästän käyttäjän palaamaan nykyiseen näkymäänsä?

Vastaamme näihin kysymyksiin sekä iOS- että Android-käyttöympäristössä (esimerkkejä erittäin suosittujen sovellusten tapauksista). Jos et vielä ole, ja haluat saada päivityksen seuraavien artikkeleiden julkaisemisen yhteydessä, tilaa tilaustiedot postituslistallemme (ei roskapostia, lupaan). Jos olet yrittäjä / kehittäjä mobiililaitteessa ja aiot julkaista mobiilisovelluksesi sekä iOS: ssä että Androidissa, on välttämätöntä ymmärtää kunkin ekosysteemin ja käyttäjäkunnan erityispiirteet parempien ohjelmistojen toimittamiseksi.

Miksi vaivautua opiskelemaan navigointia?

Navigointi on yksi (jos ei) tärkein osa mobiilisovellusta. Koska mobiililaitteiden näytöt ovat melko pieniä verrattuna kannettaviin tietokoneisiin, et yleensä voi näyttää kaikkea sovelluksesi mahdollisuutta yhdellä näytöllä. Siksi on elintärkeää selittää käyttäjälle, kuinka navigoida osiosta toiseen. Älykkäämpien käyttäjäkokemuspäätösten tekeminen (ja tallennus siitä, kuinka käyttäjät reagoivat niihin) voi muuttaa merkittävästi sitä, kuinka käyttäjät käyttävät (tai hylkäävät) sovelluksesi.

välilehdet

Kun sovelluksessasi on pari pääosaa ja haluat antaa käyttäjän siirtyä nopeasti niiden välillä, välilehdet ovat vankka valinta. Välilehdet antavat sinun järjestää sovelluksesi tärkeimmät näkymät ja antaa käyttäjille mahdollisuuden tutkia nopeasti kunkin sovelluksen sisältöä.

iOS

IOS-käyttöjärjestelmässä välilehdet ovat näytön alareunassa. Se on hyvin tunnettu ja tuttu navigointisuunnittelutapa, jota käyttävät monet menestyvät tuotteet, kuten Facebook, Twitter ja Instagram. iOS-välilehdissä on tyypillisesti sekä kuvake että teksti.

Välilehdet Twitterin iOS-sovelluksessaVälilehtipalkki Trellon iOS-sovelluksessa

Välilehtiä käytetään tyypillisesti kukin osa sovelluksestasi:

  • Koti (pääsisältö) -välilehti
  • Haku (jos haettavissa on sisältöä) -välilehti
  • Luo välilehti
  • Ilmoitukset-välilehti
  • Profiili-välilehti
Lisäksi välilehdissä on usein kuvakkeita tai numeroita, jotka osoittavat, että käyttäjällä on uutta sisältöä

Enintään 5 välilehteä on yleisesti hyväksytty ja rajoitettu. Tavallisesti sovelluksessasi ei saa olla enemmän kuin 5 "suurta" asiaa (tämä on yleensä vain hyvä UX-kokemus).

Muotokuvatilassa iOS-laitteissa on vain niin paljon tilaa vaakatasossa. Joten jos laitat kuudennen välilehden, kaikille niille ei jää tilaa, ja järjestelmä "floppaa" ne Lisää välilehteen. Napauttamalla kyseistä katkolehteä avaa luettelon muista välilehtivaihtoehdoista, joista ei tullut välilehteä.

Esimerkki Applen musiikkisovelluksen Lisää-välilehdestä

Android

Androidissa välilehdet ovat yläosassa, ja ne esitetään tyypillisesti joko tekstinä tai kuvakkeina (tekstin ja kuvakkeiden sijasta), paitsi jos valitset alareunan navigointipalkin, katso alla.

Välilehdet Twitterin Android-sovelluksessa

Android-välilehdet ovat yleensä keskittyneet sovelluskohtaisimpiin osiin kuin iOS: ään ja vähemmän toissijaisiin osioihin, kuten hakuun, luomiseen / luomiseen ja profiiliin, koska Androidilla on muita navigointielementtejä näiden roolien täyttämiseksi.

pyyhkäisemällä

Android-sovellukset (kuten Taustakuvat) antavat käyttäjien tyypillisesti pyyhkäistä näyttöä vaakatasossa siirtyäksesi välilehteiden välillä.

Pohjanavigointipalkki

Alempi navigointipalkki on suhteellisen uusi Android-malli, joka yrittää jäljitellä välilehtien käyttöä iOS: ssä. Vaikka väitän henkilökohtaisesti, että pohjavälilehti on typerä Androidissa (koska se on liian lähellä Androidin ikonista navigointipalkkia), Google sanoo seuraavat välilehdet vs. pohjanavigointi:

Välilehdet antavat helpon tutkia ja vaihtaa eri näkymien ja

Pohjanavigointipalkkien avulla on helppo tutkia ja vaihtaa ylätason näkymiä yhdellä kosketuksella.

Sivunavigointilaatikko

Jos sovelluksessasi on enemmän kuin kourallinen pääosioita (tai ”toissijaisia” osioita, kuten asetukset ja palaute), navigointilaatikko on toinen erittäin suosittu muotoilu. Sen avulla voit antaa käyttäjälle luettelon osioista, jotka he voivat poistaa, kun he eivät vaadi sitä.

iOS

IOS-käyttöjärjestelmässä navigointilaatikot eivät ole alkuperäisiä malleja. He tulivat alustalle iOS-suunnittelun kehittyessä, mutta ovat edelleen tärkeä osa navigointia monissa sovelluksissa.

Koska Apple ei tarjoa sovellusliittymää navigointilaatikoiden toteuttamiseen, kehittäjät käyttävät yleensä kolmansien osapuolien kirjastoja (tässä on osittainen luettelo).

Android

Android-käyttöjärjestelmässä navigointilaatikot ovat omaperäinen suunnittelumalli, joten Google tarjoaa sinulle sovellusliittymät, joita tarvitset navigointilaatikon rakentamiseksi, eikä sinun tarvitse etsiä kolmannen osapuolen sovellusliittymiä.

Tarvittaessa navigointilaatikon yläosassa on tyypillisesti käyttäjäkohtaisia ​​tietoja.Navigointilaatikon alaosassa voi olla toissijaiset osiot.

Suosituimmat baarit

iOS

IOS: n yläpalkkia kutsutaan navigointipalkiksi. Navigointipalkit sisältävät yleensä:

  • Sen osion otsikko, jossa käyttäjä on tällä hetkellä
  • Takaisin-painike vasemmalla, jos siellä on näyttö, johon navigoida takaisin
  • Oikealla puolella oleva sisällönhallintaelementti (kuten haku)
Twitterin iOS-sovelluksen navigointipalkkiTwitterin iOS-sovelluksen navigointipalkki paluupainikkeella

Navigointipalkin päätarkoitus on antaa käyttäjälle mahdollisuus navigoida sarjan hierarkkisia sovellusnäyttöjä käyttämällä Takaisin-painiketta.

Android

Androidin yläpalkkia kutsutaan työkaluriviksi. Androidin työkalupalkki on standardisoidumpi kuin iOS ja sisältää yleensä:

  • Sen osion otsikko, jossa käyttäjä on tällä hetkellä
  • Ylös-painike vasemmalla, jos siellä on näyttö, johon navigoida takaisin
  • Navigointilaatikko-painike, jos Ylä-painiketta ei ole
  • Valikkopainikkeet ja ylivuotovalikko, jossa on enemmän vaihtoehtoja
Huomaa, että Android-sovelluksissa, joissa on sekä työkalurivi että välilehdet, nämä kaksi yhdistetään yhdeksi elementiksi.Youtuben Android-sovelluksen ylivuotovalikko

Valikkopainikkeita ja ylivuotovalikkoa voidaan käyttää sekä vaihtoehtona että lisäyksenä Sivun navigointilaatikkoon. Ylivuotovalikko voi mahdollisesti poistaa sivunavigointilaatikon tarpeen sen mukaan, kuinka monta eri näkymää sovelluksesi täytyy sisältää.

Vaihtoehtoisesti voit antaa jokaisella sivun navigointilaatikon osastolla olevan oma ylivuotovalikko, jossa on lisävaihtoehtoja, joiden kanssa käyttäjä voi toimia.

Takaisin-painikkeet (ja Androidin navigointipalkki)

On hienoa navigoida näytölle, mutta on myös tärkeää tehdä käyttäjille selväksi, kuinka palata takaisin.

iOS

IOS-käyttöjärjestelmässä käyttäjä voi navigoida takaisin vain navigointipalkin vasemmalla puolella olevan takaisin / sulkemispainikkeen kautta.

Android

Koska Androidilla on näytöllä oleva navigointipalkki, suunnitteludokumentaatio erottaa Ylä- ja Takaisin-painikkeet.

Ylös-painike

Ylös-painike sisältyy yleensä työkaluriviin ja siirtää käyttäjän takaisin viimeisimmälle näytölle, jota he katsoivat sovelluksessasi (kunnes he saavuttavat sovelluksen aloitusnäytön).

Android-navigointipalkki ja Takaisin-painike

Takaisin-painike on osa navigointipalkkia ja "navigoi käänteisessä aikajärjestyksessä äskettäin katsottujen näyttöjen historian läpi". Vaikka Ylös-painike ei vie käyttäjiä sovelluksestasi, Takaisin-painike voi viedä käyttäjän nykyisestä sovelluksesta siihen, jota he aiemmin käyttivät.

Yksi merkittävä ero iOS: n ja Androidin välillä on se, kuinka prioristilla on fyysinen koti-painike (joka toimii myös peukalopainatuslukijana), ja viimeksi mainittu luopuu edessä olevaan fyysiseen painikkeeseen suuremman näytön saamiseksi (ja heittää peukalotulostimen skannerin puhelimen takana).

Vaikka se olisi pikemminkin ”järjestelmän” suunnittelumalli kuin “sovellus”, Androidin navigointipalkki voidaan piilottaa ja syventävät mediasovellukset (kuten Youtube, Google Photos, Netflix, ect) piilottavat navigointipalkin, jotta käyttäjä voi keskittyä sovelluksen esittämä sisältö.

Koska navigointipalkki sisältää takaisin-painikkeen, ei ole harvinaista, että Android-sovelluksissa ei ole yläpainiketta ja että käyttäjän on käytettävä takapainiketta, koska niiden toiminnot ovat hyvin samankaltaiset.

johtopäätös

Se on tämän viikon artikkeli navigointimalleista iOS: ssä ja Androidissa.

Seuraavassa artikkelissa tarkastellaan mobiilisovellusten Native vs. hybridi -kehitystä.

Jos haluat saada päivityksen seuraavien artikkeleiden ollessa suorana, tilaa tilaajaluettelo. Jos olet yrittäjä / kehittäjä matkaviestinnässä ja suunnittelet kohdistamista sekä Androidiin että iOS: iin, lisäät huomattavasti menestysmahdollisuuksiasi, jos ymmärrät näiden kahden käyttöjärjestelmän suunnittelu- ja ominaisuuserot ja käyttäjän odotukset.

Tämän artikkelin kirjoitti:

Jordan Rejaud, ohjelmistotekniikan konsultti, joka auttaa asiakkaita mobiilitilassa arkkitehtuurilla ja kirjoittamalla tarvitsemansa ohjelmistot.

ja

Alex Bush, SmartCloudin ohjelmistosuunnittelija. Hän blogeja edistyneistä iOS-aiheista ja Ruby on Rails -sivustosta.