Jump to content

Fluent Design System

From Wikipedia, the free encyclopedia
(Redirected from Fluent Design)
Fluent Design System
Other names
  • Fluent UI
  • Microsoft Fluent Design System
Original author(s)Microsoft
Developer(s)Microsoft
Initial release2017; 7 years ago (2017)
Release(s)
Stable release(s) [±]
Web8.120.8 / September 6, 2024; 2 months ago (2024-09-06)[1]
Windows2.8.5 / July 10, 2023; 16 months ago (2023-07-10) [2]
Preview release(s) [±]
Android0.0.11 / February 12, 2021; 3 years ago (2021-02-12) [3]
iOS
macOS		0.2.3 / March 9, 2021; 3 years ago (2021-03-09)[4]
Windows2.6.0-prerelease.210315002 / March 17, 2021; 3 years ago (2021-03-17) [5]
Cross-platform0.23.3 / March 15, 2021; 3 years ago (2021-03-15) [6]
Repository
More Information
Written inObjective-C, C++, C#, TypeScript, Kotlin, Swift, JavaScript
Operating systemAndroid, iOS, macOS, Windows, Web browser
PlatformARM, x86-64
Predecessor
TypeDesign language software
LicenseMIT License
Websitedeveloper.microsoft.com/fluentui

Fluent Design System (codenamed "Project Neon"),[11] officially unveiled as Microsoft Fluent Design System,[12] is a design language developed in 2017 by Microsoft. Fluent Design is a revamp of Microsoft Design Language 2 (sometimes erroneously known as "Metro", the codename of Microsoft Design Language 1) that includes guidelines for the designs and interactions used within software designed for all Windows 10 and Windows 11 devices and platforms. The system is based on five key components: light, depth, motion, material, and scale.[13] The new design language includes more prominent use of motion, depth, and translucency effects.[14]

The transition to Fluent is a long-term project; aspects of the design started appearing in Windows 10 beginning with the "Fall Creators Update" released in October 2017, as well as an update to the Xbox One system software released alongside it.[15][16][17][18] It was later revealed to be designed in conjunction with Windows 10X,[19] in addition to Windows 11 which has a similar design.[20]

Compared to Metro and Aero

[edit]

Fluent's key principles, or "blocks" (Light, Depth, Motion, Material, and Scale), turn away from the flat concept Metro had defined, and while preserving the clean look and feel Metro introduced, Fluent renews the visuals of Aero, a design approach that was introduced in Windows Vista and Windows 7, including blurred translucency, parallax animated patterns, drop shadows, highlight effects following mouse pointer or input gesture movements, and "faux materials" Metro once discarded.[21]

Aero
Metro
Fluent

Design components

[edit]

Light

[edit]
Light
Reveal Highlight
Reveal Focus

The purpose of light is to draw attention and illuminate information. Therefore, light establishes a relationship between the UI and the cursor or pointer.[22]

  • Reveal highlight: Upon hovering, the reveal highlight illuminates nearby hidden borders on objects such as hamburger navigation menu lists and buttons. Upon selection, such as by clicking or tapping, a white circular illumination effect quickly appears.[22][23]
  • Reveal focus: Focusable items with a border glow via the focus visual.[24]

With WinUI 2.6, Microsoft has discontinued reveal highlight to match their web and mobile offerings, which do not offer reveal highlight.[25] Furthermore, with the release of Windows 11, Microsoft has slowly been removing its use of light effects in general, instead providing intractability though animations.[25]

Depth

[edit]

Depth is added to content through layering in the z-axis. Depth is presented via drop shadows and Z-depth layering.[26][27] This is especially apparent in the redesigned Office app in 2019. In Windows 11, the use of depth is expanded by overlapping different surfaces with different opacities of the Mica material.

  • Layering: Layering divides an app into the base which is the "canvas" and the content which floats on top. The content can be presented as a continuous surface or as a card.[28]
  • Elevation: Elevation is the use of separating elements from the app surface through the use of shadows. Examples include context menus, pop-ups or tooltips.[28]

Motion

[edit]

Motion establishes a relationship between UI elements and provides a continuity in the experience.[29]

  • Add/delete animations: List animations for inserting and removing items from a collection.[30]
  • Connected animations: Connected animations are item transitions. During a content change, an element appears to continue by flying across the app.[31]
  • Content transition: Used when only a portion of content on a page will change.[30]
  • Drill: Drill is used when navigating deeper into an app. For example, displaying more information after an item is selected.[32]
  • Fade: fade -in and fade-out to bring items into and dismiss them from view.[30]
  • Parallax: Parallax moves objects at different rates. The background moves slower than the content above it. For example, a list will scroll faster than the background image, creating a depth effect in addition to motion.[33]
  • Press feedback: When an item is pressed, it momentarily recedes into the background and then returns to its original position. Examples of press feedback include the Start menu live tiles, Action Center quick actions, and Microsoft Edge address bar buttons.[34]

Material

[edit]
Material
Acrylic
Mica
Smoke
The different materials used in Fluent Design

Materials are visual effects applied to UX surfaces. In fluent design there are two main kinds of materials: occluding and transparent. Occluding materials, such as acrylic and mica, form the base layers under interactive UI elements. Transparent materials like smoke are used to emphasize immersive surfaces:[35]

  • Acrylic: The acrylic material creates a translucent, blurred effect with a slight noise effect. While in Windows 10, Acrylic was used in large surfaces (such as side panels). With Windows 11, primary surfaces have abandoned Acrylic in favor of Mica. Instead, Acrylic is used in transient surfaces such as context menus, tooltips or predictions in search boxes.
  • Mica: Mica is a new opaque material introduced in Windows 11 that takes on the tint of the user's wallpaper.[36] Unlike acrylic, which was designed for transient surfaces (e.g., context menus), MMC is designed for use on long-lasting primary surfaces. By using different opacities, apps can create a visual hierarchy.
  • Smoke: Smoke was introduced with Windows 11. It is a translucent black background, regardless of light or dark mode, in order to create a hierarchy between the main window and a pop-up.[35]

Both Acrylic and Mica are disabled in a specific window when the app is no longer selected. Furthermore, both are disabled system-wide when transparency is disabled, when battery saver mode is enabled, or on low-end hardware. Background Acrylic is disabled when a window is deselected or in Windows 10 Mobile, HoloLens, or tablet mode.[37]

Scale

[edit]

Apps scale across different form factors, display sizes, and 0D to 3D. Elements adapt to their screen size and are available across multiple dimensions.[38][39] Conscious controls are also categorized within Scale (e.g. scrollbars and inputs that adapt to different methods of invocation)[40][41]

Iconography

[edit]

App Icons

[edit]

New icons with acrylic materials have been created for Microsoft programs, starting with the Office apps and the Chromium-based Microsoft Edge in 2018 and 2019, respectively.[42][43][44] Preliminary versions of the final icons were spotted in the "Meet the New Icons for Office 365" video,[45] before more were spotted when Windows 10X was unveiled,[46] prior to being officially revealed on December 12, 2019.[47] These icons started appearing through Microsoft Store updates to those apps, beginning with Mail and Calendar.[48][49]

Segoe Fluent Icons

[edit]
MDL2
Fluent

Segoe Fluent Icons is a set of icons designed by Microsoft for use in its products and services alongside the redesign of the Segoe UI font (Segoe UI Variable).[50] The icons are rounded departing from the angular and straight Segoe MDL2 icons which were predominant during the Windows 10 era.[51]

Fluent Emojis

[edit]
Fluent

On July 15, 2021, Microsoft announced a complete redesign of its emoji library in order to align with its Fluent Design.[52] Aiming to make Windows as consistent and accessible as possible, Microsoft made over 1,500 emoji open source on August 10, 2022.[53][54] These new Fluent emojis depart from the flat and outlined style of the previous emoji library used in Windows 10 and instead embrace a 3D Play-Doh feel.[52] Furthermore, Microsoft has stated their plans to animate most of them.[55] While the 3d animated emojis can be seen in apps such as Microsoft Teams and Skype, Windows 11 uses flat variants.

Implementation

[edit]

Fluent design guidelines are cross-platform and can be implemented with different frameworks.[56] Fluent UI React is a set of React components that implement Microsoft's Fluent Design System. It provides a set of pre-built components that can be used to build applications for Windows, iOS, Android, macOS and the web. Furthermore, WinUI is a native user interface framework for building Windows apps. It is built on top of Fluent Design System and provides a set of pre-built controls.[57]

WinUI
Fluent UI
WinUI 2 WinUI 3 Fluent UI React v9 Web Components
UWP UWP Win32 React Blazor
WinUI 2 is a library of controls and styles for building modern Windows apps. It is available for use in any UWP app and offers exciting, flexible, modern controls such as NavigationView and TeachingTip.[11] WinUI 3 is the next generation of the WinUI framework. It ships with the Windows App SDK. WinUI 3 expands WinUI into a full UX framework and provides a unified set of APIs and tools.[12] Fluent UI React v9 is the latest stable release of Fluent UI React and offers a collection of utilities, React components, and web components for building web applications.[58] Fluent UI React v9 tries to streamline itself to its WinUI counterpart.[59] Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.[60][61]
UI Elements using WinUI
UI Elements using Fluent UI React v9'
Example of UI elements using web components
Example of UI elements using web components
UI Elements using web components

See also

[edit]

References

[edit]
  1. ^ "Fluent UI React". NPM. 2024-09-06. Retrieved 2024-09-09.
  2. ^ "Release Microsoft.UI.Xaml v2.5.0 · microsoft/microsoft-ui-xaml". GitHub. 2020-04-12. Retrieved 2024-09-09.
  3. ^ "Release 0.0.11: Merge pull request #44 from microsoft/develop · microsoft/fluentui-android". GitHub. 2021-02-12. Retrieved 2021-03-16.
  4. ^ "Release Bumping versions for version update (0.2.3) · microsoft/fluentui-apple". GitHub. 2021-03-09. Retrieved 2021-03-16.
  5. ^ "Release Microsoft.UI.Xaml v2.6.0-prerelease.210315002 · microsoft/microsoft-ui-xaml". GitHub. 2021-03-17. Retrieved 2021-03-18.
  6. ^ "@fluentui/react-native - npm". npm. 2021-03-15.
  7. ^ Microsoft 365 Team (2020-03-12). "UI Fabric is evolving into Fluent UI - Microsoft 365 Developer Blog". Microsoft 365 Developer Blog. Retrieved 2021-03-16.{{cite web}}: CS1 maint: numeric names: authors list (link)
  8. ^ Lewkowicz, Jakub (2020-03-16). "Microsoft transforms UI Fabric to Fluent UI - SD Times". ST Times. Retrieved 2021-03-16.
  9. ^ Office Dev (2015-08-15). "Introducing Office UI Fabric—your key to designing add-ins for Office - Microsoft 365 Blog". Microsoft 365 Blog. Retrieved 2021-03-16.
  10. ^ Tung, Liam (2020-03-16). "Microsoft's big Fluent design push: Web developers get a new Office UI Fabric". ZDNet. Retrieved 2021-03-16.
  11. ^ a b "Fluent Design is Microsoft's new modern UI for Windows and more". The Verge. 2017-05-11. Retrieved 2017-05-11.
  12. ^ a b "Windows Developer on Twitter". Twitter. Retrieved 2017-05-11.
  13. ^ "Fluent Design Language". Microsoft. Retrieved 2017-05-12.
  14. ^ "New Windows look and feel, Neon, is officially the "Microsoft Fluent Design System"". Ars Technica. 11 May 2017. Retrieved 11 May 2017.
  15. ^ "Microsoft shows off its Fluent Design changes to Windows 10". The Verge. Retrieved 2017-10-29.
  16. ^ "Microsoft's Fluent Design System threatens to make Windows look good". Ars Technica. Retrieved 2017-10-29.
  17. ^ "A major new Xbox One update overhauls the dashboard with Fluent Design". The Verge. Retrieved 2017-10-29.
  18. ^ "The Xbox One is getting a major update today, including a faster dashboard". The Verge. Retrieved 2017-10-29.
  19. ^ "A first look at Microsoft's new Windows 10X operating system for dual screens". The Verge. February 11, 2020. Retrieved April 19, 2020.
  20. ^ "Panos Panay on Instagram: "The team made this video to celebrate making it to 1 billion MAD on Windows 10 and I wanted to share it with all of you. Now at a time when…"". Instagram. March 19, 2020. Archived from the original on 2021-12-25. Retrieved April 19, 2020.
  21. ^ Parmar, Mayank (2022-02-13). "Microsoft teases Windows 7 Aero-like design for Windows 11". Windows Latest. Retrieved 2023-04-05.
  22. ^ a b mijacobs. "Reveal highlight - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  23. ^ Blog, Windows Developer (2017-08-04). "Creating Materials and Lights in the Visual Layer". Windows Developer Blog. Retrieved 2023-04-04.
  24. ^ cphilippona (2020-09-24). "Reveal focus - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2018-03-30.
  25. ^ a b "Question: Is reveal possible to return? · Issue #4011 · microsoft/microsoft-ui-xaml". GitHub. Retrieved 2021-07-15.
  26. ^ Bowden, Zac (2017-05-19). "Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System". Windows Central. Retrieved 2017-12-22.
  27. ^ Joyce, Kevin (2017-05-20). "Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices". VRFocus. Archived from the original on 2020-08-13. Retrieved 2017-12-22.
  28. ^ a b hickeys. "Layering and elevation in Windows 11 - Windows apps". learn.microsoft.com. Retrieved 2023-04-04.
  29. ^ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  30. ^ a b c mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2018-03-30.
  31. ^ mijacobs (2020-09-24). "Connected animation - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-31.
  32. ^ davidvkimball (2020-09-24). "Page transitions in WUP apps - UWP apps". docs.microsoft.com. Retrieved 2019-11-27.
  33. ^ mijacobs (2020-09-24). "How to use the ParallaxView control to add depth and movement to your app. - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  34. ^ mijacobs (2020-09-24). "Pointer click animations in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-31.
  35. ^ a b hickeys. "Materials used in Windows 11 apps - Windows apps". learn.microsoft.com. Retrieved 2023-04-04.
  36. ^ "Materials used in Windows 11 apps - Windows apps". docs.microsoft.com. Retrieved 2021-07-05.
  37. ^ mijacobs. "Acrylic material - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  38. ^ "Fluent Design System". fluent.microsoft.com. Archived from the original on 2018-03-01. Retrieved 2018-02-18.
  39. ^ Verma, Adarsh (2017-05-12). "What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?". Fossbytes. Retrieved 2018-02-18.
  40. ^ muhsinking. "Scroll viewer controls - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  41. ^ "What's new with Microsoft Fluent Design System 'wave one' for Windows 10". Windows Central. 2017-06-29. Retrieved 2017-12-22.
  42. ^ "Redesigning the Office App Icons to Embrace a New World of Work". Medium. November 29, 2018. Retrieved April 19, 2020.
  43. ^ "Microsoft unveils new Edge browser logo that no longer looks like Internet Explorer". The Verge. November 2, 2019. Retrieved April 19, 2020.
  44. ^ hickeys. "Design guidelines for Windows app icons - Windows apps". learn.microsoft.com. Retrieved 2023-04-04.
  45. ^ "Meet the new icons for Office 365". YouTube. November 29, 2018. Retrieved April 19, 2020.
  46. ^ "#MicrosoftEvent Live". YouTube. October 2, 2019. Retrieved April 19, 2020.
  47. ^ "The Icon Kaleidoscope". Medium. December 12, 2019. Retrieved April 19, 2020.
  48. ^ "Iconic Icons: Designing the World of Windows". Medium. February 20, 2020. Retrieved April 19, 2020.
  49. ^ "Microsoft rolls out colorful new Windows 10 icons". The Verge. February 20, 2020. Retrieved April 19, 2020.
  50. ^ hickeys. "Iconography in Windows 11 - Windows apps". learn.microsoft.com. Retrieved 2023-04-04.
  51. ^ hickeys. "Segoe MDL2 Assets icons - Windows apps". learn.microsoft.com. Retrieved 2023-04-04.
  52. ^ a b "New Fluent Emoji Designs From Microsoft". Emojipedia. 2021-07-15. Retrieved 2023-04-04.
  53. ^ Carrasqueira, João (2022-08-10). "Microsoft open sources its Windows 11 emoji for everyone to use". XDA Developers. Retrieved 2023-04-04.
  54. ^ Design, Microsoft (2022-08-10). "Designing in the Open(Source)". Microsoft Design. Retrieved 2023-04-04.
  55. ^ Design, Microsoft (2021-11-22). "Emotionality at work". Microsoft Design. Retrieved 2023-04-04.
  56. ^ "Home - Fluent UI". Microsoft. Retrieved April 5, 2023.
  57. ^ Bridge, Karl. "Windows UI Library (WinUI) 3 - Windows apps". Microsoft. Retrieved April 5, 2023.
  58. ^ "Fluent UI React". FluentUI. Retrieved 2023-04-05.
  59. ^ VitaRox. "Fluent UI React v9: what's new and different". Microsoft. Retrieved April 5, 2023.
  60. ^ "fluentui/packages/web-components at master · microsoft/fluentui". GitHub. Retrieved 2023-04-05.
  61. ^ brookdozer. "Fluent UI Web Components Overview". Microsoft. Retrieved April 5, 2023.
[edit]
Retrieved from "https://en.wikipedia.org/w/index.php?title=Fluent_Design_System&oldid=1251045798"