Android VS. iOS: Comparați 20 de componente și modele UI (partea 2)

20 de diferențe între Android și iOS, ar trebui să știți când proiectați pentru aplicații multiplă platformă

中文 版 Versiunea originală chineză publicată pe 10 decembrie 2016

Android VS. iOS: Comparați 20 de componente și modele UI (partea 1)

14. Grid Listes VS. Vizualizare colecție

Listele de grile sunt utilizate în principal pe setul de conținut ordonat, în special pentru imagini. În Android, un antet sau subsol poate fi adăugat într-o grilă pentru a furniza informații sau acțiuni suplimentare. Vizualizarea colecției iOS este pentru a afișa conținutul bazat pe imagini.

Prin tăierea plăcilor de grilă în poziția de defilare inițială a vizualizării, puteți indica debordarea de conținut. Atât listele de grile, cât și Vizualizările colecției pot fi accesate pentru a intra în ecranul de detalii pentru informații suplimentare.

Sursa imaginii: Ghid de proiectare a materialelor Google și Ghiduri de interfață umană iOS

15. Carti

Cardurile au fost utilizate în designul UI de mult timp. După ce Google a lansat Material Design în 2015, cardurile devin un reprezentant comun al designului de Android. Interfața de utilizare a cardului are avantajul său pe mai multe dimensiuni de dispozitiv. Cardurile pot fi redimensionate și rearanjate în funcție de dimensiunile ecranului diferite. Mai mult, cărțile pot conține diverse informații, cum ar fi texte, imagini și diagrame.

Deși iOS nu definește UI-ul cardului în orientările sale, dar designul similar poate fi găsit în aplicația Apple iOS.

În stil vizual, Android subliniază umbrele cărților, dar cărțile sunt plate în iOS 10. (După lansarea iOS 11, apar umbre lungi!)

Sursa imaginii: Ghid de proiectare a materialelor GoogleSursa imaginii: Facebook Design

15. Meniuri VS. Pickers & Ecrane noi

Meniurile Android sunt similare cu dialogurile sale simple. Diferența dintre ele este că dialogurile apar în centrul ecranului cu o suprapunere neagră transparentă, dar poziția meniurilor este relativă la poziția elementelor atinse. Meniurile au o întrerupere mai mică decât dialogurile.

Meniurile apar în următoarele 3 situații: 1) După atingerea pictogramei debordului într-o bară de acțiune sau într-un rând de listă; 2) după atingerea meniului derulant și 3) după atingerea unui rând de stil cu 2 linii care constă din etichetă și valoare.

iOS nu au acest tip de stil de meniu. După atingerea unei celule formată din etichetă și valoare, ecranul va trece la noul ecran care arată opțiunile dintr-un tabel cu o bifare pe una dintre opțiunile pentru a marca starea selectată pe telefoane. Pe tablete, un pop-up poate fi folosit pentru tabelul meniului.

O altă alternativă este „pickers”, liste derulabile cu valori distincte care vă permit să selectați o valoare. După ce o celulă cu o valoare este apăsată, un selector va apărea sub celulă sau va glisa din partea de jos a ecranului.

Recomandătorii se recomandă să fie folosiți doar pentru câteva opțiuni. Dacă aveți o listă lungă, noul ecran pentru tabelul de opțiuni ar fi o alegere mai bună.

16. Selector de dată / oră

Atât Android cât și iOS au propriile selecții de date / ora implicite. Android are date de selectare pentru a selecta o anumită dată (data, luna și anul) și ora selectorului. iOS are 4 tipuri de selector: 1) Data care afișează luni, zile ale lunii și ani. 2) Timp care afișează ore, minute și (opțional) o desemnare AM / PM. 3) Data și ora care afișează datele, orele, minutele și (opțional) o desemnare AM / PM. 4) Cronometrul numărătoare inversă care afișează ore și minute.

17. Împărțitori

Pentru a separa conținutul, se folosesc de obicei divizori.

Android are 2 tipuri de divizoare: 1) Divizoare cu sânge complet, folosite pentru a separa secțiuni de conținut distincte. 2) Împărțitori interni, folosiți pentru a separa conținutul aferent.

iOS nu definește divizori în orientările sale. iOS utilizează tabele grupate și există o zonă gri între 2 tabele grupate pentru separare. iOS are divizori de inserție în tabelul său pentru a forma o celulă.

Android tinde să folosească „spațiu” pentru a separa rândurile, astfel încât Android are rareori divizoare între rândurile ale căror date sunt legate.

În Android, dacă există o pictogramă sau o imagine în partea stângă a unui rând, divizorul de inserție pornește de la o margine din stânga textului și se termină până la marginea dreaptă a ecranului. În iOS, o celulă cu o pictogramă este aceeași ca Android, dar pentru o celulă cu o imagine, divizorul pornește de la marginea stângă a imaginii.

18. Câmpuri text

Câmpurile de text Android apar de obicei în formularele pe care trebuie să le completați. Există 3 tipuri: 1) O singură linie 2) Linii multiple și 3) Lățime completă. În 2017, Android a adăugat un alt tip: zona de text în orientările sale.

În funcție de formatul de intrare diferit, ar trebui să fie furnizat un tip de tastatură adecvat. Atât Android cât și iOS oferă mai multe tipuri diferite de tastatură. Practic, ele pot fi clasificate în 3 tipuri: 1) Tastatură numerică (iOS are tastatură numerică și placă telefonică), utilizate pentru introducerea numerelor de telefon, a numerelor cardului de credit sau a codurilor PIN. 2) Tastatură text, folosită pentru numele persoanelor. 3) Tastatură mixtă, folosită pentru adrese de e-mail sau URL-uri.

Atât Android, cât și iOS pot pune în câmpuri de text marcaje și pictograme sau imagini ca indicatori pentru a ajuta comunicarea. În Android, marcatoarele plutesc în sus atunci când câmpul de text este focalizat sau completat. Acesta este un design destul de inteligent pentru a ajuta utilizatorii să cunoască etichetele chiar și atunci când toate câmpurile de text sunt completate. În iOS, sugerează să nu folosești o etichetă separată pentru a descrie un câmp de text atunci când textul de rezervă este suficient.

iOS are un design mai inteligent, care este atunci când câmpurile de text sunt umplute și focalizate, butonul clar este afișat în partea dreaptă a câmpului de text, astfel încât oamenii pot șterge cu ușurință toate textele printr-o singură atingere. Android nu are acest design în câmpul de text implicit, dar îl puteți găsi în bara de căutare. În Android, puteți personaliza câmpul de text și puteți adăuga un buton de ștergere total în partea dreaptă.

Orientările Android definesc, de asemenea, textele de ajutor, contoarele de caractere și mesajele de eroare pentru câmpurile de text.

19. Glisoare

Glisoarele sunt componentele pentru reglarea setărilor care reflectă nivelurile de intensitate, cum ar fi volumul, luminozitatea sau saturația culorilor. În mod normal, cea mai mică valoare este situată în stânga glisierelor și cea mai mare valoare în dreapta. Glisoarele pot avea pictograme pe ambele capete ale barei pentru a reflecta intensitatea valorii atât în ​​Android cât și în iOS.

Glisoarele Android au 2 tipuri: 1) Glisoare continue, permițând utilizatorilor să selecteze o valoare de-a lungul unui interval. 2) Glisoare discrete, permițând utilizatorilor să selecteze o valoare specifică, cum ar fi 10 sau 20, dintr-un interval.

Android oferă, de asemenea, caseta text modificabilă pentru introducerea numărului pentru utilizatorii care trebuie să stabilească valoarea exactă.

20. Alte modele

20-1. Căutare

Căutarea pe Android are 2 tipuri: căutare persistentă și căutare extensibilă, care poate fi comparată cu căutarea proeminentă a iOS și căutarea minimă.

Căutarea persistentă a Android și căutarea proeminentă a iOS sunt utilizate în principal pentru funcția principală a aplicațiilor este căutarea, cum ar fi aplicația relativă din magazin, în care utilizatorii pot dori să găsească un produs pentru a cumpăra căutând.

Căutarea extensibilă a Android și căutarea minimă a iOS pentru aplicația a cărei căutare este secundară. Android reduce bara de căutare la o pictogramă. După ce pictograma de căutare din bara de aplicații este atinsă, bara de aplicații se transformă într-o bară de căutare. iOS utilizează modul de design vizual, ceea ce face ca barele de căutare să devină semi-transparente, pentru a nu fi vizibile.

iOS folosește și pictograma de căutare pentru a reduce importanța căutării. Mai mult, uneori iOS ascunde barele de căutare în spatele barelor de navigare. Utilizatorii trebuie să gliseze în jos pentru a evoca bara de căutare ascunsă.

20-2. Ștergeți și alte acțiuni

Utilizatorii Android pot selecta un articol apăsând lung și apoi intra în modul de selecție în care butoanele de acțiune, cum ar fi ștergerea, sunt afișate în barele de aplicații. Utilizatorii Android pot, de asemenea, să atingă pictograma de overflow pentru a evoca meniul cu o opțiune „select” și să o atingă pentru a intra în modul de selecție.

Utilizatorii iOS pot glisa spre stânga pentru a evoca acțiuni ascunse, precum ștergere. De asemenea, pot atinge „Editare” în barele de navigare pentru a intra în modul de editare pentru a șterge sau reordona elemente. Dacă există mai multe acțiuni, cum ar fi mutarea și realizarea, în modul de editare, ecranul va avea un tabel care va avea mai multe controale de selecție și o bară de instrumente cu acele acțiuni.

20-3. Selectați Text

Atât în ​​Android cât și în iOS, utilizatorii pot apărea îndelung texte pentru a le selecta. După apăsarea lungă, în Android, pictogramele de acțiune vor fi afișate în bara de acțiune care a devenit un stil antic pentru a indica starea curentă, modul de selecție. În iOS, acțiunile sunt afișate doar într-un meniu deasupra textelor selectate. Android are acum și bara de instrumente plutitoare, cum ar fi iOS, prezentată mai sus, în zona de selecție, cu acțiuni de tăiere, copiere, lipire și multe altele.

După ce textele sunt copiate sau tăiate, utilizatorii pot apăsa îndelung în câmpurile de text pentru a arăta o fereastră de tip paste și a o atinge pentru a lipi.

Sursa: Google

20–4.Progresă și activitate

În general, barele de progres sunt mai bune decât filele, deoarece barele de progres permit utilizatorilor să cunoască starea, câte procente au rămas, astfel încât ar avea pacient să aștepte.

Barele de progres sunt utilizate pentru ca progresul să fie previzibil. Dacă progresul este de necontestat, atunci se vor folosi filele. Dar dacă progresul este previzibil și timpul de așteptare este mai mic de 3–4 secunde, puteți lua în considerare și utilizarea filelor.

Barele de progres apar, pe lângă textele de conținut și dialogurile, marginea de jos a barelor de aplicații / barelor de navigare. Puteți găsi exemplul în aplicațiile browserului.

Barele de progres nu au doar cele liniare, ci și indicatoare circulare. Indicatorii de progres circulari sunt adesea folosiți cu butoanele de descărcare. După apăsarea butoanelor de descărcare, butoanele vor deveni indicatori de progres circulari.

Indicatorii de progres Android au 4 tipuri: 1) Determinat 2) Indeterminat 3) Buffer 4) Interogare nedeterminată și determinată pentru diferite situații.

Indicatori de progres și activitate liniară pentru AndroidAndroid Circular indicatori de progres nedeterminați și determinați

Despre actualizare, Android a învățat de la iOS, folosind swipe în jos pentru a reîmprospăta conținut. o filă circulară va apărea după glisare în jos și va dispărea după ce conținutul este încărcat.

Actualizați listele glisând în jos. Indicatorii de încărcare vor apărea.

20-5. Pictograme: Partajează VS. Acțiune

Când doriți să partajați conținutul de la această aplicație la alta, Android și iOS au propria pictogramă de partajare. Este demn de remarcat, butonul de acțiune iOS (partajare) evocă o vizualizare modală care conține nu numai lista de aplicații, ci și acțiuni precum copierea, favorizarea sau salvarea, care sunt utile în contextul actual.

Pictograma Share Android VS. Pictograma de acțiune iOS

20-6. Bare de stare

Atât barele de stare Android cât și cele iOS au informații precum timpul, starea bateriei, starea Wi-Fi și puterea semnalului. Trecerea din barele de stare pentru a evoca centrele de notificare.

20-7. Barele de navigare VS. Buton Acasă

Barele de navigare Android și barele de navigare iOS sunt diferite. Vă rugăm să nu le confundați.

Barele de navigare Android au 3 butoane pentru aplicații Back, Home și recente. Barele de navigare pot fi virtuale sau fizice.

iOS are un buton fizic, Acasă. O apăsare pentru a vă întoarce acasă; apăsați dublu pentru a accesa listele de aplicații lansate recent. Este demn de remarcat faptul că iOS nu are nicio cheie înapoi ca Android, deci ecranul UI ar trebui să aibă un buton înapoi în barele de navigare.

După lansarea iPhoneX, nu există nicio cheie Acasă pe dispozitiv. Glisați un indicator pe o bară pentru a vă întoarce acasă.

Recapitulare

Navigare

Android obișnuia să folosească sertarul de navigație ca navigație principală, dar în prezent, filele și navigarea de jos sunt mai populare datorită unei mai bune utilizări. iOS întotdeauna, ca de obicei, folosește bare de bare pentru navigare.

App Bar / Navigare Bar

Barele de aplicații Android, titlurile ecranului se aliniază la stânga și butoanele de acțiune sunt puse în partea dreaptă. În iOS, titlurile sunt plasate în centrul barelor de navigare, iar butoanele de acțiune sunt puse pe partea dreaptă și stânga a barelor de navigare.

Bare de instrumente

Android și iOS au bare de instrumente de jos pentru texte de acțiune, pictograme de acțiune sau stare.

Tabele VS. Controluri segmentate

Pentru navigarea la nivelul al doilea sau inferior, Android folosește file care conțin 2 tipuri: fixe și defilabile și acceptă gestul glisant pentru a comuta vizualizarea. iOS utilizează controale segmentate, ale căror articole sunt limitate la 2-5.

Butoane

Chiar dacă Android și iOS au propriile lor stiluri de butoane, designerii vizuali pot totuși să proiecteze butoane după gândul lor, atât timp cât stilurile de butoane nu confundă utilizatorii. Singurul lucru care trebuie remarcat este faptul că Android folosește UPPERCASE, pentru toate textele tappabile, inclusiv butoanele lor.

Butoanele de acțiune plutitoare VS. Apelarea la butoanele de acțiune

Android are propriul buton caracteristic pentru acțiune float pentru acțiunea principală pe ecran. FAB-urile sunt puse în colțul din dreapta jos pentru a ajunge și atinge cu ușurință. iOS apelează la butoanele de acțiune, plasate în centrul barelor de file, având în mod normal un stil diferit cu alte file reale.

Fișele de jos VS. Fișe de acțiune și vizualizări de activitate

iOS a avut foile de acțiune pentru o lungă perioadă de timp, iar Android are, de asemenea, foi de jos cu acțiuni pentru o singură mână.

Dialoguri VS.Alerts

Dialogurile sunt utilizate pentru avertizare, oferind opțiuni și confirmare. Android și iOS pun butonul principal de acțiune în partea dreaptă și acțiune secundară, cum ar fi anularea, în partea stângă. Textele de pe buton trebuie să fie simple și clare. Verbele pot fi folosite în loc de Da și Nu.

Dialoguri cu ecran complet VS. Vizualizări și afișări modale

Dialogurile cu ecran complet Android și vizualizările modale iOS sau pop-urile pe dispozitivele de pe telefon sunt pe ecran complet, dar pe tablete nu sunt ecran complet.

Snackbars & Toasts VS. Alerte auto-închise

Snackbars, toasturi și alerte sunt utilizate ca feedback după o acțiune.

Listează VS. Tabele și celule (rânduri)

Android are tendința de a utiliza spațiu mai degrabă de a diviza pentru a separa textele de conținut conexe din liste. Android folosește divizoare atunci când textele de conținut sunt total distincte. iOS are divizoare pentru a forma celule în tabelele sale. Celulele tappabile iOS au indicatori de ecran următori, care oferă o mai bună utilizare a utilizării decât Android. Tabletele iOS au 2 tipuri: tabele simple și grupate.

Subpozițiile VS. Anteturi de masă grupate și antet de secțiune

Android are doar sub-anteturi, dar iOS are antete de masă pentru tabele grupate și anteturi de secțiune pentru tablete simple.

Controlul listelor

Android și iOS au propriile lor controale de listă pentru selecție, selecție multiplă și reordonare. Vă rugăm să alegeți cele potrivite în funcție de fiecare platformă.

Meniuri VS. Pickers & Ecrane noi

Android are meniuri, dar iOS utilizează selecții pentru liste scurte și ecrane noi pentru liste mai lungi.

Grid Listes VS. Vizualizarea colecției

Practic, Android și iOS au vizualizări similare pe grilă / colecție.

Carduri

Interfața de utilizare în stil card este o caracteristică esențială a designului materialelor Android, dar iOS are și design similar.

Pickers Data / Ora

Android și iOS au propriile selecții de date / ora implicite.

Divizoare

Android are divizoare, dar iOS folosește tabele de grup pentru a separa conținutul distinct.

Câmpuri de text

Android și iOS au propriile lor câmpuri de text. Afișați tastaturi adecvate în funcție de formatele de introducere ale câmpurilor de text.

Sliders

Android și iOS au propriile componente. Ambele sunt similare.

Căutare

Android are căutare persistentă și căutare extensibilă precum iOS are o căutare proeminentă și o căutare minimă. Uneori, iOS ascunde barele de căutare în spatele barei de navigare, utilizatorii trebuie să gliseze în jos pentru a-i evoca.

Ștergeți și alte acțiuni

Utilizatorii Android trebuie să selecteze mai întâi articole și apoi să efectueze alte acțiuni precum ștergere. iOS acceptă trecerea pentru a șterge. De asemenea, utilizatorii iOS pot intra în modul de editare pentru a șterge elemente sau a selecta elemente pentru a efectua alte acțiuni.

Selectați texte

În mod tradițional, după ce textele sunt selectate, barele de aplicații Android arată acțiuni, cum ar fi copierea, tăierea, selectarea tuturor. Android are acum și o bară de instrumente cu acțiuni afișate deasupra textelor selectate precum iOS.

Progres și activitate

Dacă progresul unei acțiuni este previzibil și măsurabil, utilizați bara de progres; dacă nu, folosiți filele în schimb.

Pictograme: Partajează VS. Acțiune

Android și iOS au propria pictogramă de partajare. Nu folosiți pictograma de distribuire a Android pe iOS și invers.

Bare de stare

Bara de stare Android și iOS au practic, timp, stare baterie, semnal Wi-Fi și semnal de conexiune celulară. Evocați centrele de notificare alunecând din barele de stare.

Barele de navigare VS. Butoane Acasă

Barele de navigare Android au 3 taste, spate, acasă și aplicații recente. iOS are o singură cheie, doar acasă. Atingeți dublu pentru a evoca lista recentă de aplicații. Butoanele înapoi pe barele de navigare din aplicațiile iOS sunt necesare.

rezumat

Din observația din ultimii ani, comportamentele și componentele utilizatorului Android sunt din ce în ce mai asemănătoare cu iOS, chiar dacă Android păstrează în continuare unele comportamente unice. Cred că Google a încercat să domine limbajul de design al interfeței de utilizator pe diferite platforme. În viitor, este previzibil ca Android și iOS să fie mai aproape și mai aproape și acest lucru este bun pentru utilizatori și dezvoltatori.

Chiar dacă unele componente ale utilizatorului nu sunt definite în ghidurile de proiectare a materialelor Android sau în ghidurile interfeței umane pentru iOS, aceasta nu înseamnă că nu puteți utiliza aceste componente. În unele situații, datorită limitării implicite a componentelor UI, este posibil să împrumutăm în continuare experiență de la alte platforme și să personalizăm componente pentru a cuceri dificultăți. Adevărul real este că comportamentele sau componentele ar confunda utilizatorii noștri sau nu.

Aceste modele introduse aici nu pot fi aplicate direct la fiecare aplicație. Este posibil să fie nevoie să fie ajustate în funcție de diferite scenarii și cerințe. Sper că toată lumea știe mai bine despre componentele și comportamentele a 2 platforme. Dacă există greșeli sau aveți întrebări, vă rugăm să corectați sau să discutați cu mine. Mulțumesc!

Vă rugăm să dați 10 clapsdacă ați citit acest articol.
Vă rugăm să dați 20 de claps, dacă credeți că este util.
Vă rugăm să dați 50 de claps, dacă credeți că este uimitor!
Mulțumesc :)
-------------------------------------------------- ------------------
Nu vorbesc despre motivele pentru care Ghidurile de proiectare materială și ghidurile de proiectare a interfeței umane iOS au acest tip de comportamente și reguli, decât altele. Acest articol seamănă mai mult cu utilizarea practică. Aș dori să discut despre contextele și motivele din alte articole în viitor.
Nici nu am actualizat pentru Android O și iOS 11.

Referinţă