Introducere în modelele de design iOS

Cele mai multe platforme mobile existente au un set de modele de design, instrucțiuni scrise sau nescrise despre modul în care lucrurile ar trebui să arate, să se simtă și să funcționeze. Aplicarea modelelor de design dovedite îmbunătățește gradul de utilizare a produsului dvs., crește conversia și oferă un sentiment de familiaritate utilizatorilor. Ignorarea standardelor va confunda și va împiedica utilizatorii și este ceva ce fiecare designer ar trebui să încerce să evite cât mai mult posibil.

În acest articol, aruncăm o privire asupra modelelor de design pe iOS, arătându-vă o serie de exemple care ilustrează modul în care aplicațiile existente aplică unele dintre aceste modele de design.

Care sunt modelele de design?

Pe scurt, un model de design este o soluție recurentă care rezolvă o problemă specifică de proiectare. Deoarece este recurentă și utilizatorii o întâlnesc adesea, ei devin repede familiarizați cu soluția oferită de model.

Dunga oferă un model de proiectare pentru plăți mobile.

Pictograma hamburger, de exemplu, a devenit un model de design binecunoscut. Știm cu toții că va deschide un meniu când se atinge pictograma. Acest comportament este atât de înrădăcinat încât ar putea confunda utilizatorul dacă atingerea pictogramei a dus la o acțiune diferită.

Ori de câte ori designerii nu respectă modelele de design și în schimb își aleg să implementeze propria soluție, sunt posibile două rezultate:

  • Utilizatorul este supărat sau frustrat, deoarece nu înțelege ce design sau interfață încearcă să le spună sau pentru că așteptau un rezultat diferit.
  • Utilizatorul este încântat, deoarece noua soluție este o îmbunătățire față de cea existentă. Adesea luăm în considerare acest lucru design inovator, deoarece poate fi un schimbător de joc, înlocuind modelele de design existente.

Fiți atenți, totuși, deoarece linia dintre o experiență frustrant și un design inovator este deseori mai subțire decât vă așteptați să fie.

Având în vedere acest lucru, să ne concentrăm atenția asupra iOS și să vedem cum se aplică modelele de design platformei mobile Apple.

Instrucțiunile Apple

Pentru a cultiva standardele de design consistente pentru platforma iOS, Apple furnizează un document cunoscut sub numele de Orientări privind interfața umană sau HIG. Acesta definește standardele la care dezvoltatorii și designerii trebuie să adere. Exemplele includ aspectul standard al tastaturii, selectorul de date și bara de stare.

Design Vision

Cu toate acestea, standardele de proiectare nu se limitează la utilizarea unor elemente de interfață utilizator coerente. Împreună cu lansarea iOS 7, Apple a subliniat și noua viziune cu privire la design, care încorporează trei teme majore, după cum se subliniază în Ghidul Interfeței Omului iOS al Apple:

  • Deferenţă. Interfața cu utilizatorul ajută utilizatorii să înțeleagă și să interacționeze cu conținutul, dar niciodată nu concurează cu acesta.
  • Claritate. Textul este lizibil la orice dimensiune, icoanele sunt precise și lucid, ornamentele sunt subtile și adecvate, iar accentul accentuat pe funcționalitate motivează designul.
  • Adâncime. Straturile vizuale și mișcarea realistă conferă vitalitate și sporesc încântarea și înțelegerea utilizatorilor.

Uite și simți

Cea mai mare schimbare în iOS 7 a fost modul în care prezentăm vizual elemente. Designul plat a fost introdus utilizatorilor iOS, ceea ce a reprezentat o schimbare majoră. Mulți oameni au simțit că nu este neapărat o îmbunătățire.

Destul de distractiv, privind înapoi la iOS 6, opinia generală este că designul skeuomorf este depășit. Percepțiile noastre s-au schimbat în mod clar.

Când oamenii se obișnuiesc cu designul plat al iOS 7, înseamnă că se obișnuiesc cu un anumit stil vizual. Pentru a spune altfel, în calitate de dezvoltator, ați prefera, de preferință, stilul vizual al iOS 7, pentru că asta este ceea ce au așteptat utilizatorii de la iOS.

Desigur, nu este vorba doar de aspectul aplicației dvs. Modul în care se comportă și se simte este, de asemenea, un aspect important de luat în considerare. Animalele subtile au devenit o marcă înregistrată a iOS 7. Acest lucru are un impact atât de mare asupra aspectului aplicației dvs.,.

Animațiile pe care le folosiți în aplicația dvs. sunt importante și fac parte din modelele de design. Utilizatorii simt și apreciază animații rafinate, ceea ce înseamnă că merită să depuneți eforturi în ele.

Aspectul icoanelor contează. Aceasta este o captură de ecran a aplicației iOS din Facebook.

Folosim o mulțime de iconografie în timpul procesului de proiectare a unei aplicații. Icoanele reprezintă un instrument important pentru modelele de interfață, având înțeles global, indiferent de contextul utilizatorului.

Utilizarea corectă a icoanelor este un început excelent pentru aplicarea modelelor de design, dar aspectul acestor simboluri este de asemenea crucial. Ne-am familiarizat cu iconografia plată și simplă. Iconografia foarte detaliată înseamnă că nu îndeplinim așteptările utilizatorului și, prin urmare, distrugem eficiența designului.

Elemente care sprijină modelele de design

Unul dintre modelele majore de design noi este utilizarea lui elemente translucide de interfață cu utilizatorul. Centrul de control revizuit este un bun exemplu. Apple utilizează transluciditatea și neclaritatea pentru a face utilizatorul conștient de conținutul din fundal. Aceasta ajută la acordarea contextului utilizatorilor în timp ce aceștia utilizează centrul de control.

Utilizarea spațiu negativ contribuie, de asemenea, la creșterea eficienței și utilizării desenelor. Este unul dintre componentele cheie care fac iOS 7 atât de diferit de iOS 6. În combinație cu un set limitat de culori cheie, acest lucru vă oferă ingredientele esențiale pentru proiectarea bine gândită a interfeței utilizator. Ca designeri și dezvoltatori, suntem forțați să ne gândim mai mult la alegerile de design pe care le facem - chiar și la cele mici.

O schimbare majoră și poate controversată a fost trecerea la butoane fără margini, o schimbare critică în modelele de design iOS. Este probabil unul dintre motivele pentru care iOS 7 a primit inițial o mulțime de critici. Este o abordare mai extinsă a designului plat. Această schimbare ilustrează perfect linia fină dintre designul inovativ și designul care duce la frustrare.

Și apoi, bineînțeles, pentru elementele interfeței cu utilizatorul, există detaliile care trebuie luate în considerare. Barele de instrumente și pictogramele barei de navigare, de exemplu, ar trebui să aibă o zonă tappabilă de cel puțin 44x44 puncte. Pentru pictogramele bara de tabelă, se recomandă 50x50 de puncte. Numărul maxim de pictograme într-o bară de file este de cinci pentru iPhone și iPod Touch. O listă completă a dimensiunilor recomandate ale diferitelor elemente de interfață cu utilizatorul poate fi găsită în Ghidul pentru interfața omului.

Același lucru este valabil și pentru gesturi. Utilizarea unor gesturi obscure sau greu de ghicit pentru acțiuni comune conduce la confuzii utilizatorilor. Folosirea unui gest pentru a deschide un link pare o idee destul de proastă. Dreapta?

Un alt punct focal principal al iOS 7 este tipografia. Apple încurajează utilizarea unui singur font dinamic în loc de mai multe fonturi.

Există, de asemenea, o viziune clară cu privire la brandingul aplicațiilor. Chiar dacă ne-am obișnuit cu brandingul explicit în aplicații, Apple preferă acum branduri care sunt mai puțin explicite în modul în care se marchează și se promovează. Cu alte cuvinte, designul sau interfața cu utilizatorul ar trebui să fie focalizarea - nu marca. Culorile cheie ale aplicației și limbajul de design sunt perfecte pentru a promova un brand într-o manieră non-obstructivă.

Interfața iPad

Mulți clienți de e-mail utilizează un controler de vizualizare separată pentru o navigare eficientă.

Modelele de design nu numai dictează cele mai bune practici pentru desene sau modele în general - și ele sunt specifice. Unele dispozitive au sau necesită standarde diferite. Unele interfețe iPad sunt un exemplu excelent.

Popovers și controlori de vizualizare împărțită, de exemplu, sunt elemente de interfață cu utilizatorul pe care nu le veți găsi pe iPhone sau iPod Touch. Aceste modele de design răspund la ecrane mai mari, cum ar fi cele găsite pe iPad, iPad Air și iPad Mini.

Popover este ceva ce nu veți găsi pe iPhone sau iPod Touch. Aceasta este o captură de ecran a unui pop-up în aplicația iBooks a Apple.

Ce să-ți amintesc

  • Prioritizați și prezentați mai întâi caracteristicile principale. Identificați principalele povestiri ale utilizatorilor. Acestea ar trebui să necesite cea mai mică cantitate de navigație. 
  • Modelele de design utilizează adesea funcționalități specifice dispozitivului pentru a îmbunătăți relevanța unei aplicații și a conținutului acesteia. Locația, de exemplu, este adesea folosită pentru a afișa utilizatorului un conținut relevant.
  • Furnizați indicii de navigare, astfel încât utilizatorii să știe întotdeauna unde sunt în aplicația dvs..
  • Modelele de design sunt adesea concentrate pe optimizarea apeluri la acțiune astfel încât utilizatorii să li se reamintească în mod repetat următoarea acțiune pe care trebuie să o întreprindă. Aplicația Tumblr ilustrează acest lucru bine.
Aplicația Tumblr pentru iOS este un exemplu excelent de focalizare pe un flux de utilizator orizontal în locul unui flux vertical.
  • Intrarea utilizatorilor ar trebui să fie cât mai simplă și mai simplă posibil. Reduceți numărul de câmpuri într-un formular și utilizați valorile implicite ori de câte ori este posibil. Tumblr este un bun exemplu de defaults inteligente.
  • Dacă un element interfață de utilizator este tappable, asigurați-vă că acest lucru este clar pentru utilizator prin designul elementului.
  • Modelele de proiectare mobilă constau adesea din fluxuri orizontale, nu din cele verticale. Animați automat o vizualizare nouă în loc să așteptați ca utilizatorul să deruleze în jos. Este important să faceți experiența fără probleme și fără probleme. Spre deosebire de un site web, nu este necesar să se limiteze o anumită acțiune (de ex. Efectuarea unei achiziții) într-o singură vizualizare. Este adesea mai eficientă și mai elegantă pentru a ghida utilizatorul printr-o serie de vizualizări cu o singură chemare la acțiune.
  • În cele din urmă, înțelegeți contextul dispozitivelor mobile. Dispozitivele mobile sunt utilizate în principal în explozii scurte, ceea ce este foarte diferit de modul în care lucrăm cu un desktop sau un notebook.

Concluzie

Modelele de design se bazează pe bunul simț și practica. E inutil scop pentru design inovator atunci când există șanse să ajungeți la un utilizator frustrat. Urmați instrucțiunile atunci când sunt disponibile, utilizați modele de design stabilite și îmbunătățiți gradul de utilizare al produsului.

Studiați ce soluții utilizează alte aplicații pentru a rezolva anumite probleme. Cum gestionează majoritatea aplicațiilor înregistrarea utilizatorilor? Care sunt abordările testate pentru integrarea comerțului electronic? Cum este cea mai bună integrare socială într-o aplicație? Atenția la detalii în timp ce folosiți aplicațiile este o modalitate excelentă de a vă familiariza cu diferite modele de design.

Resurse

  • iOS Ghidul Interfeței Umane
  • Arhiva UX
  • Utilizator la bord
Cod