Sistema de diseño fluido

Sistema de diseño creado por Microsoft en 2017

Fluent Design System (con 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 e interacciones utilizados dentro del software diseñado para todos los dispositivos y plataformas Windows 10 y Windows 11 . 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 destacado de efectos de movimiento, profundidad y translucidez. ^[14]

La transición a Fluent es un proyecto a largo plazo; Algunos aspectos del diseño comenzaron a aparecer en Windows 10 a partir de la "Fall Creators Update" 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 estaba diseñado junto con Windows 10X , ^[19] además de Windows 11 , que tiene un diseño similar. ^[20]

Comparado con Metro y Aero

Los principios clave de Fluent, o "bloques" (luz, profundidad, movimiento, material y escala), se alejan del concepto plano que Metro había definido y, al tiempo que conserva la apariencia limpia que Metro presentó, Fluent renueva las imágenes de Aero , un enfoque de diseño que se introdujo en Windows Vista y Windows 7 , que incluye translucidez borrosa, patrones animados de paralaje, sombras paralelas, efectos de resaltado siguiendo el puntero del mouse o movimientos de gestos de entrada y "materiales falsos" que Metro una vez descartó. ^[21]

Componentes de diseño

Luz

El propósito de la luz es llamar la atención e iluminar información. Por tanto, la luz establece una relación entre la UI y el cursor o puntero. ^[22]

• Revelar resaltado: al pasar el cursor, el resaltado de revelación 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. ^{[22] [23]}
• Revelar enfoque: los elementos enfocables con un borde brillan a través del objeto visual de enfoque. ^[24]

Con WinUI 2.6, Microsoft ha descontinuado el resaltado de revelación para que coincida con sus ofertas web y móviles, que no ofrecen resaltado de revelación. ^[25] Además, con el lanzamiento de Windows 11, Microsoft ha ido eliminando lentamente el uso de efectos de luz en general, proporcionando en su lugar intratabilidad a través de animaciones. ^[25]

Profundidad

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

• Capas: Las capas dividen una aplicación en la base, que es el "lienzo", y el contenido que flota encima. El contenido se puede presentar como una superficie continua o como una tarjeta. ^[28]
• Elevación: La elevación es el uso de separar elementos de la superficie de la aplicación mediante el uso de sombras. Los ejemplos incluyen menús contextuales , ventanas emergentes o información sobre herramientas . ^[28]

Movimiento

Motion establece una relación entre los elementos de la interfaz de usuario y proporciona continuidad en la experiencia. ^[29]

• Agregar/eliminar animaciones: enumera animaciones para insertar y eliminar elementos de una colección. ^[30]
• Animaciones conectadas: las animaciones conectadas son transiciones de elementos. Durante un cambio de contenido, un elemento parece continuar volando por la aplicación. ^[31]
• Transición de contenido: se utiliza cuando solo cambiará una parte del contenido de una página. ^[30]
• Explorar: Explorar se utiliza cuando se navega más profundamente en una aplicación. Por ejemplo, mostrar más información después de seleccionar un elemento. ^[32]
• Fundido: aparición y desaparición gradual para mostrar elementos y ocultarlos de la vista. ^[30]
• Parallax: Parallax mueve objetos a diferentes velocidades. El fondo se mueve más lento 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 del movimiento. ^[33]
• Comentarios de prensa: cuando se presiona un elemento, pasa momentáneamente a un segundo plano y luego regresa a su posición original. Ejemplos de comentarios de 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 . ^[34]

Material

Los materiales son efectos visuales aplicados a superficies 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. Se utilizan materiales transparentes como el humo para enfatizar las superficies inmersivas: ^[35]

• Acrílico: El material acrílico crea un efecto difuminado y translúcido con un ligero efecto de ruido. Mientras que en Windows 10, el acrílico se utilizaba en grandes superficies (como paneles laterales). Con Windows 11, las superficies primarias han abandonado el acrílico en favor de la mica. En cambio, Acrylic se utiliza 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 adquiere el tinte del fondo de pantalla del usuario. ^[36] A diferencia del acrílico, que fue diseñado para superficies transitorias (por ejemplo, menús contextuales), MMC está diseñado para su uso en superficies primarias duraderas. Al utilizar diferentes opacidades, las aplicaciones pueden crear una jerarquía visual.
• Humo: Smoke 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. ^[35]

Tanto Acrylic como Mica se desactivan en una ventana específica cuando la aplicación ya no está seleccionada. Además, ambos 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. Background Acrylic se desactiva cuando se anula la selección de una ventana o en el modo Windows 10 Mobile , HoloLens o tableta. ^[37]

Escala

Las aplicaciones se escalan en diferentes factores de forma , tamaños de pantalla y de 0D a 3D . Los elementos se adaptan al tamaño de su pantalla y están disponibles en múltiples dimensiones. ^{[38] [39]} 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) ^{[40] [41]}

Iconografía

Iconos de aplicaciones

Se han creado nuevos íconos 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. ^{[42] [43] [44]} Las versiones preliminares de los íconos finales se detectaron en el video "Conozca los nuevos íconos para Office 365", ^[45] antes de que se detectaran más cuando se presentó Windows 10X, ^[46] antes de ser oficialmente revelado el 12 de diciembre de 2019. ^[47] Estos íconos comenzaron a aparecer a través de las actualizaciones de Microsoft Store para esas aplicaciones, comenzando con Correo y Calendario . ^{[48] ​​[49]}

Iconos fluidos de Segoe

Segoe Fluent Icons es un conjunto de íconos diseñados por Microsoft para usar en sus productos y servicios junto con el rediseño de la fuente Segoe UI (Segoe UI Variable). ^[50] Los íconos son redondeados a partir de los íconos angulares y rectos de Segoe MDL2 que predominaron durante la era "Metro". ^[51]

Emojis fluidos

El 15 de julio de 2021, Microsoft anunció un rediseño completo de su biblioteca de emojis para alinearse con su Fluent Design. ^[52] Con el objetivo de hacer que Windows sea lo más consistente y accesible posible, Microsoft creó más de 1500 emoji de código abierto el 10 de agosto de 2022. ^{[53] [54]} Estos nuevos emojis de Fluent se apartan del estilo plano y delineado de la biblioteca de emojis anterior utilizada. en Windows 10 y, en su lugar, adopte una sensación de Play-Doh en 3D . ^[52] Además, Microsoft ha declarado sus planes de animar la mayoría de ellos. ^[55] Si bien los emojis animados en 3D se pueden ver en aplicaciones como Microsoft Teams y Skype , Windows 11 usa variantes planas.

Implementación

Las pautas de diseño fluido son multiplataforma y se pueden implementar con diferentes marcos. ^[56] Fluent UI React es un conjunto de componentes de React que implementan el sistema Fluent Design de Microsoft. Proporciona un conjunto de componentes prediseñados que se pueden utilizar para crear aplicaciones para Windows , iOS , Android , macOS y la web . Además, WinUI es un marco de interfaz de usuario nativo para crear aplicaciones de Windows. Está construido sobre Fluent Design System y proporciona un conjunto de controles prediseñados. ^[57]

Ver también

• Adwaita
• Sistema de diseño de carbono de IBM
• Diseño de materiales
• Diseño plano
• Ventanas Aero
• Metro

Referencias

1. "@fluentui/react - npm". npm . 2021-04-01 . Consultado el 4 de abril de 2021 .
2. "Lanzamiento de Microsoft.UI.Xaml v2.5.0 · microsoft/microsoft-ui-xaml". GitHub . 2020-04-12 . Consultado el 16 de marzo de 2021 .
3. "Versión 0.0.11: fusionar la solicitud de extracción n.º 44 de microsoft/develop · microsoft/fluentui-android". GitHub . 2021-02-12 . Consultado el 16 de marzo de 2021 .
4. "Lanzar versiones mejoradas 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 .
5. "Lanzamiento de Microsoft.UI.Xaml v2.6.0-prerelease.210315002 · microsoft/microsoft-ui-xaml". GitHub . 2021-03-17 . Consultado el 18 de marzo de 2021 .
6. "@fluentui/react-native - npm". npm . 2021-03-15.
7. 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 .{{cite web}}: Mantenimiento CS1: nombres numéricos: lista de autores ( enlace )
8. Lewkowicz, Jakub (16 de marzo de 2020). "Microsoft transforma UI Fabric en Fluent UI - SD Times". Tiempos ST . Consultado el 16 de marzo de 2021 .
9. Desarrollador de Office (15 de agosto de 2015). "Presentación de 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 .
10. Tung, Liam (16 de marzo de 2020). "El gran impulso de Microsoft en el diseño Fluent: los desarrolladores web obtienen un nuevo Office UI Fabric | ZDNet". ZDNet . Consultado el 16 de marzo de 2021 .
11. "Fluent Design es la nueva interfaz de usuario moderna de Microsoft para Windows y más". El borde . 2017-05-11 . Consultado el 11 de mayo de 2017 .
12. "Desarrollador de Windows en Twitter". Gorjeo . Consultado el 11 de mayo de 2017 .
13. "Lenguaje de diseño fluido". Microsoft . Consultado el 12 de mayo de 2017 .
14. "La nueva apariencia de Windows, Neon, es oficialmente el" Microsoft Fluent Design System"". Ars Técnica . 11 de mayo de 2017 . Consultado el 11 de mayo de 2017 .
15. "Microsoft muestra sus cambios de Fluent Design en Windows 10". El borde . Consultado el 29 de octubre de 2017 .
16. "El sistema Fluent Design de Microsoft amenaza con hacer que Windows se vea bien". Ars Técnica . Consultado el 29 de octubre de 2017 .
17. "Una nueva actualización importante de Xbox One revisa el tablero con Fluent Design". El borde . Consultado el 29 de octubre de 2017 .
18. "La Xbox One recibirá hoy una actualización importante, incluido un panel de control más rápido". El borde . Consultado el 29 de octubre de 2017 .
19. "Un primer vistazo al nuevo sistema operativo Windows 10X de Microsoft para pantallas duales". El borde . 11 de febrero de 2020 . Consultado el 19 de abril de 2020 .
20. "Panos Panay en Instagram:" El equipo hizo este video para celebrar haber llegado a mil millones de MAD en Windows 10 y quería compartirlo con todos ustedes. Ahora en un momento en el que…"". Instagram . 19 de marzo de 2020. Archivado desde el original el 25 de diciembre de 2021 . Consultado el 19 de abril de 2020 .
21. Parmar, Mayank (13 de febrero de 2022). "Microsoft muestra un diseño similar a Windows 7 Aero para Windows 11". Windows más reciente . Consultado el 5 de abril de 2023 .
22. mijacobs. "Mostrar lo más destacado: aplicaciones para UWP | Microsoft Docs". docs.microsoft.com . Consultado el 22 de diciembre de 2017 .
23. Blog, desarrollador de Windows (4 de agosto de 2017). "Creación de Materiales y Luces en la Capa Visual". Blog para desarrolladores de Windows . Consultado el 4 de abril de 2023 .
24. cphilippona (24 de septiembre de 2020). "Revelar enfoque: aplicaciones para UWP | Microsoft Docs". docs.microsoft.com . Consultado el 30 de marzo de 2018 .
25. "Pregunta: ¿Es posible devolver la revelación? · Número 4011 · microsoft/microsoft-ui-xaml". GitHub . Consultado el 15 de julio de 2021 .
26. Bowden, Zac (19 de mayo de 2017). "Microsoft muestra la función 3D 'capas de profundidad Z' en su sistema Fluent Design". Windows Central . Consultado el 22 de diciembre de 2017 .
27. Joyce, Kevin (20 de mayo de 2017). "Microsoft revela capas de profundidad Z para dispositivos de realidad mixta con Windows 10". Enfoque VR . Archivado desde el original el 13 de agosto de 2020 . Consultado el 22 de diciembre de 2017 .
28. chupetones ab. "Capas y elevación en Windows 11: aplicaciones de Windows". aprender.microsoft.com . Consultado el 4 de abril de 2023 .
29. 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 .
30. 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 .
31. mijacobs (24 de septiembre de 2020). "Animación conectada: aplicaciones para UWP | Microsoft Docs". docs.microsoft.com . Consultado el 31 de diciembre de 2017 .
32. davidvkimball (24 de septiembre de 2020). "Transiciones de página en aplicaciones WUP: aplicaciones para UWP". docs.microsoft.com . Consultado el 27 de noviembre de 2019 .
33. mijacobs (24 de septiembre de 2020). "Cómo utilizar 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 .
34. 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 .
35. chupetones ab. "Materiales utilizados en aplicaciones de Windows 11: aplicaciones de Windows". aprender.microsoft.com . Consultado el 4 de abril de 2023 .
36. "Materiales utilizados en aplicaciones de Windows 11: aplicaciones de Windows". docs.microsoft.com . Consultado el 5 de julio de 2021 .
37. mijacobs. "Material acrílico: aplicaciones para UWP | Microsoft Docs". docs.microsoft.com . Consultado el 22 de diciembre de 2017 .
38. "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 .
39. Verma, Adarsh ​​(12 de mayo de 2017). "¿Qué es Fluent Design System? ¿Cómo está construyendo Microsoft el sistema operativo más hermoso?". Fosbytes . Consultado el 18 de febrero de 2018 .
40. muhhundimiento. "Controles del visor de desplazamiento: aplicaciones para UWP | Microsoft Docs". docs.microsoft.com . Consultado el 22 de diciembre de 2017 .
41. "¿Novedades de la 'ola uno' de Microsoft Fluent Design System para Windows 10?". Windows Central . 2017-06-29 . Consultado el 22 de diciembre de 2017 .
42. "Rediseño de los iconos de las aplicaciones de Office para adoptar un nuevo mundo laboral". Medio . 29 de noviembre de 2018 . Consultado el 19 de abril de 2020 .
43. "Microsoft presenta el nuevo logotipo del navegador Edge que ya no se parece a Internet Explorer". El borde . 2 de noviembre de 2019 . Consultado el 19 de abril de 2020 .
44. chupetones. "Pautas de diseño para iconos de aplicaciones de Windows: aplicaciones de Windows". aprender.microsoft.com . Consultado el 4 de abril de 2023 .
45. "Conoce los nuevos íconos para Office 365". YouTube . 29 de noviembre de 2018 . Consultado el 19 de abril de 2020 .
46. "#MicrosoftEvent Live". YouTube . 2 de octubre de 2019 . Consultado el 19 de abril de 2020 .
47. "El caleidoscopio de iconos". Medio . 12 de diciembre de 2019 . Consultado el 19 de abril de 2020 .
48. "Iconos icónicos: diseñando el mundo de Windows". Medio . 20 de febrero de 2020 . Consultado el 19 de abril de 2020 .
49. "Microsoft lanza nuevos y coloridos iconos de Windows 10". El borde . 20 de febrero de 2020 . Consultado el 19 de abril de 2020 .
50. chupetones. "Iconografía en Windows 11: aplicaciones de Windows". aprender.microsoft.com . Consultado el 4 de abril de 2023 .
51. chupetones. "Iconos de activos de Segoe MDL2: aplicaciones de Windows". aprender.microsoft.com . Consultado el 4 de abril de 2023 .
52. "Nuevos diseños de emoji fluidos de Microsoft". Emojipedia . 2021-07-15 . Consultado el 4 de abril de 2023 .
53. Carrasqueira, João (10 de agosto de 2022). "Microsoft abre el código fuente de sus emoji de Windows 11 para que todos los usen". Desarrolladores XDA . Consultado el 4 de abril de 2023 .
54. Diseño, Microsoft (10 de agosto de 2022). "Diseñar en código abierto" . Diseño de Microsoft . Consultado el 4 de abril de 2023 .
55. Diseño, Microsoft (22 de noviembre de 2021). "Emocionalidad en el trabajo". Diseño de Microsoft . Consultado el 4 de abril de 2023 .
56. "Inicio: interfaz de usuario fluida". Microsoft . Consultado el 5 de abril de 2023 .
57. Puente, Karl. "Biblioteca de interfaz de usuario de Windows (WinUI) 3: aplicaciones de Windows". Microsoft . Consultado el 5 de abril de 2023 .
58. "Reacción fluida de la interfaz de usuario". Interfaz de usuario fluida . Consultado el 5 de abril de 2023 .
59. VitaRox. "Fluent UI React v9: novedades y diferencias". Microsoft . Consultado el 5 de abril de 2023 .
60. "fluentui/packages/web-components en master · microsoft/fluentui". GitHub . Consultado el 5 de abril de 2023 .
61. topadora de arroyos. "Descripción general de los componentes web de la interfaz de usuario fluida". Microsoft . Consultado el 5 de abril de 2023 .

enlaces externos

• Página web oficial
• "Diseñar y codificar aplicaciones para UWP". Microsoft.
• Gusmorino, Pablo; Ostojic, Bojana (8 de mayo de 2017). "Presentación del diseño fluido". Canal 9 . MSDN.