Directrices de diseño para iconos de la aplicación de Windows

Siga estas instrucciones para crear un excelente icono de aplicación para la aplicación que se siente en casa en Windows.

Guía de diseño: Metáfora

Un icono debe ser una metáfora de su aplicación: una representación visual de la propuesta de valor, las funciones y las características del producto.

Representación

El icono debe ilustrar el concepto de la aplicación en un elemento singular mediante formularios simples.

Al crear el icono, use metáforas claras y aproveche los conceptos que se comprenden en gran medida, como un sobre para correo o lupa para la búsqueda. El concepto clave debe ser el punto focal del icono; no diluya el icono agregando elementos decorativos que no admitan la metáfora. Para mejorar la claridad de la comunicación, use no más de dos metáforas en un solo icono. Si se puede usar una sola metáfora, eso es aún mejor.

Las metáforas literales son las mejores para articular el propósito y la promesa de una manera clara. Una buena prueba para un icono efectivo es cuando los usuarios pueden indicar lo que representa sin una etiqueta.

Utilice solo una metáfora abstracta en instancias en las que sea imposible encontrar una metáfora literal y evidente para representar la funcionalidad básica de un producto.

Los iconos no deben incluir tipografía como parte del diseño. Las letras y palabras del icono deben evitarse y usarse solo cuando sea esencial. El nombre de la aplicación aparecerá en asociación con el icono en todo el sistema operativo.

Guía de diseño: Forma

Cuadrícula y esquinas redondeadas

Microsoft alinea sus iconos con una cuadrícula de 48x48 inicialmente para garantizar un icono equilibrado que aproveche el espacio disponible, a la vez que mantiene una forma y silueta distintivas. Alinear las características distintivas del icono con la cuadrícula se equilibrará bien con los demás iconos que lo rodean.

La capacidad de enfoque es un principio de personalidad de Microsoft. Una manera de comunicar este rasgo es mediante esquinas suaves o redondeadas. Las formas usadas en los iconos de producto de la aplicación deben compilarse para alinearse con la cuadrícula de iconos. Las esquinas de estas formas deben coincidir con las esquinas redondeadas de la cuadrícula de iconos. Cuando las esquinas redondeadas se aplican a una curva exterior, use un radio de 2 píxeles a 48 x 48. Cuando las esquinas redondeadas se aplican a una curva interior, use un radio de 1px en su lugar.

Silhouette

Una silueta visualmente equilibrada permite una buena escalabilidad de iconos y también evita extremos de formas gruesas y finas. Utilice la cuadrícula para diseñar una silueta que sea distintiva, pero legible en tamaños pequeños. Usa tantas formas con tan pocas esquinas como sea posible para distinguir tu producto mientras sigues sintiéndose en casa en Windows.

Detalle

Al agregar detalles, se debe tener cuidado para mantener la legibilidad en tamaños pequeños. Se recomienda agregar solo detalles literales adicionales a la capa más destacada de un icono.

Guía de diseño: Color y degradados

Elija los colores cuidadosamente y evite confiar en el color solo para transmitir significado. Use la forma y la metáfora con color para comunicarse. Para evitar la complejidad al escalar un icono en un intervalo de tamaños, se deben minimizar los tratamientos a los colores. Los degradados de color, las superposiciones de opacidad variable y las tinturas de color deben mantenerse como mínimo.

Los degradados deben ser sutiles para la mayor parte. Intente limitar las rampas de degradado a solo uno o dos pasos en las direcciones horizontales y verticales.

El ángulo predeterminado para los degradados es de 120 grados. Los puntos iniciales y finales se pueden ajustar en consecuencia. Lo importante es que es una transición fluida. Evite transiciones muy estrechas que se sientan como reflejos o dimensiones.

Paleta monocromática

Cree una paleta monocromática con los pasos siguientes:

1. Cree tres colores a partir del mismo tono. En la mayoría de los casos tendrás que ajustar el color claro para ser más brillante y el color oscuro para ser menos saturado, pero por supuesto debes usar tu mejor juicio.
2. Cree tres pasos entre cada color base. Será su carril principal. La mayoría del icono debe estar formado por estos colores.
3. Para una paleta más amplia, cree tonos en blanco y tonos en negro con el mismo método que el paso 2. Estos tonos y tonos solo deben usarse cuando necesite un poco más de contraste.
4. Los tonos de los colores oscuros y los tonos de los colores claros son generalmente inútiles y drab. Se pueden quitar.

Degradados monocromáticos

Los degradados monocromáticos se suelen usar para dar una sugerencia sutil hacia un ángulo de luz ambiente procedente de la parte superior izquierda. Sin embargo, no deben tratarse como una fuente de luz directa. La idea es dar a las formas un poco de movimiento sin ser demasiado dramática.

Paleta análoga

Crear una paleta análoga es exactamente como crear una paleta monocromática, pero con más colores. La clave de este tipo de paleta no es superponerla. Tenga cuidado con las transiciones de color.

1. Cree tres conjuntos de colores en lugar de uno.
2. Hacer rampas verticales fuera de los tres conjuntos de colores.
3. En lugar de crear tonos y tonos con blanco y negro, use en su lugar los colores segundo y tercero.

Degradados análogos

Los degradados análogos deben estar en el mismo ángulo que el monocromo, pero no siempre tienen que ser. Normalmente, los tonos más ligeros deben estar en la parte superior izquierda para evitar mirar demasiado dramático, pero también para ser lo más coherente posible con el monocromo.

Guía de diseño: Contraste, sombra y perspectiva

Contraste de color

La accesibilidad es una prioridad alta para Microsoft. Los iconos de la aplicación se muestran principalmente en fondos claros y oscuros, pero se muestran sobre imágenes de fondo de escritorio y tonos o tonos del color de énfasis del sistema. Es difícil hacer que un icono sea accesible al 100 % en cada fondo, pero hay varias cosas que puede hacer para asegurarse de que el icono sea lo más accesible posible.

• Use valores de color en todos los 3 intervalos, oscuro, medio y claro.
• Asegúrese de que al menos la mitad del icono pasa una relación de contraste 3.0:1 en el tema claro y oscuro.
• Algunos valores de matiz son más difíciles que otros. El amarillo nunca pasará una relación de contraste accesible sobre el tema claro hasta que sea marrón. Los rojos son más difíciles en el tema oscuro.
• Aunque no es necesario, tiene la opción de proporcionar recursos de tema claro y oscuro independientes para la barra de tareas, Inicio y otras áreas sensibles a temas de Windows.

Contraste alto

Sugerencia

Windows 11 ya no requiere recursos de contraste alto para los iconos de la aplicación.

Los iconos de contraste alto son negro y blanco y deben ser una representación directa del icono de la aplicación. A menudo, el icono de contraste alto se puede crear a partir de la versión de color mediante un relleno sólido y una línea. Evite degradados en iconos de contraste alto. A veces, los iconos monolíneas son necesarios para las experiencias en la aplicación deben diseñarse según estas directrices.

Capas y sombra

Vista frontal/superior.

Vista isométrica para ilustrar la profundidad z. Sólo con fines ilustrativos; no una opción de diseño sugerida.

Los iconos se componen de objetos planos que se encuentran sobre las capas debajo de él.

• Use el menor número de capas posible y minimice los contrastes extremos de escala entre formas.
• Use sombras paralelas dentro de los iconos para crear una definición entre capas de objeto y conectar visualmente los componentes entre sí dentro del diseño del icono.
• En general, las sombras que se convierten de formas claras a oscuras tienen el mejor resultado.
• Las sombras internas solo deben convertir una sombra en el símbolo gráfico, no en el fondo circundante.
• Hay dos tipos de sombras internas que tienen dos sombras cada una.

Construcción de sombras

Todos estos valores se representarán a 48 x 48 px y se escalan o reducen verticalmente desde allí. Si esto no se cumple, las sombras serán incoherentes en todo el sistema de iconos. Hay dos tipos de sombras de objeto que tienen dos sombras cada una. Los objetos dentro de la misma metáfora tienen una sombra con un poco menos desenfoque.

Misma metáfora

Esta sombra se usa cuando tienes contenido dentro de una sola metáfora que necesita cierta profundidad. No siempre es necesario hacer esto, pero las metáforas de un solo objeto necesitan cierta profundidad para sentirse como parte del sistema. el azul en la sombra 2 es la única diferencia.

Metáfora independiente

Esta sombra se usa cuando tiene dos objetos que se superponen entre sí, pero no forman parte necesariamente de la misma metáfora. La sombra debe enmascararse en la forma debajo de ella.

Perspectiva

Los iconos de la izquierda son bastante sencillos; no se recomienda la perspectiva, pero puede ser adecuado aquí. El icono de la derecha es demasiado complejo para la perspectiva, por lo que no se recomienda usarlo para este icono.

Los iconos deben dibujarse con una perspectiva directa para presentar la metáfora de una manera sencilla de entender. Las excepciones son casos en los que la metáfora no se lee bien sin ver otro lado de ella. Por ejemplo, un cilindro visto directamente en es un rectángulo para que se pueda agregar la parte superior para mostrar que tiene volumen. La otra excepción es cuando una aplicación está relacionada con 3d donde tiene sentido mostrar la dimensión. En ambos casos, se siguen aplicando las directrices anteriores sobre objetos planos. Las capas siempre deben ser planas y perpendiculares al ángulo de visión.