Sistema de diseño fluido - Fluent Design System
 La aplicación Calendario en Windows 10 , que muestra aspectos de Fluent Design, como acrílico y bordes de ventana más delgados.
| |||||||||
| Otros nombres | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| Autor (es) original (es) | Microsoft | ||||||||
| Desarrollador (es) | Microsoft | ||||||||
| Versión inicial | 2017 | ||||||||
| Liberaciones estables [±] | |||||||||
| |||||||||
| Versión (s) de vista previa [±] | |||||||||
| |||||||||
| Repositorio | |||||||||
| Escrito en | Objective-C , C ++ , C # , TypeScript , Kotlin , Swift , JavaScript | ||||||||
| Plataforma | Android , iOS , MacOS , Windows | ||||||||
| Predecesor | |||||||||
| Tipo | Software de lenguaje de diseño | ||||||||
| Licencia | Licencia MIT | ||||||||
| Sitio web | desarrollador |
||||||||
| Parte de una serie sobre |
| Windows 10 |
|---|
 |
| Relacionados |
Fluent Design System (nombre en código Project Neon ), presentado oficialmente como Microsoft Fluent Design System , es un lenguaje de diseño desarrollado en 2017 por Microsoft . Fluent Design es una renovación del lenguaje de diseño de Microsoft (conocido popularmente como "Metro") que incluye pautas para los diseños y las interacciones que se utilizan en el software diseñado para todos los dispositivos y plataformas de Windows 10 . El sistema se basa en cinco componentes clave: luz, profundidad, movimiento, material y escala. El nuevo lenguaje de diseño incluye un uso más destacado de efectos de movimiento, profundidad y translucidez.
La transición a Fluent es un proyecto a largo plazo; Los aspectos del diseño comenzaron a aparecer en Windows 10 a partir de la "Actualización de creadores de otoño" lanzada en octubre de 2017, así como una actualización del software del sistema Xbox One lanzada junto con ella. Más tarde se reveló que estaba diseñado en conjunto con Windows 10X , además de la próxima actualización de Windows 11 con un diseño similar.
Comparado con Metro y Aero
Los principios clave o "bloques" de Fluent (Luz, Profundidad, Movimiento, Material y Escala) se alejan del concepto plano que Metro había definido y, al tiempo que conserva la apariencia limpia y la sensación que introdujo Metro, Fluent renueva las imágenes de Aero , un diseño enfoque que se introdujo en Windows Vista y Windows 7 , que incluye translucidez borrosa, patrones animados de paralaje, sombras, efectos de resaltado después del puntero del mouse o movimientos de gestos de entrada, y "materiales falsos" Metro una vez descartado.
Aplicaciones actuales de Fluent
Luz
Revelar lo más destacado
El propósito de la luz es llamar la atención e iluminar información. Al pasar el mouse, el resaltado Reveal ilumina los bordes ocultos cercanos en objetos como listas y botones del menú de navegación de hamburguesas . Tras la selección, como al hacer clic o tocar, aparece rápidamente un efecto de iluminación circular blanca. Además, en el entorno holográfico de Windows , existe un puntero blanco redondeado .
El 6 de noviembre de 2017, el empleado de Microsoft David Haz declaró que existen planes para aplicar el resaltado de revelación a la barra de tareas , pero a julio de 2019, no ha ocurrido.
Con WinUI 2.6, Microsoft ha descontinuado el resaltado revelador para que coincida con sus ofertas web y móviles que no ofrecen resaltado revelador.
Revelar el enfoque
Elementos enfocables con borde resplandeciente a través del enfoque visual.
Profundidad
La adición de profundidad utiliza el eje Z y permite la diferenciación de contenido mediante capas. La profundidad se presenta mediante sombras paralelas y capas de profundidad Z. Esto es especialmente evidente en la aplicación de Office rediseñada en 2019.
Movimiento
Motion establece una relación entre los elementos de la interfaz de usuario y proporciona una continuidad en la experiencia.
Agregar / eliminar animaciones
Muestra animaciones para insertar y eliminar elementos de una colección.
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.
Transición de contenido
Se utiliza cuando solo cambia una parte del contenido de una página.
Taladro
Drill se usa cuando se navega más profundamente en una aplicación. Por ejemplo, mostrar más información después de seleccionar un elemento.
Desvanecerse
Fundido de entrada y salida para traer y descartar elementos de la vista.
Paralaje
Parallax mueve objetos a diferentes velocidades. El fondo se mueve más lento que el contenido de arriba. Por ejemplo, una lista se desplazará más rápido que la imagen de fondo, creando un efecto de profundidad además de movimiento.
Comentarios de prensa
Cuando se presiona un elemento, retrocede momentáneamente a un segundo plano y luego vuelve a su posición original. Ejemplos de comentarios de la prensa incluyen los mosaicos en vivo del menú Inicio , las acciones rápidas del Centro de actividades y los botones de la barra de direcciones de Microsoft Edge .
Material
Acrílico
Se han creado nuevos íconos con materiales acrílicos para programas de Microsoft, comenzando con las aplicaciones de Office y Microsoft Edge basado en Chromium en 2018 y 2019, respectivamente. Las versiones preliminares de los íconos finales se vieron en el video "Conozca los nuevos íconos para Office 365", antes de que se vieran más cuando se presentó Windows 10X, antes de ser revelados oficialmente el 12 de diciembre de 2019. Estos íconos comenzaron a aparecer a través de Microsoft Store actualizaciones de esas aplicaciones, comenzando con Mail y Calendar .
El material acrílico crea un efecto difuminado translúcido con un ligero efecto de ruido. Se puede crear una jerarquía visual utilizando diferentes opacidades. Por ejemplo, en una aplicación, las superficies de contenido primario suelen ser opacas (con la excepción de widgets o aplicaciones ligeras como Calculadora ), un panel secundario puede tener un 80% de acrílico de fondo y el panel terciario puede tener un 60% de acrílico de fondo. El acrílico de fondo difumina todos los elementos detrás del material acrílico activo. Acrílico en la aplicación difumina el contenido dentro de la aplicación.
El acrílico está deshabilitado en una ventana específica cuando la aplicación ya no está seleccionada. Ambos tipos de acrílico están deshabilitados en todo el sistema cuando la transparencia está deshabilitada, cuando el modo de ahorro de batería está habilitado o en hardware de gama baja. Acrílico de fondo se deshabilita cuando se anula la selección de una ventana o en Windows 10 Mobile , HoloLens o modo tableta.
Mica
Mica es un nuevo material opaco introducido en Windows 11 que adquiere el tono del fondo de pantalla del usuario. A diferencia del acrílico que fue diseñado para superficies transitorias (por ejemplo: menús contextuales), Mica está diseñado para usarse en superficies primarias de larga duración.
Escala
Las aplicaciones se escalan en diferentes factores de forma , tamaños de pantalla y de 0D a 3D . Los elementos se adaptan a su tamaño de pantalla y están disponibles en múltiples dimensiones. Los controles conscientes también se clasifican dentro de Scale (por ejemplo, barras de desplazamiento y entradas que se adaptan a diferentes métodos de invocación)
Indeterminado
- Sonido espacial
Ver también
Referencias
enlaces externos
-
Página web oficial
- "Diseño y codificación de aplicaciones para UWP" . Microsoft.
- Gusmorino, Paul; Ostojic, Bojana (8 de mayo de 2017). "Introducción al diseño fluido" . Canal 9 . MSDN.