Cómo crear una interfaz UI exquisita (1): composición tipográfica
Cuando estaba estudiando diseño de UI, había mucha información en Internet, pero era desigual. Para los recién llegados, era muy doloroso y el progreso era lento. Por lo tanto, quiero compartir algunos conocimientos recopilando mi propia experiencia laboral a través de algunos obstáculos que he pisado antes.
El objetivo final de compartir es cultivarse y también espero brindar ayuda e inspiración a los diseñadores que quieran mejorar sus habilidades tipográficas. Por lo tanto, es posible que esta serie de artículos no sea adecuada para todos.
Entonces, esta semana comenzaremos con la longitud de la tipografía y comenzaremos...
La tipografía es la parte más difícil del diseño de la interfaz y también es una parte muy importante del la interfaz., existe en la interfaz en varias formas, como composición tipográfica de texto puro, composición tipográfica de texto gráfico, composición tipográfica de texto con imágenes, etc. ¡Este es un problema al que nos enfrentamos a menudo al diseñar! Este es un problema al que nos enfrentamos a menudo al diseñar. Una buena tipografía puede transmitir eficazmente información clave a los usuarios y mejorar la experiencia del producto.
En nuestra vida diaria, el diseño y el diseño son inseparables, incluidos los diversos anuncios y carteles de películas que vemos a menudo. Si los usuarios no pueden recordar información clave en poco tiempo, el diseño fallará. Por lo tanto, espero que a través del artículo de hoy puedas obtener una nueva comprensión de la tipografía.
En el diseño de interfaces, hay muchos factores que afectan el diseño del diseño. He resumido 7 dimensiones (por supuesto, hay otras más detalladas, así que no entraré en ellas aquí por ahora), que son directamente. Por supuesto, estos métodos no afectan la calidad general, pero si se pueden aplicar de manera hábil y completa a la interfaz, se garantiza que la mayoría de los diseños de interfaz se pueden mejorar. Por supuesto, esto también requiere una práctica continua y deliberada. para mejorar!
Subtítulos
Son:
A continuación recogeré algunos casos para ilustrar
El espacio es lo que solemos llamar espacio en blanco, cuando los elementos de diseño están muy juntos, la interfaz parece desenfocada, por lo que debemos usarla de manera coordinada, y las reglas de uso del espacio afectan directamente la apariencia del producto, la experiencia visual de espacios pequeños y grandes. son completamente diferentes en el diseño de la interfaz, ¿cómo podemos mejorar y cómo podemos mejorar la calidad del diseño de la interfaz? ¿Cómo podemos hacer un mejor uso del espacio para diseñar el diseño de la interfaz?
Una buena manera es usar cuadrículas para construir espacios. En el diseño gráfico, las cuadrículas se usan mucho. Luego, en las interfaces de usuario, las cuadrículas también se pueden usar para construir espacios. :
En la imagen de arriba, el autor lo divide en 4Gird y diseña los elementos de la interfaz a través de la cuadrícula construida. El lado derecho de la imagen es la construcción de la cuadrícula desmontada (nota :) por el autor y no hay. regla estricta y rápida sobre cuántas columnas se deben construir. El número final de columnas que se deben construir debe definirse de acuerdo con la complejidad del contenido del producto. Por ejemplo: recientemente hice una máquina humana montada en un vehículo. Lenguaje de diseño de interfaz y cuadrículas utilizadas. Luego, se construye de acuerdo con la complejidad de todo el producto de interfaz hombre-máquina del vehículo, es decir, se utilizan varias cuadrículas para que coincidan con el uso de la cuadrícula.
De los dos ejemplos anteriores, podemos encontrar que el diseñador usó mucho espacio para diseñar la interfaz, lo que hace que toda la interfaz sea más transpirable y transpirable, porque es un producto orientado al entretenimiento. el diseño será más artístico.
El producto de 29 cm de Corea del Sur es una de mis aplicaciones favoritas. El diseño general tiene una fuerte sensación de respiración, un gran espacio en blanco y un enfoque visual claro.
Todos sabemos que los objetos grandes llaman más la atención y es más fácil llamar nuestra atención, por eso en diseño solemos agrandar elementos importantes para resaltarlos.
¿Cuál te atrae más, A o B?
La respuesta es una. Porque la tipografía tipo A parece más grande y atractiva.
En el ejemplo anterior, que hace un buen uso del tamaño de fuente, podemos ver que la jerarquía visual es muy clara. Primero, puedo decir rápidamente qué información importante hay allí, definitivamente la imagen de portada, luego el logotipo en la esquina superior izquierda, luego la navegación y el título, y finalmente una explicación detallada de redacción para cada bloque de contenido.
Por poner un ejemplo sencillo, la información importante debe ser grande y la información secundaria debilitada.
El color juega un papel importante en la tipografía, puede servir como signos de puntuación, aportar vitalidad a la pantalla o representar la marca. Por supuesto, debemos prestar atención al color de las fuentes en la interfaz de usuario. , porque diferentes colores tienen diferentes significados. El uso racional del color puede mejorar instantáneamente la calidad de un diseño.
En el diseño web anterior, el diseñador utiliza el rojo para enfatizar información importante y crear un efecto distintivo en la pantalla gris y blanca.
En la Figura 1, utilizar un color secundario para algún texto, como el texto de un enlace, es el enfoque correcto. La Figura 2 utiliza mucho color en el texto, lo que afecta seriamente la experiencia visual.
Evita utilizar colores de bajo contraste, como se muestra en la Figura 2.
La alineación es un tema del que hablamos a menudo en el diseño de interfaces, y también es una de las fuerzas invisibles más importantes para mejorar la calidad de la interfaz. Quizás a veces la ignoramos y otras veces no lo hacemos sin darnos cuenta.
Una interfaz alineada es mucho más ordenada que una interfaz no alineada y el flujo visual también se ajusta a los hábitos de lectura del usuario.
Podemos usar la cuadrícula que aprendimos anteriormente para alinear, de modo que la imagen diseñada no solo sea rítmica, sino también muy limpia y hermosa.
Podemos alinear tres ideas de diseño de interfaz. Por supuesto, debemos elegir el método de alineación adecuado según el sector empresarial. Los tres métodos de alineación tienen un eje invisible (consulte la línea que marqué) y luego girar. around Esto se utiliza para el diseño tipográfico y, naturalmente, se forma un proceso visual regular.
En el caso anterior, el autor adoptó el método general alineado a la izquierda, que forma un flujo visual centrado en un eje centrado a la izquierda.
Cuando diseñamos una interfaz, a menudo nos encontramos con personas que dicen que su diseño es demasiado pesado aquí, o demasiado liviano aquí, o que no se debe agregar algo aquí, o que no hay suficiente espacio, ¿por qué?
Esta es la ley del equilibrio. Si los objetos de un mismo entorno no mantienen una relación equilibrada, nuestra experiencia visual será muy incómoda.
Veamos algunos ejemplos:
De la Figura 1 y la Figura 2, podemos ver que la primera impresión dada por la Figura 2 es que está desequilibrada y el centro visual general de la gravedad está a la izquierda.
En el caso anterior, el diseñador utiliza botones para equilibrar el centro de gravedad visual de toda la pantalla, porque si los botones del lado izquierdo son débiles o pequeños, será difícil equilibrar la pantalla. Así que estamos haciendo la interfaz. En ocasiones, la definición del tamaño de algunos botones también es muy cuidada.
En la interfaz visual de la izquierda y el prototipo desmontado de la derecha, podemos ver que el diseñador también equilibró la interfaz general mediante la distribución razonable de elementos.
La selección de fuentes es muy importante para el diseño de la interfaz. También es un paso necesario en todos los diseños de interfaz. Las diferentes fuentes tienen diferentes atributos de caracteres. Necesitamos elegir las fuentes chinas e inglesas apropiadas según el producto. Al mismo tiempo, también debemos recordar que para el diseño de la interfaz de una aplicación de producto, es mejor no tener más de dos fuentes
Recomiende algunas fuentes en inglés que sean más fáciles de usar en 2019. Todos deberían hacer conceptos conceptuales. Diseño o empaque de propuesta. Puedes usarlo (Xue Jian Xuanyuan).
Fuentes Montserrat y Nexa.
Fuentes Futura y Playfair_Display
Todo el mundo debería conocer las útiles fuentes chinas, como Square Character, Siyuan Black, Hanyi Flag Black y Lanting Slim Black. No daré ejemplos.
Finalmente, hablando del último aspecto, el último punto es uno de los núcleos de todo el diseño y maquetación. ¿Por qué?
Si no tiene un objetivo de diseño claro, entonces todo el estilo de diseño puede ser diferente del grupo de usuarios o las características del producto que finalmente genere. Los diferentes estilos de producto tendrán diferentes estilos de diseño.
Por ejemplo: nuestro producto es un producto de lujo, por lo que el estilo de diseño general debe diseñarse con cuadrículas grandes, espacios grandes, fuentes delgadas, etc. ¿Y si es un producto sencillo y moderno? O productos maternos e infantiles, productos tecnológicos, productos de entretenimiento, etc., cada uno de los cuales tendrá algunas ideas de diseño especiales. Por lo tanto, comprenda sus objetivos de diseño e identifique los principios de diseño.
Con estos principios y objetivos en mente, el siguiente paso es empezar a buscar referencias, inspiración, cómo se presentan los productos correspondientes y cómo controlar el ritmo de la pantalla. pinterest o behance
p>A través de estas ideas de diseño de siete puntos, puede aplicarlas mejor al diseño de la interfaz. Cada principio de diseño no es un individuo independiente, pero existe una relación que se refuerza mutuamente. Existe una relación complementaria entre ellos. Por ejemplo, el tamaño no se puede separar de la cuadrícula, el contraste, el color, etc. Si faltan ciertos elementos, la interfaz carecerá de alma y la calidad del diseño no será buena.
Bueno, este es el final de este número. En el próximo número, continuaremos compartiendo con usted cómo usar hábilmente los gráficos para mejorar la calidad de la interfaz y mejorar los efectos detallados.
Imagen de Unsplash, bajo licencia CC0.