Fundamentos del diseño ~ Expresión visual, establecimiento de jerarquía de información y profundidad Buen artículo
Advertencia artículo largo, ¡se recomienda guardarlo antes de leerlo!
Como diseñadores visuales, además de satisfacer las necesidades estéticas más básicas de los usuarios, nuestro rol también incluye la comunicación de marca, comunicación de información, comunicación funcional, etc. Entre ellas, si queremos transmitir información de forma eficaz a los usuarios. , necesitamos establecer una jerarquía de información, en lugar de dejarlo todo a discreción del usuario. ¿Qué métodos visuales existen para lograr esto? ¿Existe una base teórica detrás de estos métodos?
Primero mire las dos imágenes a continuación. La imagen de la izquierda es el efecto tomado por la cámara y la imagen de la derecha es el efecto que se ve cuando el ojo humano no se mueve. La información del ojo humano no se completa al mismo tiempo. No es posible generar múltiples puntos de enfoque al mismo tiempo para que los ojos puedan permanecer en más lugares. Lo que los diseñadores deben considerar es permitir a los usuarios obtener información en un determinado lugar. orden a través del movimiento ocular, ayudando a que el proceso de adquisición y comprensión sea eficiente y natural.
Este método de diseño espera resolver dos problemas principales:
1. La eficiencia con la que los usuarios obtienen y comprenden la información
Establecer una buena jerarquía de información puede permitir a los usuarios puede obtener y comprender rápidamente información útil e interesante en un tiempo limitado, y dar los siguientes pasos
2. Profesionalismo del diseñador
Análisis consciente del diseñador Prioridad de la información, comprensión de qué técnicas de expresión visual pueden establecer; jerarquía de información y la base teórica detrás de cada método, no solo el diseño basado en el sentimiento.
1. Comprensión y análisis preliminares
Antes de comenzar el diseño, además de comprender los objetivos subyacentes del proyecto en sí, el diseñador visual también necesita comprender parte del contenido de la página específica. El diseño detrás de la ayuda tiene direcciones guía, incluido el posicionamiento de la página, la creación de una atmósfera, la prioridad de la información y los comportamientos principales del usuario.
1.1. El posicionamiento de la página es un requisito previo para ayudar a analizar la prioridad de la información de la página y los comportamientos principales.
Generalmente:
· ¿Quién es el usuario?
· De dónde viene el usuario, es decir, por qué canal llegó a la página
· Posicionamiento del contenido de la página, qué se proporciona y qué no se proporciona
· Función de página
Ejemplos Ejemplo:
Cuando diseñamos la nueva página de inicio del mercado de compras directas, analizamos interactivamente la familiaridad de los usuarios con el servicio y determinamos que los principales usuarios objetivo de la página de inicio eran nuevos compradores; el posicionamiento del contenido de la página era Demostrar los puntos de valor del mercado y los datos generados por los usuarios permiten a los nuevos compradores formar directamente el conocimiento de la marca sobre las compras
1.2. que debe crearse en la página puede ayudarnos a juzgar qué elementos pueden ayudar a lograr el objetivo. La atmósfera puede ser el contenido en sí o puede crearse a través del diseño de elementos visuales, pero debe tenerse en cuenta que la creación de la atmósfera debe ser. no debe ser más fuerte que el contenido en sí al que los usuarios prestan atención
La atmósfera puede incluir:
· Tema de Año Nuevo Gran promoción
· Descuentos bajos
· Información actualizada
· Usuarios activos, etc.
La siguiente es la página oficial de la gran promoción. La imagen de la izquierda continúa el ambiente carnavalesco en el cálido ambiente. período de preparación, pero al comienzo del evento la atmósfera ya no es el foco de atención. Los usuarios están más preocupados por los productos y los descuentos. La imagen de la derecha muestra el ajuste para combinar la creación de la atmósfera con las imágenes de la categoría. que es una buena solución. La relación entre atmósfera y contenido.
1.3. Analizar la prioridad de la información
1) La información de primer nivel atrae a los usuarios: Suponiendo que los usuarios solo permanecerán en esta página durante 3-5 segundos, lo más atractivo para los usuarios. continuar navegando es la página El principal punto de venta es la información de primer nivel, que debe ser pequeña pero precisa y debe centrarse en la visualización en el diseño
2) La información de segundo nivel ayuda a comprender: con la atracción de información de primer nivel, los usuarios pueden comprender mejor el contenido. Permanezca durante 3 a 5 minutos. En este momento, se muestra la información de segundo nivel, es decir, el contenido refinado, para ayudar a los usuarios a comprender la información en el menor tiempo posible. /p>
3) Comprensión detallada de la información de tercer nivel: los dos primeros tipos de información básicamente pueden ayudar a que el usuario obtenga suficiente información. Si el usuario continúa quedándose más tiempo para aprender más, la cantidad de dicha información será mayor. La jerarquía visual será más baja en el diseño, o se mostrará de forma interactiva y proporcionará saltos de entrada
1.4 Analizar los comportamientos principales de los usuarios
Se comportarán diferentes tipos de usuarios en diferentes etapas. ¿Necesitamos determinar cuál es la dirección última de estos comportamientos?
Por ejemplo, en la página de detalles del producto, algunos usuarios comprobarán las reseñas de los usuarios, el historial de transacciones, etc. antes de decidirse a comprar. Sin embargo, estos comportamientos de visualización en última instancia ayudan a los usuarios a juzgar si deben comprar este producto, por lo que. El comportamiento central es, en última instancia, la compra guiada.
Con estos análisis, la prioridad de la información y la prioridad del comportamiento del usuario de los módulos grandes se darán en el documento de salida interactivo, como se muestra a continuación
Antes de llevar a cabo un diseño visual detallado, es necesario El contenido específico dentro de cada módulo se analiza por prioridad y el siguiente diagrama esquemático se produce y confirma con las partes interactivas y comerciales. Estos son resultados importantes que ayudan a que el proceso de diseño visual no se desvíe de la dirección.
2. Métodos visuales para establecer jerarquía de información
Las técnicas de expresión visual incluyen principalmente los siguientes elementos En el diseño real, para separar los efectos primarios y secundarios, se pueden utilizar múltiples métodos. al mismo tiempo para lograr mejores resultados:
· Posición
· Tamaño
· Distancia
· Forma del contenido
· Color
2.1.Posición
La posición es un elemento que se considerará al inicio del diseño. Cuando el ojo humano ve las cosas, siempre seguirá unas determinadas. reglas.El diseño sigue estas reglas y puede ayudar a los usuarios a ver o comprender las cosas que tienen delante de forma más fácil y rápida. Hay dos reglas relacionadas con los elementos de diseño posicional:
1) Cuando los ojos se desvían del centro visual, bajo la condición de que la distancia de desviación sea igual, el ojo humano observa mejor la parte superior izquierda, seguida de la arriba a la derecha, abajo a la izquierda y la parte inferior derecha es la peor. Por lo tanto, la parte superior izquierda y la parte superior media se denominan "áreas de mejor visualización". Por ejemplo, la información importante, como el logotipo del sitio web, el nombre del producto, el tema, etc., generalmente se coloca en la mejor zona de visualización. Por supuesto, esta división también se ve afectada por factores culturales. Por ejemplo, los caracteres árabes se escriben de derecha a izquierda, por lo que la mejor vista es la parte superior derecha. La siguiente imagen es un extracto del "Tutorial artístico de diseño de interfaz web" de Zhang Fan, Luo Qi y Gong Xiaodong. Después de dividir una pantalla, los usuarios prestan diferente atención a las diferentes posiciones:
2) La segunda regla es. los ojos El movimiento en dirección horizontal es más rápido y menos cansado que el movimiento en dirección vertical. Generalmente, los objetos en dirección horizontal se ven primero y luego los objetos en dirección vertical. Como se muestra en la figura siguiente, la diferencia de atención entre la izquierda y la derecha es menor que la diferencia entre la atención hacia arriba y hacia abajo. Si desea reflejar la relación paralela, la disposición izquierda y derecha será más apropiada; Si desea ampliar la brecha, solo se puede lograr a través de la posición. Es más fácil lograr el objetivo disponiéndose hacia arriba y hacia abajo.
Por ejemplo: como se muestra a continuación en la página de inicio del sitio web del Times, la imagen grande de la izquierda es la noticia principal del día, que es la información de primer nivel en el nivel de información. expresión visual, no solo tiene un área grande, sino que también utiliza imágenes grandes en forma de contenido. La posición también se coloca en el área ventajosa. Quizás el 98% de los usuarios prestarán atención a esta área primero;
Si la posición del borrador del diseño se ajusta de la siguiente manera, si la imagen de noticias de enfoque es la información de primera prioridad, aunque tiene la forma de una imagen grande y ocupa un área lo suficientemente grande, debido a que la ubicación no lo es. en la mejor área de visualización, parte de la línea de visión se distraerá con los "Últimos titulares". Si la información tiene prioridad, solo el 60% de los usuarios pueden ver primero el lado derecho, por lo que es necesario ampliar la brecha en el rendimiento visual; , en lugar de una situación cercana a la igualdad.
3) Los usuarios dan prioridad a la parte superior En el diseño web existe el concepto de la primera pantalla La información de la primera pantalla es superior a la segunda y tercera pantalla que aparecen arrastrando el scroll. bar.
Debido a las diferentes resoluciones de pantalla utilizadas por los usuarios, la altura de la primera pantalla será diferente. Según los datos de nuestro sitio web, la altura de resolución actual es 768, lo que representa la mayoría. , el diseño utilizará la altura 768 como punto de referencia y eliminará el menú del navegador. Según la altura ocupada, la primera pantalla que realmente se muestra al usuario tiene un promedio de 600 px. Estos datos se ajustarán en consecuencia según la resolución futura. cambios de los usuarios objetivo Podemos utilizar este valor como línea de referencia para la primera pantalla al diseñar.
2.2. Tamaño
Después de determinar la ubicación del módulo, consideraremos cuánto espacio darle a este módulo. El tamaño reflejará intuitivamente la importancia de la información.
Hay un caso de diseño de carteles deportivos que involucran cuatro deportes de pelota, incluidos fútbol, golf, béisbol y baloncesto. Si se diseñan de acuerdo con el tamaño real, el baloncesto y el fútbol americano parecerán más importantes para reflejar. el significado de los deportes Para la igualdad, se ha ajustado el tamaño de la pelota en el diseño.
Las conclusiones del libro de Giles Colborne "La simplicidad primero" pueden guiarnos para ampliar la brecha a través del tamaño:
1) Los elementos importantes deben ser más grandes, incluso si están desproporcionados
2) Encuentre una manera de mostrar la brecha; si la importancia de un elemento es 2, entonces haga que su tamaño sea 4
Tomemos como ejemplo la página de inicio de la revista Time. actual El área ocupada por la imagen de noticias de enfoque en el lado izquierdo del diseño se amplía por el contraste con la imagen de noticias en el medio, lo que facilita a los usuarios prestar atención primero a la información de primer nivel y no distraerse fácilmente con el entorno. ;
Nuestra comparación de las dos imágenes de noticias Comparando el área, podemos ver que la diferencia es aproximadamente 4 veces;
Si la interfaz se ajusta de la siguiente manera: después de la imagen de noticias de enfoque se reduce a la mitad, se puede ver que la distinción entre niveles visuales no es obvia.
Además de que el área ocupada por el elemento en sí afecta la jerarquía visual, el grado de amplificación de los detalles del elemento también juega un papel. Una vez ampliados los detalles, el ojo humano sentirá que el área ocupada por el elemento en sí afecta la jerarquía visual. El elemento es más claro y más cercano a los ojos, lo que facilita la atención primero. Por supuesto, la premisa es garantizar que la información se pueda entender. Si los detalles locales se amplían pero los usuarios no pueden entender cuál es la información. no podrá atraer usuarios;
La imagen a continuación es el sitio web de una compañía de modelos, en la página de inicio Las fotos de modelos que aparecen al azar incluyen fotos de rostros y de medio cuerpo Las fotos con rasgos faciales ampliados aseguran que los usuarios. Se puede entender que se trata de la imagen de una modelo, por lo que los usuarios darán prioridad a las fotografías con detalles ampliados.
2.3. Distancia
Como se mencionó anteriormente, al ampliar los detalles de un elemento, los ojos lo sentirán más cerca de él y serán notados primero. Aunque el medio para la presentación de la información sea un. plano, a través de métodos visuales puede reflejar el efecto tridimensional Además del tamaño, existen otros métodos visuales como los siguientes:
1) Extienda la distancia tridimensional
Si Si desea lograr el efecto de que la distancia se extienda, haga lo siguiente. Los métodos enumerados tienen como objetivo hacer que la información no sea clara y los ojos parezcan incapaces de enfocarse en la información, incluyendo:
· Elementos borrosos. en el fondo de la imagen a continuación están borrosos, se combinan con los dos puntos de acción y los íconos de la derecha no están en un plano y están más lejos de los ojos. El fondo borroso no molestará a los usuarios al identificar los puntos de acción. y texto.
·?Reducir la transparencia también puede influir cuando algunas imágenes de fondo están borrosas y son difíciles de percibir como un todo, elegir reducir la transparencia también puede extender la distancia.
·? Agregue una capa semitransparente Cuando la interfaz tiene muchos colores o elementos, simplemente reduciendo la transparencia también puede no ser posible crear una distancia, como se muestra en la siguiente figura, cuando desea resaltar. Compra de TV, después de reducir la transparencia de los otros cuatro módulos, no hay una brecha obvia debido a sus ricos colores. Después de agregar una capa gris translúcida, los módulos distintos de la compra de TV naturalmente desaparecerán de la vista.
2) Cerrar la distancia tridimensional
· Agregar una sombra paralela es el método visual más comúnmente utilizado para hacer que los elementos parezcan estar fuera del mismo plano que otro contenido, generalmente como cuadros emergentes y movimientos del mouse, dado que las capas flotantes que aparecen más tarde deben colocarse encima de otra información, agregar proyección puede ayudar a los usuarios a concentrarse en el módulo con proyección sin que la información a continuación les moleste.
3) Además de tridimensional, la distancia bidimensional tiene un impacto negativo en la visión. El nivel también tiene un impacto. Según la ley de proximidad en la psicología Gestalt, las partes cortas o cercanas entre sí tienden a formar un todo. Es más probable que el ojo humano preste atención primero a la información que está cerca entre sí. En la aplicación de técnicas visuales, los elementos están más cerca del enfoque anterior. Sí, el nivel visual es alto. Como se muestra a continuación, la imagen de enfoque de noticias de primer nivel y la imagen pequeña de la derecha están relativamente cerca, y la línea de visión es fácil de mover hacia la esquina superior derecha;
Después de ajustar la distancia, aunque la pequeña imagen en el medio es más atractiva que el texto Personas, pero debido a que el título debajo de la imagen de enfoque está más cerca y forma un todo, la línea de visión tiende a moverse hacia abajo primero.
2.4. Forma del contenido
Después de determinar la ubicación, el tamaño y la relación de distancia del módulo, continuaremos considerando la forma del contenido, incluidos videos, imágenes, texto, etc. Aquí hablamos principalmente de lo que usamos a menudo. Los gráficos y el texto utilizados; en comparación con el texto, las imágenes juegan un papel indispensable para captar la atención del usuario. Al mismo tiempo, también pueden permitirle formar recuerdos de imágenes en un corto período de tiempo. Desde el punto de vista visual, el ojo humano generalmente presta atención primero al texto después de la imagen. Pero esto por sí solo no es suficiente. Captar los ojos del usuario a través de imágenes y luego guiarlos al siguiente punto de atención es un punto que se considerará más en el diseño. Las siguientes técnicas de expresión se resumen:
1. ) Guía direccional
Algunas de las imágenes de la imagen tienen una direccionalidad obvia, como la dirección de la mirada del ojo humano, la dirección del gesto, la dirección del movimiento del objeto, la dirección de la iluminación, etc. Estas características guiarán al ojo humano a moverse hacia el entorno en la dirección para lograr una jerarquía visual con prioridad y orden.
La siguiente figura supone que el personaje en el medio atrae primero la atención de las personas y es el primer nivel de información. Dado que la dirección de la mirada del ojo humano es hacia la derecha, el siguiente objetivo en el que se enfoca el usuario girará. al texto "codificador" es el segundo nivel de información.
La posición QUÉ HACEMOS en la esquina superior izquierda de la imagen a continuación es fácil de llamar la atención primero. Al mismo tiempo, la imagen del personaje de la derecha ocupa un espacio más grande y también robará la atención. Sin embargo, dado que no hay otra información sobre la dirección del movimiento del personaje, la imagen no. Si le das pleno juego al papel de guía, los usuarios no podrán navegar sin problemas.
Después del ajuste, aunque La posición de "LO QUE HACEMOS" no está en el área ventajosa, la guía a través de la dirección de la imagen es muy natural. Sus ojos se posaron en el mensaje de texto.
2) Guía de símbolos
Además de las imágenes, algunos símbolos tienen orden y dirección y también pueden guiar eficazmente los ojos para navegar de acuerdo con los símbolos, incluidos números arábigos y alfabéticos. orden y orden cronológico, flechas, etc.
Los tres primeros en la clasificación en la imagen a continuación. Aunque los usuarios están más acostumbrados a leer de izquierda a derecha, debido a la guía de los números, la línea de visión también se verá afectada y leerán en el orden. de 1>2>3. Si lo desea, este orden es más obvio. Puede ampliar el tamaño de la imagen en 1 para ampliar el espacio y combinar una variedad de métodos visuales para lograr el efecto.
La línea de tiempo también se usa ampliamente en la interfaz. El ojo humano se verá afectado por el orden del tiempo para buscar información e incluso romper el hábito de navegación convencional de izquierda a derecha. aunque la posición 2 es más fácil guiar a los usuarios a navegar primero, el impacto de la línea de tiempo en la información es más obvio. Generalmente, los usuarios verán el módulo 1 primero y luego se centrarán en el módulo 2 de derecha a izquierda. tiempo.
2.5. Color
El color es un factor importante que afecta la primera impresión que el usuario tiene de la interfaz. La aplicación del color también puede tener un efecto inmediato en la jerarquía visual. para el ojo humano La diferencia en la atención al color se debe principalmente a los dos puntos siguientes:
1) Primero los colores cálidos y luego los colores fríos
No existe una respuesta absoluta a la estimulación y reacción de diferentes tonos de colores en el ojo humano. Sin embargo, existen diferencias obvias en los niveles entre los colores fríos y los colores cálidos. Como se muestra en la imagen a continuación, el ojo humano generalmente ve primero la imagen de la izquierda, lo que tiene algo que ver. con cómo nuestros ojos humanos responden a diferentes longitudes de onda;
Fisiológicamente hablando, el ajuste del cristalino del ojo humano es muy preciso y sensible a los cambios en la distancia. Podemos juzgar la distancia de un objeto a nosotros, pero. tiene un límite determinado para pequeñas diferencias en la longitud de onda. No se puede ajustar correctamente.
Cuando los ojos observan colores de diferentes longitudes de onda a la misma distancia, los colores cálidos con longitudes de onda largas, como el rojo y el naranja, forman una imagen interna en la retina; los colores fríos con longitudes de onda cortas, como el azul, el violeta, etc., forman una imagen; Imagen exterior en la retina. Por lo tanto, los colores cálidos parecen avanzar y los colores fríos parecen retroceder.
Hubspot, una empresa estadounidense de marketing digital, realizó una vez una prueba A/B para probar la diferencia entre diferentes colores en las conversiones de clics de los usuarios. En la imagen, el contenido de las dos páginas de prueba a la izquierda y a la derecha es exactamente el mismo. La única diferencia es el color del botón. En la prueba de muestra con más de 2000 personas, la tasa de clics del esquema rojo. superó la tasa de clics del plan verde en un 21%. Antes de la prueba, la mayoría de los investigadores suponían que la solución verde conseguiría más clics, porque intuitivamente, el verde representa el paso y el permiso, mientras que el rojo se inclina más a advertir y prevenir.
Esta prueba refleja hasta cierto punto el impacto de los colores cálidos en la atención y la acción del usuario. Por supuesto, esto no significa que se deban utilizar colores cálidos para aumentar las tasas de clics. El estilo debe diseñarse de acuerdo con el posicionamiento del producto.
2) Alto contraste primero y luego bajo contraste
Además de la diferente estimulación de los colores fríos y cálidos en los ojos, el contraste de color es el factor con mayor probabilidad de provocar diferencias en la atención. Para sobrevivir en la naturaleza, los colores protectores utilizados están relacionados con el contraste. El búho de la imagen está relacionado con el entorno en el que vive. Los colores del pelaje han evolucionado hacia colores similares para desempeñar un papel de protección. por el contrario, los grandes contrastes de color son particularmente fáciles de llamar la atención, como el siguiente amarillo El color rojo único de los tulipanes
El tamaño y la distancia mencionados anteriormente son medios visuales para reflejar el contraste. se logra principalmente a través de los siguientes métodos:
· Contraste de color. En la imagen a continuación, el color principal es el azul, los puntos de acción azules son consistentes con el color general y el nivel es relativamente débil, mientras que el contraste el tono entre los puntos de acción verde y azul hace que el nivel sea más alto
Pero hay muchos colores ¿Cómo determinar el tamaño del contraste? Podemos verlo a través del círculo de tono, como se muestra en la figura siguiente. La intensidad del contraste de color depende de la distancia al círculo de tono. Cuanto mayor es la distancia, más fuerte es el contraste y viceversa.
· El contraste de saturación y el contraste de luminosidad son relativamente fáciles de entender y tienen valores numéricos que se pueden controlar. Cuanto mayor sea la diferencia en los valores de saturación o luminosidad entre dos colores, mayor será el contraste. y viceversa. Vea ejemplos específicos: por ejemplo, en el siguiente mapa de navegación, el ícono del personaje actual tiene un brillo alto, lo que forma un alto contraste con el fondo negro de bajo brillo y se nota fácilmente al principio.
El siguiente gráfico circular muestra el porcentaje de saturación alto completado, en contraste con la saturación baja general. Comparar el mismo tono a través de la saturación no solo puede ampliar la brecha para formar una jerarquía visual, sino que también el efecto visual es holístico
Para resumir las técnicas de expresión visual mencionadas anteriormente, forme la tabla que todos puedan recordar:
3. Revise el flujo visual de la página
Después de usar visual. Técnicas de expresión para establecer la jerarquía de la información, los diseñadores necesitan revisar constantemente si el orden de navegación del usuario es realmente el nivel que esperamos 1 a 2 a 3..., incluyendo la navegación en módulos grandes de la página y dentro de los módulos, estas secuencias de navegación serán. formar un flujo visual en la página
Examinar el flujo visual de la página puede ayudarnos a juzgar si el usuario navega por la página sin problemas y si el orden es regular; En la línea de visión del usuario, la navegación del usuario tenderá a ser aleatoria y será difícil transmitir rápidamente la información que queremos expresar.
El siguiente contenido presenta principalmente los flujos visuales más típicos y las características de cada tipo, incluyendo:
· Flujo visual lineal
· Flujo visual guiado
· Flujo visual de salto
· Flujo visual radiante
1) Flujo visual lineal
· El flujo visual horizontal guía la línea de visión del usuario. El flujo visual de izquierda a derecha o de derecha a izquierda es el método de navegación que mejor se adapta a los hábitos visuales del usuario y brinda a las personas una sensación de estabilidad y credibilidad.
Por ejemplo, en la página de inicio de digg.com, toda la página y los módulos individuales son un flujo visual horizontal típico. Después de que el usuario navega de izquierda a derecha hasta el borde, sus ojos vuelven a la siguiente línea. y continúe leyendo de izquierda a derecha; aquí habrá un valor para la mejor área para la navegación horizontal. Por ejemplo, el ancho de página seleccionado por digg es de aproximadamente 1000 px y cada línea muestra 3 elementos. Más grande, ¿deberían seguir aumentando estos dos valores y en qué medida es el ojo humano el más eficiente para adquirir información? No he encontrado ningún apoyo teórico o experimental correspondiente para esta pregunta, así que buscaré información más adelante.
·?El flujo visual vertical guía al usuario a navegar de arriba a abajo. Dado que el movimiento vertical de los ojos requiere que la pupila se enfoque constantemente, la eficiencia al escanear el módulo de página verticalmente no es muy diferente de. el de la navegación horizontal, pero al leer detalles La eficiencia será menor, como el texto dispuesto verticalmente, que es más adecuado para poemas antiguos y textos antiguos que deben leerse palabra por palabra;
La imagen de abajo muestra el flujo visual horizontal original de la página de inicio de digg después de ajustar el diseño a un flujo visual vertical. Además de las imágenes grandes, los usuarios elegirán una de las tres columnas para navegar verticalmente hasta encontrar una determinada información de destino y luego explorar los detalles. horizontalmente.
El límite de altura vertical de la interfaz web es menor que el límite de altura horizontal, porque los usuarios están acostumbrados a desplazarse hacia arriba y hacia abajo para buscar más información. Cuando el usuario aún está determinando la información de destino, la imagen vertical. El flujo puede ayudar al usuario a no necesita escanear hacia atrás. Haga clic a continuación para obtener más información en la interfaz del calendario de Facebook como se muestra a continuación. Cuando la línea de tiempo está dispuesta horizontalmente, debido al ancho limitado, debe cambiar horizontalmente o usar un desplazamiento. barra para ver más fechas:
Ajuste la dirección de la línea de tiempo a vertical. Esto permite a los usuarios ver todas las fechas del mes de manera más eficiente desplazándose hacia arriba y hacia abajo.
·?El flujo visual oblicuo puede crear una sensación de movimiento y velocidad, pero debido al ángulo inclinado, será difícil reconocer el texto. La disposición de una gran cantidad de información de texto no es adecuada. para este flujo visual, y a menudo se usa en adornos de diseño o interfaces con relativamente poca información, como el póster del gimnasio a continuación;
También hay un pequeño rango de flujo visual diagonal en la interfaz web para reflejar la sensación de movimiento.
·?Flujo visual curvo, la línea de visión del usuario formará una curva personalizada, con una sensación de ritmo y vivacidad. Este tipo de rango de movimiento ocular es amplio y de uso a largo plazo y a gran escala. causará fatiga visual, por lo que no es adecuado para párrafos de texto grandes, generalmente combinados con gráficos para crear un flujo visual curvo, lo que permite que la línea de visión del usuario permanezca en el área de la imagen por un tiempo
<; p> Como se muestra a continuación, se agrega una imagen al flujo visual curvo, de modo que la línea de visión esté en el nodo de la imagen. Deténgase por un momento y explore el contenido de este nodo, luego continúe navegando a lo largo de la línea.2) Flujo visual guiado
Como se muestra en la figura siguiente, el flujo visual guiado diseñará un elemento de inducción para atraer la atención del usuario y luego prestará atención a la información objetivo a través del elemento de inducción; los elementos de inducción comunes se pueden dividir en líneas, imágenes que incluyen personas u objetos, indicadores como flechas, letras, etc. Este tipo de flujo visual debe captar la relación primaria y secundaria entre los elementos de inducción y la información del objetivo no debe ser demasiado fuerte, de lo contrario debilitará la difusión de la información del objetivo si parte de la información del objetivo se puede incluir en la inducción; elementos, se puede aumentar la eficacia de la transmisión de información sobre el sexo.
Como se muestra en la imagen a continuación, el líquido rojo en el tubo está en movimiento, lo que atrae a los usuarios para que alcancen el mensaje objetivo en la dirección de su movimiento.
La forma del contenido mencionada anteriormente es guiado desde imágenes o símbolos a lo siguiente Un enfoque visual también es un tipo direccional desde la perspectiva del flujo visual. Los siguientes dos ejemplos son el uso del flujo visual direccional localmente en la página
3) Saltar el flujo visual.
En la naturaleza, entre información igual o similar, elegir navegar entre información destacada o interesante da a las personas el derecho de tomar decisiones independientes. Sin embargo, el diseño también puede transmitir la prioridad sin dejar ningún rastro ajustando la fuerza. de los elementos.
Por ejemplo, en la interfaz del sitio web de la empresa de modelos mencionada anteriormente, las fotos de los modelos son todas información de la misma naturaleza. La navegación del usuario tiene un cierto grado de aleatoriedad, pero la prioridad también se transmite al hacer zoom. fuera de los retratos.
4) Flujo visual radiactivo
La línea de visión comienza en el medio de la página, de modo que los elementos en el medio tengan el mayor impacto y la información se transmita con mayor claridad. y luego forma un movimiento visual que irradia desde el medio.
Por ejemplo, en muchos sitios web de automóviles, la imagen principal en el medio puede reflejar mejor el núcleo de la información, que luego se distribuye a la navegación superior o a otras entradas de servicios inferiores.
Los cuatro tipos de flujo visual presentados anteriormente son relativamente típicos, pero no representan todos. También podemos diseñar flujos visuales más creativos sin importar qué tipo de ruta, si el usuario navega sin problemas o si. La información es Entregar información de acuerdo con la prioridad es el objetivo al que siempre debemos adherirnos.
Finalmente, resumamos:
1. En la etapa inicial del proyecto, necesitamos comprender la atmósfera creada por la página y el posicionamiento del contenido, analizar la prioridad de la información y; el comportamiento central de los usuarios junto con la interacción; la preparación puede ayudar a que el proceso de diseño visual se mantenga encaminado
2. Establecer una jerarquía de información a través de métodos de expresión visual como la posición, el tamaño, la distancia, la forma del contenido y el color
3. Proceso de diseño y final Debemos revisar constantemente el flujo visual de la página para ver si el usuario navega fluidamente.
Analizamos conscientemente la prioridad de la información que interesa a los usuarios y la expresamos visualmente. Esta es una responsabilidad muy importante del diseñador visual. Esperamos que estos métodos puedan ayudarnos a mejorar esta responsabilidad. ¡Disfrútalo tú también y anímate a todos!
Mis amigos y yo creamos un pequeño programa Theory Dock · ¿Crea tu propia biblioteca teórica? ¡Hay muchos términos y teorías sobre interacción, psicología y gestión! ¡Escanee el siguiente pequeño programa en WeChat Quick code experiment!