Share
Ierarhia vizuală este unul dintre cele mai importante principii ale designului web eficient. Acest articol va examina de ce dezvoltarea unei ierarhii vizuale este crucială pe web, teoria din spatele ei și modul în care puteți utiliza câteva exerciții foarte elementare în propriile desene sau modele pentru a pune aceste principii în practică.
La baza sa, design-ul este vorba despre comunicarea vizuală: Pentru a fi un designer eficient, trebuie să puteți comunica în mod clar ideile dvs. telespectatorilor sau altfel să-și piardă atenția. Oamenii sunt însă nestatornici; dacă le oferiți un bloc masiv de informații, este posibil ca 99 din 100 de persoane să nu se deranjeze să le citească. De ce? Deoarece majoritatea oamenilor sunt inerent gânditori vizuali, nu procesoare de date.
Pentru a înțelege de ce este adevărat acest lucru, este important să înțelegeți puțin despre modul în care vedem lucrurile. Oamenii nu sunt ceea ce ați numi "vizionari de șanse egale". Mai degrabă decât să ia informații vizuale și să o proceseze uniform, oamenii organizează ceea ce văd în ceea ce privește "relațiile vizuale". Să luăm în considerare următoarea imagine a două cercuri obișnuite:
Șansele sunt, nu vedeți "două cercuri"; În schimb, ați văzut "un cerc negru și un cerc roșu mai mic".
Motivul este destul de simplu: Când este prezentat cu ceva atât de simplu ca două cercuri, o persoană nu va vedea doar două cercuri obișnuite, vor găsi o modalitate de a se diferenția între cei doi. Un cerc ar putea fi mai mare, sau mai mic, sau colorat, sau orice altă varietate de diferențe. Aceste diferențe ne permit să facem distincția între obiecte și să le oferim înțelesuri unice.
Să vedem acum o imagine mai complexă:
Complexitatea adăugată ne reînnoiește, de fapt, dorința de a "clasifica" obiectele în termeni de relații. Asemănările și diferențele devin cadrul pe care îl vedem prin forme. Diferențele în scară sugerează că un obiect este mai aproape de noi decât altul sau că unul este mai dominant decât celălalt; Variațiile culorilor pot sugera că un obiect deține o personalitate unică care îl diferențiază de celălalt obiect. O mulțime de informații pot fi livrate într-o singură imagine utilizând câteva instrumente foarte rudimentare.
? Înțelegerea faptului că oamenii vor vedea modelele noastre în termeni de relații este crucială pentru a deveni un designer mai eficient.
Să luăm acest exemplu înapoi la designul web; Deoarece designul web este vorba despre comunicarea informațiilor vizuale, înțelegerea faptului că oamenii vor vedea desenele noastre în termeni de relații este crucială pentru a deveni un designer mai eficient. Deși ar putea părea că e suficient să arunci informații, ca designeri web, sarcina noastră este de a descompune acele informații brute în bucăți delicioase de informații relevante vizual care sunt ușor de privit și, mai important, eficace la comunicarea mesajului în spatele unei pagini web.
Există o sută de explicații pentru care oamenii văd în termeni de relații; Dacă ar fi trebuit să-l trasezi înapoi antropologic, ați putea concluziona că o mentalitate de vânător-culegător a forțat oamenii la un moment dat să recunoască faptul că văzând relațiile este o abilitate de supraviețuire.
Vezi, chiar și omul preistoric a avut un respect sănătos pentru contrastul vizual.
Poate că o explicație mai practică este că este pur și simplu modul în care creierii noștri clasifică informațiile: gruparea unor elemente vizuale similare și organizarea lor în modele semnificative este la fel de inerent naturii noastre umane ca și mâncarea sau băutul. Oricum, este faptul că, chiar și în forma sa cea mai de bază, informațiile care sunt organizate cu o ierarhie în minte vor fi întotdeauna mai eficiente în comunicarea decât informația neorganizată.
Luați în considerare următoarea imagine a două blocuri de text:
În exemplul de mai sus, vom vedea forma cea mai rudimentară a unui sistem de ierarhie vizuală aplicat textului. Informația din fiecare dintre cele două exemple nu este diferită, dar modul în care a fost rupt în mod dramatic schimbă modul în care cititorul o va vedea și o va lua. Când vorbim despre ierarhia vizuală în termeni de tipografie, asta înțelegem . Apropierea, scara și asemănarea formatării textului permit cititorului să organizeze exemplul inferior în titluri și paragrafe. Ierarhia conferă titlurilor mai multă semnificație decât celelalte informații și ușurează scanarea.
Bine, deci toate astea sunt chestii de bază, nu? Să facem o scurgere în câteva exemple mai profunde despre modul în care puteți aplica acest lucru foarte de bază principiu pentru unii foarte sofisticat modele:
Înțelegerea faptului că ierarhia vizuală este importantă este bine și bine, dar cum o creează de fapt un designer? "Uneltele" pe care le vom arăta sunt la fel de simple ca un set de unelte de dulgher - ciocan, cui, văzut, etc - ceea ce faci cu ei este ceea ce contează!
Obiectele care sunt mai mari necesită mai multă atenție. Utilizarea dimensiunii ca instrument ierarhic este o modalitate eficientă de a îndruma privitorul privitor la o anumită porțiune a paginii. Deoarece mărimea este una dintre cele mai puternice forme de organizare, este important să se coreleze mărimea cu importanţă într-un design. Cele mai importante elemente ar trebui să fie cele mai importante în majoritatea cazurilor; cele mai mici elemente ar trebui să fie cel mai puțin importante.
Folosirea tipului BIG, cu caractere aldine adaugă un nivel de ordine acestui design haotic. Ochiul trebuie să treacă în mod natural de la elemente mari până la elementele mai mici.
Culoarea este un instrument interesant deoarece poate funcționa atât ca un instrument organizațional, cât și ca un instrument de personalitate. Culorile bold, contrastante pe un anumit element al unui site web vor necesita atenție (cum ar fi cu butoane sau mesaje de eroare sau hyperlink-uri). Când este folosit ca a personalitate instrument, culoarea se poate extinde dincolo de tipuri mai ierarhice sofisticate; Utilizarea culorilor luxuriante, reconfortante poate aduce un apel emoțional unei pagini. Culoarea poate afecta totul de la o marcă de site-uri web (de exemplu: CocaCola Red) la simbolism (adică: culori reci, subalimentate). Aplicațiile avansate de culoare pot fi folosite și pentru a "clasifica" informațiile într-o ierarhie, ca în exemplul următor:
Site-ul Spectra Viewer folosește culorile pentru a reprezenta diferite categorii de știri, astfel că este ușor să găsiți un anumit tip de informații pe baza cheii de culoare.
Contrastul este relativ important. Schimbările drastice în dimensiunea textului sau în culori vor da un mesaj că ceva este diferit și necesită atenție. Schimbarea de la culoarea de fond deschis la culoarea de fundal închis poate separa rapid conținutul de bază al unei pagini de subsol.
Contrastul dintre secțiunea de antet deschisă, aerisită și fundalul întunecat și de pământ creează o ierarhie distinctă de informații.
Alinierea creează ordinea între elemente. Poate fi la fel de simplă ca și diferența dintre o "coloană de conținut" și o "coloană a barei laterale", dar alinierea poate avea și roluri ierarhice mai complexe. Luați în considerare, de exemplu, puterea informațiilor plasate în partea dreaptă sus a unei pagini Web. Deoarece utilizatorii în general așteaptă ca informațiile din acea parte a ecranului să fie asociate cu profiluri, conturi, căruțe de cumpărături etc., toate locurile din acea zonă oferă un sentiment de "oficial". Alinierea poate, de asemenea, provoca interes dacă este utilizată în moduri unice, cum ar fi în următoarele exemple:
Stuff Template utilizează un sistem unic de aliniere orizontală pentru a separa brandul și navigarea de la conținutul postărilor din blog.
Flex Template folosește un aspect inspirat din rețea pentru a dezvolta interes vizual, precum și o ierarhizare vizuală bazată pe taxonomie.
Repetarea atribuie înțelesului relativ elementelor; Dacă tot textul "paragraf" este gri, atunci când un utilizator vede un nou bloc de text gri, el poate presupune că este un alt paragraf de bază; atunci când același utilizator întâlnește un link albastru sau un titlu negru, el poate presupune în siguranță că este diferit și unic din textul gri.
Site-ul Virgin crează elemente repetitive precum textul paragrafului, apoi rupe repetarea atunci când dorește să atragă atenția (ca textul citat roșu).
Proximitatea separă elementele unul de celălalt și creează sub-ierarhii. Într-o pagină ar putea fi widget-uri care sunt separate de spațiu; în cadrul acestor widgeturi există o nouă ierarhie a titlului, a subtitrării și a conținutului. Proximitatea este, de asemenea, cel mai rapid mod de a asocia conținut similar. În exemplul următor, este ușor să găsiți anumite tipuri de conținut pur și simplu bazate pe apropierea dintre ele.
Site-urile Tuts + fac într-adevăr acest lucru cu adevărat bine (nu pentru a înălța propriul nostru corn!). Coloana din stânga "conținut" este clar separată în apropierea spațiului widget-ului lateral. În plus, metadatele din cadrul unui anumit post de blog sunt plasate în imediata apropiere a acelui post și mai departe de alte posturi, întărind un sentiment de "apartenență".
Elementele de ambalare dense în spațiu îl fac să se simtă "greu" și aglomerat; Atunci când elementele sunt distanțate prea mult, ele pot pierde relațiile unele cu altele. Atunci când o pagină este proiectată "doar corect", ochiul va recunoaște cu ușurință când elementele sunt legate și când nu sunt.
Prin distanțarea elementelor și păstrarea multor spații albe pe pagină, acest design îi ușurează pe oameni să se deplaseze și să găsească cutii mici de conținut.
Poate că instrumentul cu cea mai deschisă deschidere din cadrul Hierarchists Toolbox, stilul poate fi folosit pentru a conferi o formă de ierarhie care ambele îmbrățișează și transcende celelalte instrumente. De exemplu: un fundal plat gri se va "simți" diferit de un fundal asfaltat texturat. Acest stil sau personalitate dat de designer va juca în mod natural un rol în modul în care se fac diferite relații vizuale.
Merită menționat faptul că stilul este, de asemenea, unul dintre cele mai periculoase instrumente pe care un designer le poate utiliza. La fel ca un dulgher care-și taie degetul pe o bandă, un designer poate induce în eroare oamenii prin faptul că accentuează anumite elemente prin stil. Imaginați-vă un element de site puternic proiectat, puternic, care necesită atât de multă atenție, încât distrage atenția în loc să informeze. Aceeași idee se extinde și la fonturi, butoane, file și alte elemente. Fiți atenți la impactul asupra unui design general atunci când alegeți să adăugați un stil suplimentar și să lustruiți un element.
Site-ul lui Jeff Finley face o treabă excelentă de a combina o mulțime de instrumente pe care le-am discutat aici, dar utilizarea sa de elemente de stil inițial asupra furajelor standard UI este ceea ce conferă întregului simț de proiectare a ierarhiei intenționate. Jeff reușește să adauge un stil suficient pentru a face site-ul său să se simtă personal, fără să meargă peste bord.
O ierarhie vizuală bună nu este despre grafica sălbatică și nebună sau cele mai noi filtre photoshop, ci despre organizarea informațiilor într-un mod care este ușor de utilizat, accesibil și logic pentru vizitatorul de zi cu zi.
Așa cum am sugerat în ultima secțiune, este important să rețineți că ierarhia poate fi folosită atât pentru bine, cât și pentru rău. Gândiți-vă la toate reclamele Flash enervante, ferestrele pop-up, bannerele cu glitter etc., pe care web-ul a fost afectat de-a lungul anilor! În timp ce aceste anunțuri reușesc să atragă atenția, aceștia în cele din urmă nu reușesc proprietarul site-ului și privitorul prin ruperea ierarhiei vizuale în cadrul unui site. În mod similar, dacă un designer construiește o ierarhie vizuală, astfel încât anumite informații-cheie sunt aproape imposibil de găsit, designerul va fi eșuat în sarcina sa. O ierarhie vizuală bună nu este despre grafica sălbatică și nebună sau cele mai noi filtre photoshop, ci despre organizarea informațiilor într-un mod care este ușor de utilizat, accesibil și logic pentru vizitatorul de zi cu zi.
?Designerii pot crea normalitate din haos; ei pot comunica în mod clar idei prin organizarea și manipularea cuvintelor și a fotografiilor. "- Jeffery Veen, The Art and Science of Web Design
Jeffrey Veen a scris acele cuvinte în 2001, dar încă mai deține o mulțime de putere în cazul în care "supraîncărcarea informațiilor" pare a fi obișnuită. Ca oameni, am avut mereu un simț ferm pentru organizarea vizuală. Cu toate acestea, ca o societate, am fost înfrânați de un adevărat tsunami de informații vizuale în ultimele decenii; ca rezultat, oamenii de azi sunt hiper-sensibili la ierarhia vizuală. Acest lucru este valabil mai ales în cazul în care studiile au dovedit că surferii web obișnuiți au învățat să "scaneze" conținutul în mod natural; solicitând automat informații relevante pentru interesele lor și ignorând / ignorând informațiile care nu sunt.
Din acest motiv, devenirea unui maestru al ierarhiei vizuale nu este opțională, este obligatorie. Pe măsură ce platformele tipice de navigare pe web se extind de la monitorul tradițional la telefoane, tablete, chiar televizoare, devine tot mai important să folosim sisteme vizuale clare și clare pentru a comunica cu surferii web.
În concluzie, aș vrea să închei cu un exercițiu foarte simplu. Ca exemplu, vom folosi un site pe care îl frecventați sau un proiect despre care ați lucrat recent; Exercițiul merge astfel:
În cele mai multe cazuri, răspunsul va include nuanțe de "nu". Există o mulțime de motive pentru aceasta - cerințele clienților, designerii neexperimentați, design-by-comitetul - sau alte 100 de motive pe care probabil le-ați citit. Heck, în unele cazuri, designerul poate dori să inducă în eroare spectatorul (considerați un site "gratuit" care încearcă să ghideze utilizatorii la conținut plătit). Oricare ar fi motivul, înțelegerea ierarhiei vizuale și încercarea de ao interpreta este o modalitate de a îmbunătăți modul în care vedeți designul web într-o lumină cu totul nouă. Sperăm că va ajuta și la informarea propriei dvs. lucrări!
Accentsconagua