Sistema de diseño fluido

Sistema de diseño creado por Microsoft en 2017

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 de Microsoft Design Language (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; 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 mientras conserva el aspecto limpio que Metro introdujo, Fluent renueva las imágenes de Aero , un enfoque de diseño que se introdujo en Windows Vista y Windows 7 , incluyendo translucidez borrosa, patrones animados de paralaje, sombras proyectadas, efectos de resaltado que siguen los movimientos del puntero del mouse o los gestos de entrada, y "materiales falsos" que Metro alguna vez descartó. ^[21]

Componentes de diseño

Luz

El objetivo de la luz es llamar la atención e iluminar la información, por lo que establece una relación entre la interfaz de usuario y el cursor o puntero. ^[22]

• Revelar resaltado: al pasar el cursor sobre un objeto, el resaltado ilumina los bordes ocultos cercanos, como las listas y los botones del menú de navegación de hamburguesas . Al seleccionarlo, por ejemplo, al hacer clic o tocarlo, aparece rápidamente un efecto de iluminación circular blanca. ^{[22] [23]}
• Revelar foco: elementos enfocables con un brillo en el borde a través del elemento 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 estado eliminando lentamente su uso de efectos de luz en general, proporcionando en cambio intratabilidad a través de animaciones. ^[25]

Profundidad

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

• Capas: las capas dividen una aplicación en una base que es el "lienzo" y el contenido que flota sobre ella. El contenido se puede presentar como una superficie continua o como una tarjeta. ^[28]
• Elevación: La elevación es el uso de sombras para separar elementos de la superficie de la aplicación. Algunos ejemplos son los menús contextuales , las ventanas emergentes o las descripciones emergentes . ^[28]

Movimiento

El movimiento establece una relación entre los elementos de la interfaz de usuario y proporciona una 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]
• Exploración: la exploración se utiliza para explorar más a fondo una aplicación. Por ejemplo, para mostrar más información después de seleccionar un elemento. ^[32]
• Fundido: fundido de entrada y de salida para traer elementos a la vista y eliminarlos de ella. ^[30]
• Paralaje: el paralaje mueve los objetos a distintas velocidades. El fondo se mueve más lento que el contenido que se encuentra sobre él. Por ejemplo, una lista se desplazará más rápido que la imagen de fondo, lo que creará un efecto de profundidad además de movimiento. ^[33]
• Respuesta al presionar: cuando se presiona un elemento, este retrocede momentáneamente hacia el fondo y luego vuelve a su posición original. Algunos ejemplos de respuesta al presionar son los mosaicos dinámicos 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 las superficies de la experiencia del usuario. En el diseño fluido, hay 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 de la interfaz de usuario interactiva. Los materiales transparentes, como el humo, se utilizan para enfatizar las superficies inmersivas: ^[35]

• Acrílico: El material acrílico crea un efecto translúcido y borroso con un ligero efecto de ruido. Mientras que en Windows 10, el acrílico se usaba en superficies grandes (como paneles laterales). Con Windows 11, las superficies primarias han abandonado el acrílico en favor de Mica. En cambio, 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. ^[36] A diferencia del acrílico, que fue diseñado para superficies transitorias (por ejemplo, menús contextuales), MMC está diseñado 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, con el fin de 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 se desactivan en todo el sistema cuando se desactiva la transparencia, cuando se habilita el modo de ahorro de batería o en hardware de gama baja. Background Acrylic se desactiva cuando se deselecciona una ventana o en Windows 10 Mobile , HoloLens o modo tableta. ^[37]

Escala

Las aplicaciones se escalan en distintos 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 la 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]} Se vieron versiones preliminares de los íconos finales en el video "Conozca los nuevos íconos para Office 365", ^[45] antes de que se vieran más cuando se presentó Windows 10X, ^[46] antes de ser revelado oficialmente 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 Mail y Calendar . ^{[48] [49]}

Iconos fluidos de Segoe

Segoe Fluent Icons es un 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). ^[50] Los iconos son redondeados, alejándose de los iconos angulares y rectos de Segoe MDL2 que predominaban 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 hizo que más de 1500 emojis fueran de código abierto el 10 de agosto de 2022. ^{[53] [54]} Estos nuevos emojis Fluent se apartan del estilo plano y delineado de la biblioteca de emojis anterior utilizada en Windows 10 y, en cambio, adoptan una sensación de Play-Doh 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 fluidas son multiplataforma y se pueden implementar con diferentes marcos. ^[56] Fluent UI React es un conjunto de componentes React que implementan el Fluent Design System de Microsoft. Proporciona un conjunto de componentes prediseñados que se pueden usar 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]

Véase también

• Advaita
• Diseño de materiales
• Diseño plano
• Windows Aero
• Metro

Referencias

1. "Fluent UI React". NPM . 2024-09-06 . Consultado el 2024-09-09 .
2. "Lanzamiento de Microsoft.UI.Xaml v2.5.0 · microsoft/microsoft-ui-xaml". GitHub . 2020-04-12 . Consultado el 2024-09-09 .
3. "Versión 0.0.11: Merge pull request #44 from microsoft/develop · microsoft/fluentui-android". GitHub . 2021-02-12 . Consultado el 2021-03-16 .
4. "Versiones de lanzamiento para actualización de versión (0.2.3) · microsoft/fluentui-apple". GitHub . 2021-03-09 . Consultado el 2021-03-16 .
5. "Versión Microsoft.UI.Xaml v2.6.0-prerelease.210315002 · microsoft/microsoft-ui-xaml". GitHub . 2021-03-17 . Consultado el 2021-03-18 .
6. "@fluentui/react-native - npm". npm . 15 de marzo de 2021.
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}}: CS1 maint: nombres numéricos: lista de autores ( enlace )
8. 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 .
9. Office Dev (15 de agosto de 2015). "Presentación de Office UI Fabric: la 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 diseño de Fluent de Microsoft: los desarrolladores web obtienen una nueva interfaz de usuario de Office Fabric". 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". The Verge . 2017-05-11 . Consultado el 2017-05-11 .
12. "Windows Developer en Twitter". Twitter . Consultado el 11 de mayo de 2017 .
13. "Lenguaje de diseño fluido". Microsoft . Consultado el 12 de mayo de 2017 .
14. "El nuevo aspecto de Windows, Neon, es oficialmente el "Microsoft Fluent Design System"". Ars Technica . 11 de mayo de 2017 . Consultado el 11 de mayo de 2017 .
15. "Microsoft muestra los cambios de Fluent Design en Windows 10". The Verge . Consultado el 29 de octubre de 2017 .
16. "El sistema de diseño fluido de Microsoft amenaza con hacer que Windows luzca mejor". Ars Technica . Consultado el 29 de octubre de 2017 .
17. "Una nueva e importante actualización de Xbox One renueva el panel de control con Fluent Design". The Verge . Consultado el 29 de octubre de 2017 .
18. "La Xbox One recibirá hoy una importante actualización, que incluye un panel de control más rápido". The Verge . Consultado el 29 de octubre de 2017 .
19. "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 .
20. "Panos Panay en Instagram: "El equipo hizo este video para celebrar haber llegado a los 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 adelanta un diseño similar al de Windows 7 Aero para Windows 11". Windows Latest . Consultado el 5 de abril de 2023 .
22. mijacobs. "Mostrar resaltado - Aplicaciones UWP | Microsoft Docs". docs.microsoft.com . Consultado el 22 de diciembre de 2017 .
23. Blog, Windows Developer (4 de agosto de 2017). "Creación de materiales y luces en la capa visual". Blog de Windows Developer . Consultado el 4 de abril de 2023 .
24. cphilippona (24 de septiembre de 2020). «Revelar foco: aplicaciones para UWP | Microsoft Docs». ​​docs.microsoft.com . Consultado el 30 de marzo de 2018 .
25. "Pregunta: ¿Es posible volver a mostrar? · Problema n.° 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 'Z-depth layers' en su Fluent Design System". 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". VRFocus . Archivado desde el original el 13 de agosto de 2020. Consultado el 22 de diciembre de 2017 .
28. hickeys. "Capas y elevación en Windows 11 - Aplicaciones de Windows". learn.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 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 UWP". docs.microsoft.com . Consultado el 27 de noviembre de 2019 .
33. mijacobs (24 de septiembre de 2020). "Cómo usar el control ParallaxView para agregar profundidad y movimiento a tu aplicación. - Aplicaciones 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. hickeys. "Materiales utilizados en aplicaciones de Windows 11 - Aplicaciones de Windows". learn.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 UWP | Microsoft Docs». ​​docs.microsoft.com . Consultado el 22 de diciembre de 2017 .
38. "Fluent Design System". fluent.microsoft.com . Archivado desde el original el 2018-03-01 . Consultado el 2018-02-18 .
39. Verma, Adarsh ​​(12 de mayo de 2017). "¿Qué es Fluent Design System? ¿Cómo está Microsoft creando el sistema operativo más atractivo?". Fossbytes . Consultado el 18 de febrero de 2018 .
40. muhsinking. "Controles del visor de desplazamiento - Aplicaciones UWP | Microsoft Docs". docs.microsoft.com . Consultado el 22 de diciembre de 2017 .
41. "Novedades de la primera ola de Microsoft Fluent Design System para Windows 10". Windows Central . 2017-06-29 . Consultado el 2017-12-22 .
42. "Rediseño de los íconos de las aplicaciones de Office para adoptar un nuevo mundo laboral". Medium . 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 al de Internet Explorer". The Verge . 2 de noviembre de 2019 . Consultado el 19 de abril de 2020 .
44. Hickeys. "Pautas de diseño para iconos de aplicaciones de Windows - Aplicaciones de Windows". learn.microsoft.com . Consultado el 4 de abril de 2023 .
45. "Conoce los nuevos iconos de 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". Medium . 12 de diciembre de 2019 . Consultado el 19 de abril de 2020 .
48. "Iconos icónicos: diseñando el mundo de Windows". Medium . 20 de febrero de 2020 . Consultado el 19 de abril de 2020 .
49. "Microsoft presenta nuevos y coloridos íconos para Windows 10". The Verge . 20 de febrero de 2020 . Consultado el 19 de abril de 2020 .
50. chupetones. "Iconografía en Windows 11 - Aplicaciones de Windows". learn.microsoft.com . Consultado el 4 de abril de 2023 .
51. chupetones. "Iconos de activos de Segoe MDL2: aplicaciones de Windows". learn.microsoft.com . Consultado el 4 de abril de 2023 .
52. "Nuevos diseños de emojis fluidos de Microsoft". Emojipedia . 2021-07-15 . Consultado el 2023-04-04 .
53. Carrasqueira, João (10 de agosto de 2022). "Microsoft publica en código abierto sus emojis de Windows 11 para que todos los usen". XDA Developers . Consultado el 4 de abril de 2023 .
54. Diseño, Microsoft (10 de agosto de 2022). "Diseño en código abierto". Microsoft Design . 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. Bridge, Karl. «Biblioteca de interfaz de usuario de Windows (WinUI) 3: aplicaciones de Windows». Microsoft . Consultado el 5 de abril de 2023 .
58. "Fluent UI React". FluentUI . 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 at master · microsoft/fluentui". GitHub . Consultado el 5 de abril de 2023 .
61. brookdozer. "Descripción general de los componentes web de Fluent UI". Microsoft . Consultado el 5 de abril de 2023 .

Enlaces externos

• Sitio web oficial
• "Diseñar y codificar aplicaciones UWP". Microsoft.
• Gusmorino, Paul; Ostojic, Bojana (8 de mayo de 2017). "Presentación de Fluent Design". Canal 9. MSDN.