Arendamine Androidile ja iOS-ile: navigeerimismustrid

Eelmise nädala artiklis alustasime kõrgetasemelise lähenemisviisiga, kus kirjeldasime erinevusi vastavalt iOS-i ja Androidi disainikeelte vahel: tasane kujundus ja materjalide kujundamine.

Kui teil pole lamedast materjalist veel head arusaamist, siis soovitan teil enne selle artikli lugemist selle üle lugeda.

Järgmise paari nädala jooksul käsitleme rohkem loomulike ja hübriidsete mobiilide arendamist ning muid erinevusi Androidi ja iOS-i platvormide vahel.

Sel nädalal räägime navigeerimise kujundusmustritest.

Kui mõtlete, kuidas kasutajad teie mobiilirakenduses navigeerivad, peaksite esitama endale järgmised küsimused:

  • Kuidas peaks kasutaja navigeerima minu rakenduse erinevuste jaotistes?
  • Kas peaksin kasutama navigeerimissahtlit või vahelehti?
  • Kas minu vahelehed peaksid asuma ekraani üla- või alaosas?
  • Kuidas lasta oma kasutajal praegusest vaatest tagasi minna?

Nendele küsimustele vastame nii iOS-i kui ka Androidi platvormi puhul (koos mõne väga populaarse rakenduse juhtumianalüüsidega). Kui te pole seda juba teinud ja soovite järgmiste artiklite postitamisel värskendust saada, siis tellige meie meililisti (rämpsposti pole, ma luban). Kui olete ettevõtja / arendaja mobiilses ruumis ja plaanite oma mobiilirakenduse vabastamist nii iOS-is kui ka Androidis, peate parema tarkvara tarnimiseks mõistma iga ökosüsteemi ja kasutajabaasi eripära.

Miks vaevata navigeerimist?

Navigeerimine on üks mobiilirakenduse (kui mitte) kõige olulisem osa. Kuna mobiilseadmete ekraanid on sülearvutitega võrreldes üsna väikesed, ei saa te tavaliselt kuvada kõike, mida teie rakendus ühe ekraaniga teha saab. Seega on ülioluline selgitada kasutajale, kuidas ühest sektsioonist teise liikuda. Nutikamate kasutajakogemuse otsuste tegemine (ja registreerimine, kuidas kasutajad neile reageerivad) võib oluliselt muuta seda, kuidas kasutajad teie rakendust kasutavad (või loobuvad sellest).

Vahelehed

Kui teie rakendusel on paar peamist jaotist ja soovite oma kasutajal kiiresti nende vahel vahetada, on vahekaardid kindel valik. Vahelehed võimaldavad teil korraldada oma rakenduse peamisi vaateid ja võimaldavad kasutajatel kiiresti uurida nende kõigi sisu.

iOS

IOS-is on vahekaardid ekraani allosas. See on väga tuntud ja tuttav navigatsioonikujunduse lähenemisviis, mida kasutavad paljud edukad tooted, nagu Facebook, Twitter ja Instagram. iOS-i vahekaartidel on tavaliselt nii ikoon kui ka tekst.

Vahekaardid Twitteri iOS-i rakendusesTabeliriba Trello iOS-i rakenduses

Tavaline vahekaartide kasutamine hõlmab kõiki teie rakenduse jaotisi:

  • Avaleht (peamine sisu)
  • Vahekaart Otsing (kui otsimiseks on sisu)
  • Koosta / loo vahekaart
  • Teatiste vahekaart
  • Vahekaart Profiil
Lisaks on vahekaartidel sageli ikoonid või numbrid, mis näitavad, et kasutaja jaoks on saadaval uus sisu

Kuni 5 vahelehe olemasolu on tavapärane ja piiratud. Tavaliselt ei tohiks teie rakendus teha rohkem kui 5 suurt asja (see on üldiselt hea UX-i kogemus).

Portreerežiimis on iOS-i seadmetes horisontaalselt ainult nii palju ruumi. Seega, kui paned kuuenda vahekaardi, poleks neil kõigil ruumi ja süsteem “viskaks” nad veel vahelehele. Sellel punktiirilisel vahekaardil koputades avaneb loend muudest vahelehtede valikutest, mis ei pääsenud selle vahelehe ribale.

Apple'i muusikarakenduse vahekaardi Veel näide

Android

Androidis on vahekaardid ülaosas ja neid tähistatakse tavaliselt kas teksti või ikoonidena (mitte teksti ja ikoonidena), välja arvatud juhul, kui kasutate alumist navigeerimisriba, vt allpool.

Vahekaardid Twitteri Android-rakenduses

Androidi vahekaardid keskenduvad tavaliselt rohkem rakendusepõhistele lõikudele kui iOS-ile ja vähem sekundaarsetele jaotistele nagu otsing, loomine / koostamine ja profiil, kuna Androidil on nende rollide täitmiseks ka muid navigeerimiselemente.

Pühkimine

Androidi rakendused (nagu näiteks taustad) lasevad kasutajatel vahelehtede vahel liikumiseks tavaliselt ekraani horisontaalselt libistada.

Altpoolt navigeerimisriba

Alumine navigeerimisriba on suhteliselt uus Androidi kujundusmuster, mis üritab jäljendada vahelehtede kasutamist iOS-is. Kuigi ma isiklikult väidan, et alumine vahekaart on Androidis rumal (kuna see on liiga lähedal Androidi ikoonilisele navigeerimisribale), ütleb Google vahekaartide vs põhja navigeerimise kohta järgmist:

Vahelehtede abil on hõlbus uurida erinevaid vaateid ja vahetada neid

Altpoolt olevad navigeerimisribad võimaldavad hõlpsalt ühe kraani abil kõrgema taseme vaateid uurida ja nende vahel vahetada.

Küljel navigeerimise sahtel

Kui teie rakendusel on rohkem kui käputäis põhilõike (või „sekundaarseid” jaotisi, nagu seaded ja tagasiside), on navigeerimissahtel veel üks väga populaarne kujundusmuster. See võimaldab teil anda kasutajale loendi jaotistest, mille nad saavad ära kasutada, kui nad seda ei vaja.

iOS

IOS-is pole navigeerimissahtlid päris loomulik muster. Nad tulid platvormile iOS-i disaini arenedes, kuid on paljudes rakendustes endiselt navigeerimise oluline osa.

Kuna Apple ei paku navigeerimissahtlite rakendamiseks API-t, kasutavad arendajad tavaliselt kolmanda osapoole teegid (siin on osaline loend).

Android

Androidis on navigeerimissahtlid loomuliku kujunduse muster, nii et Google pakub teile navigeerimissahtli ehitamiseks vajalikke API-sid, ilma et oleks vaja otsida kolmanda osapoole API-sid.

Kui see on kohaldatav, näitab Navigeerimissahtli ülaserv tavaliselt kasutajapõhist teavet.Navigeerimissahtli allosas saab kuvada teiseseid sektsioone.

Üles Baarid

iOS

IOS-i ülemist riba nimetatakse navigeerimisribaks. Tavaliselt sisaldavad navigeerimisribad:

  • Selle jaotise pealkiri, milles kasutaja praegu töötab
  • Tagasi nupp vasakul, kui on ekraan, kuhu tagasi liikuda
  • Sisu juhtimiselement paremal, kui see on olemas (näiteks otsing)
Twitteri iOS-i rakenduse navigeerimisribaTwitteri iOS-i rakenduse navigeerimisriba nupuga Tagasi

Navigeerimisriba peamine eesmärk on võimaldada kasutajal tagasi nupu abil navigeerida läbi rea hierarhiliste rakendusekraanide.

Android

Androidis nimetatakse ülariba tööriistaribaks. Androidi tööriistariba on rohkem standardiseeritud kui iOS ja sisaldab tavaliselt:

  • Selle jaotise pealkiri, milles kasutaja praegu töötab
  • Nupp Üles vasakul, kui on ekraan, kuhu tagasi liikuda
  • Nupp Navigeerimissahtl, kui nuppu Üles pole
  • Menüünupud ja ülevoolumenüü, millel on rohkem võimalusi
Pange tähele, et nii tööriistariba kui ka vahekaartidega Androidi rakendustes on need kaks ühendatud üheks elemendiks.Youtube'i Android-rakenduse ületäitmise menüü

Menüünuppe ja ülevoolumenüüd saab kasutada nii külgmise navigeerimissahtli alternatiivina kui ka lisana. Ülevoolumenüü võib vajaduse korral eemaldada külgmise navigeerimissahtli vajaduse sõltuvalt sellest, kui palju erinevaid vaateid teie rakendus peab sisaldama.

Teise võimalusena võite lasta igal oma külgmise navigeerimissahtli jaotisel olla oma ületäitmise menüü koos täiendavate võimalustega, millega teie kasutaja saab suhelda.

Tagasi nupud (ja Androidi navigeerimisriba)

Ekraanile navigeerimine on suurepärane, kuid samuti on oluline teha kasutajatele selgeks, kuidas tagasi minna.

iOS

IOS-is on kasutaja ainus viis tagasi navigeerida navigeerimisriba vasakul küljel asuva tagasi / sulgemise nupu kaudu.

Android

Kuna Androidil on ekraanil kuvatav navigeerimisriba, eristab kujundusdokumentatsioon nuppu Üles ja Tagasi.

Üles nupp

Nupp Üles on tavaliselt tööriistaribal ja see viib kasutaja tagasi viimasele ekraanile, mida nad teie rakenduses vaatasid (kuni nad jõuavad rakenduse avakuvale).

Androidi navigeerimisriba ja nupp Tagasi

Tagasi nupp on navigeerimisriba osa ja “navigeerib hiljuti vaadatud ekraanide ajaloo kronoloogilises järjekorras vastupidises järjekorras”. Kuigi nupp Üles ei vii kasutajaid teie rakendusest välja, võib nupp Tagasi viia kasutaja praegusest rakendusest sellesse, mida nad varem kasutasid.

Üks oluline erinevus iOS-i ja Androidi vahel on see, kuidas eelneval on füüsiline kodunupp (mis toimib ka pöidlakindluse skannerina), ja viimane loobub suurema ekraaniga ettepoole suunatud füüsilisest nupust (ning viskab pöidlakrossi skanneri telefoni tagakülg).

Isegi kui see on pigem süsteemi kui rakenduse kujundusmuster, saab Androidi navigeerimisriba peita ning ümbritsevad meediarakendused (nt Youtube, Google Photos, Netflix jt) peidavad navigeerimisriba, lastes kasutajal keskenduda sisu, mida rakendus esitleb.

Kuna navigeerimisriba sisaldab tagasi nuppu, pole haruldane, kui Androidi rakendused ei sisalda ülanuppu ja lasevad kasutajal kasutada nuppu Tagasi, kuna nende funktsioonid on väga sarnased.

Järeldus

See on see selle nädala artikkel iOS-i ja Androidi navigeerimismustrite kohta.

Järgmises artiklis käsitleme mobiilirakenduste loomuliku ja hübriidse arendamist.

Kui soovite värskendust saada pärast järgmiste artiklite ilmumist, tellige meie meililisti. Kui olete mobiiltelefoniruumis ettevõtja / arendaja ja plaanite sihtida nii Androidi kui ka iOS-i, suurendate märkimisväärselt oma eduvõimalusi, kui mõistate nende kahe operatsioonisüsteemi disaini ja funktsioonide erinevusi ning kasutaja ootusi.

Selle artikli autor on:

Jordan Rejaud, tarkvaratehnika konsultant, kes aitab kliente mobiilses ruumis, projekteerides ja kirjutades neile vajalikku tarkvara.

ja

Alex Bush, SmartCloudi tarkvarainsener. Ta ajaveeb täpsemate iOS-i teemade ja rubriigi Rails kohta.