Android VS. iOS: võrrelge 20 kasutajaliidese komponenti ja mustrit (2. osa)

20 erinevust Androidi ja iOS-i vahel, mida peaksite teadma platvormiüleste rakenduste kujundamisel

中文 版 Hiina originaalversioon avaldati 10. detsembril 2016

Android VS. iOS: võrrelge 20 kasutajaliidese komponenti ja mustrit (1. osa)

14. Võrgustiku nimekirjad VS. Kollektsiooni vaade

Ruudustiku loendeid kasutatakse peamiselt tellitud sisukomplekti korral, eriti piltide puhul. Androidis saab päise või jaluse ruudustikku lisada, et pakkuda lisateavet või toiminguid. iOS-i kogumise vaade on mõeldud põhiselt pildipõhise sisu kuvamiseks.

Katkestades ruudustiku vaate algses kerimisasendis, saate näidata sisu ületäitumist. Nii võreloendites kui ka kogumisvaadetes saab täiendava teabe saamiseks siseneda ekraanile.

Kujutise allikas: Google'i materjalide kujundamise juhised ja iOS-i inimliidese juhised

15. kaardid

Kaarte on UI kujundamisel kasutatud pikka aega. Pärast seda, kui Google avaldas Material Design 2015. aastal, saavad kaardid androidi disaini ühiseks esindajaks. Kaardi kasutajaliidesel on oma eelis mitme seadme suuruse korral. Kaartide suurust saab muuta ja ümber paigutada vastavalt erinevatele ekraanisuurustele. Lisaks võivad kaardid sisaldada mitmesugust teavet, näiteks tekste, pilte ja diagramme.

Kuigi iOS ei määratle oma juhistes kaardi UI-d, kuid sarnase kujunduse võib leida Apple iOS-i rakendusest.

Visuaalses stiilis rõhutab Android kaartide varje, kuid iOS 10-s on kaardid tasased (pärast iOS 11 vabastamist ilmuvad pikad varjud!)

Kujutise allikas: Google'i materjali kujundamise juhisedPildi allikas: Facebooki disain

15. Menüüd VS. Korjajad ja uued ekraanid

Androidi menüüd on lihtsalt sarnased lihtsate dialoogidega. Erinevus nende vahel on see, et dialoogid ilmuvad ekraani keskele läbipaistva musta ülekattega, kuid menüüde asukoht on koputatavate üksuste suhtes. Menüüdes on vähem katkestusi kui dialoogides.

Menüüd ilmuvad järgmistes 3 olukorras: 1) pärast ülekandeikooni koputamist tegevusribal või loendireal; 2) pärast rippmenüü koputamist ja 3) pärast kaherealise rearea koputamist, mis koosneb sildist ja väärtusest.

iOS-il pole sellist menüüstiili. Pärast sildilt ja väärtusest koosneva lahtri koputamist koputab ekraan uuele ekraanile, kus kuvatakse suvandid tabelis koos ühe valikuga linnukesega, et tähistada valitud olekut telefonides. Tahvelarvutites saab menüütabeli jaoks kasutada hüpikmenüüd.

Teine alternatiiv on „korjajad”, keritavad eraldiseisvate väärtuste loendid, mis võimaldavad teil väärtuse valida. Pärast väärtusega lahtri koputamist kuvatakse valija lahtri all või libistatakse ekraani alt üles.

Korjajaid soovitatakse kasutada ainult mõne valiku jaoks. Kui teil on pikk nimekiri, oleks parem valik valikute tabeli uus ekraan.

16. Kuupäeva / kellaaja valija

Nii Androidil kui ka iOS-l on oma vaikekuupäeva- / kellaaja valijad. Androidil on kuupäeva valija konkreetse kuupäeva (kuupäeva, kuu ja aasta) ja kellaaja valimiseks. iOS-il on 4 tüüpi korjajat: 1) kuupäev, kus kuvatakse kuud, kuu päevad ja aastad. 2) Aeg, mis kuvab tunde, minuteid ja (valikuliselt) AM / PM tähist. 3) Kuupäev ja kellaaeg, mis kuvab kuupäevad, tunnid, minutid ja (valikuliselt) AM / PM tähise. 4) Taimer, mis kuvab tunde ja minuteid.

17. Jagajad

Sisu eraldamiseks kasutatakse tavaliselt jagajaid.

Androidil on 2 tüüpi jagajaid: 1) täiskõhu jagajad, mida kasutatakse eraldiseisvate sisulõikude eraldamiseks. 2) Sisestusjagajad, mida kasutatakse seotud sisu eraldamiseks.

iOS ei määratle oma juhistes eraldajaid. iOS kasutab grupeeritud tabeleid ja eraldamiseks on 2 grupeeritud tabeli vahel hall ala. iOS-i tabelis on lahtri moodustamiseks vaheseinad.

Android kipub ridade eraldamiseks kasutama tühikut, nii et Androidil on harva jagajaid ridade vahel, mille andmed on omavahel seotud.

Kui Androidis on rea vasakus servas ikoon või pilt, algab vahejaotuse jagamine teksti vasakust servast ja lõpeb ekraani parempoolse servaga. IOS-is on ikooniga lahter sama, mis Androidil, kuid pildiga lahtri puhul algab jagaja pildi vasakust servast.

18. Tekstiväljad

Androidi tekstiväljad ilmuvad tavaliselt vormides, mida peate täitma. Neid on 3 tüüpi: 1) üherealine 2) mitu rida ja 3) täislaius. 2017. aastal lisab Android oma juhistesse veel ühe tüübi: tekstiala.

Sõltuvalt sisestusvormingust tuleks pakkuda sobivat klaviatuuri tüüpi. Nii Android kui ka iOS pakuvad mitu erinevat tüüpi klaviatuuri. Põhimõtteliselt saab neid jagada kolme tüüpi: 1) numbriklaviatuur (iOS-il on numbriklahv ja telefonipadi), mida kasutatakse telefoninumbrite, krediitkaardinumbrite või PIN-koodide sisestamiseks. 2) tekstiklaviatuur, mida kasutatakse inimeste nimede jaoks. 3) segaklaviatuur, mida kasutatakse e-posti aadresside või URL-ide jaoks.

Nii Android kui ka iOS saavad suhtlemist hõlbustavate näitajatena panna tekstiväljadele kohahoidjad ja ikoonid või pildid. Androidis hõljuvad kohahoidjad ülespoole, kui tekstiväli on fookuses või täidetud. See on üsna nutikas kujundus, mis aitab kasutajatel silte teada saada isegi siis, kui kõik tekstiväljad on täidetud. IOS-is soovitatakse mitte kasutada tekstivälja kirjeldamiseks eraldi silti, kui kohahoidja tekst on piisav.

iOS-il on nutikam disain, kui tekstiväljad on täidetud ja fokuseeritud, kuvatakse tekstivälja paremas servas tühjendusnupp, et inimesed saaksid kõik tekstid hõlpsalt ühe puudutusega tühjendada. Androidi vaiketeksti väljal seda kujundust pole, kuid leiate selle otsinguriba alt. Androidis saate tekstivälja kohandada ja paremale küljele lisada tühjendusnupu.

Androidi juhised määratlevad ka abiväljendused, tähemärkide loendurid ja tekstväljade veateated.

19. Liugurid

Liugurid on sätete reguleerimise komponendid, mis kajastavad intensiivsuse taset, näiteks helitugevust, heledust või värviküllastust. Tavaliselt asub väikseim väärtus liugurite vasakul ja suurim väärtus paremal. Liuguritel võivad riba mõlemas otsas olla ikoonid, mis kajastaksid väärtuse intensiivsust nii Androidis kui ka iOS-is.

Androidi liugurid on kahte tüüpi: 1) pidevad liugurid, mis võimaldavad kasutajatel valida vahemiku väärtuse. 2) Diskreetsed liugurid, mis võimaldavad kasutajatel valida vahemikust kindla väärtuse, näiteks 10 või 20.

Android pakub kasutajatele, kes peavad täpset väärtust määrama, numbrite sisestamiseks redigeeritavat tekstikasti.

20. Muud mustrid

20–1. Otsing

Androidi otsingul on 2 tüüpi: püsiv otsing ja laiendatav otsing, mida saab võrrelda iOS-i silmapaistva otsingu ja minimaalse otsinguga.

Androidi püsivat otsingut ja iOS-i silmapaistvat otsingut kasutatakse peamiselt rakenduste põhifunktsioonina, näiteks poesuhterakenduse puhul, põhifunktsioonina otsinguks, kus kasutajad võivad soovida leida otsitava toote.

Androidi laiendatav otsing ja iOS-i minimaalne otsing rakenduse jaoks, mille otsing on teisejärguline. Android vähendab otsinguriba ikooniks. Pärast rakenduse ribal oleva otsinguikooni koputamist muutub rakendusriba otsinguribaks. iOS kasutab visuaalset kujundust, muutes otsinguribadest poolläbipaistvad, et mitte olla silmapaistvad.

iOS kasutab otsingu tähtsuse vähendamiseks ka otsinguikooni. Lisaks peidab iOS mõnikord otsinguribaid navigeerimisribade taha. Varjatud otsinguriba esilekutsumiseks peavad kasutajad libistama alla.

20–2. Kustuta ja muud toimingud

Androidi kasutajad saavad üksuse pikalt vajutades valida ja seejärel siseneda valikurežiimi, kus toimimisnuppe, näiteks kustutamist, kuvatakse rakenduste ribadel. Samuti saavad Androidi kasutajad puudutada ülevooluikooni, et menüü esile tõsta, valides suvand „vali“, ja koputage seda valiku režiimi sisenemiseks.

iOS-i kasutajad saavad peidetud toimingute (nt kustutamine) esilekutsumiseks libistada vasakule. Samuti saavad nad üksuste kustutamiseks või ümberkorraldamiseks redigeerimisrežiimi sisenemiseks puudutada navigeerimisribadel nuppu „Redigeerimine“. Kui redigeerimisrežiimis on rohkem toiminguid, näiteks teisaldamine ja saavutamine, kuvatakse ekraanil tabel, millel on mitu valiku juhtelementi ja nende toimingute tööriistariba.

20–3. Valige Tekst

Nii Androidis kui ka iOS-is saavad kasutajad nende valimiseks tekste pikalt vajutada. Pärast pikka vajutamist kuvatakse Androidis toimimisikoonid tegevusribal, millest sai anterdi stiil, mis näitab hetke olekut, valimisrežiimi. IOS-is kuvatakse toimingud lihtsalt valitud tekstide kohal olevas menüüs. Androidil on nüüd ka valimisalal ujuv tööriistariba nagu iOS, nagu on lõigatud, kopeeritud, kleepitud ja palju muud.

Pärast tekstide kopeerimist või tükeldamist saavad kasutajad tekstiväljadel pikalt vajutada, et kuvada pasta hüpik, ja koputada seda kleepimiseks.

Allikas: Google

20–4.Progress ja tegevus

Üldiselt on edenemisriba parem kui ketramine, sest edenemisriba võimaldab kasutajatel teada saada olekut, mitu protsenti jääb, nii et neil oleks kannatlik oodata.

Edusammude jaoks on edenemisribade kasutamine etteaimatav. Kui edasiliikumine on loendamatu, siis kasutatakse ketrajaid. Kuid kui edasiliikumine on ennustatav ja ooteaeg on vähem kui 3–4 sekundit, võite kaaluda ka ketrajate kasutamist.

Edenemisribadel kuvatakse lisaks sisutekstidele ja dialoogidele ka rakendusribade / navigeerimisribade alumine serv. Näite leiate brauserirakendustest.

Edenemisribadel pole mitte ainult lineaarseid, vaid ka ümmargusi indikaatoreid. Ümmarguseid edunäitajaid kasutatakse sageli koos allalaadimisnuppudega. Pärast allalaadimisnuppude koputamist muutuvad nupud ringikujulisteks indikaatoriteks.

Androidi edunäitajaid on 4 tüüpi: 1) määrake 2) määramatu 3) puhver 4) päring on määramatu ja määrav erinevate olukordade jaoks.

Androidi lineaarsed progressi- ja aktiivsusnäitajadAndroid Circular ei määra ega määra edasiminekuindikaatoreid

Uuendamise kohta õppis Android iOS-ilt, kasutades sisu värskendamiseks libistades alla. ümmargune vurr ilmub pärast alla pühkimist ja kaob pärast sisu laadimist.

Värskendage loendeid, pühkides alla. Kuvatakse laadimisnäidikud.

20–5. Ikoonid: jagage VS-d. Tegevus

Kui soovite selle rakenduse sisu teisega jagada, on Androidil ja iOS-l oma jagamise ikoon. Väärib märkimist, et iOS-i toimingu (jagamise) nupp kutsub esile modaalse vaate, mis sisaldab mitte ainult rakenduste loendit, vaid ka toiminguid, näiteks kopeerimist, lemmikute lisamist või salvestamist, mis on praeguses olukorras kasulikud.

Android Share ikoon VS. iOS-i toimingu ikoon

20–6. Olekuribad

Nii Androidi kui ka iOS-i olekuribal on teave, näiteks kellaaeg, aku olek, WiFi olek ja signaali tugevus. Teabekeskuste kutsumiseks pühkige olekuribalt alla.

20–7. Navigeerimisribad VS. Kodu

Androidi ja iOS-i navigeerimisribad on erinevad. Palun ärge ajage neid segadusse.

Androidi navigeerimisribadel on 3 nuppu Tagasi, Kodu ja Hiljutised rakendused. Navigeerimisribad võivad olla virtuaalsed või füüsilised.

iOS-il on füüsiline nupp Kodu. Üks vajutus koju tagasi minemiseks; viimati käivitatud rakenduste loenditesse liikumiseks topeltklõpsake. Väärib märkimist, et iOS-il pole tagasivõtit nagu Android, nii et kasutajaliidese ekraanil peaks navigeerimisribadel olema tagasinupp.

Pärast iPhoneXi vabastamist pole seadmel koduvõtit. Koju naasmiseks pühkige ribalindil üles.

Korda

Navigeerimine

Android on harjunud peamise navigatsioonina kasutama navigeerimissahtleid, kuid praegu on parema kasutatavuse tõttu populaarsemad vahekaardid ja alt navigeerimine. iOS kasutab tavaliselt navigeerimiseks sakkide ribasid nagu tavaliselt.

Rakenduste riba / navigeerimisriba

Androidi rakenduste ribad, ekraani pealkirjad joondavad vasakule ja toimingunupud pannakse paremasse serva. IOS-is pannakse pealkirjad navigeerimisribade keskele ja toimingunupud pannakse navigeerimisribade paremale ja vasakule küljele.

Tööriistaribad

Androidil ja iOS-il on alumised tööriistaribad tegevustekstide, toimingute ikoonide või oleku jaoks.

Vahelehed VS. Segmenteeritud juhtnupud

Teise või madalama taseme navigeerimiseks kasutab Android vahelehti, mis sisaldavad kahte tüüpi: fikseeritud ja keritavat ning toetavad vaadete vahetamiseks pühkimisliigutusi. iOS kasutab segmenteeritud juhtelemente, mille üksused on piiratud 2–5-ga.

Nupud

Ehkki Androidil ja iOS-il on oma nupu vaikestiilid, saavad visuaalsed disainerid nuppe kujundada ikka oma mõtte järgi, kui nupu stiilid kasutajaid segadusse ei aja. Ainuke asi, mida tuleks tähele panna, on see, et Android kasutab kõigi koputatavate tekstide, sealhulgas nende nuppude jaoks ÜLEMAAARUST.

Ujuvad nupud VS. Nupud tegevusele

Androidil on ekraanil põhitoimingu jaoks oma iseloomulik ujuki toimingunupp. FAB-d pannakse paremasse alumisse nurka, et neid hõlpsalt kätte saada ja koputada. iOS-i tegevusele kutsumise nupud, asetage sakkide riba keskele, erinedes tavaliselt teiste reaalsete vahelehtedega.

Altpoolt lehed VS. Tegevuslehed ja tegevusvaated

iOS-il on pikka aega olnud tegevuslehti ja siis on Androidil ka ühe käega kasutamiseks mõeldud toimingutega põhjalehed.

Dialoogid VS.Heata

Dialoge kasutatakse hoiatamiseks, valikute ja kinnituse pakkumiseks. Android ja iOS panevad põhitoimingu nupu paremale küljele ja sekundaarsed toimingud, näiteks tühistamise, vasakule küljele. Nupul olevad tekstid peaksid olema lihtsad ja selged. Verbe saab kasutada jah ja ei asemel.

Täisekraanidialoogid VS. Modaalsed vaated ja Popovers

Androidi täisekraanidialoogid ja iOS-i modaalvaated või telefoniseadmete hüpikpildid on täisekraanil, tahvelarvutites aga mitte täisekraanil.

Suupisted ja röstsaiad VS. Automaatse sulgemise hoiatused

Suupisteid, röstsaite ja teateid kasutatakse tagasisidena pärast toimingut.

Loendis VS. Lauad ja lahtrid (read)

Android kipub loendites seotud sisutekstide eraldamiseks ruumi pigem jagama. Android kasutab jagajaid, kui sisutekstid on täiesti erinevad. iOS-is on jaoturid, et moodustada tabelites lahtrid. iOS-i puudutatavates lahtrites on järgmise ekraani indikaatorid, mis pakuvad paremat kasutatavust kui Android. iOS-i tahvelarvuteid on kahte tüüpi: tavalised ja grupeeritud lauad.

Alamjalad VS. Grupeeritud lauapäised ja sektsioonide päised

Androidil on ainult alapealkirjad, kuid iOS-l on grupeeritud tabelite jaoks tabelipäised ja tavaliste tahvelarvutite sektsioonide päised.

Loendi juhtelemendid

Androidil ja iOS-l on oma loendi juhtelemendid ühe valiku, mitme valiku ja järjestuse muutmiseks. Valige sobivad platvormid sõltuvalt platvormist.

Menüüd VS. Korjajad ja uued ekraanid

Androidil on menüüd, kuid iOS kasutab lühinimekirjade jaoks korjajaid ja pikemate loendite jaoks uusi ekraane.

Grid nimekirjad VS. Kollektsiooni vaated

Põhimõtteliselt on Androidil ja iOS-il sarnased ruudustiku / kogumise vaated.

Kaardid

Kaardilaadne kasutajaliides on Androidi materjalidisaini põhifunktsioon, kuid ka iOS-i kujundus on sarnane.

Kuupäeva / kellaaja valijad

Androidil ja iOS-l on oma kuupäeva ja kellaaja vaikevalijad.

Jagajad

Androidil on vaheseinad, kuid iOS kasutab selge sisu eraldamiseks grupitabelit.

Tekstiväljad

Androidil ja iOS-l on oma tekstiväljad. Kuva korralikud klaviatuurid sõltuvalt tekstiväljade sisestusvormingutest.

Liugurid

Androidil ja iOS-l on oma komponendid. Mõlemad on sarnased.

Otsing

Androidil on püsiv otsing ja laiendatav otsing, näiteks iOS-il on silmapaistev otsing ja minimaalne otsing. Mõnikord peidab iOS otsinguribasid navigeerimisriba taha, kasutajad peavad nende esilekutsumiseks libistama alla.

Kustuta ja muud toimingud

Androidi kasutajad peavad kõigepealt valima üksused ja seejärel tegema muid toiminguid, näiteks kustutama. iOS toetab kustutamiseks pühkimist. iOS-i kasutajad saavad üksuste kustutamiseks siseneda ka redigeerimisrežiimi või valida üksused muude toimingute tegemiseks.

Valige Tekstid

Pärast teksti valimist kuvatakse Androidi rakenduste ribadel tavaliselt sellised toimingud nagu kopeerimine, lõikamine, kõigi valimine. Androidil on nüüd ka tööriistariba valitud tekstide kohal näidatud toimingutega, nagu tavaliselt iOS.

Edusammud ja aktiivsus

Kui toimingu käik on ennustatav ja mõõdetav, kasutage edenemisriba; kui ei, siis kasutage selle asemel keermeid.

Ikoonid: jagage VS-d. Tegevus

Androidil ja iOS-l on oma jagamisikoon. Ärge kasutage iOS-is Androidi jagamise ikooni ja vastupidi.

Olekuribad

Androidi ja iOS-i olekuribal on põhimõtteliselt aeg, aku olek, WiFi-signaal ja mobiilsideühenduse signaal. Teabekeskuste esilekutsumiseks pühkige olekuribalt alla.

Navigeerimisribad VS. Kodunupud

Androidi navigeerimisribadel on 3 klahvi, tagasi, kodu ja hiljutised rakendused. iOS-il on ainult üks kodu võti. Viimaste rakenduste loendi esilekutsumiseks topeltpuudutage. IOS-i rakendustes on vaja navigeerimisribade tagasinuppe.

Kokkuvõte

Viimaste aastate vaatluste põhjal on Androidi käitumine ja kasutajaliidese komponendid üha enam sarnased iOS-iga, kuigi Android hoiab endiselt omaenda ainulaadset käitumist. Arvan, et Google on proovinud domeenida kasutajaliidese kujunduskeelt erinevate platvormide vahel. Tulevikus on ettearvatav, et Android ja iOS lähenevad ja lähenevad ning see on hea nii kasutajatele kui ka arendajatele.

Kuigi mõned kasutajaliidese komponendid pole Androidi materjalide kujundamise juhendites ega iOS-i liidese juhistes määratletud, ei tähenda see, et te ei saaks neid komponente kasutada. Mõnes olukorras võib kasutajaliidese vaikimisi seatud piirangute tõttu laenata kogemusi teistelt platvormidelt ja kohandada komponente raskuste ületamiseks. Tegelik mõte on see, kas käitumine või komponendid ajaksid meie kasutajad segadusse või mitte.

Siin tutvustatud mustreid ei saa otse kõigi rakenduste jaoks rakendada. Neid võib olla vaja kohandada, sõltuvalt erinevatest stsenaariumidest ja nõuetest. Loodan, et kõik teavad paremini 2 platvormi komponente ja käitumist. Kui on vigu või kui teil on küsimusi, palun parandage või arutage minuga. Aitäh!

Kui olete seda artiklit lugenud, palun andke 10 klappi.
Palun andke 20 klappi, kui te arvate, et sellest on abi.
Palun andke 50 klappi, kui arvate, et see on hämmastav!
Aitäh :)
-------------------------------------------------- ------------------
Ma ei räägi põhjustest, miks materjalide kujundamise juhendites ja iOS-i inimliidese kujundamise juhendites on pigem selline käitumisviis või reeglid kui teistel. See artikkel on pigem praktiliseks kasutamiseks. Tahaksin tulevikus konteksti ja põhjusi arutada teistes artiklites.
Samuti pole mind värskendatud Android O ega iOS 11 jaoks.

Viide