Un estudio de caso le ayudará a completar fácilmente el diseño de gráficos y texto.
La siguiente imagen es la interfaz de imagen derecha y lista de texto izquierda comúnmente utilizada en una aplicación de noticias. Aunque es solo un diseño simple: solo hay tres elementos: imagen, título y texto descriptivo, contiene detalles extremadamente ricos y utiliza una variedad de principios de diseño. ¡Este artículo desmantelará este caso uno por uno para resolver completamente el problema de la mezcla de gráficos y texto!
Los márgenes izquierdo y derecho de la interfaz son de 40px, y la distancia entre la imagen y el título es de 20px, que es una distancia muy típica entre distancia e intimidad. El tamaño de fuente del título es 32 px y su interlineado es 16 px, que es 1,5 x (el interlineado óptimo es 1,5-2x). La distancia entre el título y la descripción es de 40px, lo que también forma una distancia distante pero íntima con el interlineado del título.
Organiza la información compleja según el principio de intimidad, acerca los elementos relacionados entre sí, agrúpalos para formar una relación subordinada y luego aléjate de los elementos irrelevantes, de modo que cada grupo de información pueda ser Se distingue claramente. La legibilidad mejora enormemente. La imagen está más cerca del título, guiando el nivel de los ojos del usuario, pero si se descarta el principio de intimidad y la distancia entre la imagen y el título es la misma que el margen, la línea de visión del usuario será vertical debido a la proporción visual; de la imagen es el más grande.
Luego intentamos romper el principio de intimidad entre el título y el texto descriptivo, y descubrimos que el mismo espacio grande causaría que las dos líneas de los títulos ya no fueran coherentes, sino que darían la ilusión de dos títulos independientes; pero el mismo espacio corto da como resultado un diseño demasiado compacto y poca legibilidad.
Cuando te encuentras con algunas interfaces con un diseño confuso y poca legibilidad, no sabes dónde centrar tu atención. ¿Por qué está pasando esto? Todo esto se debe a que el contraste entre el contenido de la interfaz no es obvio. La información importante y la información secundaria deben tener un contraste muy fuerte en tamaño y peso, para que los espectadores puedan centrarse en el contenido principal y obtener información útil.
El caso de este artículo compara el grosor de la fuente, el tamaño de la fuente y el color del título con el texto de descripción para presentar visualmente la información más útil al usuario. Aquí, el título es la clave para atraer la atención del usuario, y el volumen de lectura a continuación es solo información auxiliar como referencia importante para obtener información. Después de todo, pocas personas harán clic en un artículo cuyo título ni siquiera sea interesante debido a su alto volumen de lectura. Si no presta atención al contraste y el título y el texto auxiliar tienen el mismo grosor, la información auxiliar perturbará la línea de visión de lectura.
El diseño conciso le da a la interfaz una buena sensación de respiración y orden. Los espacios grandes o un diseño sin líneas divisorias pueden reducir la interferencia visual y facilitar la navegación a los usuarios. Si observa el tamaño del diseño de la interfaz, encontrará que la interfaz está diseñada en unidades de 20 px: los márgenes izquierdo y derecho son 40 px, la distancia entre las imágenes superior e inferior es 40 px, la distancia entre la imagen y el título es 20px y el tamaño de la imagen es 200*140px, todos múltiplos de 20. Las reglas simples son hermosas y el trabajo de diseño se vuelve más eficiente.
Sin embargo, es necesario que haya cierto grado de control. Si el interlineado es demasiado pequeño, todas las listas se apiñarán. Si el interlineado es demasiado grande, la página se verá suelta y reducirá la eficiencia de la navegación. Por lo tanto, el espaciado y el espacio en blanco correctos pueden aclarar la capa de información. Para ello, necesitamos practicar todos los días y acumular experiencia.
Las imágenes y el texto están organizados de izquierda a derecha, manteniendo el equilibrio visual de la lista y brindando a los usuarios una sensación de armonía psicológica. En este caso, el título y el texto de respaldo no están en mayúscula ni al mismo nivel que la imagen, sino que se dejan con algo de espacio. (Como se muestra abajo a la izquierda) ¿A qué se debe esto?
Originalmente, no había líneas divisorias para separar las filas. La imagen era un rectángulo regular, lo que facilitaba que se convirtiera en el centro visual. Cree un rectángulo visual extendiendo la imagen horizontalmente y el contenido de este rectángulo forma una relación subordinada con él. Si el título y el texto descriptivo están alineados con la imagen, se sentirá como si el texto se desbordara y perdiera su afiliación con la imagen. Aquí hay un detalle más pequeño: el espacio entre la parte superior del título y la imagen es mayor que el espacio entre la parte superior del texto de descripción y la imagen. Esto se debe a que el título en sí tiene un tamaño de fuente más grande, al igual que cuanto mayor es el tamaño de fuente, mayor es el interlineado predeterminado. Si se utiliza el mismo espacio para tamaños de fuente pequeños, parecerá inconsistente.
La esencia de la relación equilibrada mencionada anteriormente reside en los detalles. Dominar estos detalles puede hacer que su interfaz sea más refinada y se destaque.
Por último, quiero hablar de por qué este caso utiliza el texto de la derecha y de la izquierda. ¿Es esto más razonable? O puede tener imágenes a la izquierda y texto a la derecha. A menudo tenemos esta opción al diseñar listas gráficas. Si tomamos como referencia las aplicaciones maduras en el mercado, diferentes productos a menudo tienen diferentes opciones. ¿Cuales son las normas?
Para solucionar este problema hay que tener en cuenta los hábitos de lectura de las personas. Sabemos que la gente tiende a leer de izquierda a derecha y de arriba a abajo, por lo que es evidente que el contenido importante debe colocarse a la izquierda. Al mismo tiempo, considerando el escenario del uso de dispositivos móviles, normalmente navegamos con el teléfono móvil en la mano derecha. Al desplazarnos hacia arriba y hacia abajo en la pantalla, nuestro pulgar derecho a veces bloquea el borde derecho de la pantalla, por lo que es más apropiado colocar contenido secundario a la derecha.
En las aplicaciones de noticias e información, la información que revelan las imágenes no es tan rápida y directa como los títulos de texto, por lo que las imágenes quedan en una posición secundaria. Por el contrario, el título es el factor clave para atraer a los usuarios a hacer clic, por lo que el texto de la izquierda a la derecha es más apropiado que el texto de la derecha a la izquierda.
En aplicaciones de comercio electrónico, compare nombres de productos, texto de introducción, precios, etc.
, las imágenes del producto pueden mostrar intuitivamente la apariencia, el tamaño, el color y otra información del producto, que son los primeros factores que interesan a los usuarios. Por lo tanto, las aplicaciones de comercio electrónico como Tmall utilizan el método de diseño de imágenes a la izquierda y texto a la derecha. Phoenix News es una aplicación de información, por lo que utiliza el método de diseño de texto a la izquierda y a la derecha para permitir que los usuarios presten atención primero al contenido del texto.
Este artículo utiliza mayúsculas a derecha e izquierda para desglosar los puntos clave del diseño gráfico y de texto. No solo debemos prestar atención a los principios básicos de la tipografía: usar los principios de cercanía y contraste para construir una jerarquía visual clara, sino también usar un sistema de cuadrícula para hacer que las reglas de espaciado sean simples y unificadas. También debemos prestar atención al equilibrio visual en los detalles y, por supuesto, también debemos saber qué tipo de escena tiene la relación más razonable entre imágenes y texto.
Solo logrando los puntos anteriores al mismo tiempo, el diseño de página aparentemente simple de gráficos y texto puede ser claro y razonable. Después de dominar estos principios, necesita mucha práctica y pensamiento diarios, y luego aplicarlos a más escenas, como imágenes superiores, imágenes inferiores, imágenes y texto superpuestos, etc., para que se consideren verdaderas habilidades de composición tipográfica de gráficos y texto.