Iconografía en Windows 11

La iconografía es un conjunto de imágenes visuales y símbolos que ayudan a los usuarios a comprender y moverse 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.

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 Icongraphy in Windows (Iconografía en Windows).

Iconos del sistema

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 de 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 entienden fácilmente.

Ajuste de tamaño

Las métricas de fuente de Segoe Fluent Icons coinciden con la forma en que los diseñadores y desarrolladores están acostumbrados a trabajar con los iconos svg y de 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 16 x 16 epx, para hacer que el ajuste de tamaño y el posicionamiento sean más predecibles.

Anatomía

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.

Icono base solo
Por sí solo, el icono de 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.

Estructuración por niveles

La capa de iconos es una técnica que se usa para superponerse a 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

Comprender 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 ciertos 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

Sugerencia

Abra la aplicación Galería de WinUI 3 y vea Principios de iconografía en acción. La aplicación WinUI 3 Gallery incluye ejemplos interactivos de la mayoría de los controles, las características y la funcionalidad de WinUI 3. Obtenga la aplicación en Microsoft Store o el código fuente en GitHub.