Direcția vizuală în Web Design

Unul dintre marile secrete ale design-ului este învățarea modului de ghidare a direcției vizuale a spectatorilor; Acest principiu este adesea ignorat chiar de cei mai experimentați designeri, așa că astăzi vom examina mai profund cum funcționează. Direcția vizuală controlează mișcarea ochiului utilizatorului; acest lucru se poate realiza prin selectarea cu atenție a imaginilor și prin elemente de design bine poziționate și aliniate.

Se stabilește foarte mult faptul că mișcarea implicită a ochilor pe întreaga pagină (într-un layout LTR - stânga la dreapta) se află din partea din stânga sus spre dreapta-jos, după cum arată imaginea:

In orice caz; acest lucru nu poate fi mai departe de adevăr, prin aranjarea elementelor compoziției într-un anumit mod, un designer poate controla și forța mișcarea ochilor privitorului în și în jurul aspectului designului. De exemplu, ochiul va călători de-a lungul unei căi reale, cum ar fi linia solidă sau punctată, sau se va deplasa de-a lungul căilor subtile, cum ar fi de la elemente mari la elemente mici, de la elemente întunecate la elemente mai ușoare, de la culoare la necolorat, de la forme neobișnuite la formele obișnuite, etc. Absolvirea dimensiunii și a formelor repetate și dimensiunile elementelor legate în mod subtil duce și ochiul.

1. Controlul direcțiilor cu imagini

Imaginile pot controla cu ușurință felul în care clienții dvs. văd designul, mai jos sunt câteva exemple explicite de imagini direcționale care pot fi folosite ca parte a designului dvs. sau în conținut pentru a ghida vizitatorii în jurul paginii:

Desigur, este destul de evident în ce direcție aceste imagini sunt îndreptate, oricât de multe imagini ar putea să nu fie la fel de clare, să aruncați o privire la aceste alte exemple:

2. Conducerea ochiului

Acesta este unul dintre designerii greșeli de top și editori de conținut se încadrează în, de obicei, nu fac imaginile dvs. cu care se confruntă în afară de pagina dvs., imagini (în special fețe și ochi) ar trebui să fie în căutarea spre centrul de design.

Aruncați o privire la aceste exemple atât de pe site-urile CNN și BBC:

În exemplul BBC, cele două imagini din partea stângă sus se află atât de departe de centrul paginii, încât aceasta duce la "nevăzând" informațiile importante de-a lungul căii prestabilite, după cum arată imaginea:

  1. Porniți în partea stângă sus, ca locație implicită obișnuită
  2. Deplasând-o de-a lungul căii prestabilite întâlniți prima imagine care privește în afară, astfel încât viziunea dvs. se mișcă automat în afara paginii
  3. Ochii încep să privească înapoi spre centrul paginii
  4. Vă întâlniți o altă imagine care privește în afară, făcându-vă să vă mișcați din nou în afara paginii
  5. În sfârșit, ochii încep să se deplaseze spre centrul paginii, însă există o "orbită" mare, creată de plasarea imaginii și direcția marcată de litera "?"

Comparați acum următoarea versiune "fixă" a paginii BBC cu cea originală de mai sus:

Privind această versiune veți observa că ochiul dvs. nu se mișcă în afara paginii, fețele oamenilor care caută în interior vă ajută să vă uitați în aceeași direcție spre centrul paginii.

3. Formulare

Uitați-vă la acest exemplu prezentând două modalități de a alinia etichetele cu câmpurile de formular care pot afecta foarte mult cât de ușor este pentru utilizatori să completeze formularul respectiv:

În stânga, avem etichete de top aliniate, care sunt mai rapide și mai ușor de completat decât etichetele aliniate la stânga sau la dreapta (în partea dreaptă). Acest lucru se datorează faptului că etichetele de sus aliniate necesită jumătate de mișcări ale ochilor decât etichetele aliniate la stânga sau la dreapta. Etichetele de top aliniate permit de asemenea utilizatorilor să se mute în jos într-o singură direcție vizuală, în loc de două direcții vizuale cu etichete aliniate la stânga și la dreapta. Aceasta face ca formularele de completare să fie mai rapide și mai ușoare.

Plasarea nu numai că controlează modul în care se mișcă ochiul, ci contribuie la o mai ușoară utilizare a unui design, chiar dacă la un nivel subconștient.

4. Direcția de proiectare

Elementul de direcție poate avea o influență puternică asupra dispoziției unui design, dar luarea unei decizii de conștiință cu privire la direcția dominantă într-un design poate avea un efect vizibil asupra atmosferei muncii.

Uneori imaginea sau aspectul vor dicta direcția dominantă. Uneori vă va permite să impuneți o direcție pe ea.

Liniile orizontale clare din modelele de mai jos dau un sentiment de liniște, stabilitate, liniște și calm.

În cel de-al doilea grup de mai jos, plasarea diagonală a elementelor întărește sentimentul de mișcare și acțiune.

Cel de-al treilea grup are o direcție verticală dominantă care adaugă o influență statică regulată asupra a ceea ce ar putea fi altfel aleatoriu, dă, de asemenea, un sentiment de vigilență și formalitate.

Aceeași schimbare în caracter poate fi văzută în aceste trei fotografii. Subiectul este același în fiecare, schimbarea accentului direcțional creează o atmosferă diferită în fiecare imagine.

Accentul vertical pe prima imagine oferă un sentiment de formalitate ordonată, al doilea accent orizontal se simte calm și stabil, în timp ce al treilea accent diagonal se simte activ și animat.

Concluzie

Mențineți întotdeauna în minte modul în care doriți să vă simțiți publicul, setați starea de spirit selectând direcția designului dvs., apoi impuneți acest lucru alegând aspectul corect al conținutului și selectarea imaginii.

Când vine vorba de formulare sau modele bazate pe text, înțelegerea modului în care vizitatorii dvs. își vor mișca ochii în jurul unui design vor spori considerabil gradul de utilizare a muncii dvs..