Opaque “translucent”, talk about how the new material of Windows 11 “cheats” your eyes

One thing to say, Windows 11 is so beautiful

Every generation of Windows operating system updates are accompanied by changes in the design language. The original Windows Classic Style (Classic Style), Luna in the Windows XP era, Aero Glass in the Windows Vista and Windows 7 era, Metro in the Windows 8.x era, to the most well-known Windows 10 Acrylic (Acrylic), different There is a one-to-one correspondence between the visual style and the system version, which is believed to have left a mark in the memory of many people. 

Windows 11, which has just been unveiled and can now be experienced through the Dev channel of the Windows Insider Program, is no exception – although compared to Windows 10, the changes in the design style of Windows 11 this time are very confusing for the first time: 

Opaque "translucent", talk about how the new material of Windows 11 "cheats" your eyes

It also looks like a “translucent” design. What is the difference between Windows 11 and Windows 10? In this article, we will answer this question. 

▍The beauty and price of “acrylic”

Acrylic (Arcrylic), as one of the system components of Windows Fluent Design , is described in the Microsoft development document as a brush “used to create translucent textures”. 

In other words, acrylic is not an application, a window, or an interface control you see in Windows 10. It is a material, a means of adding texture and depth to the window content through transparency design . 

In fact, the acrylic effect that meets Microsoft’s design standards requires a very complex hybrid design, including a comprehensive mix of desktop background, Gaussian blur, brightness mixing, tone mixing, and noise material. 

Opaque "translucent", talk about how the new material of Windows 11 "cheats" your eyes

The composition of acrylic

Correspondingly, Microsoft also provides 5 specific attribute parameters [1] to help developers create their own acrylic effects. So although many times we call the translucent effect in Windows 10 “acrylic”, the actual effect may be very different: 

Opaque "translucent", talk about how the new material of Windows 11 "cheats" your eyes

Different attribute parameter values ​​determine the actual presentation effect of acrylic

If a specific application window is used as the target, acrylic can be divided into background acrylic and in-app acrylic : the former can be seen as a means to distinguish the application window from the desktop wallpaper and other application windows, the latter It is mainly used to create focus and layering within the application. 

For example, in the latest version of MyerSplash, the main window of the application uses background acrylic when browsing the wallpaper. If you drag the window at this time, we can vaguely see all subsequent content from the background of the MyerSplash window, whether it is the desktop wallpaper. Or the graphic content in other application windows: 

Opaque "translucent", talk about how the new material of Windows 11 "cheats" your eyes

Acrylic effect of MyerSplash main interface window

But click the gear button in the upper right corner of the MyerSplash interface to enter the application settings, and you will find that the in-app acrylic is used here. At this time, the acrylic effect of MyerSplash is based on the in-app wallpaper browsing interface, which can be vaguely seen through the settings interface In fact, it is the display content of the wallpaper in the app. When the MyerSplash window is dragged, the blurred background content will not change due to the change of the window position: 

Opaque "translucent", talk about how the new material of Windows 11 "cheats" your eyes

The MyerSplash setting interface uses in-app acrylic

If you take specific application scenarios as an example, acrylic effects are often applied to vertical panes and some transient graphics. Although Microsoft does not recommend using acrylic in vertical panes, Windows 10’s built-in calendar and Groove Music, mail and other applications all use acrylic materials in the left navigation pane area; 

Opaque "translucent", talk about how the new material of Windows 11 "cheats" your eyes

The sidebar of the calendar application is also acrylic

Acrylic effects in transient graphics are common in scenes such as context menus, pop-up controls, and pop-up windows. For example, Edge 93, which is being tested, uses a large number of acrylic materials in the pop-up menu in the browser. 

Opaque "translucent", talk about how the new material of Windows 11 "cheats" your eyes

Acrylic style menu in Edge test

Finally, it is worth mentioning that acrylic is regarded by Microsoft as a design material that takes up a lot of GPU resources . Although there is no specific statistical data to support it, its use may still increase the power consumption of the device and shorten the battery life. Among the 5 specific attribute parameters mentioned above, there is one 

The FallbackColor parameter is used to provide the pure color parameter of the “rollback mechanism” to the acrylic material. 

In Windows 10, when the device enters the power saving mode, Windwos will automatically disable all acrylic effects and set the color of the corresponding area to the solid color specified by the rollback parameter (if your device is older and has poor performance, you can also set it in ” Personalization> Color Settings” manually turn off the transparency effect); in addition, a window with a background acrylic effect will temporarily disable the acrylic and roll back to the solid color mode when the window loses focus. 

▍Let the new material of Windows 11 “show stuffing”

Windows 11 finally brings us a more concise and modern new version of the Explorer, but after opening the Explorer, drag the window, you will find that Windows 11 seems to use a transparent effect in the window title bar area of ​​the Explorer: 

Opaque "translucent", talk about how the new material of Windows 11 "cheats" your eyes

It really looks like a transparent effect here

Is it acrylic? no. This style, which was even misunderstood by many people as a frosted glass effect at the beginning, is the protagonist of this part, the new material Mica introduced by Microsoft in Windows 11. 

From the content of the previous part, we know that acrylic is a material that is sophisticated, complex, and gorgeous, but also has a certain performance overhead burden. For today’s various electronic devices, any additional performance overhead that is “not used on the blade” is worth considering and optimizing. 

Mica is the optimization solution. 

For Windows named “windows”, it is very necessary for us to quickly grasp the focus between multiple application windows through visual design. Although Mica and Acrylic are very similar in terms of visual effects and practical effects, there are fundamental differences between the two. 

The core difference is that Mica is opaque . 

As a more cost-saving material solution, Mica will only sample the wallpaper color once when the desktop wallpaper changes, and generate the material color from the sampled color. So although the resource manager in the picture at the beginning of this section “looks” translucent and the desktop background can be seen vaguely, this effect is actually only because the window background of the resource manager has pre-extracted the style from the desktop wallpaper. . 

Opaque "translucent", talk about how the new material of Windows 11 "cheats" your eyes

No matter what the background content is, you can only “see” the desktop wallpaper through Mica 

The cracking method is also very simple: if you put other content between the window with Mica material and the desktop wallpaper, Mica will “show the stuffing”-unlike acrylic that can display the rear content in a translucent style in real time, the bottom of the Mica window will Any content will present the color style originally extracted from the wallpaper. 

Opaque "translucent", talk about how the new material of Windows 11 "cheats" your eyes

Microsoft recommends applying Mica to basic layers, such as window backgrounds 

It is precisely because of this feature that Microsoft only recommends using Mica on the base layer of the window . In this way, the main body of the window can be emphasized, and the visual effect will not be confusing because it is applied in a pop-up window but cannot be transparent in real time. 

In fact, if only from the visual effect, Mica is more like a “low version” of acrylic, or Windows 11 is launched for some windows that take a long time and frequently open (such as explorer, system settings) “Low power consumption customized version”. As if transported with properly, it is more gentle than traditional solid color window title bar, and delicate, while not bring as much performance overhead like acrylic. 

In other aspects, Mica is similar to acrylic, for example, it supports light and dark color switching, and it will automatically fall back to a pure color effect when the window is out of focus. 

Opaque "translucent", talk about how the new material of Windows 11 "cheats" your eyes

Transparency is currently in charge of both Acrylic and Mica

What’s interesting is that although Mica itself is not a transparent control material, it is still controlled by the “Transparency” option under “Personalization> Color” in Windows 11. If you turn off this option, Mica’s color picking effect will also disappear with the acrylic effect. 

▍Summary: Acrylic and Mica

Although it looks like “translucent”, the Mica introduced in Windows 11 is indeed opaque. The way to distinguish Acrylic and Mica in Windows 11 is also very simple-just put other content between the window and the desktop wallpaper as the background. 

Opaque "translucent", talk about how the new material of Windows 11 "cheats" your eyes

Smoke effect, used to emphasize the content of the dialog

At the same time, it is not difficult to see that Mica is not used to replace acrylic. In fact, it, together with acrylic and smoke effects , constitute the main “material” type of Windows 11. If you are interested in other design specifications of Windows 11, you may wish to further read Microsoft’s official design documents [2]. 

Reference link:

[1] Attribute parameters: 

https://sspai.com/s/wpyE

[2] Design documents: 

https://sspai.com/s/3R1m

The picture of the title is from Unsplas h: @windows 

Posted by:CoinYuppie,Reprinted with attribution to:https://coinyuppie.com/opaque-translucent-talk-about-how-the-new-material-of-windows-11-cheats-your-eyes/
Coinyuppie is an open information publishing platform, all information provided is not related to the views and positions of coinyuppie, and does not constitute any investment and financial advice. Users are expected to carefully screen and prevent risks.

Leave a Reply