Enseñarle cómo crear un maravilloso diseño de texto en páginas web.
El diseño del texto debe considerar el reconocimiento del texto y la legibilidad de la página. Este artículo compartirá con usted cómo crear un diseño de texto maravilloso en páginas web desde la perspectiva de las mejores especificaciones de legibilidad y los cuatro principios del diseño sin sentido.
Piénsalo primero. ¿Crees que el diseño del texto es bueno?
En nuestra opinión, un buen diseño debe tener buena legibilidad, el contenido del texto debe ser visualmente equilibrado y coherente, y tener una sensación general de espacio.
El diseño, la ubicación del contenido y el diseño de las columnas afectan la legibilidad del texto. Desde una perspectiva de legibilidad, los diseñadores deben considerar la fuente, el tamaño de fuente, el interlineado, el espaciado, el color de fondo y el contraste del color del texto.
Nos centramos en las fuentes y los tamaños de fuente en nuestro artículo anterior, y las mejores prácticas de legibilidad a continuación cubren el interlineado y el espaciado, y compartimos anchos y alturas de línea apropiados para ayudar a los lectores a seguir leyendo. Rhythm permite a los lectores tener una mejor experiencia de lectura.
En primer lugar, las mejores especificaciones de legibilidad
1. Ancho de línea
Podemos imaginar: si una línea de texto es demasiado larga y los ojos de las personas se mueven durante mucho tiempo. Durante mucho tiempo, la gente notará el principio y el final de un párrafo, lo que dificultará la lectura; si una línea de texto es demasiado corta, sus ojos seguirán escaneando de un lado a otro, interrumpiendo su ritmo de lectura;
Por lo tanto, podemos hacer que cada línea del área de contenido contenga una cantidad adecuada de palabras para mejorar la legibilidad.
El mejor número de caracteres por línea para el diseño tradicional de un libro es entre 55 y 75, pero de hecho, entre 75 y 85 caracteres por línea son más populares en las páginas web. Cuando el chino tiene 14 fuentes, se recomiendan entre 35 y 45 caracteres.
Por ejemplo, como se muestra a continuación:
2. Espaciado
El interlineado es un factor muy importante que afecta la legibilidad. Si el interlineado es demasiado amplio, el texto perderá continuidad y afectará la lectura. Si el espacio entre líneas es demasiado estrecho, es fácil omitirlo.
En diseño web, el espacio del texto es generalmente de 1 a 1,5 veces el espacio entre líneas y de 1,5 a 2 veces el espacio entre párrafos, dependiendo del tamaño de fuente.
Por ejemplo, fuente 12, el interlineado es de 12 px-18 px y el interlineado de párrafo es de 18 px-24 px.
Además, altura de línea/espacio entre párrafos = 0,754. Es común que el interlineado sea exactamente el 75% del interlineado.
Por ejemplo, Fontenot. 16. Interlineado 27 px/espaciado entre párrafo 36 px = 75%. La fuente en sí es relativamente grande, por lo que no es necesario establecer el interlineado estrictamente de acuerdo con la proporción de 1 a 1,5 veces, pero la proporción entre el interlineado y el interlineado es del 75%, lo que se ve muy bien. Este efecto visual permite a las personas mantener un sentido del ritmo al leer y es una aplicación flexible de normas en situaciones reales.
3. Alineación de líneas
Una especificación muy importante en la composición tipográfica es alinear donde se debe alinear, como por ejemplo la posición de cada segmento de línea.
No importa qué tipo de efecto visual sea sofisticado, formal, divertido o serio, generalmente se puede utilizar una alineación clara para lograr el propósito.
En términos generales, se recomienda utilizar solo un método de alineación de texto en la página y tratar de evitar alinear ambos extremos.
4. Deje el texto en blanco
Al componer texto, debe dejar espacio libre en el diseño. El orden de los espacios en blanco de pequeño a grande debe ser: espacio entre caracteres, línea. espaciado, distancia entre párrafos. Además, antes de formatear el área de contenido, debe dejar un espacio en blanco alrededor de la página de acuerdo con la situación real de la página.
2. La aplicación de los cuatro principios del diseño sin sentido en el diseño de texto
Nada son los cuatro principios básicos del diseño, incluidos el contraste, la repetición, la alineación y la intimidad, que han sido adoptados por diseñadores Ampliamente utilizado. Estos cuatro principios básicos también son muy adecuados para el diseño de texto en diseño web.
1. Contraste
Dividimos la comparación en tres categorías, principalmente la comparación de fuente y tamaño de fuente entre el título y el texto, el contraste del color del texto y el contraste del color del texto. y color de fondo.
>? Comparación de título y texto
En la página del caso del sitio web AnyForWeb, el título es Microsoft YaheiNo. 18. El texto está escrito por Song Dino. 12. El contraste entre las dos fuentes enriquece el texto y atrae fácilmente la atención del lector.
>? Comparación de colores de texto
En el sitio web oficial de Galán, algunos personajes usan colores diferentes a los personajes principales. Este tipo de contraste es una de las formas efectivas de aumentar el efecto visual y resaltar el enfoque de un párrafo.
>? Contraste entre el color del texto y el color de fondo
Este es un método de diseño de tipografía muy común. Un contraste apropiado entre el texto y el fondo puede mejorar la claridad del texto y producir un fuerte efecto visual.
Por ejemplo, en el sitio web oficial de Accenture, el contraste entre el título rojo y el texto negro sobre fondo blanco, así como el contraste entre el texto blanco sobre fondo rojo, resalta claramente el contenido del texto, que no sólo está lleno de capas sino que también tiene un fuerte impacto visual.
Los diseñadores deben prestar atención al aplicar este principio para garantizar que el texto sea fácil de leer. Si el texto es demasiado pequeño o fino y los colores no contrastan lo suficiente, será contraproducente.
Por ejemplo:
Si el diseñador no está familiarizado con el contraste de color, puede utilizar herramientas de detección de contraste de color (como Check My Colors y Color Contrast Check) para detectar diferencias de color y brillo para garantizar la legibilidad de la web. diseño.
Repetición
Los elementos de un diseño se pueden reutilizar en todo el diseño web. Para el texto, puede ser la repetición de fuentes, tamaños de fuente y estilos, o puede ser el mismo tipo de decoración de patrón, el diseño general del texto y las imágenes, etc. Repetir, brindar a los usuarios una experiencia organizada y consistente crea coherencia y parece más profesional.
Por ejemplo, el sitio web HeyJuice adopta la forma unificada de “imagen + título + texto” en su guía de productos. El contenido es diferente, pero el diseño está unificado y el estilo de la imagen es consistente. Los usuarios pueden darse cuenta de un vistazo que pertenecen a la misma sección y esa repetición puede crear fácilmente una estética coherente y equilibrada.
Por ejemplo, cuando Tubatu estaba renovando Internet, la posición y la forma del texto del título en la imagen eran las mismas, lo que no solo contrastaba con el color de fondo de la imagen, sino que también repetía el estilo del texto. .
El principio de repetición se utiliza mucho en el diseño web. La repetición única puede parecer monótona, pero los diseñadores pueden utilizarla de forma flexible según las necesidades de los diferentes sitios web. Por ejemplo, las revisiones repetidas pueden aumentar la innovación y agregar vitalidad al diseño web.
Alineación
En diseño web, los elementos no se pueden colocar aleatoriamente en la página. Cada elemento debe tener una determinada conexión con el contenido de la página. La alineación es una parte esencial del diseño web. Puede ayudar a los diseñadores a realizar diseños atractivos y es un requisito potencial para un diseño web excelente.
Existen muchas situaciones de alineación, enumeraremos dos de forma arbitraria.
Alineación a la izquierda del sitio web de Mentholatum:
Alineación al centro del sitio web de Darry Ring:
La alineación a la izquierda y a la derecha hacen que el texto se vea más claro y el efecto de alineación al centro Más; solemne, formal y estable.
4. Intimidad
Proximidad significa relación, intimidad significa que los elementos relacionados se organizan juntos para que parezcan armoniosos y unificados, convirtiéndose en un todo.
La intimidad puede comenzar desde dos puntos: espacios en blanco apropiados, énfasis visual y resaltar el sentido de jerarquía.
Por ejemplo, en la siguiente situación, la combinación de gráficos y texto es una combinación de múltiples elementos.
El ojo humano primero se siente atraído por la imagen del banner y el texto que contiene, y luego baja a la descripción del texto y al texto del enlace. La intimidad y el contraste de estos elementos crean un equilibrio.
Lo anterior es el contenido compartido esta vez. Como se mencionó anteriormente, la calidad de la composición pone a prueba las habilidades básicas de un diseñador, y el esfuerzo diario es indispensable. ¡Esperamos con ansias los maravillosos diseños diseñados por todos!
La dirección de este artículo:/sjiinfo 7282.html.