具透 | 不透明的「半透明」:Windows 11 新材质如何欺骗你的眼睛
2021-07-22 17:00:00 Author: sspai.com(查看原文) 阅读量:167 收藏

具透 | 不透明的「半透明」:Windows 11 新材质如何欺骗你的眼睛

每一代 Windows 操作系统更新都伴随着设计语言的变化。最初的 Windows 经典外观(Classic Style)、Windows XP 时代的 Luna、Windows Vista 和 Windows 7 时代的 Aero Glass、Windows 8.x 时代的 Metro,一直到最为大家所熟知的 Windows 10 亚克力(Acrylic),不同的视觉风格和系统版本一一对应,相信在很多人的记忆中都留下了烙印。

刚亮相不久、目前已经可以通过 Windows 预览体验计划 Dev 渠道体验到的 Windows 11 也不例外 —— 虽然相比 Windows 10,这次 Windows 11 在设计风格上的变化在第一时间非常容易让人混淆:

同样是看上去「半透明」的设计,Windows 11 相比 Windows 10 究竟有什么不一样?在这篇文章中,我们就来对这个问题进行解答。

「亚克力」的美丽与代价

亚克力(Arcrylic)作为 Windows Fluent Design 的系统组件之一,在微软开发文档中被描述为一种「用于创建半透明纹理」的画笔。

换句话说,亚克力并非你在 Windows 10 中看到的某个应用、某个窗口或某个界面控件,它是一种材料,一种通过透明度设计来为窗口内容增添纹理和深度的手段

事实上,符合微软设计标准的亚克力效果需要非常复杂的混合设计,包括对桌面背景、高斯模糊、明度混合、色调混合以及噪点材质的综合搭配。

亚克力的构成

与之对应的,微软也提供了 5 种具体的 属性参数 来帮助开发者打造适合自己的亚克力效果。所以尽管很多时候我们都将 Windows 10 中的半透明效果叫做是「亚克力」,但实际看到的效果有可能是千差万别的:

不同属性参数数值决定了亚克力的实际呈现效果

如果以某个具体的应用窗口为标的,亚克力可以被分为背景亚克力和应用内亚克力两种:前者可以看作是将应用窗口从桌面壁纸和其他应用窗口之间区分开来的手段,后者则主要用于在应用内部打造焦点和层次感。

比如在最新版 MyerSplash 当中,应用主体窗口在进行壁纸浏览时所采用就是背景亚克力,此时如果拖动其窗口,我们能够从 MyerSplash 的窗口背景中隐约看到其后的所有内容,无论是桌面壁纸还是其他应用窗口中的图文内容:

MyerSplash 主界面窗口的亚克力效果

但点击 MyerSplash 界面右上角的齿轮按钮进入应用设置,则会发现这里运用了应用内亚克力,此时 MyerSplash 的亚克力效果则以应用内的壁纸浏览界面为标的,透过设置界面能够隐约看到的内容其实是应用内的壁纸展示内容,拖动 MyerSplash 窗口时,被模糊的背景内容不会因为窗口位置的改变而发生变化:

MyerSplash 设置界面用到的就是应用内亚克力

关联阅读:幕后丨他做了一款优雅的 UWP 壁纸应用,并对 UWP 的未来充满信心

而如果以具体的应用场景为例,亚克力效果则常常在应用在垂直窗格和一些瞬态图面当中——虽然微软并不建议在垂直窗格中应用亚克力,但 Windows 10 内置的日历、Groove 音乐、邮件等等应用都在左侧导航窗格区域使用了亚克力材料;

日历应用的侧栏也是亚克力效果

瞬态图面中的亚克力效果则在上下文菜单、弹出控件、弹出窗口等场景中常见,比如正在测试中的 Edge 93 就在浏览器内的弹出菜单中大量运用了亚克力材质。

Edge 测试中的亚克力风格菜单

最后值得一提的是,亚克力被微软看作是一种会大量占用 GPU 资源的设计材料,虽然没有具体的统计数据作为支撑,它的使用依然可能会导致设备功耗增加并缩短电池使用时间。在上文提到的 5 种具体的属性参数中,就有一项

FallbackColor 的参数用于向亚克力材料提供「回滚机制」的纯色参数。

在 Windows 10 中,当设备进入节电模式时 Windwos 会自动禁用所有亚克力效果并将对应区域的颜色设定为回滚参数指定的纯色(如果你的设备较老、性能较差,也可以在「个性化 > 颜色设置」手动关闭透明效果);另外,采用背景亚克力效果的窗口在窗口失去焦点时也会暂时禁用亚克力、回滚到纯色模式。

让 Windows 11 的新材质「露馅」

Windows 11 终于为我们带来了更加简洁、现代化的新版资源管理器,但打开资源管理器后拖动窗口,你会发现 Windows 11 在资源管理器的窗口标题栏区域似乎也用了透明效果:

这里看上去的确有点像透明效果

是亚克力吗?不是。这种一开始甚至被很多人误解为毛玻璃效果的样式正是本部分的主角、微软在 Windows 11 引入的新材质 Mica。

通过上一部分的内容中我们知道,亚克力是一种精密、复杂、华丽,同时又有着一定性能开销负担的材料。对当今的各种电子设备而言,任何一点「没有用在刀刃上」的额外性能开销,都是值得考虑和优化的。

Mica 就是那个优化方案。

对以「窗口」命名的 Windows 来说,通过视觉设计让我们在多个应用窗口之间快速把握住焦点是非常有必要的。尽管在视觉效果和实际作用上 Mica 和亚克力非常相似,但二者却有着本质上的区别。

最为核心的不同在于,Mica 是不透明的

作为一种更加节省性能开销的材料方案,Mica 仅会在桌面壁纸变化时对壁纸色彩进行一次取样,通过取样到的颜色生成材料色彩。所以本部分开头图片里的资源管理器尽管「看上去」似乎是半透明的、能够隐约看到桌面背景,但呈现这种效果其实只是因为资源管理器的窗口背景从桌面壁纸预先提取过一次样式。

无论背景内容是什么,通过 Mica 永远只能「看到」桌面壁纸

破解方法也很简单:如果你在采用 Mica 材质的窗口和桌面壁纸之间摆上其他内容,Mica 就会「露馅」—— 和能够实时以半透明样式展示后方内容的亚克力不同,Mica 窗口下方无论有什么内容,都会呈现最初从壁纸提取到的色彩样式。

微软建议将 Mica 应用在基础图层上,比如窗口背景 

也正是因为这种特性,微软仅建议将 Mica 用在窗口的基础图层上。如此一来既能起到突出窗口主体的效果,又不会因为应用在弹窗这种地方但却无法实时透明带来令人困惑的视觉效果。

事实上,如果仅仅从视觉效果上来说,Mica 更像是一种亚克力的「低配版」,或者说 Windows 11 针对一些需要长时间、频繁打开的窗口(比如资源管理器、系统设置)推出的「低功耗定制版」。如果运用得当,它比传统的纯色窗口标题栏更加温婉、细腻,同时又不会像亚克力那样带来太多额外的性能开销。

其他方面 Mica 则与亚克力大同小异了,比如支持明、暗色切换,在窗口失焦时会自动回落到纯色效果等等。

透明效果目前同时掌管亚克力和 Mica

有意思的是,尽管 Mica 本身不算是一种透明的控件材料,但在 Windows 11 中它依然受「个性化 > 颜色」下的「透明效果」选项控制。如果你关闭了这个选项,Mica 的取色效果也会随亚克力效果一并消失。

小结:亚克力与 Mica

尽管看上去很像「半透明」,但 Windows 11 引入的 Mica 的确是不透明的。要在 Windows 11 中将亚克力和 Mica 区分开来的方法也很简单 —— 在窗口和桌面壁纸之间塞点其他内容作为背景就好。

烟雾效果,用于强调对话框内容

同时我们也不难看出,Mica 并非用于取代亚克力的。事实上,它和亚克力、烟雾(Smoke)效果一起构成了 Windows 11 的主要「材料」类型。如果你对 Windows 11 的其他设计规范感兴趣,不妨进一步阅读微软官方的 设计文档

关联阅读:

> 下载 少数派 2.0 客户端、关注 少数派公众号,第一时间解读 Windows 动态 🐱‍🏍

> 实用、好用的 正版软件,少数派为你呈现 🚀


文章来源: https://sspai.com/post/67836
如有侵权请联系:admin#unsafe.sh