Principiile ierarhiei vizuale pentru designeri

Principiile ierarhiei vizuale pentru designeri sunt un concept de design care este folosit pentru a ghida modul în care ochii privitorului se mișcă printr-un design și pentru a determina care elemente sunt cele mai importante sau mai atractive din punct de vedere vizual.

La început erau tăblițe de piatră, suluri de papirus și hârtie. Apoi au venit ecranele computerelor și tabletele electronice. Pe măsură ce tehnologia de afișare a paginilor evoluează, designerii au o modalitate clară de organizare a conținutului. Dar care este mai bun? Pe scurt , ierarhie vizuală.

Iată definiția ierarhiei vizuale: Ierarhia vizuală este aranjamentul elemente grafice în design în ordinea importanţei fiecărui element. Greutatea vizuală determină importanța elementului în ierarhia designului, spunându-i privitorului pe ce să se concentreze și în ce ordine.

Resurse pentru designeri. 50 gratuit

Aceasta devine o problemă din ce în ce mai importantă, deoarece cadrele receptive îi obligă pe designeri să se gândească la mai multe pagini diferite simultan. Confruntați cu text dens și intervale scurte de atenție, designerii au dezvoltat 6 principii pentru a îndrepta privirea cititorului către cele mai importante informații.

Aceste 6 principii ale ierarhiei vizuale vă vor ajuta să proiectați totul, de la broșuri la aplicații, asigurându-vă că utilizatorul final are o experiență de citire pozitivă pentru designeri.

Toate culturile sunt citite de sus în jos, iar majoritatea culturilor sunt citite de la stânga la dreapta. Dar deși această cunoaștere este importantă pentru designul paginii, designerii știu că sarcina este mult mai dificilă.

Studii recente au arătat că oamenii scanează mai întâi o pagină pentru a vedea dacă sunt interesați de ea înainte de a o citi. Modelele de scanare tind să ia una dintre cele două forme, „F” și „Z”, și puteți profita de acest lucru în designul dvs.

F-Patterns. Principiile ierarhiei vizuale

F-şabloane se aplică paginilor de text tradiționale, cum ar fi articolele sau postările de blog. Cititorul scanează partea stângă pagină caută cuvinte cheie interesante în titluri aliniate la stânga sau propoziții de subiect inițiale, apoi se oprește și citește (la dreapta) când dă peste ceva interesant. Rezultatul arată ca un F (sau un E, sau ceva cu și mai multe dungi orizontale; dar termenul „F” a rămas blocat).

Cum poți folosi asta? Aliniați informațiile importante la stânga și utilizați titluri scurte, aldine, marcatori și alte elemente similare care atrage atenția pentru a despărți blocurile de paragrafe.

Modelul Z. Principiile ierarhiei vizuale

Z-modele se aplică altor tipuri de pagini, cum ar fi reclame sau site-uri web, unde informațiile nu sunt neapărat prezentate în paragrafe bloc. Cititorul scanează mai întâi partea de sus a paginii, unde este probabil să se găsească informații importante, apoi se deplasează în colțul opus în diagonală și face același lucru în partea de jos a paginii.

Designerii web își proiectează de obicei paginile pentru a se potrivi în mod explicit cu acest comportament, plasând cele mai importante informații în colțuri și orientând alte informații importante de-a lungul barelor de sus și de jos și conectând diagonala.

În cele de mai jos În designul ansamblului conferinței din 2010, elementele importante sunt logo-ul (stânga sus), un buton „Înregistrați-vă acum” (dreapta sus) și o listă de difuzoare (jos), care sunt plasate strategic în locuri frumoase cu model Z.

2. Mărimea contează. Principiile ierarhiei vizuale
_

Este destul de simplu: oamenii citesc mai întâi lucruri mari. Dacă ochii îți sunt atrași de „performanță” înainte de a te „împărți” în anunțul de mai jos pentru Young Vic, ar trebui să contactați imediat un psiholog perceptiv: probabil că ați putea câștiga bani buni dacă sunteți testat ca o anomalie rară.

Ceea ce este interesant este că această tendință este de fapt suficient de puternică pentru a respinge regula de sus în jos. În imaginea de mai sus, „hack” suprascrie „time to action” deoarece este mai mare și la stânga (deci regula de la stânga la dreapta ajută).

Dar pe pagina următoare a Raportului anual: Campania pentru drepturile omului 2012 (dezvoltat în a cincea coloană media) citim în mare măsură font „Lupta pentru egalitate pe traseul campaniei” înainte de textul de deasupra „Alegeri 2012”. Principiile ierarhiei vizuale

„Alegeri 2012” este ordinea de cel mai înalt nivel de informații: ne spune tema generală la care se referă informațiile de mai jos. Dar designerul a decis că titlul articolului era mai interesant pentru cititori și, prin urmare, l-a evaluat astfel încât să fie citit mai întâi.

3. Spațiu și textură. Principiile ierarhiei vizuale

O altă modalitate de a atrage atenția este oferi conținutului suficient spațiu pentru a respira . Dacă există un spațiu negativ semnificativ în jurul butonului sau liniile din blocul de text sunt urmărite pe scară largă, aceste elemente vor fi mai ușor vizibile pentru cititori.

După cum puteți vedea în imaginea de mai jos (parte a site-ului DrawtoClick), spațierea poate fi o alternativă elegantă sau o completare la utilizarea dimensiunii. Aici, punctul de vânzare, „Notre agence vouscompagne...”, este scris cu litere foarte mici, dar este înconjurat de o abundență de spațiu alb, indicând importanța acestuia. Mai jos, sintagmele „Le Compendre”, „Le Réaliser” și „Le Partager” primesc un accent suplimentar, fiind desprinse de spațiul înconjurător.

Când oamenii vorbesc despre „textură” în relație cu ierarhia vizuală, nu se referă la efectele grafice ale texturii. Mai degrabă, acest tip de „textură” se referă la aranjamentul sau structura generală a spațiului, textului și altor detalii de pe o pagină. Acest exemplu de la Bright Pink ilustrează bine conceptul:

În prima imagine, cuvântul „Sport” este mai sus în ierarhie decât „badminton” pentru că este mai înalt, mai mare și mai îndrăzneț. În imaginea 2, cele două cuvinte sunt aproximativ echivalente, datorită dreptunghiului negru care face ca „badmintonul” să iasă în evidență și îl plasează în propriul spațiu.

În cea de-a treia imagine, mâzgălirea de fundal întrerupe spațiul „Sport”, dar nu și spațiul „badminton” și, prin urmare, are ca rezultat o inversare în care „badmintonul” este cel mai înalt în ierarhie. Această dezvoltare este dificil de prezis, așa că designerii o asociază adesea cu un simț holistic al „texturii”.

4. Greutatea fontului și împerecherea. Principiile ierarhiei vizuale

Selectarea fontului este esențială pentru stabilirea ierarhiei vizuale. Printre cele mai importante atribute ale unui font se numără greutatea, lățimea liniilor care alcătuiesc literele sale și stilul, cum ar fi serif și sans serif. Alte modificări, cum ar fi cursivele, pot juca, de asemenea, un rol.

Observați cum căști influențează ordinea ierarhiei cuvintelor în designul web de mai jos pentru Fabrica de ceai: „ceaiurile perfecte pentru a te ajuta să te încălzești” este numele jocului, dar diferențele în greutatea fontului și cursivele, pe lângă plasarea cuvintelor, creează un experiență de lectură dinamică, mai puțin liniară. „://azbyka.com.ua/foto/tea-factory.jpg” />

În unele cazuri, scopul este de a prezenta o varietate de informații ca fiind la fel de urgente. Setarea tuturor la aceeași dimensiune și greutate va asigura echivalența, dar va face, de asemenea, să pară monoton. Diferențierea fonturilor este o modalitate de a evita acest lucru, cum ar fi coperta revistei Trendi de mai jos. Principiile ierarhiei vizuale

Pregatirea unei brosuri pentru tiparire.

Aici, cele cinci teasere de la periferia paginii sunt aceleași în ierarhie, dar obțin varietate prin schimbarea a două fonturi bine împerecheate - unul un serif de greutate medie și celălalt un sans-serif ușor, dar înalt.

5. Culoare și nuanță. 

Iată o altă oboseală: culorile luminoase ies în evidență dintre culorile atenuate sau nuanțele de gri, în timp ce nuanțele mai deschise par mai „depărtate” și cad astfel mai jos în ierarhie decât nuanțele mai bogate, mai închise. Site-ul web Where Are They contrastează lumina puternică și iluminarea de fundal colorată cu un efect de grilă alb-negru cu efectul de luminozitate:

Site-ul web Guggenheim folosește culoarea pentru a sublinia informații importante, cum ar fi selecția locației, o listă a expozițiilor aflate în curs de vizualizare și link-uri către expoziții speciale. Principiile ierarhiei vizuale

Cel mai bun font pentru ambalaj personalizat

Site-ul web al Muzeului Whitney, pe de altă parte, stabilește o ierarhie într-un singur font, greutate și ton (negru) folosind nuanță (ceea ce înseamnă adăugarea de alb la tonul de bază, făcându-l mai deschis). „Cory Archangel on Pop Culture” este clar sub „New on Whitney Stories” în ierarhia vizuală, nu numai pentru că este mai jos, ci și pentru că nuanța sa este mai deschisă, făcându-l mai puțin vizibil pe fundalul alb. Principiile ierarhiei vizuale

Culoarea are o semnificație specială în design mobil aplicații în care dimensiunea mică a ecranului vă limitează capacitatea de a utiliza alte strategii, cum ar fi variația dimensiunii și spațierea largă. În aplicația Grainger Industrial Supply, butonul „Proceed to Checkout” este colorat în roșu, ceea ce îl face să iasă în evidență pe orice pagină în care apare. Panoul Narrow Search Results, în schimb, este gri, ceea ce îl face aproximativ echivalent în ierarhie cu alte elemente, cum ar fi bara de căutare și link-urile produselor.

6. Direcția pentru designeri.

Aspectele de pagină sunt de obicei concepute pentru a urma o grilă de linii verticale și orizontale, atât prin convenție, cât și pentru că este cel mai lizibil format. Într-un astfel de sistem, există o nouă modalitate de a stabili ierarhia: ruperea rețelei.

Textul care este poziționat de-a lungul unei curbe sau diagonale iese automat în evidență față de textul blocat în grilă din jur, ocupând centrul atenției. Aceasta a fost de multă vreme o strategie eficientă în publicitate, cum ar fi posterul pentru stația de autobuz de la Frost Design.