Organización de conocimientos básicos de iconos.

Los iconos son símbolos gráficos muy generales utilizados para comunicar información visual, que se remontan a las pinturas rupestres.

Los iconos se pueden dividir en sentido amplio y restringido. El sentido amplio se refiere a todos los símbolos gráficos con un significado claro en la realidad. El sentido estricto se refiere principalmente a los símbolos de imagen en las interfaces de dispositivos informáticos, que tienen una cobertura muy amplia. Alcance

Los iconos se pueden dividir aproximadamente en cuatro categorías

Generalmente se refieren a iconos con funciones claras y significados rápidos, que se utilizan para navegación, desvío, etc. de diferentes páginas son para el nivel de información y las necesidades operativas también tienen diferentes requisitos de estilo visual.

Los íconos de navegación se pueden dividir en íconos de barra de pestañas, íconos de área de diamante, centro personal y otros íconos funcionales.

Los íconos de la barra de pestañas generalmente se expresan como lineales, de superficie, de combinación de línea y superficie, etc. Sin embargo, también habrá aquellos que se centren en la marca, la personalización o las actividades operativas, y el estilo será cercano a la marca, o relacionado con la actualidad reciente.

Los estilos de los íconos del Distrito de King Kong serán. será más diverso y, en general, la jerarquía visual será más pesada y tiene un sentido de diseño más fuerte, generalmente con un estilo de degradado multicolor. Las aplicaciones de música utilizarán un estilo lineal monocromático para enfatizar el tono de la marca y algo de e-. Las empresas comerciales también lo exhibirán directamente en especie.

Los íconos en páginas como el centro personal son principalmente decorativos y explicativos. Eliminar los íconos no afectará la navegación general. El estilo de diseño de los íconos generalmente no es demasiado complicado y se muestra principalmente de forma lineal. estilo

Principalmente decorado y explicativo, su función principal es hacer que la visión sea más ordenada, más ornamental y con un mayor sentido de marca y atmósfera. Generalmente se utiliza en interfaces ilustrativas y explicativas, como actividades operativas. , permisos VIP, etc. La interfaz y el estilo visual siguen la tonalidad de la página

El ícono de inicio sirve como identidad de marca, lo que equivale al diseño del logotipo del producto. la tonalidad de la marca y, debido a las limitaciones del escenario de uso, también se requiere el ícono de inicio. Siguiendo las especificaciones de diseño para garantizar el tamaño mínimo y el estado de reconocimiento pequeño, la mayoría de los íconos se muestran en la siguiente forma.

La mayoría de los íconos de inicio no están diseñados para ser demasiado complejos, porque los íconos demasiado complejos aumentarán los costos cognitivos de los usuarios. Especialmente en la era de la explosión de la información en Internet, el uso de íconos planos puede reducir efectivamente el costo cognitivo del usuario. Ocupar la mente del usuario fortaleciendo la percepción del color y otros métodos.

Los íconos de operación de eventos dependen del tiempo y los temas y estilos de diseño están relacionados principalmente con festivales. Se utilizan principalmente para aumentar la atmósfera del festival, aumentar las tasas de clics, etc.

El estilo de diseño no es estático, se deben usar diferentes estilos de íconos según los diferentes escenarios y grupos de usuarios. Si hay actividades operativas, también es necesario crear estilos de tonalidad relevantes según las operaciones.

Los estilos de diseño de los íconos se pueden dividir aproximadamente en las siguientes categorías

Aquí solo se enumeran las formas de diseño comunes. El uso específico y si se necesita innovación depende del escenario de uso específico.

Los íconos de caras también se pueden dividir en colores acromáticos, de un solo color, multicolores, degradados, etc., según el escenario de uso.

Este estilo de diseño es común en algunos juegos pequeños o actividades H5

El estilo plano 3D ha ido apareciendo gradualmente y, con las necesidades operativas, a medida que las habilidades de los diseñadores mejoran y los diseñadores mejoran, creo que cada vez más personas verán este estilo en el futuro cercano.

Antes de comenzar a diseñar íconos, primero debe tener una comprensión clara de las especificaciones de los íconos

Hay varias reglas que se deben seguir en las especificaciones de diseño de íconos

En la mayoría de los casos, los íconos se utilizan para la navegación y la explicación, por lo que el significado claro es la función básica de los íconos. Para algunos tipos inusuales de íconos, durante la producción, es necesario seleccionar racionalmente las palabras clave mediante una lluvia de ideas y luego comenzar el diseño. Una vez completado, también debe realizar algunas pruebas simples. Puede pedir opiniones a sus colegas y preguntar si el ícono puede expresar significados relevantes. Si la respuesta es no, debe preguntar por razones, diseñar varios planes más o realizar una lluvia de ideas. colegas.

La consistencia de los íconos se puede dividir en muchas situaciones.

Los íconos en la misma área funcional deben mantener la unidad del estilo de diseño. Si se utilizan íconos lineales, todos serán lineales. iconos Si es un ícono facetado, use un ícono facetado de manera uniforme

En el diseño visual, encontraremos algunas ilusiones ópticas. Aquí hay algunas situaciones y soluciones comunes. La forma de mantener la coherencia visual es no hacer. El largo y el ancho de la imagen son consistentes, o incluso cuando el tamaño físico del gráfico es consistente, el peso visual será diferente. En la imagen de abajo a la izquierda, el peso visual del rectángulo es obviamente mayor y no hay espacios en blanco. A través de los gráficos borrosos, puede ver que el peso visual del triángulo es obviamente menor en la imagen de la derecha. A continuación, después del ajuste, puede ver que el peso visual es casi el mismo. Sin embargo, el juicio del peso visual requiere que los diseñadores observen e intenten más.

La alineación central predeterminada del programa a menudo no está visualmente equilibrada. En este caso, generalmente necesitamos ajustarla para que quede visualmente equilibrada. Además, si el área de una parte de una figura es mucho mayor que la de otra parte, el centro de la figura será barato y deberá moverse en la dirección de la parte más pequeña para crear equilibrio.

En los iconos de área, se debe tener en cuenta la proporción de formas positivas y negativas. Como se muestra en la figura siguiente, el área blanca debe ser consistente en todos los gráficos.

No. La perspectiva uniforme causará distorsión espacial. Una sensación de confusión. Al dibujar íconos, debe considerar el ángulo desde el cual observar el ícono.

Algunos íconos agregarán aspectos destacados o características, es necesario. para garantizar que las características generales de la imagen sean consistentes, como el estilo de línea discontinua, etc.

Al componer la imagen, todo el ícono también debe ser consistente para garantizar el ritmo general del ícono. son consistentes

La alineación de píxeles es un cliché, pero personalmente creo que es una especie de ingenio o la máxima búsqueda de detalles, porque el formato svg también se usa en algunos proyectos, o después de adaptar la imagen. Para diferentes tamaños de pantalla, es posible que el tamaño de corte aún no mantenga la precisión de los píxeles, pero al menos los píxeles deben mantenerse en el borrador del diseño. Alineación

La forma más común de comunicarse con los desarrolladores son las anotaciones y los recortes. Para facilitar el desarrollo y el uso, los recortes que se suelen proporcionar son recortes rectangulares con igual longitud y ancho. Además, es necesario dejar una cierta cantidad de espacio para los iconos, por un lado, para garantizar la configuración de la zona caliente. La imagen cortada puede alcanzar el rango de clic efectivo; por otro lado, puede reservar el espacio de ajuste del icono.

El uso del sistema de cuadrícula puede resolver eficazmente los problemas anteriores, incluido el equilibrio del peso visual, el sangrado al cortar, etc. La función de símbolo de Sketch también puede hacer que la composición tipográfica sea más conveniente. Puede utilizar directamente el tamaño del símbolo como tamaño de corte para que el corte sea más conveniente.

A medida que más y más productos comienzan a volverse homogéneos, las marcas se valoran cada vez más integrando genes de marca en íconos, fortaleciendo el reconocimiento de la marca.

El método de extracción de genes de marca se puede realizar desde dos aspectos

Extracción del logotipo

Extracción del temperamento de la marca, extrayendo el Temperamento de la marca para cambiar la personalidad del icon

Por ejemplo, NetEase selecciona cuidadosamente íconos y diseña la personalidad de los íconos extrayendo el temperamento de la marca

En resumen, se compila un manual de autoexamen de íconos

1. Función clara

2. Significado claro

3. Coherencia

4. Tono de marca

Referencia del artículo:

1. "¡Pequeña estatura, gran impacto!" Conocimientos básicos de iconos que los diseñadores deben conocer" (/detail/436051.html)

3. "Manual de autoinspección de iconos de Cai Xin·" - Cai Xin (/p/67239eef3d43)

Declaración:

Las imágenes y materiales provienen de Internet y son infringidos y eliminados