01 din 07
Ce este Visual Flow?
Fluxul vizual transporta ochiul privitorului prin document într-un mod în care toate elementele importante primesc importanță și nimic nu împiedică viziunea sau face ca privitorul să piardă simțul piesei. Utilizarea elementelor de flux evidente, cum ar fi săgețile sau numerele, este cel mai obișnuit mod de folosire a designerilor Web, dar există și alte tipuri de elemente care pot fi utilizate și folosite greșit pentru a vă îndruma cititorii să se deplaseze de-a lungul unei anumite căi. Pașii din acest tutorial vă vor arăta exemple de flux bun și rău și vă vor ajuta să învățați vocabularul fluxului vizual în design.
Fluxul vizual poate fi atins în mai multe moduri:
- Săgeți
- Imagini secvențiale sau elemente de text
- Perspectivă
- gradienţii
- Modificări de mărime
- curbe
- Propunerea în imagini
- Fețele - în special ochii
Următoarele imagini vă vor arăta câteva greșeli frecvente în fluxul paginilor web și cum să le corectați.
02 din 07
Texturile fluxului vestic de la stânga la dreapta
Dacă ați crescut citit o limbă occidentală, sunteți obișnuit să credeți că textul ar trebui să se miște de la stânga la dreapta. Deci, pe măsură ce ochiul se deplasează pe o linie de text, se mișcă de la stânga la dreapta.
În imaginea de mai sus, cascada curge într-o direcție din dreapta spre stânga, iar textul curge până în cascadă. Din moment ce știm cu toții că cascadele cad în jos, există o deconectare în direcția fluxului de apă cu fluxul de text. Ochiul privitorului se mișcă în direcția greșită pentru a citi textul.
03 din 07
Textul dvs. ar trebui să curgă cu imaginile
În acest caz, imaginea a fost inversată astfel încât textul să curgă în aceeași direcție cu apa. Toate elementele conduc ochiul privitorului în jos cu fluxul apei și fluxul de text.
04 din 07
Stânga la dreapta este egală rapidă
Calul din această fotografie rulează de la dreapta la stânga, dar textul este englez și așa de la stânga la dreapta. Impactul vizual al cursei de cai pe o directie incetineste ritmul intregului document, pentru ca merge intr-o directie diferita de text.
În culturile occidentale, pentru că limbile noastre se mișcă de la stânga la dreapta, am ajuns să asociem o direcție vizuală de la stânga la dreapta ca fiind înainte și rapidă, în timp ce dreapta spre stânga este mai înceată și mai lentă. Când creați un aspect cu o conotație de viteză, trebuie să vă amintiți acest lucru - și să vă păstrați imaginile în mișcare în aceeași direcție cu textul.
05 din 07
Nu forțați ochiul privitorului să încetinească
Atunci când calul și textul merg în aceeași direcție, viteza implicită crește.
06 din 07
Urmăriți ochii în fotografiile Web
Multe site-uri web cu fotografii fac această greșeală - pun o fotografie a unei persoane pe pagină și persoana se uită la conținut. Acest lucru poate fi văzut chiar și pe site-ul web designer.com în designul vechi.
După cum puteți vedea, fotografia mea este plasată lângă un text. Dar mă uit departe de textul acela, aproape că mă întorc spatele spre el. Dacă ați văzut acel limbaj de corp între două persoane dintr-un grup, ar fi ușor să presupunem că nu-mi place persoana de lângă mine (în acest caz blocul de text).
Multe studii de urmărire a ochilor au arătat că oamenii văd fețe pe paginile Web. Și studiile aferente au arătat că atunci când privești fotografiile, atunci oamenii vor urma inconștient ochii pentru a vedea la ce se uită imaginea. Dacă o fotografie de pe site-ul dvs. se uită la marginea browser-ului, acesta este locul în care vor arăta clienții dvs., apoi apăsați butonul din spate.
07 din 07
Ochii din orice fotografie trebuie să facă față conținutului
În noul design pentru About.com, fotografia este un pic mai bună. Acum, ochii mei privesc mai departe și există o ușoară idee că mă uit în stânga mea - unde este textul.
O fotografie mai bună pentru acea poziție ar fi una în care umerii mei erau înclinați spre text. Dar aceasta este o soluție mult mai bună decât prima fotografie. Și, pentru situațiile în care imaginea va fi pe dreapta conținutului, precum și pe stânga, acesta ar putea fi un bun compromis.
Amintiți-vă, de asemenea, că în timp ce imaginile fețelor oamenilor atrag atenția cea mai mare, același lucru este valabil și pentru fotografiile animalelor. De exemplu, în acest exemplu de aspect, am câinii mei în căutarea stânga, dar imaginea este dreapta dreapta. Deci ei privesc pagina. Acest aspect ar fi îmbunătățit dacă aș fi schimbat orientarea câinilor astfel încât să se uite în centrul ecranului.