Introducere în proporție

Proporția are o istorie îndelungată în definirea frumuseții în artă și design. Egiptenii antici foloseau un sistem de grilă pentru arta lor murală, ajutând la stabilirea scării, a proporțiilor și la ilustrarea ierarhiei. Grecii antici erau fascinați de proporțiile corpului uman. Raportul de aur a fost folosit pentru a crea proporții „perfecte” pentru Biblia lui Gutenberg. Nu lipsesc exemplele în care proporțiile au fost luate în considerare cu atenție.

Astăzi, proporția trăiește ca un principiu puternic de design care ajută la formarea coerenței, ierarhiei, ritmului și frumuseții generale în design. În această lecție, vom discuta cum să folosim proporția în designul UI.

Size vs Scale vs Proportion

Pentru a profita de proporție în designul UI, trebuie mai întâi să înțelegem diferențele dintre mărime, scară și proporție. Toți acești trei termeni sunt legați, dar există câteva distincții clare de luat în considerare.

Dimensiunile sunt dimensiunile reale ale unui element, adesea măsurate în px, pt, em, rem etc.

De exemplu, dimensiunea acestui logo este de 75px înălțime și 275px lățime.

Scala este dimensiunea relativă a unui element, adesea măsurată în procente sau multipli.

De exemplu, un element poate fi scalat pentru a fi mai mare sau mai mic decât dimensiunea sa originală.

Proporția este relația armonioasă dintre două sau mai multe elemente de scară.

De exemplu, dacă un element crește în mărime, elementele rămase ar trebui să crească, de asemenea, în același ritm pentru a rămâne proporționale.

Proporția în UI Design

Compararea unui logo proporționat și a unuia disproporționat este un lucru, dar probabil că vă întrebați „Cum funcționează acest lucru pentru UI Design?”. La urma urmei, cu diferite dimensiuni de ecran și dispozitive, nu este posibil să păstrezi un UI proporțional, nu-i așa? Răspunsul la această întrebare este „Da și Nu.”

UI-urile includ de obicei o combinație de elemente statice și fluide.

  • Elementele statice rămân de aceeași mărime, indiferent de cât de mare sau mic este ecranul.
  • Elementele fluide se scalează la un procent specificat din containerul său.

Prin definiție, compararea elementelor statice cu elementele fluide nu ar avea niciodată ca rezultat un design proporțional, deoarece acestea nu se scalează în același ritm. Cu toate acestea, utilizatorii nu schimbă de obicei dispozitivele în timp ce experimentează interfața dvs. de utilizator.

Cu acest lucru în minte, este posibil să folosiți proporția în proiectarea interfețelor de utilizator. Cu toate acestea, s-ar putea să nu fie așa cum v-ați aștepta.

Unități de măsură în UI Design

Ați auzit probabil termenul „pixel” folosit cel mai des ca unitate de măsură pentru produsele digitale. Acest lucru a fost, în general, acceptabil până în 2010, când Apple a introdus ecranul Retina.

Ecranul Retina a schimbat modul în care ne gândeam la „dimensiune” prin faptul că a împachetat de două ori mai mulți pixeli pe centimetru pătrat de ecran. În timp ce dimensiunea unui element între un ecran Retina și un ecran non-Retina pare a fi aceeași, numărul total de pixeli care alcătuiesc acel element este mult diferit. De exemplu, un buton care are o înălțime de 48px pe un ecran obișnuit ar avea acum o înălțime de 96px pe un ecran Retina din cauza densității pixelilor.

De atunci, multe ecrane diferite cu densitate mare de pixeli (High Pixel Density (HPD)) au devenit disponibile în multe mărci și dispozitive diferite. Din fericire, ecranele HPD sunt definite, de obicei, în funcție de câți pixeli mai mulți încap pe centimetru pătrat decât afișajul standard cu densitate de pixeli 1X.

De exemplu, majoritatea ecranelor pot fi descrise ca având o densitate a pixelilor de 1X, 2X sau 3X.

Termenul „pixel” este încă acceptat în mod obișnuit pentru a descrie dimensiunea unui element. Cu toate acestea, pentru a evita confuziile, mulți proiectanți preferă să folosească termenul „punct” sau „pt”, care descrie dimensiunea, indiferent de densitatea de pixeli a ecranului.

Pentru restul acestei lecții, vom folosi termenii „pt” și „px” în mod interschimbabil ca unitate de măsură pentru a descrie relațiile dintre elementele din designul nostru.

Sistemul de grilă de 8 puncte

Când lucrăm cu un software de design, cum ar fi Illustrator, Photoshop, Sketch, XD, Figma etc., este foarte frecvent ca designerii să folosească grile sau coloane pentru a ajuta în eforturile lor de design. Multe dintre principiile de design discutate în acest curs pot fi realizate cu ajutorul grilelor sau coloanelor, așa că nu este surprinzător faptul că acestea sunt un instrument popular în setul de instrumente al designerului.

Cu toate acestea, există o strategie specială, care funcționează excepțional de bine pentru proporții. Această strategie este cunoscută sub numele de Sistemul de grilă de 8 puncte.

Sistemul de grilă de 8 puncte a fost introdus pentru prima dată de specificația Material Design de la Google. Din fericire, este destul de ușor de înțeles. În esență, doriți să utilizați o grilă care este compusă din pătrate de 8 x 8 pt. Pe măsură ce proiectați deasupra acestei grile, veți dori să vă asigurați că toate elementele se fixează pe grilă.

Aceasta are ca rezultat elemente cu dimensiuni care sunt întotdeauna divizibile cu 8. Prin proiectarea în acest mod, este ușor să păstrați elementele proporționale, creând în același timp un sentiment de ritm vertical în întregul design.

De ce 8 puncte?

Sistemul de 8 puncte este cel mai adoptat pe scară largă din două motive principale:

  • Cele mai comune dimensiuni de ecran sunt divizibile cu 8, ceea ce face ca desenele dvs. să fie foarte clare și clare pe majoritatea dispozitivelor (fără pixeli divizați).
  • Dimensiunea de bază recomandată a fontului pe web este de 16px. Acest lucru permite dezvoltatorilor să scaleze elementele de pe o pagină web în unități REM, rămânând în același timp fideli sistemului de grilă.

În general, există mai multe beneficii pentru utilizarea a 8 puncte, spre deosebire de orice alt număr pentru grilă. Cu toate acestea, puteți folosi un număr precum 10pt sau 12pt dacă vă convine mai bine.

De ce nu 4 puncte?

Specificația Google Material Design recomandă folosirea a 4 puncte pentru „Componente mai mici, cum ar fi iconografia și tipografia”. Cu toate acestea, majoritatea elementelor de interfață utilizator pot fi încă gestionate de sistemul de 8 puncte, așa că este mai popular pentru început.

Raportul de aur

Sistemul de grilă de 8 puncte are avantajele sale clare în designul de interfață utilizator, dar dacă faceți o căutare rapidă pe Google pentru „Proporție în designul de interfață utilizator” veți fi întâmpinați cu o primă pagină plină de rezultate referitoare la Raportul de aur.

Rațiunea de Aur este de 1:1,618 și se crede că este intersecția dintre matematică și frumusețea estetică. Mulți designeri ignoră cu totul sistemele de grilă în favoarea creării de proporții cu Raportul de Aur în schimb.

Există o mulțime de exemple despre cum a fost folosit Raportul de Aur pentru orice, de la Biblia lui Gutenberg la designul de logo-uri din zilele noastre și până la apariții în natură. Cu toate acestea, există și alții care cred că frumusețea Rației de Aur este pur și simplu un mit.

Indiferent, nu se poate nega faptul că mulți sunt îndrăgostiți de Rația de Aur, așa că merită cu siguranță să fie menționată în această lecție.

Utilizarea Rației de Aur în designul UI

În lecția 4 a acestui curs am discutat despre faptul că un design nu ar trebui să aibă mai mult de 3 sau 4 niveluri de ierarhie într-o anumită secțiune a UI. Ținând cont de acest lucru, puteți aplica Golden Ratio în designul dvs. urmând acești pași simpli:

Definiți înălțimea unui dreptunghi și multiplicați acest număr cu 1,618 pentru a găsi lățimea. Acest lucru creează un „dreptunghi de aur.”

În exemplul de mai sus, numărul nostru de pornire este 350pt, dar puteți folosi orice număr doriți.

Divizați dreptunghiul dvs. de aur în pătrate perfecte. Fiecare pătrat perfect va rezulta un nou dreptunghi auriu, mai mic.

Continuați să împărțiți dreptunghiul auriu până când veți avea 3-4 pătrate perfecte diferite, de dimensiuni diferite.

Utilizați dimensiunea fiecărui pătrat ca un „placeholder” pentru a vă ajuta să rupeți aspectul și să comunicați ierarhia în design.

În general, rezultatul este un design estetic și proporționat. Aruncați o privire la acest exemplu de pe Prototypr.io.

Starting With Constraints

Acum că am acoperit câteva metode de stabilire a proporțiilor în UI Design, haideți să discutăm câteva puncte de pornire excelente. Pornind mai întâi de la constrângeri, este mai ușor să vă construiți UI în jurul acestor constrângeri.

Mobile First Design

Expresia „Mobile First” a fost inventată de Luke Wroblewski în cartea sa cu același titlu. Termenul a căpătat popularitate în rândul designerilor ca o modalitate de a combate nevoia de a înghesui mai multe lucruri într-o interfață de utilizator doar pentru că exista un spațiu amplu pentru a face acest lucru.

Prin concentrarea pe designul mobil în primul rând, designerii trebuie să lucreze în jurul constrângerilor dispozitivelor mobile și să se concentreze pe ceea ce contează cu adevărat. Ca urmare, experiența utilizatorului rămâne consecventă între dispozitive, deoarece scopul principal al interfeței de utilizator rămâne în centrul atenției.

Dimensiunea fontului

După cum s-a menționat anterior, dimensiunea implicită a fontului pentru corpul textului pe web este de 16px pentru majoritatea browserelor importante. Orice dimensiune mai mică decât aceasta poate declanșa un comportament neașteptat de zoom pe dispozitivele mobile Apple. Ca urmare, în general, se recomandă să lăsați 16px ca dimensiune de bază a fontului de bază și să specificați celelalte dimensiuni ale fontului (titluri, text mic, legende, etichete etc.) în mod corespunzător.

Puteți defini aceste dimensiuni ale fontului ținând cont de proporții, urmând specificațiile Google Material’s Design și alegând dimensiuni cu creșteri de 4pt, cum ar fi ghidul de stil Bootstrap pentru dimensiunea fontului.

Nota: nu este recomandată incrementarea mărimii fontului cu Raportul de Aur, deoarece diferențele dintre fiecare dimensiune a fontului ar fi mult prea mari. De exemplu, pornind de la o dimensiune a fontului de bază de 16 și înmulțind fiecare nivel de titlu cu 1,618 ar rezulta un titlu H1 de 177,4 pct, ceea ce ar fi foarte dificil de citit.

Dimensiunea butonului

Un alt factor limitativ de luat în considerare este precizia metodei de introducere a datelor care este utilizată în designul dumneavoastră. În acest caz particular, ne referim la degete, degete mari, cursoare și stilouri.

Degetele și degetele mari sunt mult mai largi și mai puțin precise decât cursoarele sau stilourile. Ținând cont de acest lucru, este important să vă asigurați că dimensiunile pentru butoanele, intrările, pictogramele sau alte puncte tactile sunt alese cu atenție pentru a ține cont de aceste limitări.

Google’sMaterial Design recomandă ca punctele tactile pe mobil să nu fie mai mici de 48pt înălțimeși 48pt lățime, cu nu mai puțin de 8pt între ele.

Lățimea conținutului

Contenutul este fluid, ceea ce înseamnă că umple cât mai mult spațiu orizontal și vertical de care este capabil. În ciuda acestei caracteristici, este o bună practică să definiți o lățime minimă și maximă pentru conținutul dumneavoastră.

Lățimea minimă a conținutului poate fi determinată de lățimea minimă a ecranului pe care o va suporta designul dumneavoastră. Cea mai mică rezoluție a ecranului pe care majoritatea designerilor o acceptă este de 320px (adică la 1X) lățime. Cu toate acestea, ar trebui să vă alegeți lățimea minimă pe baza datelor reale ale utilizatorilor, dacă reușiți să le obțineți. Google Analytics este un loc bun pentru a căuta acest tip de date.

În timp ce lățimea conținutului poate umple atât de mult ecranul cât îi este dat, în general nu este recomandat să permiteți conținutului dvs. să se întindă pe mai mult de 52 de caractere pe rând. Acest lucru ar sugera că lățimea maximă a conținutului dvs. poate fi determinată prin utilizarea textului real al corpului textului la dimensiunea normală a fontului său și găsirea unei lățimi confortabile a conținutului care să se încadreze în acest interval.

Concluzie

În concluzie, proporția este un principiu de proiectare util. În ciuda faptului că are o combinație de elemente statice și fluide, o interfață utilizator proporțională poate fi obținută în continuare prin utilizarea unui sistem de grilă de 8 puncte, a raportului de aur sau a unei alte metode. Când începeți să definiți dimensiunile elementelor, este o practică obișnuită să începeți cu constrângerile, cum ar fi dispozitivul, dimensiunea fontului, dimensiunea butonului și lățimea conținutului. După ce dimensiunile dvs. de bază sunt definite, este mult mai ușor să scalați elementele în consecință.

Lecția următoare
Principii de proiectare: Spațiul alb

Lecția anterioară
Principii de design: Emfaza

Feedback

Cum poate fi îmbunătățită această lecție? Vă rugăm să lăsați feedback-ul dumneavoastră mai jos!

.