Cannabis Ruderalis

thcscience_admin
Fluent Design System
Fluent UI Apps.png
The Calendar application in Windows 10, showing aspects of Fluent Design, such as acrylic, and thinner window borders.
Other names
  • Fluent UI
  • Microsoft Fluent Design System
Original author(s)Microsoft
Developer(s)Microsoft
Initial release2017; 5 years ago (2017)
Stable release(s) [±]
Web8.8.0 / April 1, 2021; 11 months ago (2021-04-01) [1]
Windows2.5.0 / December 4, 2020; 15 months ago (2020-12-04) [2]
Preview release(s) [±]
Android0.0.11 / February 12, 2021; 12 months ago (2021-02-12) [3]
iOS, MacOS0.2.3 / March 9, 2021; 11 months ago (2021-03-09)[4]
Windows2.6.0-prerelease.210315002 / March 17, 2021; 11 months ago (2021-03-17) [5]
Cross-platform0.23.3 / March 15, 2021; 11 months ago (2021-03-15) [6]
Repository
Written inObjective-C, C++, C#, TypeScript, Kotlin, Swift, JavaScript
PlatformAndroid, iOS, MacOS, Windows
Predecessor
TypeDesign language software
LicenseMIT License
Websitedeveloper.microsoft.com/fluentui
Fluent and Office Online-inspired "Home" screens, seen in the Windows versions of Office 365 and Office 2019.
Part of a series of articles on
Windows 10
Windows 10 Logo.svg
Other editions
Related

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 (popularly known as "Metro") that includes guidelines for the designs and interactions used within software designed for all Windows 10 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 with 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 shadow, highlight effects following mouse pointer or input gesture movements, and "faux materials" Metro once discarded.

Current applications of Fluent[edit]

Light[edit]

Reveal highlight[edit]

The purpose of light is to draw attention and illuminate information. 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.[21] Additionally, in the Windows Holographic environment, a rounded white pointer exists.

On 6 November 2017, Microsoft Employee David Haz stated that plans to apply the reveal highlight to the taskbar exist—but as of July 2019, it has not occurred.[22]

With WinUI 2.6, Microsoft has discontinued reveal highlight to match their web and mobile offerings which do not offer reveal highlight.[23]

Reveal focus[edit]

Focusable items with border glow via the focus visual.[24]

Depth[edit]

The addition of depth utilizes the z-axis and allows for content differentiation via layering. Depth is presented via drop shadows and Z-depth layering.[25][26] This is especially apparent in the redesigned Office app in 2019.

Motion[edit]

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

Add/delete animations[edit]

List animations for inserting and removing items from a collection.[28]

Connected animations[edit]

Connected animations are item transitions. During a content change, an element appears to continue by flying across the app.[29]

Content transition[edit]

Used when only a portion of content on a page will change.[30]

Drill[edit]

Drill is used when navigating deeper into an app. For example, displaying more information after an item is selected.[31]

Fade[edit]

Fade-in and fade-out to bring into and dismiss items from view.[32]

Parallax[edit]

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[edit]

When an item is pressed, it momentarily recedes into the background and then restores 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]

Acrylic[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.[35][36] Preliminary versions of the final icons were spotted in the "Meet the New icons for Office 365," video,[37] before more were spotted when Windows 10X was unveiled,[38] prior to being officially revealed on December 12, 2019.[39] These icons started appearing through Microsoft Store updates to those apps, beginning with Mail and Calendar.[40][41]

The Acrylic material creates a translucent, blurred effect with a slight noise effect. A visual hierarchy can be created by using different opacities. For example, in an app, primary content surfaces are often opaque (with the exception of widgets or lightweight apps such as Calculator), a secondary pane can have 80% background Acrylic, and the tertiary pane can have 60% background Acrylic. Background Acrylic blurs all items behind the active Acrylic material. In-app Acrylic blurs content within the app.

Acrylic is disabled in a specific window when the app is no longer selected. Both types of Acrylic 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 de-selected or on Windows 10 Mobile, HoloLens, or tablet mode.[42]

Mica[edit]

Mica is a new opaque material introduced in Windows 11 that takes on the tint of the user's wallpaper.[43] Unlike acrylic which was designed for transient surfaces (e.g.: context menus), Mica is designed for use in long lived primary surfaces.

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.[44][45] Conscious controls are also categorized within Scale (e.g. scrollbars and inputs that adapt to different methods of invocation)[46][47]

Undetermined[edit]

See also[edit]

References[edit]

  1. ^ "@fluentui/react - npm". npm. 2021-04-01. Retrieved 2021-04-04.
  2. ^ "Release Microsoft.UI.Xaml v2.5.0 · microsoft/microsoft-ui-xaml". GitHub. 2020-04-12. Retrieved 2021-03-16.
  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.
  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". ZDNet. Retrieved 2021-03-16.
  11. ^ "Fluent Design is Microsoft's new modern UI for Windows and more". The Verge. 2017-05-11. Retrieved 2017-05-11.
  12. ^ "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. ^ mijacobs. "Reveal highlight - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  22. ^ "No Fluent Design Reveal Highlight in Start Menu - Fall Creator's Update". answers.microsoft.com. Retrieved 2017-12-26.
  23. ^ "Question: Is reveal possible to return? · Issue #4011 · microsoft/microsoft-ui-xaml". GitHub. Retrieved 2021-07-15.
  24. ^ cphilippona (2020-09-24). "Reveal focus - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2018-03-30.
  25. ^ Bowden, Zac (2017-05-19). "Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System". Windows Central. Retrieved 2017-12-22.
  26. ^ Joyce, Kevin (2017-05-20). "Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices". VRFocus. Retrieved 2017-12-22.
  27. ^ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  28. ^ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2018-03-30.
  29. ^ mijacobs (2020-09-24). "Connected animation - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-31.
  30. ^ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2018-03-30.
  31. ^ davidvkimball (2020-09-24). "Page transitions in WUP apps - UWP apps". docs.microsoft.com. Retrieved 2019-11-27.
  32. ^ mijacobs (2020-09-24). "Motion and animation in UWP apps - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2018-03-30.
  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. ^ "Redesigning the Office App Icons to Embrace a New World of Work". Medium. November 29, 2018. Retrieved April 19, 2020.
  36. ^ "Microsoft unveils new Edge browser logo that no longer looks like Internet Explorer". The Verge. November 2, 2019. Retrieved April 19, 2020.
  37. ^ "Meet the new icons for Office 365". November 29, 2018. Retrieved April 19, 2020.
  38. ^ "#MicrosoftEvent Live". October 2, 2019. Retrieved April 19, 2020.
  39. ^ "The Icon Kaleidoscope". Medium. December 12, 2019. Retrieved April 19, 2020.
  40. ^ "Iconic Icons: Designing the World of Windows". Medium. February 20, 2020. Retrieved April 19, 2020.
  41. ^ "Microsoft rolls out colorful new Windows 10 icons". The Verge. February 20, 2020. Retrieved April 19, 2020.
  42. ^ mijacobs. "Acrylic material - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  43. ^ "Materials used in Windows 11 apps - Windows apps". docs.microsoft.com. Retrieved 2021-07-05.{{cite web}}: CS1 maint: url-status (link)
  44. ^ "Fluent Design System". fluent.microsoft.com. Archived from the original on 2018-03-01. Retrieved 2018-02-18.
  45. ^ Verma, Adarsh (2017-05-12). "What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?". Fossbytes. Retrieved 2018-02-18.
  46. ^ muhsinking. "Scroll viewer controls - UWP applications | Microsoft Docs". docs.microsoft.com. Retrieved 2017-12-22.
  47. ^ "What's new with Microsoft Fluent Design System 'wave one' for Windows 10". Windows Central. 2017-06-29. Retrieved 2017-12-22.
  48. ^ "Spatial sound design". developer.microsoft.com. Retrieved 2017-12-22.

External links[edit]

source: https://web.archive.org/web/20220308210209/https://en.wikipedia.org/wiki/Fluent_Design_System

Leave a Reply