¿Cuáles son los cinco principios visuales en el diseño de experiencia de producto?
En primer lugar, gracias por hacer clic en este artículo. Este artículo se utiliza principalmente para resumir los resultados del aprendizaje del "Curso introductorio al diseño de experiencia de usuario 100". El significado de publicarlo es que espero que más personas puedan comprender UX y brindar servicios para principiantes de UX y lectores interesados. Este artículo le ayudará a comprender los cinco principios visuales de UX a través de ejemplos.
1. Conceptos básicos
1. Experiencia de usuario
La experiencia de usuario se refiere al sentimiento subjetivo que establece el usuario en el proceso de uso del producto, es decir. , el usuario experimenta el producto a través de sentimientos psicológicos subjetivos establecidos. Por tanto, la experiencia de usuario de un producto está determinada en gran medida por los sentimientos subjetivos del usuario. La experiencia de usuario que un producto crea para los usuarios no es temporal, sino que recorre todo el proceso, desde la producción del producto hasta la posventa.
2. Diseño de experiencia de usuario
Después de comprender la definición de experiencia de usuario y experiencia de usuario, hablemos del concepto de diseño de experiencia de usuario. El diseño de experiencia de usuario se refiere a un enfoque de diseño centrado en el usuario que aborda sus necesidades. El diseño de experiencia de usuario consiste en interactuar de una manera que los usuarios puedan aceptar o agradar, para diseñar productos que realmente satisfagan las necesidades del usuario. La calidad de la reputación del producto también está estrechamente relacionada con los sentimientos de los usuarios. El proceso de diseño de la experiencia del producto también se centra en el centrado en el usuario, por lo que el concepto de experiencia del usuario entra en todo el proceso desde la etapa más temprana del desarrollo del producto y lo recorre a lo largo de todo el proceso.
3. Experiencia sensorial
Los sentidos son los órganos que perciben la estimulación de las cosas externas, incluidos los ojos, los oídos, la nariz, la lengua y el cuerpo. El cerebro es el centro de todas las sensaciones. Los ojos son para la visión, los oídos para el oído, la nariz para el olfato, la lengua para el gusto y cada parte del cuerpo para el tacto. Los cinco órganos sensoriales del cuerpo humano brindan muchas comodidades para la vida de las personas. Además de los conocidos cinco sentidos, también intervienen otros sistemas sensoriales, como el mantenimiento del equilibrio corporal y la sensación de hambre. Hay aproximadamente 20 sistemas sensoriales. La experiencia sensorial del usuario es la representación más directa de la experiencia del usuario, y la experiencia sensorial ocurre a nuestro alrededor todo el tiempo. La experiencia sensorial es el sentimiento psicológico formado por la experiencia sensorial y el procesamiento cerebral.
Dos. Cinco principios visuales
1. Peso visual (comparación de distancia y tamaño)
El peso visual se refiere al impacto de diferentes posiciones de la misma imagen en el enfoque visual. Generalmente, cuanto mayor es el área, más cerca está de la línea de visión, o cuanto más grande es la figura que ocupa la línea de visión, más "peso" tiene. Este peso visual se utiliza principalmente para resaltar puntos clave, atraer la atención de los usuarios y permitir que se concentren en aquello a lo que usted desea que presten atención. Es importante tener en cuenta que el peso visual es relativo y todos los principios visuales se obtienen mediante el contraste de un elemento de diseño con los elementos circundantes.
Entonces, ¿cómo se añade peso visual? Existen aproximadamente dos métodos: distancia y tamaño. Primero, desde una perspectiva lejana, las cosas que están más cerca de la línea de visión son más llamativas. En la vida real, prestamos atención a las cosas que están cerca de nosotros e ignoramos las que están lejos de nosotros. Por lo tanto, el diseño UX debe prestar atención a la relación entre lo cercano y lo lejano, y colocar las cosas que se van a resaltar cerca. La ventaja de hacer esto es que no sólo puede resaltar los puntos clave, sino también hacer que el diseño sea más "tridimensional", "en capas" y "real". Como se muestra a continuación.
Color
Elegir el color adecuado es uno de los principios visuales importantes. Cualquier producto es inseparable de un elemento de estilo clave en el proceso de diseño: el color. El color del producto juega un papel importante en el proceso de interacción persona-computadora y es uno de los medios más intuitivos para mejorar la experiencia del usuario del producto. Por ejemplo, el punto negro en el papel blanco en la imagen de abajo se puede ver de un vistazo aunque su área no sea tan grande como la del blanco. Esto es lo que hace el color: enfatiza el tema, lo que por supuesto hace lo mismo que otros principios visuales. Además del énfasis, para las empresas y marcas, la selección de colores y el diseño de combinación de colores de los productos definitivamente no es ciega, ni es la "popularidad" actual, sino "apropiada". ¿Por qué dices "apropiado"? Debido a que los colores pueden ser brillantes u oscuros, oscuros o brillantes, fríos o cálidos, debes elegir con cuidado si quieres lograr el propósito publicitario. Tomemos como ejemplo Coca-Cola, como se muestra a continuación.
Cuando vea esta imagen, probablemente pensará en Coca-Cola, porque la botella roja de Coca-Cola es el logotipo de Coca-Cola, y el rojo representa la imagen de marca clásica, vibrante y positiva de Coca-Cola. Por lo tanto, dar forma a la imagen de marca del producto en la mente de los usuarios es también el efecto de experiencia visual que aporta el color.
3. Repetición y ruptura de patrones
Uno de los principios del diseño visual es crear una variedad de patrones que desvíen la atención del usuario hacia lo que es importante e intenten avanzar. En términos de patrones, existen muchos patrones visuales. Por ejemplo, si rodeas los puntos y los organizas en línea recta, la línea recta y el círculo darán a las personas una sensación completamente diferente. No sólo será más fácil para las personas notarlo, sino que los usuarios también verán cosas completamente diferentes. . Este es el patrón. Desde la perspectiva del avance del patrón, por ejemplo, hay una línea recta y aparece una onda al final de la línea recta, por lo que la gente prestará más atención a la onda. La comprensión original de las líneas rectas puede cambiar de "duras" a "suaves" porque las líneas onduladas se parecen más a cintas suaves, lo cual es un gran avance en el patrón.
4. Tensión lineal y tensión angular
La tensión visual se refiere a una obra visual que, tras contactar con los ojos del espectador, se siente atraída por la belleza de su composición y color, convirtiéndolo en espectador. Al no querer apartar la mirada, la mente acepta naturalmente toda la información transmitida por la obra. Comparado con el impacto visual, parece que las fuerzas internas y externas en el Kung Fu chino actúan sobre la visión en distintos grados en las obras de diseño gráfico, produciendo sensaciones de continuidad, contracción, expansión, proyección o rotación. Este sentimiento proviene de las fuerzas internas y externas de la forma. Lo que percibimos visualmente es simplemente una fuerza potencial dentro de una forma que está concentrada, irradiada o inclinada en ciertas direcciones. No es una fuerza física, sino una fuerza psicológica visual, que es uno de los contenidos indispensables de las actividades visuales. Hablé antes de la belleza del color, pero aquí hablo de la belleza de la composición, que incluye principalmente la tensión de la línea y la tensión angular. Hablemos primero de la tensión del hilo. La tensión de línea se refiere a la percepción de una línea o "camino" que no existe en absoluto. Nuestros ojos seguirán la dirección de este camino, guiando los ojos del usuario. Por ejemplo, en la imagen de abajo, prestaremos más atención a los espacios entre las líneas rectas. Hablemos primero de la tensión angular. Hemos estado hablando de una línea recta antes y la tensión angular es una "forma" compuesta de múltiples líneas. Como se muestra en la imagen siguiente, muchas casas están dispuestas en curva, formando un vórtice.
5. Disposición y proximidad
En primer lugar, en términos de disposición, diferentes disposiciones dan a los usuarios diferentes sensaciones. La disposición ordenada hace que las personas se sientan regulares, desordenadas, compactas y cercanas, mientras que la evacuación hace que las personas se sientan alienadas. El ejemplo más sencillo es el cabello, peinarlo o no, da a la gente una sensación muy diferente. Pero no debe ser demasiado compacto, lo que provocaría una evacuación y haría que la gente se sintiera nerviosa y vacía. Por lo tanto, en el diseño UX, no solo debemos prestar atención a la elección de la disposición, sino también al grado de disposición.
En términos de proximidad, la proximidad o distancia entre dos cosas hará que las personas sientan que las dos cosas están relacionadas o no. Esta distancia se llama "proximidad". Normalmente, colocamos los elementos relacionados más cerca y los elementos no relacionados más lejos. Por ejemplo, los títulos, áreas de texto y botones relacionados con el mismo comportamiento suelen diseñarse juntos para que los usuarios puedan saber que están relacionados sin mirar nada.
Tres. Conclusión
Esto concluye la explicación de los cinco principios visuales. Los cinco principios visuales no están separados unos de otros. Se promueven, complementan y mejoran mutuamente. Espero que este artículo pueda ayudarte a comprender la belleza de UX.
(Las opiniones personales de este artículo son solo de referencia)
Materiales de referencia:
[1] Aplicación de la sinestesia en el diseño de experiencias, Fan.
[2] Desarrollo de puntos de contacto de servicio diseñables en la industria de la restauración basados en la experiencia sensorial, Xu Xiaoning (Instituto de Artes y Oficios de Shandong, Jinan 250014).
[3] Método de diseño de posicionamiento del color del producto basado en la experiencia del usuario, Lin (Segunda Universidad Politécnica de Shanghai, Shanghai 201209)