Compartir vía


Diseño para aplicaciones de Windows

Aquí encontrará instrucciones de diseño y ejemplos para crear experiencias de aplicaciones de Windows. Windows 11 incorpora el lenguaje de diseño y los principios de Fluent para una apariencia cohesiva y sensación única de Microsoft.

Para obtener los bloques de creación para crear experiencias de Windows, use WinUI. Estos componentes incorporan el lenguaje de diseño de Fluent, por lo que puede estar seguro de que está creando excelentes experiencias dentro del ecosistema fluent.

Principios de diseño de Windows 11

Diversos elementos de diseño de Windows 11

Windows 11 marca una evolución visual del sistema operativo. Hemos evolucionado nuestro lenguaje de diseño junto con Fluent para crear un diseño que sea humano, universal y realmente se sienta como Windows.

Los principios de diseño siguientes nos han guiado a lo largo del recorrido para hacer que Windows sea la mejor implementación de Fluent.

Sin esfuerzo

Windows 11 es más rápido e intuitivo. Es fácil hacer lo que quiero con foco y precisión.

Calma

Windows 11 es más suave y ordenado. Se atenúa en segundo plano para ayudar a mantener calma y concentración. La experiencia se siente cálida, etérea y accesible.

Personal

Windows 11 se adapta perfectamente a la forma en que uso el dispositivo. Se adapta a mis necesidades y preferencias individuales para que pueda expresarme realmente.

Familiar

Windows 11 equilibra un aspecto nuevo y actualizado con la familiaridad del Windows que ya conozco. No hay ninguna curva de aprendizaje. Puedo adquirirlo y está listo.

Completo y coherente

Windows 11 ofrece una experiencia fluida visualmente entre plataformas. Puedo trabajar en muchas plataformas y seguir teniendo una experiencia de Windows coherente.

Experiencias de firma de Windows 11

Las experiencias de firma son los elementos de diseño que Windows 11 usa para expresar su lenguaje visual, al tiempo que mantiene una apariencia coherente en todas las experiencias de Fluent.

Ventana y cuadro de diálogo modal en modo claro a la izquierda y en modo oscuro a la derecha

Color

Color ayuda a los usuarios a centrarse en sus tareas indicando una jerarquía visual y una estructura entre los elementos de la interfaz de usuario. Windows 11 usa el color para proporcionar una base tranquilizadora, lo que mejora sutilmente las interacciones del usuario y resalta elementos significativos solo cuando es necesario.

Ventana de aplicación con una única área de contenido

Elevación y capas

La elevación y la capa son el concepto de superposición de una superficie con otra, creando dos o más áreas visualmente distintivos dentro de la misma superficie. Windows 11 usa elevación y capas como base para la jerarquía de aplicaciones.

Icono de carro de la compra

Iconografía

Iconografía es un conjunto de imágenes visuales y símbolos que ayudan a los usuarios a comprender la aplicación y a navegar por ella. La iconografía de Windows 11 ha evolucionado de acuerdo con nuestro lenguaje de diseño. Todos los glifos de nuestra fuente de iconos del sistema se han rediseñado para adoptar una geometría más suave y metáforas más modernas.

Superficie de la interfaz de usuario de acrílico

Materiales

Materiales son efectos visuales que hacen que las superficies de la interfaz de usuario se parezcan a artefactos de la vida real. Windows 11 usa materiales para mantener la interfaz de usuario conectada a su entorno. Los materiales hacen que las superficies cobren vida y nos ayudan a distinguir entre aplicaciones con y sin foco.

Varios elementos de la interfaz de usuario que resaltan la nueva geometría de Windows 11

Formas y geometría

Geometry describe la forma, el tamaño y la posición de los elementos de la interfaz de usuario en pantalla. Estos elementos de diseño fundamentales contribuyen a la coherencia de las experiencias en todo el sistema de diseño. Las características de Windows 11 actualizan la geometría que crea una experiencia más accesible, atractiva y moderna.

Varias palabras representadas en Segoe UI Variable

Tipografía

Como representación visual del lenguaje, la tarea principal de la tipografía es comunicar información. El sistema de tipos de Windows 11 le ayuda a crear la estructura y la jerarquía en el contenido con el fin de maximizar la legibilidad en la interfaz de usuario.

Imagen animada que muestra varios ejemplos de movimiento en la interfaz de usuario de Windows.

Movimiento

Movimiento describe la forma en que la interfaz anima la interacción del usuario y responde a esta. El movimiento en Windows es reactivo, directo y adecuado al contexto. Proporciona comentarios a la entrada del usuario y refuerza los paradigmas espaciales que admiten la búsqueda de métodos.