Sistema Fluent Design de Microsoft:
Este sistema es un diseño pensado para un mundo complejo en el que el entorno digital está lleno de diseños en continua transformación y de experiencias sensoriales.
Trata de mejorar el aspecto de Windows 10 aportando un diseño intuitivo y fluido con características de transparencia similares a ‘Windows Aero’ pero haciendo más hincapié en las interfaces táctiles.
Fluent Design permite la creación de experiencias más expresivas y atractivas que funcionan continuamente entre dispositivos, desde pantallas grandes hasta pantallas pequeñas y sin pantallas, de una manera que impulsará un mayor compromiso y amor por tus aplicaciones.
«Piensa en el diseño del movimiento como si se tratara de una película.
Las transiciones sin cortes te mantienen centrado en la historia y aportan experiencias.
Podemos trasladar esa sensación a nuestros diseños, llevando a las personas de una tarea a otra con facilidad cinematográfica» – equipo de Microsoft.
Los 5 elementos clave de Fluent Design Microsoft
Los parámetros de diseño se basan en cinco elementos importantes:
- El primero de ellos es la luz, la iluminación, Microsoft quiere que las aplicaciones cobren vida a través de donde reciban la luz.
- El segundo elemento clave es la profundidad, esto nos ofrece que nuestro sistema operativo cobre de tres dimensiones. Así mismo, va de la mano con la realidad aumentada y la realidad virtual. Es clave que Microsoft alcanzase una tercera dimensión.
- Movimiento, las interfaces no deben ser estáticas, deben ser dinámicas para el contenido. Así podremos disfrutar de unas experiencias únicas.
- El siguiente elemento es el material, donde el desarrollador podrá ofrecer un estilo único a su app.
- Y por último, la escala, manteniendo el diseño inicial y la base de UWP, la escalabilidad es clave. La app se adapta a los diferentes tamaños de pantalla.
Elementos integrados
- Efecto Acrylic: consiste en la integración de elementos traslúcidos, de color y de luz sobre la interfaz.
Se integró con sus efectos derivados del Fluent Design.
- Desenfoque y semitransparencia: se trata de integrar de los efectos traslúcidos de transparencia en los que está totalmente fundido.
Se integró en la Barra de Tareas, en Inicio y en la mayoría de aplicaciones de Microsoft.
Su transparencia atraviesa el color de fondo de detrás de la aplicación haciendo así posible que el color se vea en lo translúcido.
- Todo 3D: Si bien en otras interfaces de diseño como ‘Metro’ la interfaz era plana de dos dimensiones y en ’Continuum’ se llegaba a mejorar, ahora el diseño de Fluent Design es de tres dimensiones.
Todos los objetos 3D se encuentran dentro del sistema de la interfaz integrados de forma nativa.
Evolución
Microsoft comenzó hace más de 10 años con la idea de establecer un sistemas de diseño.
Varios equipos de productos se fusionaron y algunos de lo pioneros del diseño comenzaron a trabajar juntos. Dicho trabajo dió origen al primer lenguaje de diseño compartido.
El proyecto de la nueva interfaz nació bajo el nombre formal de ‘Project Neon’
La plataforma se creó sobre el Microsoft Design Language 2 (MDL2).
El 2 viene de que la primera versión de ese lenguaje es lo que todos conocíamos como la interfaz ‘Metro’, que tuvo que cambiar de nombre por disputas legales con una cadena de supermercados alemana.
Algo parecido ocurrió con ‘Neon’, nombre que al parecer ya estaba siendo utilizado por otra empresa.
Por este motivo, Microsoft ha decidido llamarlo directamente Microsoft Fluent Design System (MFDS).
Ésta evolución añade básicamente dos nuevos factores a la interfaz de Windows 10:
- Transparencias con blur
- Animaciones
Aplicaciones Fluent Design
Las reglas de diseño de Microsoft explican como aplicar los principio de diseño Fluent a las aplicaciones.
¿Qué tipo de aplicaciones?
Mientras que muchas de las reglas o directrices pueden aplicarse a cualquier plataforma, han creado para UWP (la plataforma Universal de Windows) para admitir Fluent Design.
Las características de Fluent Design están integradas en UWP. Algunas de estas características son automáticas.
No tienes que escribir código adicional para poder usarlas.
Otras características, como acrílico, son opcionales; puedes agregarlas a tu aplicación escribiendo el código que las incluye.
También están añadiendo controles de UWP en el escritorio para poder mejorar el aspecto, la sensación y la funcionalidad de las aplicaciones de Windows o WPF existentes con características de Fluent Design.
Relación UX Fluent Design
Microsoft comenzó a agregar elementos de Fluent Design a las aplicaciones de Office en 2017. Al principio, Microsoft agregó el material acrílico de Fluent Design a la barra lateral de las aplicaciones de Office.
En junio de 2018 Microsoft reveló que están trabajando en la actualización de UX basada en Fluent Design.
Como parte de la actualización, Microsoft alineó toda la suite Office 365 en tipografía e iconografía.
Los usuarios pueden experimentar el encabezado compartido y la misma cuadrícula en todos los productos, y el elemento de profundidad se agrega al diseño para centrarse en lo que importa. Microsoft también ha mejorado la paleta de colores, los tonos son más claros y vibrantes.
El equipo de diseño de Microsoft hizo una publicación en su blog sobre cómo diseñaron esta nueva UX actualizada para aplicaciones de Office.