01 de 07
Que é Visual Flow?
O fluxo visual leva o ollo do visor a través do documento de forma que todos os elementos importantes reciban a súa prominencia e non engana a visión nin provoca que o espectador perda o sentido da peza. Usar elementos de fluxo evidentes como frechas ou números é a forma máis común de que os deseñadores web utilicen o fluxo, pero hai outros tipos de elementos que poden usarse e non usar para dirixir os seus lectores para avanzar nunha ruta específica. Os pasos deste tutorial mostraran exemplos de fluxo bo e malo e axudaranos a aprender o vocabulario do fluxo visual no deseño.
O fluxo visual pódese conseguir de varias maneiras:
- Frechas
- Imaxes secuenciales ou elementos de texto
- Perspectiva
- Gradientes
- Cambios de tamaño
- Curvas
- Movemento en imaxes
- Caras - especialmente os ollos
As seguintes imaxes mostraranche algúns erros comúns no fluxo nas páxinas web e como corrixilos.
02 de 07
Fluxos de texto occidentais de esquerda a dereita
Se creceu lendo un idioma occidental, está afeito a pensar que o texto debería moverse de esquerda a dereita. Entón, a medida que o ollo se move por unha liña de texto, móvese de esquerda a dereita.
Na imaxe de arriba, a fervenza flúe en dirección á dereita e esquerda, e o texto flúe ata a fervenza. Como todos sabemos que as caídas de auga caen, hai unha desconexión na dirección do fluxo de auga co fluxo do texto. O ollo do espectador móvese na dirección incorrecta para ler o texto.
03 de 07
O texto debe fluír coas imaxes
Neste caso, a imaxe foi revertida para que o texto flúa na mesma dirección que a auga. Todos os elementos levan o ollo do espectador co fluxo do auga e o fluxo de texto.
04 de 07
De esquerda a dereita equivale rápido
O cabalo nesta foto está a funcionar de dereita a esquerda, pero o texto é inglés e así o de esquerda a dereita. O impacto visual das carreiras de cabalos unha dirección diminúe o ritmo de todo o documento porque vai a unha dirección diferente do texto.
Nas culturas occidentais, debido a que as nosas linguas móvense de esquerda a dereita, chegamos a asociar unha dirección visual de esquerda a dereita como progresiva e rápida, mentres que de dereita a esquerda está máis atrasada e lenta. Cando estea creando un deseño cunha connotación de velocidade, debes recordar isto e manter as túas imaxes movéndose na mesma dirección que o texto.
05 de 07
Non forzar o ollo do espectador a diminuír
Cando o cabalo eo texto dirixen a mesma dirección, aumenta a velocidade implícita.
06 de 07
Assist the Eyes in Web Photos
Moitos sitios web con fotos cometen este erro: colócanse unha foto dunha persoa na páxina e a persoa está lonxe do contido. Isto mesmo se pode ver no sitio web About.com Web Design no vello deseño.
Como podes ver, a miña foto sitúase xunto a algún texto. Pero estou a ollar lonxe dese texto, case teño as costas. Se viu esa linguaxe corporal entre dúas persoas nun grupo, sería fácil supoñer que non me gusta a persoa que estou ao lado (neste caso o bloque de texto).
Moitos estudos de seguimento visual demostraron que a xente ven rostros nas páxinas web. E estudos relacionados demostraron que ao ollar as imaxes, a xente seguirá de forma inconsciente os ollos para ver o que a imaxe está mirando. Se unha foto no seu sitio está mirando para o bordo do navegador, é onde os seus clientes ollar e, a continuación, prema no botón Atrás.
07 de 07
Os ollos en calquera foto deben enfrontar o contido
No novo deseño de About.com, a foto é un pouco mellor. Agora os ollos miran máis cara diante, e hai unha pequena pista que estou mirando á miña esquerda, onde está o texto.
Unha foto aínda mellor para esa posición sería unha onde os meus ombros tamén estivesen orientados cara ao texto. Pero esta é unha solución moito mellor que a primeira foto. E, para situacións onde a imaxe estará á dereita do contido e da esquerda, isto podería ser un bo compromiso.
Lembre, tamén, que mentres as imaxes dos rostros das persoas atraen máis atención, o mesmo ocorre coas fotos de animais. Por exemplo, neste esquema de mostra, teño os meus cans á esquerda, pero a imaxe está ben á dereita. Entón eles están a buscar fóra da páxina. Este deseño melloraría se cambiase a orientación dos cans para que estivesen mirando para o centro da pantalla.