Discusión sobre varios métodos comunes en el diseño de imágenes largas

El diseño de imágenes largas se utiliza ampliamente en la era de la lectura de pantalla. Además de los sitios web y páginas de aplicaciones que más inmediatamente me vienen a la mente, también hay paquetes gráficos largos de trabajos personales, carteles largos, páginas de detalles de productos de comercio electrónico, anuncios gráficos largos en Weibo y WeChat, etc. Por lo tanto, no solo los diseñadores de interfaces necesitan conocer el método de composición del diseño de textos y gráficos largos, sino que los diseñadores comunes también pueden conocer algunas habilidades de diseño para páginas de texto y gráficos largos.

Para mantener el interés de los lectores y permanecer más tiempo, nuestro diseño no solo debe verse bien, sino también proporcionar alguna guía visual para que la experiencia del contenido sea consistente de principio a fin. Para lograr este objetivo, necesitamos un diseño específico.

Espero que este artículo pueda ayudarte. Entonces, echemos un vistazo a algunos métodos de diseño simples para diseños de páginas largas comunes.

La repetición es unificar el campo de visión y recordar al usuario o lector que todavía está atrapado en el mismo contenido. La repetición puede ser fuentes repetidas, colores, tamaños, espacios, tablas, marcos, etc. No se trata de una copia estricta de los mismos elementos, sino de un cambio continuo en la página según determinadas reglas. Es decir, cuando se utilizan elementos repetidos, debe haber cambios regulares y regulares en los cambios.

Repetición de números, palabras, inglés, formas tipográficas, estructuras, etc.▼

Repetición de formas tipográficas, estructuras, etc.▼

Repetición de formas , símbolos, características, etc.▼

Colores repetidos, aplicaciones de bloques de colores, etc.▼

Además de las repeticiones señaladas, no es difícil encontrar varios métodos de repetición. No existen de forma independiente y, a menudo, se aplican varios métodos de forma mixta. Por supuesto, existen muchos más métodos de repetición además de los enumerados.

El diseño F es un diseño muy tradicional pero muy científico. Es un diseño clásico basado en una gran cantidad de experimentos de seguimiento ocular. En línea con los hábitos de navegación de la mayoría de las personas. Cuando miramos una página, generalmente miramos la esquina superior izquierda (como el logotipo, la navegación, el título, etc.), luego priorizamos el contenido horizontal de izquierda a derecha y luego navegamos por toda la página de arriba a abajo, de esta manera formando un camino visual en forma de F.

Tabla de investigación de seguimiento ocular de NNGroup (el rojo y el naranja representan puntos calientes de concentración, el azul representa partes poco interesantes)▼

A partir del diseño en forma de F y los experimentos de seguimiento ocular, podemos dibujar el siguientes revelaciones:

1. La información más importante (como el logotipo, el nombre de la empresa, el título, la navegación, etc.) debe colocarse en la parte superior (incluso en la esquina superior izquierda) en lugar de en la derecha. .

2. Generalmente, puedes poner algunas cosas secundarias a la derecha, como comentarios, consultas, publicidad, recomendaciones, etc.

3. A la hora de diseñar se debe prestar más atención a la información de la izquierda, que es donde se concentra la atención, y la derecha suele considerarse en blanco.

4. Para páginas de texto y contenido múltiples (como noticias, comunidad, páginas de introducción de eventos, etc.), se puede dar prioridad al diseño F.

Diseño en forma de F de la página web de 36Kr▼

Diseño en forma de F de la página de envato tuts▼

Diseño en forma de F de la página de actividad del juego▼

Diseño en forma de F de páginas activas▼

Además del diseño en forma de F, el diseño en forma de S (también llamado en forma de Z y en forma de Z) también es una página muy clásica. disposición. Asimismo, es coherente con los procesos de navegación humana, como se demuestra mediante experimentos de seguimiento ocular.

Cuando navegamos por una página, nuestros ojos se moverán hacia la izquierda y hacia la derecha para leer, y el punto de parada visual cambiará hacia arriba y hacia abajo, formando un camino en forma de "S" que se mueve hacia la izquierda y hacia la derecha. Este diseño se utiliza mucho en páginas largas, especialmente cuando se presentan imágenes de productos. El uso de un diseño en forma de S creará una guía visual para una lectura fluida de toda la página.

Tabla de investigación de seguimiento ocular ▼

La aplicación inicial del diseño en forma de S en las páginas web puede haber comenzado desde el sitio web oficial de Apple, usando palabras a la izquierda y palabras a la izquierda. derecho a formar coherencia lectora.

Por ejemplo, en "Above the Fold", la página de detalles del iPad a continuación cae sobre la imagen del iPad (es más fácil que la imagen se convierta en el centro visual que el texto), y luego el producto. El nombre y la introducción se leen a la izquierda.

Después de leer, a medida que la página se desplaza hacia abajo, su visión es atraída por las imágenes del iPad en la segunda pantalla, y continúa leyendo la introducción de las imágenes a la derecha... Repita este movimiento visual muchas veces, y todo La página se leerá sin problemas, formando una ruta de navegación visual en forma de S que es muy obvia.

Página de introducción de los primeros detalles del producto en el sitio web oficial de Apple▼

Además de Apple, esta disposición se usa ampliamente en muchas páginas de sitios web, anuncios de formato largo y empaques combinados.

Similar a la página de introducción de detalles del producto con diseño en forma de S▼

Otras páginas de diseño en forma de S▼

Se puede ver que el diseño en forma de S es muy popular para diseños de imágenes largas, en consonancia con los hábitos de lectura subconscientes de las personas.

El diseño de tarjetas es un método de diseño derivado del sistema de cuadrícula, también conocido como diseño de estilo contenedor. Divide texto, imágenes y otros elementos de información en una tarjeta y forma una página completa, concisa y estandarizada mediante la acumulación de tarjetas. Generalmente se usa en comercio electrónico (como Taobao, JD.com), sitios web de plataformas (como. como Zhanku, behance, Pinterest, Youku) y otras páginas con gran cantidad de información. Por supuesto, si encontramos gráficos y textos complejos en nuestro diseño, también podemos considerar usar este diseño para hacer nuestro diseño más conciso.

Página de diseño de tarjeta▼

Por supuesto, el diseño de página es mucho más que los métodos enumerados anteriormente, pero estos métodos son relativamente clásicos y de uso común. Al mismo tiempo, estos métodos no existen solos. También se mezclarán y coexistirán entre sí en la aplicación para ofrecer una página completa y hermosa. Creo que después de comprender completamente estos métodos de diseño, no nos confundiremos ni sabremos por dónde empezar al diseñar páginas largas o trabajos de exhibición de empaques.

Lo compartiré aquí primero, espero que te sea útil.