Fluent Design System#Mica

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.{{Cite web |last=Parmar |first=Mayank |date=2022-02-13 |title=Microsoft teases Windows 7 Aero-like design for Windows 11 |url=https://www.windowslatest.com/2022/02/14/microsoft-teases-windows-7-aero-like-design-for-windows-11/ |access-date=2023-04-05 |website=Windows Latest |language=en-US}}

{{multiple image

| align = center

| image1 = Aero_UI.png

| width1 = 127

| caption1 = {{align|center|Aero}}

| image2 = Metro_UI.png

| width2 = 127

| caption2 = {{align|center|Metro}}

| image3 = Fluent_UI.png

| width3 = 127

| caption3 = {{align|center|Fluent}}

}}

{{Infobox

| image = 38px

| image2 = {{Multiple image

| direction = horizontal

| image1 = Reveal Highlight.png

| image2 = Reveal Focus.png

| header = Light

| total_width = 250

| caption1 = {{align|center|Reveal Highlight}}

| caption2 = {{align|center|Reveal Focus}}

| border = infobox

}}

}}

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

• 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.{{Cite web |last=mijacobs |title=Reveal highlight - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/windows/uwp/design/style/reveal |access-date=2017-12-22 |website=docs.microsoft.com |language=en-us}}{{Cite web |last=Blog |first=Windows Developer |date=2017-08-04 |title=Creating Materials and Lights in the Visual Layer |url=https://blogs.windows.com/windowsdeveloper/2017/08/04/creating-materials-lights-visual-layer/ |access-date=2023-04-04 |website=Windows Developer Blog |language=en-US}}
• Reveal focus: Focusable items with a border glow via the focus visual.{{Cite web |last=cphilippona |date=2020-09-24 |title=Reveal focus - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/en-us/windows/uwp/design/style/reveal-focus |access-date=2018-03-30 |website=docs.microsoft.com |language=en-us}}

With WinUI 2.6, Microsoft has discontinued reveal highlight to match their web and mobile offerings, which do not offer reveal highlight.{{Cite web |title=Question: Is reveal possible to return? · Issue #4011 · microsoft/microsoft-ui-xaml |url=https://github.com/microsoft/microsoft-ui-xaml/issues/4011 |access-date=2021-07-15 |website=GitHub |language=en}} Furthermore, with the release of Windows 11, Microsoft has slowly been removing its use of light effects in general, instead providing interactability though animations.

Depth is added to content through layering in the z-axis. Depth is presented via drop shadows and Z-depth layering.{{Cite news|url=https://www.windowscentral.com/microsoft-shows-plans-z-depth-layering-wave-2-fluent-design|title=Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System|date=2017-05-19|last=Bowden|first=Zac|work=Windows Central|access-date=2017-12-22}}{{Cite news|url=https://www.vrfocus.com/2017/05/microsoft-reveal-z-depth-layering-for-windows-10-mixed-reality-devices/|title=Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices|date=2017-05-20|last=Joyce|first=Kevin|work=VRFocus|access-date=2017-12-22|language=en-US|archive-date=2020-08-13|archive-url=https://web.archive.org/web/20200813034545/https://www.vrfocus.com/2017/05/microsoft-reveal-z-depth-layering-for-windows-10-mixed-reality-devices/|url-status=dead}} 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.{{Cite web |last=hickeys |title=Layering and elevation in Windows 11 - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/layering |access-date=2023-04-04 |website=learn.microsoft.com |language=en-us}}
• 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.

Motion establishes a relationship between UI elements and provides a continuity in the experience.{{Cite web|url=https://docs.microsoft.com/windows/uwp/design/motion/|title=Motion and animation in UWP apps - UWP applications {{!}} Microsoft Docs|date=2020-09-24|last=mijacobs|website=docs.microsoft.com|language=en-us|access-date=2017-12-22}}

• Add/delete animations: List animations for inserting and removing items from a collection.{{Cite web |last=mijacobs |date=2020-09-24 |title=Motion and animation in UWP apps - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/windows/uwp/design/motion/ |access-date=2018-03-30 |website=docs.microsoft.com |language=en-us}}
• Connected animations: Connected animations are item transitions. During a content change, an element appears to continue by flying across the app.{{Cite web |last=mijacobs |date=2020-09-24 |title=Connected animation - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/windows/uwp/design/motion/connected-animation |access-date=2017-12-31 |website=docs.microsoft.com |language=en-us}}
• Content transition: Used when only a portion of content on a page will change.
• Drill: Drill is used when navigating deeper into an app. For example, displaying more information after an item is selected.{{Cite web |last=davidvkimball |date=2020-09-24 |title=Page transitions in WUP apps - UWP apps |url=https://docs.microsoft.com/en-us/windows/uwp/design/motion/page-transitions |access-date=2019-11-27 |website=docs.microsoft.com |language=en-us}}
• Fade: Fade-in and fade-out to bring items into and dismiss them from view.
• 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.{{Cite web |last=mijacobs |date=2020-09-24 |title=How to use the ParallaxView control to add depth and movement to your app. - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/windows/uwp/design/motion/parallax |access-date=2017-12-22 |website=docs.microsoft.com |language=en-us}}
• 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.{{Cite web |last=mijacobs |date=2020-09-24 |title=Pointer click animations in UWP apps - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/windows/uwp/design/motion/motion-pointer |access-date=2017-12-31 |website=docs.microsoft.com |language=en-us}}

{{Infobox

| image = 38px

| caption =

| image2 = {{Multiple image

| direction = horizontal

| image1 = Acrylic Material.png

| caption1 = {{align|center|Acrylic}}

| image2 = Mica Material.png

| caption2 = {{align|center|Mica}}

| image3 = Smoke Material.png

| caption3 = {{align|center|Smoke}}

| header = Material

| total_width = 250

| footer = The different materials used in Fluent Design

| border = infobox

}}

}}

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:

• {{Anchor|Acrylic}}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.
• {{Anchor|Mica}}Mica: Mica is a new opaque material introduced in Windows 11 that takes on the tint of the user's wallpaper.{{Cite web |last= |title=Materials used in Windows 11 apps - Windows apps |url=https://docs.microsoft.com/en-us/windows/apps/design/signature-experiences/materials |access-date=2021-07-05 |website=docs.microsoft.com |language=en-us}} 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.{{Cite web |last=hickeys |title=Materials used in Windows 11 apps - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/materials |access-date=2023-04-04 |website=learn.microsoft.com |language=en-us}}

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.{{Cite web |last=mijacobs |title=Acrylic material - UWP applications {{!}} Microsoft Docs |url=https://docs.microsoft.com/windows/uwp/design/style/acrylic |access-date=2017-12-22 |website=docs.microsoft.com |language=en-us}}

Apps scale across different form factors, display sizes, and 0D to 3D. Elements adapt to their screen size and are available across multiple dimensions.{{Cite web|url=https://fluent.microsoft.com/|title=Fluent Design System|website=fluent.microsoft.com|language=en|access-date=2018-02-18|archive-url=https://web.archive.org/web/20180301050334/https://fluent.microsoft.com/|archive-date=2018-03-01|url-status=dead}}{{Cite news|url=https://fossbytes.com/fluent-design-system-microsoft-windows-10/|title=What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?|last=Verma|first=Adarsh|date=2017-05-12|work=Fossbytes|access-date=2018-02-18|language=en-US}} Conscious controls are also categorized within Scale (e.g. scrollbars and inputs that adapt to different methods of invocation){{Cite web|url=https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/scroll-controls|title=Scroll viewer controls - UWP applications {{!}} Microsoft Docs|last=muhsinking|website=docs.microsoft.com|language=en-us|access-date=2017-12-22}}{{Cite news|url=https://www.windowscentral.com/whats-new-microsoft-fluent-design-system-wave-one-windows-10|title=What's new with Microsoft Fluent Design System 'wave one' for Windows 10|date=2017-06-29|work=Windows Central|access-date=2017-12-22}}

{{multiple image

| align = right

| image1 =

| width1 =

| caption1 =

| image2 =

| width2 = 127

| caption2 = {{align|center|Metro}}

| image3 =

| width3 = 127

| caption3 = {{align|center|Fluent}}

| total_width = 212

| footer =

| footer_align = center

| header =

}}

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.{{Cite web |date=November 29, 2018 |title=Redesigning the Office App Icons to Embrace a New World of Work |url=https://medium.com/microsoft-design/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-91d72608ee8f |access-date=April 19, 2020 |website=Medium}}{{Cite news |date=November 2, 2019 |title=Microsoft unveils new Edge browser logo that no longer looks like Internet Explorer |work=The Verge |url=https://www.theverge.com/2019/11/2/20944341/microsoft-edge-chromium-browser-logo-icon-wave-surf-new |access-date=April 19, 2020}}{{Cite web |last=hickeys |title=Design guidelines for Windows app icons - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/design/style/iconography/app-icon-design |access-date=2023-04-04 |website=learn.microsoft.com |date=13 March 2023 |language=en-us}} Preliminary versions of the final icons were spotted in the "Meet the New Icons for Office 365" video,{{Cite web |date=November 29, 2018 |title=Meet the new icons for Office 365 |url=https://youtube.com/watch?v=YplAU5myNP4 |access-date=April 19, 2020 |website=YouTube}} before more were spotted when Windows 10X was unveiled,{{Cite web |date=October 2, 2019 |title=#MicrosoftEvent Live |url=https://youtube.com/watch?v=dmaioTs0NH8 |access-date=April 19, 2020 |website=YouTube}} prior to being officially revealed on December 12, 2019.{{Cite web |date=December 12, 2019 |title=The Icon Kaleidoscope |url=https://medium.com/microsoft-design/the-ripple-effect-expanding-our-icon-design-system-74b4d916b7a4 |access-date=April 19, 2020 |website=Medium}} These icons started appearing through Microsoft Store updates to those apps, beginning with Mail and Calendar.{{Cite web |date=February 20, 2020 |title=Iconic Icons: Designing the World of Windows |url=https://medium.com/microsoft-design/iconic-icons-designing-the-world-of-windows-5e70e25e5416 |access-date=April 19, 2020 |website=Medium}}{{Cite news |date=February 20, 2020 |title=Microsoft rolls out colorful new Windows 10 icons |work=The Verge |url=https://www.theverge.com/2020/2/20/21145157/microsoft-windows-10-new-icons-modern-release-update-apps |access-date=April 19, 2020}}

{{multiple image

| align = right

| image1 =

| width1 =

| caption1 =

| image2 = Fluent Metro Icons.svg

| width2 = 127

| caption2 = {{align|center|MDL2}}

| image3 = Fluent Segoe Icons.svg

| width3 = 127

| caption3 = {{align|center|Fluent}}

| total_width = 212

| footer =

| footer_align = center

| header =

}}

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).{{Cite web |last=hickeys |title=Iconography in Windows 11 - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/iconography |access-date=2023-04-04 |website=learn.microsoft.com |language=en-us}} The icons are rounded departing from the angular and straight Segoe MDL2 icons which were predominant during the Windows 10 era.{{Cite web |last=hickeys |title=Segoe MDL2 Assets icons - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-ui-symbol-font |access-date=2023-04-04 |website=learn.microsoft.com |language=en-us}}

{{multiple image

| align = right

| image1 =

| width1 =

| caption1 =

| image2 =

| width2 = 127

| caption2 = {{align|center|Metro}}

| image3 = Fish Fluent Emoji.svg

| width3 = 127

| caption3 = {{align|center|Fluent}}

| total_width = 212

| footer =

| footer_align = center

| header =

}}

On July 15, 2021, Microsoft announced a complete redesign of its emoji library in order to align with its Fluent Design.{{Cite web |date=2021-07-15 |title=New Fluent Emoji Designs From Microsoft |url=https://blog.emojipedia.org/new-fluent-emoji-designs-from-microsoft/ |access-date=2023-04-04 |website=Emojipedia |language=en}} Aiming to make Windows as consistent and accessible as possible, Microsoft made over 1,500 emoji open source on August 10, 2022.{{Cite web |last=Carrasqueira |first=João |date=2022-08-10 |title=Microsoft open sources its Windows 11 emoji for everyone to use |url=https://www.xda-developers.com/microsoft-open-source-fluent-emoji/ |access-date=2023-04-04 |website=XDA Developers |language=en}}{{Cite web |last=Design |first=Microsoft |date=2022-08-10 |title=Designing in the Open(Source) |url=https://medium.com/microsoft-design/designing-in-the-open-source-5c62be73a599 |access-date=2023-04-04 |website=Microsoft Design |language=en}} 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. Furthermore, Microsoft has stated their plans to animate most of them.{{Cite web |last=Design |first=Microsoft |date=2021-11-22 |title=Emotionality at work |url=https://medium.com/microsoft-design/emotionality-at-work-398182387adc |access-date=2023-04-04 |website=Microsoft Design |language=en}} While the 3D animated emojis can be seen in apps such as Microsoft Teams and Skype, Windows 11 uses flat variants.

Fluent design guidelines are cross-platform and can be implemented with different frameworks.{{Cite web |title=Home - Fluent UI |url=https://developer.microsoft.com/en-us/fluentui#/ |website=Microsoft |language=en-US |access-date=April 5, 2023}} 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.{{Cite web |last=Bridge |first=Karl |title=Windows UI Library (WinUI) 3 - Windows apps |url=https://learn.microsoft.com/en-us/windows/apps/winui/winui3/ |website=Microsoft |language=en-US |access-date=April 5, 2023}}

• Adwaita
• Aqua
• Material Design
• Flat design
• Windows Aero
• Metro

{{Reflist|30em}}

• {{official website}}
• {{cite web |url= https://developer.microsoft.com/windows/apps/design |title= Design and Code UWP apps |date= 5 November 2024 |publisher= Microsoft }}
• {{cite web |url= https://channel9.msdn.com/events/Build/2017/B8066?term=introduction%20to%20fluent%20design |title= Introducing Fluent Design

|date= May 8, 2017 |first1= Paul |last1= Gusmorino |first2= Bojana |last2= Ostojic |work= Channel 9 |publisher= MSDN }}

{{Microsoft FOSS}}

Category:2017 software

Category:Design languages

Category:free and open-source software

Category:graphical user interfaces

Category:Microsoft free software

Category:software using the MIT license

Category:Windows 10

Category:Windows 11

Category:Xbox One

Category:Xbox Series X and Series S