Sistema de diseño fluido

El propósito de la luz es atraer la atención e iluminar la información. Por lo tanto, la luz establece una relación entre la interfaz de usuario y el cursor o puntero. ^{[ 21 ]}

• Resaltado de revelación: Al pasar el cursor sobre un elemento, el resaltado de revelación ilumina los bordes ocultos cercanos en objetos como listas de menús de navegación tipo hamburguesa y botones. Al seleccionar un elemento, por ejemplo, haciendo clic o tocando, aparece rápidamente un efecto de iluminación circular blanca. ^{[ 21 ] [ 22 ]}
• Mostrar el enfoque: Elementos enfocables con un brillo de borde a través del indicador visual de enfoque. ^{[ 23 ]}

Con WinUI 2.6, Microsoft ha descontinuado la función de resaltado de revelación para que coincida con sus ofertas web y móviles, que no ofrecen esta función. ^{[ 24 ]} Además, con el lanzamiento de Windows 11, Microsoft ha ido eliminando gradualmente el uso de efectos de luz en general, ofreciendo en su lugar interactividad a través de animaciones. ^{[ 24 ]}

Se añade profundidad al contenido mediante capas en el eje Z. La profundidad se presenta a través de sombras paralelas y capas de profundidad Z. ^{[ 25 ] [ 26 ]} Esto es especialmente evidente en la aplicación Office rediseñada en 2019. En Windows 11, el uso de la profundidad se amplía superponiendo diferentes superficies con diferentes opacidades del material Mica.

• Capas: Las capas dividen una aplicación en la base, que es el "lienzo", y el contenido, que flota sobre ella. El contenido puede presentarse como una superficie continua o como una tarjeta. ^{[ 27 ]}
• Elevación: La elevación consiste en separar elementos de la superficie de la aplicación mediante el uso de sombras. Algunos ejemplos son los menús contextuales , las ventanas emergentes o las sugerencias de herramientas . ^{[ 27 ]}

El movimiento establece una relación entre los elementos de la interfaz de usuario y proporciona continuidad en la experiencia. ^{[ 28 ]}

• Animaciones de agregar/eliminar: Lista las animaciones para insertar y eliminar elementos de una colección. ^{[ 28 ]}
• Animaciones conectadas: Las animaciones conectadas son transiciones de elementos. Durante un cambio de contenido, un elemento parece continuar volando a través de la aplicación. ^{[ 29 ]}
• Transición de contenido: Se utiliza cuando solo cambia una parte del contenido de una página. ^{[ 28 ]}
• Drill: Drill se utiliza para navegar más profundamente en una aplicación. Por ejemplo, para mostrar más información después de seleccionar un elemento. ^{[ 30 ]}
• Fundido: Fundido de entrada y de salida para mostrar y ocultar elementos. ^{[ 28 ]}
• Parallax: El parallax mueve los objetos a diferentes velocidades. El fondo se mueve más lentamente que el contenido que está encima. Por ejemplo, una lista se desplazará más rápido que la imagen de fondo, creando un efecto de profundidad además de movimiento. ^{[ 31 ]}
• Respuesta táctil: Al pulsar un elemento, este retrocede momentáneamente hacia el fondo y luego regresa a su posición original. Algunos ejemplos de respuesta táctil son los iconos dinámicos del menú Inicio , las acciones rápidas del Centro de actividades y los botones de la barra de direcciones de Microsoft Edge . ^{[ 32 ]}

Los materiales son efectos visuales aplicados a las superficies de UX. En el diseño fluido existen dos tipos principales de materiales: oclusivos y transparentes. Los materiales oclusivos, como el acrílico y la mica, forman las capas base debajo de los elementos interactivos de la interfaz de usuario. Los materiales transparentes, como el humo, se utilizan para enfatizar las superficies inmersivas: ^{[ 33 ]}

• Acrílico: El material acrílico crea un efecto translúcido y borroso con un ligero efecto de ruido. En Windows 10, el acrílico se usaba en superficies grandes (como los paneles laterales). Con Windows 11, las superficies principales han dejado de usar acrílico en favor de la mica. En su lugar, el acrílico se usa en superficies transitorias como menús contextuales , información sobre herramientas o predicciones en cuadros de búsqueda .
• Mica: La mica es un nuevo material opaco introducido en Windows 11 que adopta el tono del fondo de pantalla del usuario. ^{[ 34 ]} A diferencia del acrílico, que fue diseñado para superficies transitorias (por ejemplo, menús contextuales), la MMC está diseñada para usarse en superficies primarias de larga duración. Al usar diferentes opacidades, las aplicaciones pueden crear una jerarquía visual.
• Humo: El humo se introdujo con Windows 11. Es un fondo negro translúcido, independientemente del modo claro u oscuro, para crear una jerarquía entre la ventana principal y una ventana emergente. ^{[ 33 ]}

Tanto Acrylic como Mica se desactivan en una ventana específica cuando la aplicación ya no está seleccionada. Además, ambas se desactivan en todo el sistema cuando la transparencia está desactivada, cuando el modo de ahorro de batería está activado o en hardware de gama baja. El fondo Acrylic se desactiva cuando se deselecciona una ventana o en Windows 10 Mobile , HoloLens o en modo tableta. ^{[ 35 ]}

Las aplicaciones se adaptan a diferentes formatos y tamaños de pantalla . ^{[ 36 ]} Los controles conscientes también se clasifican dentro de Escala (por ejemplo, barras de desplazamiento y entradas que se adaptan a diferentes métodos de invocación) ^{[ 37 ] [ 38 ]}

Se han creado nuevos iconos con materiales acrílicos para los programas de Microsoft, comenzando con las aplicaciones de Office y Microsoft Edge basado en Chromium en 2018 y 2019, respectivamente. ^{[ 39 ] [ 40 ] [ 41 ]} Se detectaron versiones preliminares de los iconos finales en el vídeo "Conoce los nuevos iconos para Office 365 ", ^{[ 42 ]} antes de que se detectaran más cuando se presentó Windows 10X, ^{[ 43 ]} antes de ser revelados oficialmente el 12 de diciembre de 2019. ^{[ 44 ]} Estos iconos comenzaron a aparecer a través de las actualizaciones de Microsoft Store para esas aplicaciones, comenzando con Correo y Calendario . ^{[ 45 ] [ 46 ]}

MDL2

Fluido

Los iconos Segoe Fluent conforman el conjunto de iconos diseñados por Microsoft para su uso en sus productos y servicios, junto con el rediseño de la fuente Segoe UI (Segoe UI Variable). ^{[ 47 ]} Los iconos son redondeados, a diferencia de los iconos angulares y rectos de Segoe MDL2 que predominaron durante la era de Windows 10. ^{[ 48 ]}

Fluido

El 15 de julio de 2021, Microsoft anunció un rediseño completo de su biblioteca de emojis para alinearla con su Fluent Design. ^{[ 49 ]} Con el objetivo de hacer que Windows sea lo más consistente y accesible posible, Microsoft hizo que más de 1500 emojis fueran de código abierto el 10 de agosto de 2022. ^{[ 50 ] [ 51 ]} Estos nuevos emojis Fluent se alejan del estilo plano y delineado de la biblioteca de emojis anterior utilizada en Windows 10 y en su lugar adoptan una sensación de plastilina 3D . ^{[ 49 ]} Además, Microsoft ha declarado sus planes para animar la mayoría de ellos. ^{[ 52 ]} Si bien los emojis animados en 3D se pueden ver en aplicaciones como Microsoft Teams y Skype , Windows 11 inicialmente usó variantes planas mientras que el lanzamiento completo se retrasó hasta 2023. ^{[ 53 ]}