Iconos

Iconos de Windows

 

Los iconos transmiten un mensaje sin necesidad de explicarlo. Constituyen una parte esencial de la navegación. Dado que su naturaleza es simbólica, los iconos trascienden al texto para transmitir el mensaje. Básicamente, se trata de que resulten eficaces y lleven al usuario al siguiente paso lo más rápido posible. Los iconos son los elementos esenciales de la productividad y ofrecen una base visual sobre la que se realiza la navegación dentro de una interfaz de usuario.

Iconos en Windows

Los iconos de Windows son gráficos y simbólicos. Usan líneas claras y formas simples que se reconocen con facilidad. Son parte integral de la navegación por un sistema de entrada táctil primero y deben ayudar a los usuarios a navegar por la UI. No deben usarse en lugar de los puntos en viñeta en una lista.

Los iconos de Windows crean y simplifican los conceptos mediante el uso de un mínimo de partes y detalles. Refuerzan la idea de contenido sobre contenedor visual mediante su naturaleza gráfica, perspectiva plana y calidad de monocromáticos.

Perspectiva

Los iconos de Windows son formas simbólicas bidimensionales. Pueden brindar sugerencias de forma sutil con volumen o profundidad, pero generalmente evitamos agregar ángulos y líneas de perspectiva. La mayoría de los iconos representan un concepto u objeto. Si un icono representa más de un objeto, el objeto delante "vence" al objeto de atrás.

 

icono con reserva de color

 

 

 

 

"Vencer" a un objeto significa que cuando un elemento de un icono parece superponerse a otro, la superposición crea un espacio que coincide con el color del fondo.

 

 

Color

El color primario de los iconos de Windows es blanco puro. El blanco es el único color que se muestra correctamente en la mayoría de los contextos de color, como iconos de aplicación y barras de la aplicación, que tienen fondos de color enriquecido.

 

Iconos para aplicaciones de la Tienda Windows

 

Detalles

Windows presta especial atención a los detalles como grosor de línea, ángulos, esquinas y "reservas de color". La atención a los detalles permite que un gran conjunto surtido de iconos glíficos se mantenga unido como una familia. Los grosores de línea en un sistema táctil nunca deben verse frágiles. En los iconos de menor tamaño, una diferencia de un píxel puede hacer que una línea u objeto se sienta demasiado gruesa o demasiado fina. En el caso de los iconos táctiles, siempre inclínate por grueso sobre fino. Los detalles, incluso las reservas de color, deben tener un peso de al menos dos píxeles.

Escalar para PPP alto

Los iconos de Windows tienen como destino tres niveles predefinidos de escalado. El tamaño del icono básico es 1x. Los tamaños de PPP más altos son 1.4x y 1.8x. Si escalar a niveles predefinidos de escalado más altos causa píxeles parciales, simplemente redondea hacia abajo al píxel más cercano.

Producción

Te recomendamos que dibujes todos los iconos de Windows con vectores, preferentemente en Adobe Illustrator o Expression Design. Acoplar formas de vector a la cuadrícula de píxeles es esencial en el sistema de grifo. Los iconos de Windows deben tener bordes claros y nítidos.

Cómo puedes usar iconos

Dado que los iconos son simples, proporcionan un lugar oportuno para agregar personalidad. Cuando miras un sistema de iconos, puedes ver cómo las marcas no solo se identifican a sí mismas, sino que se identifican con los usuarios. Los iconos comienzan a contar la historia a través de claves visuales que se dibujan en el nivel más básico. Permiten diferenciar tu aplicación de formas muy simples. Puedes dibujar iconos de ubicación uniformes, como la aplicación Foursquare, o puedes dibujar escenarios, como la aplicación Songza.

 

iconos en la aplicación Foursquare

 

iconos en la aplicación Songza

 

La iconografía hace más que brindar funcionalidad. Ayuda a conectar a los usuarios con la visión general de la aplicación e incluso puede evocar emociones favorables hacia la aplicación. Songza realiza un buen trabajo al darle a su iconografía la actitud correcta para la aplicación. La personalidad de la marca resalta mientras se mantiene la eficacia en la interfaz.

Temas relacionados

Directrices para iconos de Segoe UI Symbol