Iconografía en Windows
La iconografía es un conjunto de imágenes y símbolos visuales que ayudan a los usuarios a comprender y desplazarse por la aplicación. Los iconos se usan en toda la interfaz de usuario como metáforas visuales que representan un concepto, una acción o un estado.
Windows 11 usa tres tipos de iconos: aplicación, sistema y tipo de archivo. Este artículo se centra en los dos primeros.
Sugerencia
En este artículo se describe cómo se aplica el lenguaje Fluent Design a las aplicaciones de Windows. Para obtener más información, vea Fluent Design - Iconography.
Iconos de aplicación
Los iconos de aplicación representan la aplicación en el shell de Windows. Se usan principalmente para abrir la aplicación, pero también representan la aplicación dondequiera que aparezca en el shell de Windows.
Los iconos de la aplicación deben representar la funcionalidad principal de la aplicación a través de una metáfora. Para obtener más información sobre cómo diseñar y construir el icono de la aplicación, consulta Iconos de aplicación.
Iconos del sistema
Usa iconos del sistema dentro de la interfaz de usuario de la aplicación para elementos como barras de comandos, navegación o indicadores de estado. Windows 11 presenta una nueva fuente de icono del sistema, Segoe Fluent Icons. Esta nueva fuente complementa la geometría en Windows 11.
Todos los glifos de Segoe Fluent Icons se dibujan en un estilo monolínea. Esto significa que se crean a través de un solo trazo de 1 epx.
Los glifos en Segoe Fluent Icons siguen tres principios estéticos:
- Mínimo: los glifos contienen solo los detalles necesarios para comunicar el concepto.
- Armonioso: los glifos se basan en formas simples y geométricas.
- Evolucionado: los glifos usan metáforas modernas que se comprenden fácilmente.
Para obtener más información sobre el uso de iconos en la interfaz de usuario de la aplicación, consulta Iconos en aplicaciones de Windows.
Tamaño de icono
Las métricas de fuentes para Segoe Fluent Icons coinciden con la forma en que los diseñadores y desarrolladores están acostumbrados a trabajar con iconos SVG y mapa de bits.
Cada glifo de fuente está diseñado para que la superficie del área del icono sea un cuadrado em. Un icono con un tamaño de fuente de 16 epx es el equivalente de un icono de 16x16-epx, para que el ajuste de tamaño y el posicionamiento sean más predecibles.
Modificadores
Puede construir visualmente glifos de icono del sistema mediante la combinación de un icono base con un icono modificador.
Los iconos base son el elemento principal de una metáfora visual. Los elementos base deben ocupar toda la superficie del icono.
Los iconos modificadores modifican el significado del icono base. Los elementos modificadores deben colocarse en uno de los cuadrantes inferiores de la superficie del icono.
Solo icono base
Por sí mismo, el icono de la hoja de papel comunica el concepto de un archivo.
Icono base + icono modificador
Agregar una flecha arriba al icono de archivo cambia el significado del icono para representar un archivo cargado.
Capas
La superposición de capas de iconos es una técnica que se usa para superponer dos glifos. Se recomienda usar capas de iconos para crear un estado diferente del mismo icono (por ejemplo, un estado activo o seleccionado).
Localización
Comprenda las matices culturales de los símbolos. Aunque la iconografía no requiere localización en la mayoría de los casos, es posible que determinados iconos sean aceptables en una referencia cultural, pero no en otra. Valide las opciones de iconografía con el contexto en el que los usará.
Ejemplos
La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, características y funcionalidades de WinUI 3. Obtenga la aplicación de Microsoft Store u obtenga el código fuente en GitHub.
