Fluent Design System (nombre en código Project Neon ), [11] presentado oficialmente como Microsoft Fluent Design System , [12] 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. [13] El nuevo lenguaje de diseño incluye un uso más prominente de efectos de movimiento, profundidad y translucidez. [14]
Otros nombres |
| ||||||||
---|---|---|---|---|---|---|---|---|---|
Autor (es) original (es) | Microsoft | ||||||||
Desarrollador (es) | Microsoft | ||||||||
Versión inicial | 2017 | ||||||||
Liberaciones estables [±] | |||||||||
| |||||||||
Vista previa de la (s) versión (es) [±] | |||||||||
| |||||||||
Repositorio |
| ||||||||
Escrito en | Objective-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 |
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. [15] [16] [17] [18] Más tarde se reveló que fue diseñado en conjunto con Windows 10X , [19] además de la próxima actualización de Windows 11 con un diseño similar. [20]
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 paralelas, efectos de resaltado después del puntero del mouse o movimientos de gestos de entrada, y "materiales falsos" que Metro una vez descargó.
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. [21] Además, en el entorno Windows Holographic , 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 partir de julio de 2019[actualizar], no ha ocurrido. [22]
Revelar el enfoque
Elementos enfocables con borde resplandor a través del enfoque visual. [23]
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. [24] [25] 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. [26]
Agregar / eliminar animaciones
Muestra animaciones para insertar y eliminar elementos de una colección. [27]
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. [28]
Transición de contenido
Se usa cuando solo cambia una parte del contenido de una página. [29]
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. [30]
Desvanecerse
Fundido de entrada y salida para traer y descartar elementos de la vista. [31]
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. [32]
Comentarios de prensa
Cuando se presiona un elemento, retrocede momentáneamente a un segundo plano y luego vuelve a su posición original. Entre los ejemplos de comentarios de la prensa se 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 . [33]
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. [34] [35] Las versiones preliminares de los íconos finales se vieron en el video "Conoce los nuevos íconos para Office 365", [36] antes de que se vieran más cuando se presentó Windows 10X, [37] antes de ser revelado oficialmente en 12 de diciembre de 2019. [38] Estos íconos comenzaron a aparecer a través de las actualizaciones de Microsoft Store para esas aplicaciones, comenzando con Correo y Calendario . [39] [40]
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 en modo tableta. [41]
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. [42] [43] 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) [44] [45]
Indeterminado
- Sonido espacial [46]
Ver también
- Diseño de materiales
- Diseño plano
- Windows Aero
- Metro
Referencias
- ^ "@ fluentui / react - npm" . npm . 2021-04-01 . Consultado el 4 de abril de 2021 .
- ^ "Lanzamiento Microsoft.UI.Xaml v2.5.0 · microsoft / microsoft-ui-xaml" . GitHub . 2020-04-12 . Consultado el 16 de marzo de 2021 .
- ^ "Versión 0.0.11: Fusionar solicitud de extracción # 44 de microsoft / desarrollar · microsoft / fluentui-android" . GitHub . 2021-02-12 . Consultado el 16 de marzo de 2021 .
- ^ "Lanzamiento de las versiones de Bumping para la actualización de la versión (0.2.3) · microsoft / fluentui-apple" . GitHub . 2021-03-09 . Consultado el 16 de marzo de 2021 .
- ^ "Lanzamiento Microsoft.UI.Xaml v2.6.0-prerelease.210315002 · microsoft / microsoft-ui-xaml" . GitHub . 2021-03-17 . Consultado el 18 de marzo de 2021 .
- ^ "@ fluentui / react-native - npm" . npm . 2021-03-15.
- ^ Equipo de Microsoft 365 (12 de marzo de 2020). "UI Fabric está evolucionando hacia Fluent UI - Blog para desarrolladores de Microsoft 365" . Blog para desarrolladores de Microsoft 365 . Consultado el 16 de marzo de 2021 .
- ^ Lewkowicz, Jakub (16 de marzo de 2020). "Microsoft transforma UI Fabric en Fluent UI - SD Times" . ST Times . Consultado el 16 de marzo de 2021 .
- ^ Desarrollo de Office (15 de agosto de 2015). "Presentamos Office UI Fabric, su clave para diseñar complementos para Office - Blog de Microsoft 365" . Blog de Microsoft 365 . Consultado el 16 de marzo de 2021 .
- ^ Tung, Liam (16 de marzo de 2020). "El gran impulso de diseño fluido de Microsoft: los desarrolladores web obtienen una nueva tela de interfaz de usuario de Office | ZDNet" . ZDNet . Consultado el 16 de marzo de 2021 .
- ^ "Fluent Design es la nueva interfaz de usuario moderna de Microsoft para Windows y más" . The Verge . 2017-05-11 . Consultado el 11 de mayo de 2017 .
- ^ "Desarrollador de Windows en Twitter" . Twitter . Consultado el 11 de mayo de 2017 .
- ^ "Lenguaje de diseño fluido" . Microsoft . Consultado el 12 de mayo de 2017 .
- ^ "La nueva apariencia de Windows, Neon, es oficialmente el" Microsoft Fluent Design System " " . Ars Technica . Consultado el 11 de mayo de 2017 .
- ^ "Microsoft muestra sus cambios de Fluent Design en Windows 10" . The Verge . Consultado el 29 de octubre de 2017 .
- ^ "El sistema de diseño fluido de Microsoft amenaza con hacer que Windows se vea bien" . Ars Technica . Consultado el 29 de octubre de 2017 .
- ^ "Una nueva actualización importante de Xbox One revisa el tablero con Fluent Design" . The Verge . Consultado el 29 de octubre de 2017 .
- ^ "La Xbox One está recibiendo una actualización importante hoy, que incluye un panel de control más rápido" . The Verge . Consultado el 29 de octubre de 2017 .
- ^ "Un primer vistazo al nuevo sistema operativo Windows 10X de Microsoft para pantallas duales" . The Verge . 11 de febrero de 2020 . Consultado el 19 de abril de 2020 .
- ^ "Panos Panay en Instagram:" El equipo hizo este video para celebrar llegar a mil millones de MAD en Windows 10 y quería compartirlo con todos ustedes. Ahora, en un momento en que ... " " . Instagram . 19 de marzo de 2020 . Consultado el 19 de abril de 2020 .
- ^ mijacobs. "Revelar lo más destacado: aplicaciones para UWP | Microsoft Docs" . docs.microsoft.com . Consultado el 22 de diciembre de 2017 .
- ^ "Sin diseño fluido Revelar Highlight en el menú Inicio - Actualización de Fall Creator" . answers.microsoft.com . Consultado el 26 de diciembre de 2017 .
- ^ cphilippona (24 de septiembre de 2020). "Revelar focus - aplicaciones para UWP | Microsoft Docs" . docs.microsoft.com . Consultado el 30 de marzo de 2018 .
- ^ Bowden, Zac (19 de mayo de 2017). "Microsoft muestra la función 3D de 'capas de profundidad Z' en su Fluent Design System" . Windows Central . Consultado el 22 de diciembre de 2017 .
- ^ Joyce, Kevin (20 de mayo de 2017). "Microsoft Reveal Z-Depth Layering para dispositivos de realidad mixta de Windows 10" . VRFocus . Consultado el 22 de diciembre de 2017 .
- ^ mijacobs (24 de septiembre de 2020). "Movimiento y animación en aplicaciones para UWP - Aplicaciones para UWP | Microsoft Docs" . docs.microsoft.com . Consultado el 22 de diciembre de 2017 .
- ^ mijacobs (24 de septiembre de 2020). "Movimiento y animación en aplicaciones para UWP - Aplicaciones para UWP | Microsoft Docs" . docs.microsoft.com . Consultado el 30 de marzo de 2018 .
- ^ mijacobs (24 de septiembre de 2020). "Animación conectada - Aplicaciones para UWP | Microsoft Docs" . docs.microsoft.com . Consultado el 31 de diciembre de 2017 .
- ^ mijacobs (24 de septiembre de 2020). "Movimiento y animación en aplicaciones para UWP - Aplicaciones para UWP | Microsoft Docs" . docs.microsoft.com . Consultado el 30 de marzo de 2018 .
- ^ davidvkimball (24 de septiembre de 2020). "Transiciones de página en aplicaciones WUP - aplicaciones UWP" . docs.microsoft.com . Consultado el 27 de noviembre de 2019 .
- ^ mijacobs (24 de septiembre de 2020). "Movimiento y animación en aplicaciones para UWP - Aplicaciones para UWP | Microsoft Docs" . docs.microsoft.com . Consultado el 30 de marzo de 2018 .
- ^ mijacobs (24 de septiembre de 2020). "Cómo usar el control ParallaxView para agregar profundidad y movimiento a su aplicación. - Aplicaciones para UWP | Microsoft Docs" . docs.microsoft.com . Consultado el 22 de diciembre de 2017 .
- ^ mijacobs (24 de septiembre de 2020). "Animaciones de clic del puntero en aplicaciones para UWP - Aplicaciones para UWP | Microsoft Docs" . docs.microsoft.com . Consultado el 31 de diciembre de 2017 .
- ^ "Rediseño de los iconos de la aplicación de Office para adoptar un nuevo mundo de trabajo" . Medio . 29 de noviembre de 2018 . Consultado el 19 de abril de 2020 .
- ^ "Microsoft presenta el nuevo logotipo del navegador Edge que ya no se parece a Internet Explorer" . The Verge . 2 de noviembre de 2019 . Consultado el 19 de abril de 2020 .
- ^ "Conoce los nuevos iconos de Office 365" . 29 de noviembre de 2018 . Consultado el 19 de abril de 2020 .
- ^ "#MicrosoftEvent Live" . 2 de octubre de 2019 . Consultado el 19 de abril de 2020 .
- ^ "El Caleidoscopio del Icono" . Medio . 12 de diciembre de 2019 . Consultado el 19 de abril de 2020 .
- ^ "Iconos icónicos: diseñar el mundo de Windows" . Medio . 20 de febrero de 2020 . Consultado el 19 de abril de 2020 .
- ^ "Microsoft lanza nuevos y coloridos iconos de Windows 10" . The Verge . 20 de febrero de 2020 . Consultado el 19 de abril de 2020 .
- ^ mijacobs. "Material acrílico - Aplicaciones para UWP | Microsoft Docs" . docs.microsoft.com . Consultado el 22 de diciembre de 2017 .
- ^ "Sistema de diseño fluido" . fluent.microsoft.com . Archivado desde el original el 1 de marzo de 2018 . Consultado el 18 de febrero de 2018 .
- ^ Verma, Adarsh (12 de mayo de 2017). "¿Qué es Fluent Design System? ¿Cómo está Microsoft construyendo el sistema operativo más hermoso?" . Fossbytes . Consultado el 18 de febrero de 2018 .
- ^ muhsinking. "Controles del visor de desplazamiento: aplicaciones para UWP | Microsoft Docs" . docs.microsoft.com . Consultado el 22 de diciembre de 2017 .
- ^ "Novedades de Microsoft Fluent Design System 'wave one' para Windows 10" . Windows Central . 2017-06-29 . Consultado el 22 de diciembre de 2017 .
- ^ "Diseño de sonido espacial" . developer.microsoft.com . Consultado el 22 de diciembre de 2017 .
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.