Logotipo de categoría de ilustración: resumen de tipos y estilos de logotipos
Íconos de aplicaciones, como los logotipos de Sohu, Sina, NetEase y otros sitios web
Íconos de funciones, como "Inicio" y " Inicio" de varios reproductores de música Iconos de pausa" y "Avance rápido";
Se puede dividir en iconos de silueta según la clasificación del estilo de diseño;
Iconos de imitación de luz: basados en la imitación original iconos En la parte superior, las texturas pesadas se reducen, las proyecciones y los degradados se eliminan y las texturas se convierten en iconos planos;
Iconos de texturas ligeras: los iconos degradados/proyección/opacos son más exclusivos y tienen más detalles;
Iconos cuasimateriales: íconos de colores tangibles con estilo y textura;
Iconos superpuestos;
Iconos con texto como cuerpo principal, como Alipay e íconos de Taobao;
p>
Los íconos de ilustraciones suelen ser aplicaciones de juegos que utilizan directamente personajes, accesorios o imágenes del juego como íconos.
Resumen de tipos y estilos de íconos Este artículo proviene de Youyou.com, principalmente porque los íconos se usan a menudo en trabajos recientes, pero los íconos proporcionados por el diseño siempre están un poco descoordinados en la página, así que vi Este artículo solo quería recopilarlo y compartirlo.
La escritura del autor sigue siendo muy detallada. Si te gusta, puedes seguirlo. La dirección del enlace es la siguiente.
Nota del editor: los tipos de iconos varían. De hecho, decenas de miles de íconos están diseñados desde tres aspectos: lineal, superficial y combinación de líneas y superficies, así como transparencia, degradado, superposición de colores, textura, espacio multidimensional y otras formas de expresión. ¡Este artículo tiene casi 6000 palabras y puede comprender todos los estilos de diseño en un solo artículo!
Los iconos son una parte extremadamente importante del diseño de la interfaz de usuario. Casi todos los diseños de interfaz que hacemos implican la expresión de iconos. Un excelente diseño de iconos puede hacer que la expresión de la interfaz sea más refinada e interesante.
El diseño de iconos a menudo refleja las habilidades básicas del diseñador. Por lo tanto, además de hacer más dibujos cada día para mejorar el control sobre el estilo de los íconos, también debemos comprender y aprender los tipos de tendencia del diseño de íconos para ayudarnos a mejorar la eficiencia en el diseño.
Con fines de autoestudio, suelo hacer las colecciones correspondientes cuando navego por algunos sitios web de diseño. Por lo tanto, este artículo clasifica principalmente los "tipos y estilos" de diseño de íconos, así como mis propios pensamientos sobre cada tipo de ícono.
Clasificación de íconos
Se puede decir que los íconos en el sitio web de diseño son de varios tipos, y los diferentes tipos de íconos tienen encantos únicos. Por ejemplo, los íconos de líneas son simples y livianos, mientras que los íconos de áreas son gruesos y directos. Por supuesto, existen muchas formas diferentes de iconos del mismo tipo.
Entonces, según mi comprensión de los íconos, se pueden dividir aproximadamente en tres categorías: lineales, de superficie y combinación de líneas y superficies. Se puede crear una amplia variedad de expresiones combinando los tres tipos básicos de expresiones.
Íconos lineales
Los íconos delineados con líneas de colores claros tienden a tener una sensación general de exquisitez, detalle y nitidez. Diferentes líneas tienen diferentes experiencias visuales. Las líneas finas son ligeras, las rectas son duras y las curvas son suaves.
1. Análisis básico e ideas de iconos lineales
Comparación de espesores
Con diferentes espesores, la resistencia y el peso del icono también serán diferentes. Los íconos de líneas gruesas se destacarán más en términos de atención visual, pero también aparecerán más gruesos que los íconos de líneas finas. Los iconos de líneas finas son delicados, transpirables y hermosos.
Sin embargo, al diseñar, el grosor de las líneas debe determinarse en función del estilo general de la interfaz de usuario, en lugar de simplemente considerar la atención de los íconos. También es necesario considerar el equilibrio de los íconos y el diseño. interfaz en su conjunto.
Contraste de flexibilidad
Los ángulos rectos y las esquinas redondeadas determinan la apariencia y la dirección del estilo. Como se puede ver en la comparación en la figura siguiente, cuanto más grandes son las esquinas redondeadas, más lindos y suaves tienden a ser los gráficos (como se muestra en la figura derecha a continuación), y cuanto más pequeñas son las esquinas redondeadas, más directos y resistentes. y masculino (como se muestra en la figura de la izquierda a continuación). Por lo tanto, el valor de duro, suave o medio depende enteramente del ajuste temprano del estilo general.
Comparación de complejidad y simplicidad
Además de ser ligera y concisa, la identificación de los iconos también es sumamente importante. Como se muestra en la imagen izquierda a continuación, "demasiado simple" hace que el ícono pierda su debido reconocimiento y se vuelva ambiguo, mientras que la superposición de elementos en la imagen inferior derecha hace que el ícono sea ligeramente complejo. En el equilibrio entre complejidad y simplicidad, la simplicidad del ícono se maximiza sin afectar el reconocimiento del ícono.
Reconocimiento de funciones
Además de la simplicidad, también debemos considerar las características del icono. Por ejemplo, el ícono "Comentar" en la imagen de abajo, cuando elimino los "tres puntos" del ícono, el ícono todavía significa "diálogo/comentario", pero cuando elimino la "flecha" a continuación y conservo los "tres puntos". ", habrá ambigüedad y se puede expresar como "más", por lo que al diseñar el ícono, se debe captar con precisión el significado para evitar ambigüedades.
Mantiene la belleza única del icono.
Por ejemplo, el ícono "en forma de corazón" a continuación, la imagen de abajo a la izquierda es nuestro ícono general, que aún mantiene su belleza original después de combinarse con un círculo. Pero de vez en cuando vemos un tercer diseño. Aunque la forma general mantiene el amor, para "adaptarse" al estilo general, es estéticamente ligeramente diferente del gráfico original, que también es el punto clave en el que debemos pensar.
Proporción de la composición
La proporción de la combinación afectará la sofisticación del ícono. El "valor de proporción" preciso puede hacer que la forma general sea más equilibrada y más estética.
Como se muestra en el siguiente ejemplo, se probaron dos conjuntos de efectos en diferentes escalas, utilizando el lado estrecho del icono como "valor base". Cuando la forma interna es 1:2 de la forma externa (como se muestra en la Figura 2 a continuación), el efecto visual general del ícono está relativamente equilibrado cuando es mayor que 1:2 y cercano a 4:3, la estructura interna; del icono aparecerá demasiado lleno. Pero cuando es inferior a 1:2 y cercano a 4:1 (Figura 3 a continuación), producirá efectos escasos y compactos. (Las proporciones aquí son solo requisitos del caso y el diseño real está sujeto a la experiencia visual final).
2. Expansión de tipo lineal
La teoría básica, combinada con aplicaciones extendidas, puede ser. generarse en generar más creatividad. Los íconos lineales no tienen una sola forma de diseño. A través de los siguientes casos, podemos ver la diversidad de tipos de diseño de íconos de líneas.
Estilo minimalista
El estilo general es extremadamente simple, sin líneas adicionales, y la esencia de los gráficos se restaura a través de líneas. La forma es "simple" pero muy reconocible, y la percepción visual es relajada y limpia.
Los iconos de estilo minimalista tratan sobre el control gráfico. Un trazo más puede resultar complicado y un trazo menos puede afectar al reconocimiento. Tomando la imagen de arriba como ejemplo, la combinación de elementos de íconos se mantiene en aproximadamente 2 y el diseño general es relativamente limpio.
Aplicaciones prácticas: Instagram, Airbnb, Facebook, Twitter.
Dos colores
En comparación con los "iconos de colores sólidos", son más expresivos, más ricos en detalles y más diversos en sus formas. Combinar la superposición, el contraste y la complementación de colores realza las capas y la riqueza del ícono.
Un mismo sistema cromático: la expresión de un mismo sistema cromático frío, sistema cromático cálido o un mismo sistema cromático. Como se muestra en el siguiente caso, los colores oscuros se utilizan como color principal y los colores brillantes se utilizan para iluminar los íconos, lo que hace que los íconos tengan una sensación prominente.
Otra situación es que el color principal de los colores brillantes se combina con colores oscuros. El efecto general del icono está bien, pero los colores brillantes no se aplican a las características clave del icono, lo que hace que parezca un icono. el icono se debilitó ligeramente a primera vista.
Contraste de colores complementarios: la gama cromática es más amplia y las capas más claras. Como se muestra en el siguiente ejemplo, el contraste entre rojo y azul es más colorido y memorable que un ícono de un solo color.
Caso real: Tencent Animation My Page
Cambio de transparencia
Básicamente, es un tipo de diseño similar al anterior. A través de la superposición y el cambio de transparencia, se mejora la sensación de superposición y espacio del ícono, y se reduce la sensación de opresión del ícono.
Caso real: ícono de iQiyi 9-Gong
Superposición y capas de degradado
El degradado resalta la textura del ícono, combinado con "diferentes tonos" o " saturación" Los cambios "diferentes" hacen que los íconos sean más detallados y en capas.
Blanco y negro + color de la marca
El blanco y negro son los colores principales, combinados con el color de la marca como color de adorno. En comparación con el icono convencional en blanco y negro, no sólo cambia, sino que también tiene en cuenta el color de la marca.
Caso real: ícono de la página de la guía Dianping
Degradado lineal
Combinado con el color degradado, enriquece la expresión visual de todo el ícono y mejora el impacto visual de el icono y el sentido del diseño. El estuche se combina con un fondo blanco y negro a modo de intento. Fondo blanco: el efecto visual de las líneas gruesas es relativamente mejor que el de las líneas finas y el degradado se puede expresar con mayor claridad. Fondo negro: el efecto visual de las líneas finas es más refinado y nítido que el de las líneas gruesas.
Casos reales: NetEase Koala, NAVER
Moldeo único
Este tipo de ícono tiene alta fluidez lineal y sentido del diseño en la expresión visual, enfocándose en Se basa en la coherencia de la configuración de "Abrir punto de partida" para todo el conjunto de iconos. Por ejemplo, "de izquierda a derecha" o "de derecha a izquierda" forma una línea completa y coherente. Los puntos de inicio de apertura inconsistentes afectarán la coherencia de todo el conjunto de iconos y también aparecerán desordenados cuando se apliquen a la página.
El icono del punto de interrupción
es similar al anterior, pero no existe ningún requisito de coherencia. Sobre la base del ícono lineal, encuentre un espacio para romper la sensación opaca del "ícono completamente envuelto" y haga que el ícono sea permeable y tenga cambios de línea. La posición de los espacios debe mantenerse en la misma dirección y tamaño tanto como sea posible, y se debe controlar el número de aberturas para evitar que la forma del icono quede demasiado fragmentada.
Casos prácticos: Tencent Sports, JD.COM.
Iconos de área
Los íconos de área pueden expresar la fuerza y el peso del ícono mejor que los íconos lineales, y son más fáciles de atraer la atención de los usuarios que los íconos lineales. En términos de reconocimiento, los íconos regionales dependen más de la claridad del contorno exterior, por lo que pulir la forma es lo más importante en el diseño. Un contorno exterior claro ayuda a mejorar el reconocimiento.
1. Análisis básico e ideas de los íconos regionales
Contraste de contornos
Diferentes contornos reflejarán diferentes temperamentos, como se muestra en la siguiente figura. Un temperamento es más directo y duro, y el otro temperamento es más suave y encantador. Las formas suaves pueden hacer que todo el ícono del área sea más conciso y regular. Como se muestra en la siguiente imagen, el ícono en el medio está roto en el procesamiento del esquema y la forma general del esquema carece de coherencia.
Contraste hueco
El vaciado apropiado no solo puede complementar el reconocimiento de los gráficos, sino también mejorar los detalles del diseño de los íconos regionales. Además, se debe controlar la proporción de la parte hueca con respecto a la forma general. Demasiado pequeño o demasiado grande puede afectar el equilibrio del icono. Como se muestra en el lado derecho de la imagen a continuación, si el hueco es demasiado pequeño, tendrá poco impacto en el reconocimiento del ícono. Si no es hueco, tendrá menos transpirabilidad.
Contraste corporal
Las diferencias en la forma también conducirán a diferentes percepciones visuales.
Tomando como ejemplos "estrella" y "corazón", la percepción visual de una sola forma es más intuitiva que una forma combinada, mientras que el ícono de una forma combinada es relativamente más refinado y tiene más capas. La experiencia en el diseño diario es: cuanto más pequeña sea la forma del ícono, mejor, y cuanto más simple, mejor. Se recomienda que un solo ícono se vea mejor si el tamaño del ícono es lo suficientemente grande; se puede usar un diseño combinado; para complementar los detalles del icono.
Complejidad versus simplicidad
A la hora de diseñar iconos de áreas, también es importante gestionar los detalles redundantes. A medida que aumentan los detalles, cortar demasiadas superficies de bloques hará que el ícono general esté demasiado fragmentado (como se muestra a la derecha a continuación). Mantenga el diseño simple, mejore la visibilidad del ícono y agregue detalles funcionales clave (el flash de la cámara en la imagen a continuación).
2. Ampliación de los tipos de íconos regionales
Los íconos de superficie también se pueden diseñar con varias expresiones para mejorar la textura y la creatividad de los íconos, en lugar de simplemente llenarlos de color.
Superficie de un solo color + color de adorno
La apariencia general utiliza un color unificado, combinado con la percepción del atributo del ícono, usa diferentes colores para el adorno y mejora el efecto visual del icono a través del color del adorno a la vez unidad y distinción.
Multicolor y bicolor
A través de la combinación de colores contrastantes y colores adyacentes, se crea la atmósfera general del ícono, se mejoran el nivel y la riqueza del ícono y se La expresión de los dos colores también aumenta el interés gráfico. Es muy común en las aplicaciones diarias, simple y fácil de producir resultados.
Degradado de microtextura
El degradado débil mejora la textura del icono. La dirección del degradado afectará el efecto visual del ícono general, por lo que se puede ajustar según las necesidades de los diferentes diseños. Se muestra la siguiente situación:
Caso real: Canción K nacional
Cambios de transparencia/escala de grises
Con el cambio de transparencia/escala de grises, el monocromo original. Los íconos se vuelven más estratificados y espaciales, los detalles del diseño son más ricos y el grosor de los íconos planos monocromáticos se reduce.
Caso real: Penguin FM mi página
Cambio de transparencia + degradado
El diseño degradado mejora la textura del icono regional y tiene cierta riqueza en color. Sobre la base del degradado, se distingue la transparencia del tipo de combinación para darle al icono una sensación de jerarquía.
Icono superpuesto transparente + fondo degradado
Este tipo de ícono generalmente se aplica a listas o elementos principales en las interfaces de la interfaz de usuario.
Caso real: Página de karaoke nacional.
Superposición y penetración de color
Después de superponer el icono de forma transparente, se genera una forma negativa escalonada, que se superpone en la tercera superficie. Si bien el diseño general permanece plano, se agregan detalles de iconos y capas.
Caso real: Baidu Netdisk
Superposición de capas degradadas
El efecto general se acerca al icono que cambia la transparencia. A través del degradado de sombras, hay un contraste entre la luz y la oscuridad en la unión de las formas, por lo que el ícono también tiene una sensación de espesor y capas.
Caso real: NAVER, Pocket Life
Desenfoque gaussiano
Este tipo de icono es básicamente invisible en la APP, comparado con "cambio de transparencia" o "color". superposición" "Tiene una sensación más espacial y en capas, y los íconos también tienen un fuerte sentido de diseño.
Combinación línea-superficie
Combina las ventajas de la linealidad y la planitud, manteniendo el peso del plano y la delicadeza y delicadeza de la linealidad. Por lo tanto, al diseñar, podemos controlar la relación línea-superficie de acuerdo con los sentimientos específicos que el ícono quiere expresar. Diferentes proporciones pueden presentar diferentes sensaciones visuales.
1. Análisis básico y concepción de iconos de combinación línea-superficie
Relación línea-superficie
Como la relación línea-superficie es diferente, La tensión de la presentación gráfica también variará. Se probaron tres proporciones diferentes basadas en la forma del icono del relleno central. Como se puede ver en la imagen a continuación, cuando la proporción de relleno con respecto al lado angosto de la forma es 1:3 (imagen de la izquierda), el ícono aparece hacia adentro cuando la proporción de relleno con respecto al lado angosto de la forma es 1: 2, el ícono (medio) Equilibrio general; cuando la proporción entre el relleno y el lado angosto de la forma es 2:3 (mayor que 1:2) (imagen de la derecha), todo el cuerpo tiene una tendencia a expandirse hacia afuera.
Formas combinadas
Las líneas y superficies se pueden dibujar en diferentes combinaciones. Se puede diseñar una variedad de iconos de líneas y superficies basándose en diferentes formas de combinación, y diferentes formas de combinación reflejarán diferentes estilos de diseño. Entonces, al diseñar, trate de pensar lo más posible y encuentre una combinación que se adapte a sus necesidades.
Comparación de complejidad y simplificación
La combinación de línea y superficie en sí consta de dos formas, por lo que es más necesario controlar la forma general durante el diseño. La forma única (línea y superficie) debe mantenerse muy concisa, de modo que el icono combinado final no sea demasiado complejo (en la foto de la izquierda). Si la forma en sí es demasiado compleja, reducirá el reconocimiento y la belleza visual del ícono.
2. Ampliación del icono de combinación línea-superficie
El icono de combinación línea-superficie combina las ventajas de las superficies lineales y curvas, y también hereda las ventajas de ambas en diseño. El método de diseño también se basa en la combinación de los dos anteriores, por lo que se pueden combinar más posibilidades de diseño.
Línea en blanco y negro + color de marca facial
Cerca del enfoque "lineal + color de marca", el color lineal unificado se superpone con el color de la marca.
Caso real: vive bien, alma
Color dual de línea y superficie
Sobre la base de línea y superficie, distingue el color de línea y superficie. El método específico se acerca al bicolor lineal o plano.
Combinación de línea y superficie - Yin y Yang
La combinación de línea y superficie está diseñada en una proporción del 50%. Basado en el diseño estructural básico de arriba y abajo, izquierda y derecha y centrado, el efecto visual del ícono general es saltador y poco convencional.
Línea y superficie de dos colores + dislocación
Basado en el ícono de dos colores, las líneas y superficies se escalan de acuerdo con un "porcentaje" unificado para realizar un diseño de perspectiva y desplazamiento. El efecto visual general es una superposición escalonada, que es más rica que las líneas y superficies ordinarias de dos colores.
Casos reales: pestaña inferior de Xianyu y pestaña inferior de Dianqiu.
Dislocación del plano de línea + degradado
Basado en el estilo anterior, el color de la superficie o línea se diseña gradualmente para enriquecer la textura y el color del icono.
Variación de Transparencia Línea-Plan
Está diseñada de la misma forma que la Variación de Transparencia Línea-Plan. En el caso siguiente, el primer reconocimiento de forma de "línea débil, línea fuerte" es débil, mientras que el reconocimiento de forma de "línea débil, línea fuerte" es mayor, lo que está más en línea con la expresión del icono.
Casos reales: Sina Weibo, Tencent News.
A partir de tres expresiones básicas se pueden desarrollar diferentes formas de diseño. Además de los casos anteriores, también se han recopilado algunos otros diseños.
Imagen C con combinación de línea y superficie
En términos generales, tiende a tener una sensación de ilustración, con más detalles y elementos. Es común en el diseño de páginas en blanco de algunas aplicaciones.
Combinando líneas y superficies_ilustraciones de dibujos animados
La sensación general es muy linda, caricaturesca y bidimensional, lo cual es muy común en algunas aplicaciones bidimensionales o de cómics.
Surface_Gradient Strong Texture
El estilo general de la textura de luces y sombras será relativamente fuerte y, a menudo, aparecerá en la interfaz de algunas actividades o minijuegos.
Frente al realismo del plano C
La sensación general es relativamente aburrida y la riqueza de detalles se acerca a la percepción de la realidad.
Línea y superficie + ilustración degradada
El estilo general tiende a ser colorido, con ricas texturas y detalles.
Estilo realista
Iconos de textura 3D
Debido a que el costo de producción de C4D es relativamente alto, rara vez se ve en aplicaciones convencionales. Sin embargo, como tendencia de diseño predominante, el 3D aún necesita más intentos si el tiempo y la capacidad lo permiten.
Combinación isométrica línea-plano
El diseño isométrico enriquece los iconos originales de línea y plano, dándole una perspectiva tridimensional.
Además de lo anterior, también encontraremos algunos diseños de iconos especiales en escenas reales.
Más íconos de lista para páginas de Facebook
El estilo general tiende a ser estilo de ilustración + textura degradada. Debido a que más páginas están diseñadas como listas puras, toda la página hace un intento audaz de diseño de íconos, que es más atractivo que los íconos monocromáticos convencionales. Para distinguir diferentes servicios, los iconos de función de las propiedades del sistema se distinguen por colores.
Íconos de lista de categorías en juegos de APPStore y nuevas interfaces de aplicaciones
La expresión general del diseño es plana y el color del ícono restaura la percepción más básica de la realidad.
El ícono de la página de inicio del software de oficina en el sistema iOS.
El estilo general es relativamente profesional y simple, con una expresión gráfica concreta y una textura ligeramente degradada.
Iconos de funciones extendidas en la versión móvil de QQ
El estilo general tiende a ser un realismo ligero + un ligero degradado. Cada ícono tiene muchos detalles, con diferentes tonos según los atributos comerciales y los colores de la marca, y en general está unificado pero diferenciado.
40 sitios web de material comercial de medios propios vídeo + ilustración + imagen + icono Creative Commons (intercambio de conocimientos) denominado material de protocolo CC. El creador renuncia voluntariamente a algunos derechos sobre la obra, pero todavía existen restricciones, como la obligación de indicar la fuente y el nombre del autor. Lea las instrucciones cuando vea el acuerdo CC. El acuerdo PD certifica que la obra ha sido donada al dominio público.
El acuerdo CC0 significa que el creador renuncia voluntariamente a todos los derechos sobre la obra y puede utilizarla incondicionalmente, incluido el uso comercial. (Sin embargo, no está permitido subir material a otros sitios web, reclamar derechos de autor ni usarlo de manera ilegal. El contenido de la imagen aún puede implicar derechos de marca registrada y derechos públicos y de privacidad.
Fotos de personas , paisajes, animales, etc.
/
Vídeos e imágenes de alta definición de Sasha Vujacic (sitio web chino)
/
Imágenes de fotografía artística en alta definición (personas más utilizadas)
/
Busca visualmente fotografías de personas, paisajes, animales, etc.
/
Imágenes, ilustraciones, vectores, vídeos
/
Admira hermosos paisajes, plantas y animales gratis
/
El trabajo de los fotógrafos profesionales de Skuawk
/
Imágenes de paisajes y naturalezas muertas en alta definición
/
kaboompics arquitectura, imágenes fijas vida y otras imágenes pequeñas y frescas de alta definición
/
Galería de fotografía popular y de moda Jingwei
/
Fotografía de comida y comida Galería HD
Fotos gratuitas con imágenes religiosas en HD.
/
Paisajes estéticamente geniales
/
Paisajes naturales, arquitectura callejera
/
p>Imágenes de viento, naturaleza muerta
/
Imágenes de alta definición de viajes de Polayut
Paisajes de Lifeofpix, imágenes de comida
>
Vídeos de hermosos paisajes
/
Fancycrave bodegones, arquitectura, estilo retro
/
Mortstock tiene muchas flores y plantas.
/
Cuadros de estilo retro
Cuadros literarios exquisitos de Magdalena
Cuadros de diseñador Cuadros de bodegones y paisajes
/
Imágenes de varios sellos
/
Imcreator personas, arte, naturaleza, iconos vectoriales
Texturas disponibles Una gran colección de mapas de texturas para árboles, piedra, metal y otros materiales, disponible para mapeo 2D y 3D.
/
Iconos de tallo Varios iconos Materiales de iconos
/
Iconos planos - Diseño Iconos de estilo de ilustración lindo japonés
/
Ilustración prediseñada
/
Fuentes de iconos, varios materiales de iconos (sitio web chino)
/
Flaticon es un ícono completo.
/
Icon Ninja Icon
Cubre varios materiales de video de alta definición.
/
Material de vídeo HD de toma real de Mixkit
Vídeo HD, vídeo 4K
/
Videezy cada Escenas, vídeos promocionales
/
Ilustraciones de escenas de personajes sin dibujar
Ilustraciones de personajes de Icon 8
Escenas de personajes de Drawkit
404-Ilustración Ilustración Web