Los diseñadores deben leer la Guía de iconos.
El color, las fuentes, los iconos, las formas gráficas, las imágenes y el espacio son los seis elementos muy importantes en el diseño gráfico. Para el diseño de la interfaz de usuario, 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.
Obviamente, los iconos no fueron inventados por los diseñadores de interfaces. Como objetos de comunicación, tienen una historia larga y variada, arraigada en la antigüedad. Aparecen en mapas, señales, procedimientos, manuales y muchas otras fuentes de información. Sin embargo, con la llegada de las nuevas tecnologías y las interfaces gráficas de usuario, los iconos han experimentado un nuevo punto de inflexión.
Históricamente, a principios de los años 70, Xerox mencionó los iconos para la primera interfaz gráfica de usuario: los iconos se implementaron en una máquina llamada Xerox Alto, que era muy cara y que realmente no se ha extendido a la mayoría de usuarios. . Sin embargo, esto fue solo el comienzo de una larga historia: en 1981, se lanzó la Xerox Star, conocida como la primera computadora de consumo en utilizar íconos como parte de la interfaz. En particular, hasta ahora se han aplicado los iconos de carpeta y papelera. Estos son íconos de la década de 1980.
Íconos ideográficos (también llamados íconos explicativos)
Los símbolos ideográficos se refieren a símbolos que no existen originalmente. Son símbolos creados durante el proceso de desarrollo para expresar un significado o comportamiento operativo específico. Además, en el proceso de desarrollo, estos símbolos heredaron gradualmente algunas características de los símbolos pictográficos, tratando los símbolos mismos como "objetos reales" y en constante evolución. Por ejemplo, "flecha" ha evolucionado gradualmente desde el original "arco y flecha" hasta convertirse en un símbolo ideográfico específico.
Iconos interactivos
Tienen la capacidad de transferir información en ambas direcciones. No solo pueden transferir cierta información al usuario, guiarlo para realizar operaciones específicas, sino que también permiten al usuario. para transferir información de control al programa. Esto es más importante en términos de importancia funcional. Por ejemplo, los botones de inicio de sesión y registro, los botones de cambio, los botones de cantidad, Me gusta, Reenviar y Compartir son todos íconos interactivos.
Iconos de decoración y entretenimiento
Suele utilizarse para realzar la belleza de toda la interfaz y profundizar el estilo de diseño personalizado, sin funcionalidad obvia. Este tipo de ícono satisface las preferencias y expectativas del público objetivo, tiene un estilo de apariencia específico, mejora la experiencia en línea del usuario, satisface las preferencias del público y mejora la afinidad del diseño. Los iconos decorativos suelen mostrar características estacionales y cíclicas. Como actividades en línea, valoraciones de usuarios, páginas vacías, etc.
Icono de la aplicación
La entrada y el logotipo de visualización de la marca de diferentes productos digitales en varias plataformas de sistemas operativos son los símbolos de identidad de este producto digital. En la mayoría de los casos, incorporará el logotipo y los colores de la marca en el diseño del icono. Algunos íconos también usarán una combinación de colores de identidad visual de la mascota y de la empresa. Un diseño de íconos de aplicaciones verdaderamente excelente es en realidad una combinación de investigación de mercado y diseño de marca. El objetivo es crear un diseño llamativo que los usuarios no puedan encontrar rápidamente en la pantalla.
Iconos pictográficos
Ios ha sido popular en el "concepto de diseño skeumorphic" durante mucho tiempo, que es un diseño hiperrealista. Creo que mientras la aplicación pueda agregar una dimensión práctica y física, cuanto más similar sea a la realidad y más parecida a la operación, más fácil será para los usuarios comprender el método de operación y mayor la aceptación será. Por ejemplo, el famoso ícono del Monte Fuji en Japón muestra que el buen diseño no sólo es hermoso, sino también funcional, especialmente los diseños relacionados con el turismo que requieren que las personas superen las barreras del idioma.
Íconos metafóricos
Los elementos metafóricos en los íconos son muy importantes, ya que nos permiten saber qué significa el ícono tan pronto como lo vemos. Por ejemplo, una casa representa la página de inicio y una cruz representa un error o cierre. Cuando reduzco un ícono, siempre conservo elementos de metáfora para asegurar que el ícono aún transmita el mensaje con precisión.
Iconos de herramientas
Clasificados principalmente según categorías de la industria, ampliamente utilizados, altamente reconocidos por el público o expertos de la industria y utilizados durante mucho tiempo. Por ejemplo: industria de la construcción, industria médica, industria química, etc.
Iconos mixtos
Es decir, la combinación de los tres primeros es para lograr diferentes efectos visuales y estructuras de aplicación. Los íconos de estilo de trazo grueso de MBE que fueron populares hace algún tiempo son producto de íconos completos, que en su mayoría expresan el estilo de diseño personal del diseñador o son adecuados para cierto software con un fuerte sentido del diseño.
Iconos de personajes
La palabra "glifo" proviene del campo de la composición tipográfica. Ahora, con el desarrollo del diseño digital, se ha arraigado gradualmente en el campo del diseño digital. Proviene de la palabra griega que significa "escultura". En el campo de la tipografía, un símbolo icono suele ser un sistema de escritura con un significado y función específicos, que puede expresar ideas y escribir. Pueden ser letras, gráficos o, a veces, incluso una combinación de ambos.
En este tipo de diseño de iconos, el icono del tiempo es típico. Desde un solo ícono hasta una combinación de íconos, se puede reflejar completamente.
Iconos planos
Los iconos planos incluyen líneas rectas, planos, planos rectos y planos. Los íconos diversificados, escalables, más personalizados y más jóvenes pueden reflejar y transmitir información diferente después de cambiar el color bajo el mismo estilo de diseño.
Íconos esqueuomórficos
Los íconos esqueuomórficos son lo opuesto a los íconos planos. Como suelen decir los diseñadores de íconos esqueuomórficos, "copian la realidad" e intentan replicar la realidad en el mundo real. Forma, textura, luz y sombra se integran en el diseño de todo el icono, que es su característica. La tendencia de diseño de íconos cuasi materializados casi siguió paso a paso con el nacimiento y evolución de Macintosh, y luego fue reemplazada por el diseño plano del campo del diseño de UI. Sin embargo, los íconos cuasimateriales todavía se usan ampliamente en diferentes campos, especialmente en el diseño de juegos y el diseño de íconos de productos de juegos. Iconos 2.5D e iconos de aplicaciones de escritorio.
Windows, iOS, etc. , Versión china, versión en inglés e incluso versiones en varios idiomas, son básicamente iguales antes de abrir el menú. Muchos íconos fueron rápidamente reconocidos por la mayoría de los usuarios e incluso se convirtieron en íconos internacionales. Como la interfaz de usuario de Windows.
Cuando un icono puede expresar claramente su significado, sólo necesita ocupar la posición de un carácter para transmitir información operativa al usuario. Por ejemplo, si el correo electrónico se envía correctamente después de escanearlo, se necesitarán entre 3 y 4 caracteres para usar una copia para representarlo. Puede ser más largo en inglés u otros idiomas, pero solo necesita una posición de carácter para usar un ícono. .
En la esquina superior derecha de Alipay indica más funciones. En este momento, la posición de un carácter indica que su significado es claro; el ícono de onda de sonido similar en WeChat representa la voz, que es intuitiva y fácil. para entender.
En la era de la fragmentación, la lectura de imágenes va casi al mismo ritmo. El contenido de la imagen puede tener un gran impacto en un corto período de tiempo. Las investigaciones muestran que el cerebro procesa el contenido de imágenes 60.000 veces más rápido que el contenido de texto, y el cerebro humano recuerda gráficos e imágenes mucho mejor que el texto. Por lo tanto, a la hora de promocionar una marca, se puede decir que el contenido gráfico vale más que mil palabras. Utilice íconos para ayudar a los usuarios a identificar rápidamente información a través de una guía visual.
No hay explicación escrita sobre Tik Tok e ins. Sabemos que la quinta etiqueta es centro personal.
La prueba científica es que las áreas del cerebro relacionadas con el procesamiento de la información visual son dominantes en comparación con otros órganos de los sentidos, y la memoria del cerebro humano para las imágenes es mucho mayor que la de las palabras. Los iconos utilizan principalmente formas geométricas y están diseñados teniendo en mente la simetría y objetivos de diseño consistentes. Debido a su naturaleza altamente enfocada, los íconos son más simples y fáciles de recordar.
La lógica de nivel más bajo de los íconos: íconos lineales, íconos planos, íconos planos de líneas, íconos planos planos, íconos 2.5D e íconos de cuasi-objetos. Varios íconos en Internet se distinguen visualmente en función de estos, y debe pensar en ello al diseñar íconos.
1. Posicionamiento del estilo visual del producto (campo industrial)
2. Interfaz de aplicación específica de íconos
3.
Veamos primero un conjunto de iconos con diferentes estilos.
Como se puede ver en los diferentes íconos de aplicaciones anteriores, el diseño y la expresión de los íconos son diferentes para diferentes industrias, diferentes escenarios y diferentes usuarios, por lo que debe pensar en las ideas de diseño y el posicionamiento del producto que debe expresar antes de diseñar.
1. Desarme las palabras clave y las asociaciones de palabras clave.
Desarme y disperse las palabras clave en la información de la demanda, conviértalas en cosas comunes en la vida y libere el significado interno que representan. Sinónimos, sinónimos, asociaciones relacionadas de objetos con formas o palabras clave relacionadas.
Por ejemplo, cuando se habla de honores, inmediatamente se puede pensar en trofeos, certificados, medallas de oro, coronas, etc. Luego, a través de la asociación de estas palabras, encuentre algunas imágenes con el mismo temperamento para hacer una versión emocional, a través de la cual pueda sentir la tonalidad del producto, y luego extraiga algunas formas y colores como las formas principales del ícono del producto.
2. Generar gráficos basados en la asociación de palabras clave.
Según las palabras u objetos desmontados en el paso anterior, utiliza formas básicas simples para transformarlas en gráficos comunes en la vida. El método 2 en 2 comúnmente utilizado es utilizar la herramienta AI Pen (herramienta Sketch Bezier) o la operación booleana para dibujar.
3. Salida según el escenario
El escenario aquí puede ser un escenario de aplicación real, como la barra de pestañas de Dianping, el área funcional (área de categoría), el icono de operación, etc. , que necesita guiar a los usuarios para que hagan clic, por lo que es visualmente más rico; mientras que el centro personal, el área de clasificación y la página de detalles prestan más atención a la guía funcional, son relativamente simples, pertenecen a escenarios de uso secundarios y tienen íconos más lineales.
Se debe prestar atención a diez puntos al analizar artículos de íconos comunes, pero son difíciles de recordar sin reglas y lógica, y son fáciles de olvidar una vez recordados. Estos resúmenes en realidad provienen de especificaciones de Material Design o iOS. Hacer iconos no es difícil si estudias los detalles detenidamente.
Los puntos finales de los iconos se dividen en ángulos rectos y ángulos redondeados. Debemos unificar los puntos finales de los íconos y mantener un lenguaje de diseño consistente durante el proceso de diseño.
Esquinas
En comparación con otros gráficos, el ojo humano tiene más probabilidades de reconocer rectángulos redondeados que rectángulos en ángulo recto porque la fóvea es el área más sensible de la retina en el La estructura fisiológica del ojo humano. Los bordes del rectángulo requieren más "herramientas de neuroimagen" en el cerebro. Por lo tanto, las esquinas redondeadas son más fáciles de procesar para el ojo humano porque parecen más cercanas a círculos que a rectángulos normales.
La propia redondez del filete de pescado dará a las personas una sensación redonda, encantadora, más segura y considerada. Por lo tanto, los íconos sociales, de entretenimiento, transmisiones en vivo, comida y otros íconos utilizarán íconos redondeados.
Los ángulos rectos dan a las personas una sensación aguda y convincente, y el ícono general tiene más detalles. Generalmente aparece en productos con fuertes atributos comerciales, como las finanzas. Por ejemplo: 36Kr, productos financieros, etc.
Ángulo de inclinación uniforme
La inconsistencia en las proporciones del espacio interno puede conducir fácilmente a una inconsistencia en el enfoque visual del ícono. Como se muestra en la imagen siguiente, el segundo ícono de la izquierda está ligeramente más bajo y el cuarto ícono tiene un centro de gravedad más alto. A la derecha está el icono de la barra de pestañas del primer Asistente PP. El porcentaje de áreas huecas dentro de los íconos es el mismo, lo que hace que la visión general sea armoniosa y unificada.
Al dibujar un icono con un pincel, siempre preste atención a si el grosor del trazo del icono es uniforme. En el modo de diseño @1x, si se usa 24px como punto de referencia de la cuadrícula, los grosores de íconos comúnmente utilizados son: 1px, 1.5px, 2px, 3px, 1.5, lo que requiere una pantalla de visualización más alta (una ruta de media unidad hará que el ícono Los bordes aparecen borrosos cuando finalmente se muestran).
Los trazos finos dan a las personas un sentido visual más refinado, mientras que los trazos gruesos son relativamente ásperos. Debido al desarrollo de las tendencias de moda actuales, a menudo aparecen estilos de diseño que combinan trazos gruesos y finos.
Además de mantener el mismo peso visual, el ancho del trazo del ícono también debe ser consistente para lograr unidad a nivel de píxel. El espacio mínimo entre elementos debe ser mayor o igual al ancho del trazo.
Apple, Google, IBM y Alibaba Ant Design nacional han publicado especificaciones de cuadrícula de iconos relevantes. Esto se ilustra utilizando la cuadrícula de íconos del sistema de materia de Google. En el tamaño del icono de 24*24px, los márgenes de seguridad superior, inferior, izquierdo y derecho son de 2px, y las cuatro formas básicas de las formas clave son círculo de 20*20px, cuadrado de 18*18px, rectángulo vertical y rectángulo horizontal de 20*16px. Unifique el tamaño y la posición de los iconos mediante reglas de formas clave para lograr el equilibrio visual.
Alinear píxeles
Nitidez (alineación perfecta de píxeles) Para evitar la distorsión del icono, puede colocar el icono en los píxeles configurando las coordenadas de los ejes X e Y en números enteros. Cuando utilice software de inteligencia artificial o bocetos, al dibujar gráficos básicos, no utilice puntos decimales ni números impares, sino números pares.
Ahora que conocemos los conocimientos básicos de los íconos, ¿cómo podemos juzgar si nuestro ícono es adecuado y adecuado para todo el producto? Necesitamos saber qué caracteriza a un buen ícono. Los estándares de inspección también se basan en los estándares que derivamos, a saber: reconocibilidad, estandarización, estilo general y sentido de marca.
El valor de algo se juzga por para qué se utiliza. El propósito de un ícono es ayudar a los usuarios a comprender la información. Por tanto, la expresión ideográfica precisa (transmisión de información clara y precisa) es lo más importante y menos valioso de los iconos. Si diseñas un ícono que los usuarios no pueden entender, incluso si es visualmente hermoso, no tendrá ningún valor.
Reconocimiento de significado: si el lenguaje visual reemplaza al lenguaje escrito. En resumen, es hacer que sus íconos sean comprensibles para los usuarios sin causar ambigüedad. La brújula con lengüeta simple representa el descubrimiento y la casa representa el hogar.
Reconocimiento visual: Es el tamaño, color y grosor de la línea del icono lo que afecta el reconocimiento visual y mejora el reconocimiento visual bajo un estilo específico.
Es necesario asegurar la coherencia del tamaño visual del icono, la plenitud del icono (formas frontal y posterior), seguir las mismas reglas y la unidad de detalles. Los cuatro puntos aquí se escribieron en detalle en el proceso de dibujo anterior.
El estilo general consiste en prestar atención a si el carácter transmitido por el icono es coherente con el tono de la aplicación. Debido al posicionamiento de cada producto, el tono de toda la aplicación es diferente para distintas personas. Por ejemplo, a Tencent Animation le gustan los cómics, por lo que el diseño del icono también debe reflejar este personaje y tratar de utilizar las esquinas redondeadas de los cómics. Un lema: En un mundo complejo, uno es suficiente. Toda la aplicación es simple y limpia, desde el ícono de inicio hasta el tono general, y el uso restringido de colores transmite el tono del producto.
El sentido de marca debe ser coherente con el concepto de marca mencionado anteriormente y transmitir el mismo sentimiento a los usuarios. Absorbiendo los colores de la marca, extrayendo elementos de la marca y utilizando mascotas y gráficos de la marca para extraer genes de la marca. Deberíamos intentar entenderlo desde la perspectiva del diseño de marca, encontrar el temperamento de marca único de nuestros productos y elegir las técnicas adecuadas. Luego, estos elementos se visualizan e integran en el diseño de la interfaz. Los siguientes productos están altamente integrados desde el nombre del producto hasta el diseño del ícono de lanzamiento.
Las pruebas de usabilidad de iconos son la regla básica, derivada de la validación de iconos.
Nivel de reconocimiento:
1. ¿Pueden los usuarios entender el significado del icono?
2. ¿Es un icono familiar para los usuarios?
3. ¿Entra en conflicto con otros iconos?
4. ¿Podrás pasar la regla de los 5 segundos?
5. ¿Qué tan escalables son los íconos?
6. ¿Necesitas agregar etiquetas de texto?
¿Está unificado el diseño?
1. ¿Está unificado el lenguaje visual?
2. ¿Es uniforme la complejidad del diseño de los iconos?
3. ¿El diseño general está coordinado, unificado y altamente concentrado en términos de sistema visual?
4. ¿Es coherente la combinación de colores general del icono?
Mensaje de marca:
¿El ícono es único y transmite el mensaje de marca?
En general, existen cuatro formatos de entrega: JPG, PNG, GIF y SVG. Entre ellos, JPG, PNG y GIF son mapas de bits, que están limitados por la resolución de la imagen en sí y no se pueden modificar de manera flexible. SVG es un formato vectorial que admite escalado sin pérdidas.
Antes de SVG, era necesario cortar iconos de varios múltiplos para adaptarlos a dispositivos de alta definición. Pero el software y los complementos de desarrollo actuales tienen sus propias funciones para cortar múltiples imágenes, como Blue Lagoon.
JPG: gran compatibilidad, viene con fondo, no admite escalado.
PNG: se admite el formato transparente, pero no se admite el escalado. Tenga en cuenta el tamaño del área transparente alrededor del icono.
GIF: Utiliza iconos dinámicos simples. Cuando el fondo es transparente, los bordes serán irregulares, por lo que no hay forma de admitir colores intensos.
SVG: gráficos vectoriales escalados sin pérdidas, de tamaño pequeño, admite desarrollo de color y automodificación en modo monocromático, y puede modificar parámetros de estilo.
Otro método de entrega es cargar el ícono en formato SVG en un sitio web como iconfont y luego completar la entrega del ícono. Cabe señalar que:
1. SVG no admite relleno de color degradado.
2.SVG no admite trazos, por lo que los trazos deben convertirse en imágenes cerradas.
3. Cuando los íconos son del mismo tamaño, debes agregar un cuadrado transparente del mismo tamaño debajo del ícono y exportarlo y cargarlo junto con el ícono.
Iconfont tiene requisitos estrictos para la producción de íconos. Al cargar, debes prestar atención para verificar si tu ícono cumple con los requisitos. Interconexión
Fuente de datos
¿Los diseñadores de UI quieren hacer un buen trabajo en el diseño de iconos? ¿Conoces la historia de los iconos?
Una breve historia de la iconografía
"Guía de diseño de iconos"
"Icon Utopia"
"La guía definitiva para conjuntos de iconos de interfaz "
p>
Biblioteca de logotipos SVG y comparación con fuentes de iconos