Diseño de carteles de fitness: ¿Cómo diseñar un cartel para atraer la atención de las personas y hacerlo más llamativo?
Pero como herramienta de marketing ocasional, se encuentran disponibles algunos carteles promocionales necesarios, entonces, ¿de dónde vienen los carteles promocionales de bajo costo y alta calidad? Después de investigar en nuestro gimnasio, descubrimos que los sistemas de gestión del fitness como Fitness Assistant y Qingcheng tienen la función de generar carteles automáticamente y de forma gratuita. Los carteles de Fitness Assistant son ricos en estilo y hermosos, y se pueden generar rápidamente agregando información simple. Los carteles de Qingcheng son más personalizados. Configurar el contenido de la imagen manualmente lleva algo de tiempo, pero el resultado final es bastante bueno. ¡No importa cómo esté formado el cartel, siempre y cuando se ajuste al gusto de tu gimnasio! ¡Lo importante es que este cartel es gratis! ¡El costo se ahorra mucho!
Diseñar productos secos ~ expresión visual, establecer nivel de información, profundidad, buena escritura, advertencia, ¡se recomienda guardar antes de leer!
Como diseñadores visuales, nuestro papel no es sólo satisfacer las necesidades estéticas de los usuarios, sino también transmitir marca, información y funcionalidad. Para transmitir información de manera efectiva a los usuarios, necesitamos establecer una jerarquía de información en lugar de entregársela a los usuarios para que la comprendan por sí mismos. Qué métodos de visualización pueden lograr esto y si existe una base teórica detrás de estos métodos es el tema de este artículo.
Primero mira las dos imágenes siguientes. La imagen de la izquierda es el efecto tomado por la cámara y la imagen de la derecha es el efecto cuando el ojo humano no se mueve. Se puede encontrar que el ojo humano no adquiere información al mismo tiempo y no puede producir múltiples puntos de enfoque al mismo tiempo, manteniendo así la línea de visión en más lugares. Lo que los diseñadores deben considerar es permitir a los usuarios obtener información en un orden determinado a través de los movimientos oculares, ayudando a que el proceso de adquisición y comprensión sea eficiente y natural.
Este método de diseño pretende resolver dos problemas principales:
1. La eficiencia de los usuarios en la obtención y comprensión de la información.
Establecer una buena jerarquía de la 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
Los diseñadores analizan conscientemente la información Priorizan y comprenden qué expresiones visuales pueden construir una jerarquía de información y la lógica detrás de cada método, en lugar de simplemente diseñar por sensación.
Primero, comprenda temprano; analice
Antes de comenzar con el diseño, además de comprender los objetivos subyacentes del proyecto en sí, el diseñador visual también necesita comprender algunas páginas específicas para ayudar a guiar. el diseño posterior, incluido el posicionamiento de la página, la creación de una atmósfera, la prioridad de la información, los comportamientos principales del usuario, etc.
1.1. El posicionamiento de la página es el requisito previo para ayudar a analizar la prioridad de la información de la página y su comportamiento central.
Normalmente:
¿Quién es el usuario?
¿De dónde vienen los usuarios, es decir, por qué canales llegan a esta página?
Posicionamiento del contenido de la página, qué se proporciona y qué no se proporciona.
Funciones de la página
Por ejemplo:
Cuando diseñamos la nueva página de inicio del mercado de ventas directas de compras, analizamos interactivamente la familiaridad de los usuarios con el servicio y determinamos los principales usuarios objetivo de la página de inicio. Para nuevos compradores. El posicionamiento del contenido de la página es mostrar los puntos de valor del mercado. Los datos generados por los usuarios permiten a los nuevos compradores comprender la compra directa para formar una marca;
1.2. creado en la página puede ayudarnos a juzgar qué elementos pueden ayudarnos a lograr objetivos. La atmósfera se puede crear a través del contenido en sí, o mediante el diseño de elementos visuales, pero hay que tener en cuenta que la creación de la atmósfera no puede ser más fuerte que el contenido en sí al que los usuarios prestan atención.
El ambiente puede ser:
Promoción temática de Año Nuevo
Descuento bajo
La información es nueva.
Usuarios activos, etc.
La siguiente es la página oficial de la gran promoción.
La imagen de la izquierda continúa la atmósfera de carnaval durante el período de preparación, pero cuando comienza el 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 es la combinación ajustada de creación de atmósfera e imágenes de categorías, que resuelve bien la relación entre atmósfera y contenido.
1.3, Analizar la prioridad de la información
1) La información de primera clase atrae a los usuarios: suponiendo que los usuarios solo permanecerán en esta página durante 3 a 5 segundos, lo que atrae a los usuarios a continuar La navegación es la página El principal atractivo de venta, que es información de primer nivel. Deben ser pocos pero precisos y deben tener un diseño sobresaliente.
2) La información secundaria ayuda a comprender: Atraídos por la información principal, los usuarios pueden permanecer entre 3 y 5 minutos para comprender mejor el contenido. En este momento, mostrar información secundaria es para refinar la esencia del contenido y ayudar a los usuarios a comprender la información en el menor tiempo posible.
3) Comprensión detallada de la información de tercer nivel: los dos primeros tipos de información básicamente pueden ayudar a los usuarios a obtener información suficiente. Si el usuario continúa quedándose más tiempo para aprender más, habrá más información de este tipo, el nivel visual del diseño será menor o se mostrará de forma interactiva y proporcionará saltos de entrada.
1.4, Análisis del comportamiento principal del usuario
Diferentes tipos de usuarios se comportarán en diferentes etapas. ¿Cuál es la dirección última de estos comportamientos?
Por ejemplo, en la página de detalles del producto, algunos usuarios comprobarán los comentarios de los usuarios, el historial de transacciones, etc. antes de decidirse a comprar, pero estos comportamientos de visualización son, en última instancia, para ayudar a los usuarios a juzgar si deben comprar el producto, por lo que el comportamiento central conduce en última instancia a la compra.
Con estos análisis, la prioridad de la información y la prioridad del comportamiento del usuario de los módulos grandes se proporcionarán en el documento de salida interactivo, como se muestra en la siguiente figura.
Antes de diseñar la visión en detalle, es necesario analizar la prioridad del contenido específico en cada módulo y realizar el siguiente diagrama esquemático, y confirmarlo con las partes de interacción y negocio. Estos son resultados importantes que ayudan a mantener el proceso de diseño visual en marcha.
2. Método de visualización para establecer la jerarquía de la información
Las técnicas de expresión visual incluyen principalmente los siguientes elementos. Para que el efecto sea más importante en el diseño real, se pueden utilizar varios métodos simultáneamente para lograr mejores efectos:
Posición
Tamaño
Distancia
Forma del contenido
Color
2.1, ubicación
La ubicación es un factor que se debe considerar al inicio del diseño. Cuando la gente mira las cosas, siempre sigue ciertas reglas. Seguir estas reglas en el diseño puede ayudar a los usuarios a ver o comprender lo que tienen delante de forma más fácil y rápida. Hay dos leyes relacionadas con la posición de los elementos de diseño:
1) Cuando los ojos se desvían del centro de visión, bajo la misma distancia de desviación, el ojo humano observa mejor la parte superior izquierda y la parte superior derecha en segundo lugar. , y la parte inferior izquierda y la inferior derecha son las mejores. Por lo tanto, la parte superior izquierda y la parte superior media se denominan "mejores ángulos de visión". Por ejemplo, la información importante, como el logotipo del sitio web, el nombre de la empresa, el tema, etc., generalmente se coloca en el mejor ángulo de visión. Por supuesto, esta división también se ve afectada por factores culturales. Por ejemplo, el texto árabe se escribe de derecha a izquierda y la mejor vista es desde la parte superior derecha. La siguiente imagen está tomada del "Tutorial artístico de diseño de interfaz web" de Zhang Fan y Luo Qidong. Después de dividir la pantalla, los usuarios prestan diferente atención a las diferentes posiciones:
2) La segunda regla es que los ojos se mueven más rápido en la dirección horizontal que en la vertical, lo que los hace menos propensos a la fatiga. Generalmente, primero se ven los objetos en dirección horizontal y luego los objetos en dirección vertical. Como se muestra en la figura siguiente, la diferencia entre la atención izquierda y derecha es menor que la diferencia entre la atención arriba y abajo. Si desea reflejar la relación paralela, la disposición izquierda y derecha será más apropiada, pero si desea ampliar la brecha, solo puede lograr el objetivo disponiéndola hacia arriba y hacia abajo;
Por ejemplo, como se muestra en la página de inicio del sitio web Times Weekly, 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. En términos de rendimiento visual, no solo es grande en área, sino también en un área dominante. Quizás el 98% de los usuarios presten 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 es una imagen grande y ocupa un área grande, no será visible debido a su posición. No está en la mejor vista. Distraído por "LatestHeadlines", tal vez solo el 60% de los usuarios vean primero el lado derecho, si la información tiene prioridad, debería haber una brecha en la presentación visual, en lugar de una situación cercana a la igualdad.
3) Los usuarios dan prioridad a la parte superior, y el diseño web tiene el concepto de primera pantalla. La información de la primera pantalla es mayor que la información de la segunda y tercera pantalla que aparece cuando el usuario arrastra la barra de desplazamiento.
Debido a que las resoluciones de pantalla utilizadas por los usuarios son diferentes, la altura de la primera pantalla también será diferente. Según los datos de nuestro sitio web, la altura de resolución actual es 768, por lo que la altura de 768 se utilizará como punto de referencia al diseñar. El promedio en la mitad superior de la página que realmente se muestra al usuario es 600 px. Estos datos se ajustarán en función de futuros cambios de resolución para 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. El tamaño reflejará intuitivamente la importancia de la información.
Se presenta un caso de diseño de carteles deportivos, involucrando cuatro deportes de pelota: fútbol, golf, béisbol y baloncesto. El baloncesto y el fútbol serían más importantes si se diseñaran en función del tamaño real. Para reflejar la igualdad de movimiento, se ajustó el tamaño de la pelota en el diseño.
Las conclusiones de "Simple First" de Giles Colborne pueden guiarnos para ampliar la brecha por tamaño:
1) Los elementos importantes son más grandes y pueden considerarse incluso si están desproporcionados .
2) Encuentre una manera de expresar la brecha; si la importancia de un elemento es 2, entonces su tamaño es 4.
O tomemos como ejemplo la página de inicio de Time Weekly. En la actualidad, las imágenes de noticias de enfoque en el lado izquierdo del diseño y las imágenes de noticias en el medio ocupan áreas diferentes, lo que hace que sea más fácil para los usuarios concentrarse primero en la información de primer nivel y no ser molestados fácilmente por el entorno.
Al comparar las áreas de las dos imágenes de noticias, se puede ver que la diferencia es aproximadamente 4 veces.
Si la interfaz se ajusta de la siguiente manera: después de enfocar la imagen de noticias se reduce; dos veces, se puede ver que la jerarquía visual ha cambiado. La distinción no es obvia.
Además del área que ocupe el propio elemento, que afectará a la jerarquía visual, también influirá el grado de amplificación de los detalles del elemento. Una vez ampliados los detalles, el ojo humano sentirá que los elementos son más claros y más cercanos a los ojos, lo que los hará más fáciles de notar primero. Por supuesto, la premisa es garantizar que la información pueda entenderse. Si se magnifican los detalles locales pero los usuarios no pueden entender cuál es la información, no atraerá a los usuarios.
La siguiente imagen es la página web de una empresa de modelos. Fotos de modelos aparecen aleatoriamente en la página de inicio, incluidas fotografías de rostros y bustos. Las fotografías con rasgos faciales ampliados garantizan que los usuarios puedan comprender la imagen del modelo, por lo que darán prioridad a las fotografías con detalles ampliados.
2.3. Distancia
Como mencionamos anteriormente, si haces zoom en el detalle de un elemento, tus ojos lo sentirán más cerca y obtendrán atención prioritaria. Aunque el medio para mostrar información es plano, puede reflejar el efecto tridimensional a través de medios visuales. Además del tamaño, existen otros métodos visuales como los siguientes:
1) Reducir la distancia tridimensional
Para lograr el efecto de ser abstracto, el siguiente método consiste en hacer que el la información no está clara y los ojos parecen incapaces de enfocar. En términos de información, incluye:
Elementos borrosos en el fondo a continuación están borrosos para que no estén en el mismo plano que los dos puntos de acción y. Los íconos a la derecha y están más lejos de los ojos. El usuario está identificando los puntos de acción y los personajes no se verán afectados por el fondo borroso.
_Cuando algunas imágenes de fondo están borrosas, es difícil percibirlas como un todo. Elegir reducir la transparencia también puede alargar la distancia.
_ Respecto al tema de Sombras y Sombras, cuando la interfaz tiene muchos colores o elementos, el solo hecho de reducir la transparencia puede no necesariamente crear distancia. Como se muestra en la imagen a continuación, espero que al comprar un televisor, después de reducir la transparencia de los otros cuatro módulos, no haya una brecha obvia debido a los colores intensos. Después de agregar la capa gris translúcida, los módulos distintos de la compra del televisor naturalmente quedan detrás de la línea de visión.
2) Cerrar la distancia tridimensional
Agregar una sombra paralela es la técnica visual más común para hacer que un elemento se vea diferente de otro contenido. Por lo general, dado que aparecerán cuadros emergentes y capas flotantes después de mover el mouse sobre otra información, agregar una sombra puede ayudar a los usuarios a concentrarse en el módulo con una sombra sin que la información posterior los moleste.
3) Además de las tres dimensiones, la distancia bidimensional también afecta a la jerarquía visual. Según la ley de proximidad de la psicología Gestalt, las partes que son cortas o cercanas entre sí tienden a formar un todo, es más probable que el ojo humano note primero la información que está cerca; En cuanto al uso de técnicas visuales, los elementos se acercan al enfoque anterior y el nivel visual es alto. Como se muestra a continuación, la imagen de enfoque de noticias de primer nivel está cerca de la imagen pequeña de la derecha 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 La imagen pequeña en el medio es más atractiva que el texto en sí, debido al título debajo de la imagen de enfoque. Más cerca, formando un todo, la línea de visión tiende a moverse hacia abajo primero.
2.4. Forma del contenido
Después de determinar la relación entre la posición, el tamaño y la distancia del módulo, continuaremos considerando la forma del contenido, incluidos videos, imágenes, texto, etc Aquí hablamos principalmente de los gráficos y el texto que usamos con frecuencia; en comparación con el texto, las imágenes juegan un papel importante para captar la atención del usuario y, al mismo tiempo, también pueden permitirle formar una memoria de imagen en un corto período de tiempo. . Desde una perspectiva visual, el ojo humano suele prestar atención primero a las imágenes y luego al texto. Pero esto por sí solo no es suficiente. Captar la atención del usuario a través de imágenes y guiarlo al siguiente punto de atención es un punto que se considerará más en el diseño. Se puede resumir en:
1) Orientación direccional
La siguiente imagen supone que la persona en el medio llama la atención primero, que es el primer nivel de información. Debido a que la dirección de la mirada del ojo humano es hacia la derecha, el siguiente objetivo de la atención del usuario se dirigirá al texto "codificador", que es el segundo nivel de información.
La posición de "WHATWEDO" en la esquina superior izquierda se nota fácilmente primero. Los personajes de la derecha ocupan un gran espacio y también llamarán la atención. Sin embargo, como no hay otra información sobre la dirección del movimiento de los personajes, las imágenes no desempeñan un papel de guía y los usuarios no navegarán con fluidez.
Después del ajuste, aunque la posición de "WHATWEDO" no está en el área ventajosa, a través de la guía de la dirección de la imagen, es natural que los ojos de las personas se fijen en la información del texto.
2) Guía de símbolos
Además de las imágenes, algunos símbolos son secuenciales y direccionales, y también pueden guiar eficazmente los ojos para navegar según los símbolos, incluidos los números arábigos y el orden alfabético. , orden cronológico, flechas, etc.
Para los primeros tres dígitos 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 según 1 >; 2 gt3. Si desea que este orden sea más obvio, puede ampliar el tamaño de la imagen a 1 para ampliar el espacio y combinar varios métodos visuales para lograr el efecto.
Las líneas de tiempo también se utilizan ampliamente en las interfaces. La navegación de información por parte del ojo humano se verá afectada por el orden cronológico e incluso romperá el hábito convencional de navegación de izquierda a derecha. Como se muestra en la figura siguiente, aunque la posición 2 es más fácil de guiar a los usuarios a navegar primero, la línea de tiempo tiene un impacto más obvio en la información. Generalmente, los usuarios verán primero el módulo 1 y luego se centrarán en el módulo 2 de derecha a izquierda según el 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 producir efectos inmediatos a nivel visual. En resumen, las principales diferencias en la atención humana a los colores son los dos puntos siguientes:
1) Primero los colores cálidos y luego los colores fríos.
En la actualidad, no existe un orden absoluto en el que los colores de diferentes tonalidades estimulan y reflejan el ojo humano, pero sí existen diferencias evidentes de 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, que tiene cierta relación con el reflejo de diferentes longitudes de onda por parte de nuestros ojos humanos.
Fisiológicamente hablando, el ajuste del ser humano; La lente es muy precisa, muy sensible a los cambios de distancia.
Podemos saber qué tan lejos está un objeto de nosotros, pero esto tiene un límite y no podemos ajustarnos correctamente a pequeñas diferencias en la longitud de onda. Cuando el ojo observa colores de diferentes longitudes de onda a la misma distancia, los colores cálidos con longitudes de onda más largas, como el rojo y el naranja, forman imágenes internas en la retina; los colores fríos con longitudes de onda más cortas, como el azul y el violeta, forman imágenes laterales en la retina; . Así, los colores cálidos parecen estar avanzando y los colores fríos parecen estar retrocediendo.
Hubspot, una empresa estadounidense de marketing digital, realizó una vez una prueba A/BT para probar la diferencia en las conversiones de clics causadas por diferentes colores. En la imagen, el contenido de las páginas de prueba izquierda y derecha es exactamente el mismo, la única diferencia es el color de los botones. En una prueba de muestra de más de 2000 personas, la tasa de clics de la solución roja finalmente superó a la de la solución verde en un 21%. Antes de la prueba, la mayoría de los investigadores especularon que el esquema verde obtendría más clics porque intuitivamente, el verde representa paso y permiso, mientras que el rojo se inclina más a advertir y detener.
Este test refleja en cierta medida el impacto de los colores cálidos en la atención y movilidad del usuario. Por supuesto, esto no significa que debas utilizar colores cálidos para aumentar las tasas de clics. El estilo de color específico debe diseñarse de acuerdo con el posicionamiento del producto.
2) El contraste de alto contraste es primero bajo y luego alto.
Además de la diferente estimulación de los ojos entre colores fríos y cálidos, el contraste de color es el factor que con mayor probabilidad provoca diferencias en la atención. Para sobrevivir en la naturaleza, los colores protectores utilizados por los animales están relacionados con el contraste. Por ejemplo, el búho de la imagen está relacionado con su entorno de vida. El color de su pelaje también ha evolucionado hacia un color similar, que desempeña un papel de ocultación. y protección Por el contrario, el contraste de color es grande Es particularmente fácil atraer la atención, como el color rojo único en los tulipanes amarillos de abajo.
El tamaño y la distancia mencionados anteriormente son medios visuales para reflejar el contraste. El contraste de color se puede lograr principalmente a través de los siguientes métodos:
Contraste de fase de color: en la imagen a continuación, el principal. El color es azul, los puntos de acción azules son consistentes con el color general y el sentido de jerarquía es relativamente débil, mientras que el contraste entre los puntos de acción verdes y la fase de color azul aumenta el sentido de jerarquía.
Pero hay muchos colores. ¿Cómo determinar el contraste? Podemos verlo a través del círculo de color, como se muestra en la siguiente figura. La intensidad del contraste tonal depende de la distancia en la rueda de colores. Cuanto mayor es la distancia, más fuerte es el contraste y viceversa.
El contraste de saturación y el contraste de brillo son fáciles de entender y ambos tienen valores controlables. Cuanto mayor sea la diferencia de valores de saturación o brillo entre dos colores, mayor será el contraste, y viceversa. Mire ejemplos específicos: por ejemplo, en el mapa de navegación a continuación, el ícono del personaje actual tiene un brillo más alto y el fondo negro con brillo más bajo es más fácil de ver primero.
El siguiente gráfico circular muestra que el porcentaje de finalización está muy saturado, en contraste con la baja saturación general. Comparar el mismo tono a través de la saturación no sólo puede ampliar la brecha para formar una jerarquía visual, sino también crear un efecto visual general.
Resuma las técnicas de expresión visual mencionadas anteriormente y forme una tabla para que todos la recuerden de la siguiente manera:
En tercer lugar, observe el flujo visual de la página.
Visual expresión establece información Después del nivel, los diseñadores deben verificar constantemente si el orden de navegación del usuario en los niveles 1 a 2 a 3 es realmente el esperado, incluida la navegación en módulos grandes y módulos en la página, que formarán un flujo visual en la página;
Observar 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 de navegación es regular. Si nuestro diseño no puede guiar eficazmente la mirada del usuario y la navegación del usuario tiende a ser aleatoria, será difícil transmitir rápidamente la información deseada.
El siguiente contenido presenta principalmente el proceso visual típico y las características de cada tipo, incluyendo:
Flujo visual lineal
Flujo visual guiado
Flujo visual chocante
Flujo visual radiactivo
1) Flujo visual lineal
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Por ejemplo, la página de inicio, la página completa y los módulos individuales son flujos visuales horizontales típicos. Después de que el usuario navega de izquierda a derecha hasta el borde, sus ojos vuelven a la siguiente línea y continúan leyendo de izquierda a derecha. El área óptima para la navegación horizontal tendrá un valor numérico.
Por ejemplo, digg selecciona un ancho de página de aproximadamente 1000 px y muestra tres elementos por fila. A medida que aumenta la resolución de la pantalla del usuario, ¿deberían seguir aumentando estos dos valores? ¿Hasta qué punto es máxima la eficiencia del ojo humano para adquirir información? No he encontrado ningún apoyo teórico o experimental correspondiente para esta pregunta, así que buscaré la información más adelante.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
La siguiente imagen muestra el diseño de la página de inicio de digg del flujo visual horizontal original que se ha ajustado a un flujo visual vertical. Además de las imágenes grandes, los usuarios también elegirán una de las tres columnas para navegar verticalmente hasta encontrar cierta información de destino y luego explorar los detalles horizontalmente.
El límite de altura vertical de una interfaz web es menor que el horizontal porque los usuarios están acostumbrados a desplazarse hacia arriba y hacia abajo para ver más información. Cuando el usuario aún está determinando la información del objetivo, el flujo visual vertical puede ayudarlo a obtener más información sin tener que mirar atrás para escanear. Como se muestra en la interfaz del calendario de Facebook a continuación, cuando la línea de tiempo está dispuesta horizontalmente, debido al ancho limitado, es necesario cambiar horizontalmente o usar una barra de desplazamiento para ver más fechas:
Ajuste la dirección de la línea de tiempo a vertical para que los usuarios puedan desplazarse hacia arriba y hacia abajo para ver más fechas Ver eficientemente todas las fechas del mes.
_ Nadando en las montañas azules, los pájaros cantando y las flores fragantes. Sin embargo, debido a la inclinación del ángulo, el reconocimiento de texto es algo difícil. La disposición de una gran cantidad de información de texto no es adecuada para esto. flujo visual A menudo se utiliza como adorno en el diseño o como información. Una pequeña interfaz, como el cartel del gimnasio a continuación;
La interfaz web también tiene un pequeño rango de diagonales. flujo visual para reflejar la sensación de movimiento.
_Al nadar, la línea de visión del usuario formará una curva personalizada, rítmica y vivaz. Este tipo de movimiento ocular tiene una gran amplitud y el uso prolongado provocará fatiga visual, por lo que no es adecuado para párrafos largos. Generalmente, se combina con gráficos para crear un flujo visual curvo, lo que permite que los ojos del usuario permanezcan en el área de la imagen por un tiempo;
Como se muestra a continuación, agregue imágenes al flujo visual curvo, deje que los ojos permanezca en el nodo de imagen y explore el contenido del nodo y continúe navegando a lo largo de la curva.
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 notará la información objetivo a través de la inducción. elemento; los elementos inductores comunes se pueden dividir en líneas, imágenes que incluyen personas u objetos, letras de flecha y otros indicadores. Este tipo de flujo visual debe captar la relación primaria y secundaria entre los elementos inductores y la información del objetivo no puede ser demasiado fuerte, de lo contrario debilitará la difusión de la información del objetivo, si los elementos inductores pueden contener alguna información del objetivo, debilitará la difusión de la información del objetivo. Se puede aumentar la transmisión de información.
Como se muestra en la imagen a continuación, el líquido rojo en el tubo se mueve, lo que atrae a los usuarios para que alcancen el mensaje objetivo a lo largo de su dirección de movimiento.
La forma del contenido mencionada anteriormente, desde imágenes o símbolos hasta el siguiente enfoque visual, también es un tipo de guía desde la perspectiva del flujo visual. Los dos ejemplos siguientes se utilizan en partes de la página para guiar el flujo visual.
3) Superar el flujo visual
En información de naturaleza igual o similar, al seleccionar información destacada o interesante, las personas tienen derecho a tomar decisiones independientes, pero en el diseño, También se puede transmitir ajustando la fuerza de los elementos sin dejar ningún rastro.
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 es algo aleatoria, pero la prioridad también se transmite al hacer zoom. y fuera de los retratos.
4) Flujo visual radiactivo
La línea de visión comienza desde el centro de la página, de modo que los elementos en el medio tengan el impacto más fuerte y la transmisión de información más clara, formando así una divergencia visual con los deportes intermedios.
Por ejemplo, en muchos sitios web de automóviles, el mapa principal en el medio puede reflejar mejor el núcleo de la información, que luego se extiende a la navegación de arriba o a otras entradas de servicios de abajo a través del mapa principal.
Los cuatro tipos de flujo visual anteriores son típicos, pero no lo representan todo. También podemos diseñar flujos visuales más creativos. No importa qué ruta se utilice, nuestro objetivo es si la navegación del usuario es fluida y si la información se entrega de acuerdo con la prioridad.
Finalmente, para resumir:
1. En la etapa inicial del proyecto, necesitamos comprender la atmósfera y el posicionamiento del contenido creado por la página y combinar el análisis interactivo de la prioridad; de la información y el comportamiento central del usuario; en la etapa inicial 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 expresiones visuales como ubicación, tamaño, distancia, forma del contenido, y color.
3. Durante y al final del proceso de diseño, se debe revisar constantemente el flujo visual de la página para ver si la navegación del usuario es fluida.
Analizamos conscientemente la prioridad de la información que interesa a los usuarios y la expresamos de forma intuitiva. Esta es una responsabilidad muy importante del puesto de diseñador visual. Espero que estos métodos puedan ayudarnos a cumplir mejor con esta responsabilidad y ¡me encantaría animarte a ti también!
Mis amigos y yo hicimos un pequeño programa teórico para construir nuestra propia biblioteca teórica; hay muchos términos, leyes y teorías sobre interacción, psicología y gestión. ¡Escanee el código del mini programa a continuación en WeChat para experimentarlo rápidamente!
¿Cómo diseñar carteles para llamar la atención y atraer más miradas? No importa a dónde vayamos, siempre podremos ver varios carteles. La mayoría de la gente tiene aversión a los artículos relacionados con la publicidad, pensando que son engañosos y una conspiración de las empresas, y lo mismo ocurre con los carteles. Un cartel mal hecho es solo un pedazo de papel usado a los ojos de los demás, pero un cartel bien diseñado hará que los ojos de las personas brillen, disfruten de la belleza y tengan un atractivo artístico, lo que naturalmente hará que las personas presten atención al contenido promocionado por el cartel. Entonces, ¿cómo puedes hacer que tu cartel sea más atractivo?
Antes de diseñar el cartel, debemos considerar los pasos de diseño del cartel promocional:
1. ¿Cuál es el propósito de realizar este cartel, la estrategia del cartel y quién es? ¿El público objetivo del diseño del cartel? La expresividad y creatividad del diseño del cartel, y cómo combinar su diseño con su producto.
2. Los elementos a los que se debe prestar atención en el diseño de carteles son:
(1) En primer lugar, se debe complementar la redacción y las imágenes deben ser el foco principal. En segundo lugar, debemos perfeccionar el contenido del cartel y captar los puntos clave.
(2) La fuente del tema debe ser muy llamativa y atractiva.
(3) Se puede lograr un impacto visual total a través de imágenes y colores; p>(4 )Recuerda no tener contenido demasiado complicado. La imagen debe tener un centro visual fuerte, esforzarse por ser novedosa y concisa, y también debe tener un estilo artístico y características de diseño únicos.
Al diseñar un cartel, primero debes resaltar el tema, el fondo, el color y el tema, coordinar el tamaño de la fuente y resaltar el contenido si es grande. El contenido debe ser moderado y el contenido debe ser grande. simple y claro, para que la gente pueda ver lo que dicen, llamar la atención, ver lo que necesita y generar consultas y compras.
El cartel tiene tres elementos principales.
1. Estilo
Desarrolla lentamente el estilo general del cartel. Una atmósfera única suele ser más llamativa y atrae a los espectadores a explorar y reflexionar de forma natural.
Dos. Elementos
Necesitamos identificar los elementos necesarios de un buen cartel. Parte de título, parte de texto, parte de imagen, información de texto adicional, etc. La simplificación es simplicidad, menos es más.
Tres. Composición
La composición tipográfica es a menudo un vínculo simple pero extremadamente complejo en el diseño de carteles. Es necesario distinguir las prioridades y resaltar los puntos clave sin destruir el estilo y la belleza generales.
Resumen
Cuando estés considerando un póster, no te apresures a hacerlo. Puedes visitar más sitios web de diseño como Zakuu y Douban. Primero, eche un vistazo a las ideas de diseño de expertos experimentados y luego intente incorporar gradualmente sus propias ideas. Sólo imitando y aprendiendo constantemente podrás aprender que otras montañas parecen eclipsadas bajo el cielo... No insistas en hacer las cosas a puerta cerrada, ya que esto sólo aumentará el calado y el temperamento de tu avión.
Un excelente diseño de cartel se puede dividir en las siguientes partes.
1. Refinar temas llamativos
Investigue los requisitos de diseño y extraiga texto preciso y oraciones cortas como diseño del título principal del póster. Por supuesto, sería mejor si la Parte A tuviera una copia.
Por ejemplo, el tema de un cartel de fitness refleja la forma y la fuerza del cuerpo, por lo que generalmente es necesario elegir una fuente capaz y concisa para que los elementos de cada parte se ajusten al tema y transmitan la sensación más precisa. a la audiencia.
2. Crea una atmósfera con bellas imágenes
Los carteles son una combinación de historias cortas e imágenes. A veces las imágenes ocupan una proporción mayor en los carteles, por lo que las imágenes son
.