Principios y clasificaciones del diseño de iconos que los diseñadores deben leer.
Este artículo combinará mis ideas sobre el diseño de íconos, con la esperanza de utilizar un artículo extenso para explicar todos los puntos clave y los métodos de diseño específicos del diseño de íconos, para que todos los nuevos diseñadores puedan comenzar con el diseño de íconos más rápido.
Este artículo se divide en las siguientes cinco partes:
? 1. Comprender los íconos
2. Principios de diseño de íconos
3. Especificaciones de diseño
4. industria del diseño Todo el mundo lo conoce y se puede ver en todas partes de nuestra vida diaria, como interruptores eléctricos, letreros fuera de los baños, íconos de cajeros en guías de centros comerciales, señales de salida, etc.
Para el diseño de UI, se puede decir que los íconos son el toque final de todo el producto, e incluso pueden afectar directamente la imagen y el temperamento de un producto. En muchas interfaces de usuario, los íconos son casi el soporte principal de la página y afectan directamente la experiencia visual y la tonalidad del producto. A través de la clasificación visual, los íconos se pueden dividir en los siguientes tipos:
01) Iconos lineales
Los íconos delineados por líneas generalmente se distinguen por el grosor del trazo y los detalles del ícono.
02) Icono de área
Icono con relleno y estructura de espacio negativo. En comparación con las formas lineales, las formas superficiales tienen más peso visual, son más fáciles de atraer la atención de los usuarios y son más reconocibles. Por lo tanto, los diseñadores suelen utilizar iconos de área para distinguir el estado seleccionado de los iconos de línea.
03) ¿Icono de degradado
?
Los íconos llenos de colores degradados se consideran una rama de los íconos de área, pero el uso de sombras difusas tiende a rejuvenecerlos por su riqueza de detalles.
04) Iconos mixtos de línea y superficie
Por lo general, se utiliza una combinación de línea y superficie para crear un tono visual.
05)?Icono plano
?
Los iconos en forma de ilustraciones planas se utilizan a menudo para crear una atmósfera y un tono visual del producto, porque prestan más atención a los detalles y tienen capas visuales ricas.
06)?¿Imitar iconos de estilo
?
Los iconos que simulan la textura de objetos reales a través de luces y sombras se utilizan generalmente en festivales o juegos.
07) Icono de mapeo de objetos:
?
Los iconos con objetos fotográficos reales se suelen utilizar en comercio electrónico y supermercados para productos frescos.
08) ¿Icono 2.5D
?
Icono tridimensional 2.5D. Alrededor de 2017-2018, los íconos 2.5D despegaron en el mundo de la interfaz de usuario, tanto es así que muchos diseñadores pensaron que se convertiría en una tendencia para los íconos en el futuro, pero esta tendencia parece detenerse pronto... probablemente debido al diseño. El costo es demasiado alto, el estilo es demasiado distintivo y es difícil controlar muchos productos.
01) Precisión del significado.
?
Como portador de transmisión de información, los iconos están destinados a informar a los usuarios de algo a través de símbolos concisos y permitirles recordar algo. Si el significado expresado es inexacto, confuso, confuso o incluso confuso, ¿qué sentido tiene el icono?
Como se muestra en la imagen de arriba, creo que todos pueden entender con precisión su significado de un vistazo. Por lo tanto, el primer principio de nuestro objetivo de diseño es expresar el significado con precisión, para que los usuarios puedan entender el significado del ícono tan pronto como lo vean. Lo que hay que mencionar aquí es que los iconos son universales y se ajustan a los hábitos de todos los usuarios. No intente cambiar la memoria acumulada del usuario.
02) Unidad visual
En muchas apps podemos encontrar que el tamaño real de los iconos no es consistente, pero el tamaño visual está unificado. Si el círculo y el rectángulo tienen el mismo tamaño, el rectángulo parecerá más grande, por lo que debemos reducir adecuadamente el tamaño de los iconos de algunos de los rectángulos para que visualmente tengan el mismo tamaño.
03) Consistencia
En un mismo producto, al diseñar iconos, es necesario asegurar la consistencia de líneas, chaflanes internos y externos, estilos, etc., para asegurar la armonía. y unidad de todo el producto.
04) Extrema simplicidad
En la interfaz, un estilo simplificado puede facilitar la comprensión de las personas, debilitar su propia existencia y así resaltar el contenido. Por lo tanto, el diseño del ícono debe ser conciso y claro, para que los usuarios puedan entender el significado del ícono de un vistazo.
01) Tamaño del icono
La coherencia es clave para los objetivos de diseño. Al dibujar, asegúrese de que todos los iconos tengan el mismo tamaño. En el diseño de la interfaz de usuario, el tamaño de la cuadrícula debe ser múltiplo de 4 o 12 (8 para Android y 4 para iOS). Asegúrese de que la imagen dibujada bajo @2x sea múltiplo de 4, para que pueda ser divisible por 2, para que se ajuste a la pantalla @1x; la imagen dibujada bajo @3x debe ser múltiplo de 12, para que se puede dividir uniformemente entre 2, 3 y 4, por lo que es adecuado para pantallas @1x y @2x. Los tamaños de iconos más utilizados en la interfaz son 24*24px y 48*48px. Se recomienda que el tamaño del diseño de los iconos normales sea de 48 píxeles.
2. Ajusta las líneas de la cuadrícula
Asegúrate de que todos los nodos del icono estén conectados a las líneas de la cuadrícula. Evite puntos decimales, números impares y otros valores numéricos.
El diseño de iconos es una parte muy importante del diseño de la interfaz de usuario. En una interfaz con tamaño limitado, un pequeño ícono puede expresar significado de manera más simple y eficiente, brindando una guía correcta y amigable a los usuarios. Se recomienda que cada diseñador de UI practique mucho y pruebe diferentes estilos para satisfacer las diferentes necesidades comerciales.
Bien, la guía de diseño de íconos se comparte aquí, espero que sea de ayuda para todos. Debido a que el artículo es largo, ha sido revisado varias veces y contiene algunos detalles imprecisos. Se aceptan correcciones, gracias por leer.
El próximo artículo compartirá en detalle el proceso de diseño de iconos.
Enlace original:/s /s/QQueVlK6k3tvHGB99QENKw