Earlier this week at Build 2018 developer conference, Microsoft
revealed the new improvements to Fluent Design System. In a
dedicated session named “Fluent Design: Evolving out Design
System”, Microsoft announced what’s coming to the Fluent Design
system with next major Windows 10 update.
Fluent Desing System is a revamp of MSDL2 (Microsoft Design
Language 2). Fluent Design System is all about delivering a
consistent experience to a user across the device. One of the
biggest upcoming changes in Fluent Design system
is command bar flyout. Rather than showing the tools and
options at the top of the screen, the command bar flyout allows
developers to integrate various tools and options inline where
a user is working on.
Microsoft is integrating command bar flyout in OneNote
Universal Windows Platform app and it will be available to
Windows Insiders in upcoming weeks.
Another exciting feature is z-depth which will allow developers
to specify the stack order of an element. So basically, an
element with greater stack order is always in front of an
element with a lower stack order. Furthermore, Microsoft also
bringing the all-new way of managing color palette for an app.
Developers will able to manage each color controller
The pop-up will also have a layer of transparency as well as
acrylic effects. Microsoft also made some changes to the
navigation guidelines as well. This means company finally
acknowledged the 2 back button issue in the app. You can check
out the new navigation pane in an image below.
Basically, when Microsoft first launched the Universal Windows
Platform, the apps were designed by focusing the touchscreen
device, but it is quite painful for the users with mouse and
keyboard, and it’s one the reason why Microsoft is offering the
standard and compact views now.
So with upcoming changes in Fluent Design Element, the user
interaction with an app will automatically vary. Sure, the
developers need to make lots of changes to the ground app
written UWP app. But on other hand, there will be a huge
benefit for the Progressive Web Apps.