01 de 07
Què és el flux visual?
El flux visual transporta l'ull de l'espectador a través del document de manera que tots els elements importants reben una prominència, i res no fa que la visió o faci que l'espectador perdi sentit de la peça. L'ús d'elements de flux obvi, com ara fletxes o números, és la manera més habitual de dissenyadors web que utilitzen el flux, però hi ha altres tipus d'elements que es poden utilitzar i utilitzar malament per dirigir els vostres lectors a moure's per una ruta específica. Els passos d'aquest tutorial us mostraran exemples de flux bo i dolent i us ajudaran a aprendre el vocabulari del flux visual en el disseny.
El flux visual es pot aconseguir de moltes maneres:
- Fletxes
- Imatges seqüencials o elements de text
- Perspectiva
- Gradients
- Canvis de mida
- Corbes
- Moviment en imatges
- Cares - especialment els ulls
Les següents imatges us mostraran alguns errors comuns en el flux de pàgines web i com corregir-los.
02 de 07
El text occidental flueix d'esquerra a dreta
Si vas créixer llegint un idioma occidental, estàs acostumat a pensar que el text ha de passar d'esquerra a dreta. Per tant, a mesura que l'ull es mou a través d'una línia de text, es mou d'esquerra a dreta.
A la fotografia anterior, la cascada flueix en una adreça de dreta a esquerra, i el text flueix per la cascada. Com que tots sabem que cauen les cascades, hi ha una desconnexió en el sentit del flux d'aigua amb el flux del text. L'ull de l'espectador es mou en la direcció equivocada per llegir el text.
03 de 07
El text hauria de fluir amb les imatges
En aquest cas, la imatge s'ha invertit perquè el text flueixi en la mateixa direcció que l'aigua. Tots els elements condueixen l'ull de l'espectador cap avall amb el flux de l'aigua i el flux de text.
04 de 07
D'esquerra a dreta iguals ràpidament
El cavall d'aquesta foto s'està executant de dreta a esquerra, però el text és anglès i d'aquesta a l'esquerra. L'impacte visual de les curses de cavalls d'un sol sentit disminueix el ritme de tot el document perquè va més enllà del text.
A les cultures occidentals, perquè els nostres idiomes es mouen d'esquerra a dreta, hem vingut a associar una direcció visual d'esquerra a dreta com a avanç i ràpid, mentre que de dreta a esquerra és més endarrerit i lent. Quan esteu creant un disseny amb una connotació de velocitat, haureu de recordar-ho i mantenir les imatges en moviment en la mateixa direcció que el text.
05 de 07
No forçar l'ull del visor a reduir-se
Quan el cavall i el text vagin a la mateixa direcció, augmenta la velocitat implícita.
06 de 07
Mira els ulls a les fotos web
Molts llocs web amb fotos cometen aquest error: posen una foto d'una persona a la pàgina i la persona està lluny del contingut. Això fins i tot es pot veure al lloc de Disseny web de prop de 1.000.000 pàgines en el disseny antic.
Com podeu veure, la meva foto es col·loca al costat d'un text. Però estic veient lluny d'aquest text, gairebé tinc la meva esquena a la seva volta. Si veieu aquest llenguatge corporal entre dues persones d'un grup, seria fàcil suposar que no m'agrada la persona que estic al costat (en aquest cas, el bloc de text).
Molts estudis de seguiment d'ulls han demostrat que la gent veu cares a les pàgines web. I estudis relacionats han demostrat que en mirar fotos, la gent seguirà inconscientment els ulls per veure què està mirant la imatge. Si una foto del vostre lloc està mirant a la vora del navegador, aquí és on es veuran els vostres clients i, a continuació, feu clic al botó Enrere.
07 de 07
Els ulls en qualsevol foto han de fer front al contingut
En el nou disseny d'About.com, la foto és una mica millor. Ara els meus ulls es veuen més endavant, i hi ha una petita pista que estic buscant a la meva esquerra, on hi ha el text.
Una foto encara millor per a aquesta posició seria aquella on les meves espatlles també estaven orientades cap al text. Però aquesta és una solució molt millor que la primera foto. I, per a situacions on la imatge estarà a la dreta del contingut i de l'esquerra, això podria ser un bon compromís.
Recordeu també que mentre que les imatges dels rostres de les persones criden més atenció, el mateix passa amb les fotos d'animals. Per exemple, en aquest disseny d'exemple, tinc els meus gossos a l'esquerra, però la imatge està a la perfecció. Així que veuen la pàgina. Aquest disseny es milloraria si canviés l'orientació dels gossos perquè anessin mirant al centre de la pantalla.