10

操作系统中常见的「毛玻璃」效果是怎么设计出来的？

 4 years ago
source link: https://sspai.com/post/64904
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Matrix 首页推荐

Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。

文章代表作者个人观点，少数派仅对标题和排版略作修改。

毛玻璃特效被广泛应用于现代操作系统中，不管是 Windows 的 Aero Glass、Acrylic，还是 iOS 的模糊特效，都绕不开「毛玻璃」这个名字。本文试图探究毛玻璃背后的原理，并具体分析 Fluent Design 中的 Acrylic 材质。

RGBA

众所周知，LCD 显示器之所以能显示出五彩斑斓的颜色，是因为在每个像素点的背后，有三种颜色的子像素点——红（Red），绿（Green），蓝（Blue）。这些子像素点通过发出不同强度的光，组合出不同颜色。

3aMZ3ye.png!mobile RGB 像素 [2]

但是，如果做过设计，或者写过 GUI（图形界面）的人，可能会知道一个东西叫 RGBA。这个 A 代表的是 Alpha，在设计领域指的是不透明度的高低。在多种元素叠加摆放的情况下，如果上层颜色存在一定的透明度，那就会叠加显现出下层颜色，就像透过一块有色玻璃看世界一样。

然而问题是，在物理层面上只有三种颜色的子像素点，是怎么得到这 RGBA 四种元素的？显然，一种东西不会凭空产生，RGBA 也无法突破 RGB 的物理限制。既然 RGB 已经足以表示所有颜色，那么剩下的这个 Alpha 就只能是 RGB 的某种组合。

问题就是，它们是以怎样的方式进行组合的呢？

与其瞎猜，不如动手试一试。先画一个纯红的方块 RGB = (255,0,0) ，再在上面叠加一个 50% 不透明度（即 Alpha = 0.5 ），纯白的方块 RGB = (255,255,255) 。最后，用取色器看看重叠的部分到底是什么颜色，发现就是两种颜色简单地进行了平均 RGB = (255,128,128) = Alpha * (255,0,0) + (1-Alpha) * (255,255,255)。

B3Izquf.png!mobile

可能有人会说了，这好像和我们平常见到的半透明效果不一样，这个虽然半透明了，但是看得还是很清楚，但苹果的半透明好像有一种磨砂玻璃的质感。这又是如何达到的呢？

这就是我们接下来要介绍的，模糊效果。

模糊效果

模糊，如果用通俗的语言来讲的话，就是看不清。就比如摄像头的对焦不准，整个画面呈现出一种不清晰的状态。而这种不清晰，源于边界的缺失，或者说，相邻色块之间的混合。

3mmaQzj.png!mobile 模糊 [3]

比如下面这两张图片，都是由 29 x 29 个小方块组成的图像。如果我们将每个方块和它周围的方块的颜色进行平均，则会得到第二张图中的样子。

vEBZJny.png!mobileuqaE32V.png!mobile

这种平均操作，可以抽象为一种数学模型：

22Ifyy6.png!mobile

例如，你想对图中的左上角九宫格的 中心方块 进行平均操作（图中颜色仅起强调作用，和数值无关），将它的颜色和周围方块的颜色进行一个平均，那么你可以使用一个预先定义的模块，这个模块在计算机领域被叫做滤波器（或者卷积核，此处不做过多区分）。你可以想象它是 冒险小虎队的解密卡 。我们通过将滤波器放置在原图片上，将每个原图片中的对应像素，与滤波器里对应小方块的数值进行乘法运算，最后加起来，成为新图片里，中心像素的值。例如在下面的图片中，我们展示了其中的一步操作，把左上角的方块和滤波器的对应方块进行乘法运算，然后再加起来，最后，得到中心像素的值是 8*0*(1/9) +1*(1/9) = 1/9 。

就这样，使用不同的滤波器，我们就能达到不同的图片效果。滤波器的大小通常被称作半径，一般来说，滤波器方块的长宽都是奇数，那么半径就等于 (边长-1)/2 。

高斯模糊

当然，在众多滤波器里，有一类较为常用的被称为「高斯滤波」，也就是我们熟知的「高斯模糊」。它的名字里之所以有「高斯」这两个字，主要是来自于概率论中的高斯分布。

简单的讲，高斯分布的形状就像一个山丘，一个点落在中间的可能性大，两边的可能性小。如果我们借用高斯分布从中间到四周的函数值，就可以制造一个滤波器，使得中间像素对于处理后的图像影响更大，四周像素对于处理后的影响效果更小。

高斯分布有两个关键的值，一个是 均值 ，另外一个是 方差 。 均值决定了高斯分布的位置 ，均值的加减等同于对高斯分布进行了平移。 方差决定了高斯分布的形状 ，方差越小，说明高斯分布越集中于中心部分。与此同时，如果计算一维正态分布曲线下方的面积，会发现，超过 95%的面积位于中心向左两个方差，向右两个方差的范围之内。这说明超过了这个范围，进行滤波对于中心像素的影响微乎其微。所以可以只用一个九宫格（中心点相邻点），就可以极大程度上近似一个完整的高斯分布所带来的的效果。这也就是常用的 3x3 高斯滤波器。

aqimaeF.png!mobile 一维高斯分布 [3]

Acrylic 材质

当然，现实 UI 中的毛玻璃特效会在此基础上添加更多的层次，使其更加真实或者增加界面的可读性。

就拿微软 Fluent Design 中的 Acrylic 材质构成图作为例子，其包含了五层，分别是：背景层，高斯模糊层，明度混合层，颜色混合层，以及噪点层。

MjaIjy3.png!mobile 微软 Fluent Design 中的 Acrylic 材质 [4]

明度混合，和我们最开始讲的 RGBA 有着一定的联系。明度顾名思义就是图片的明亮程度。两个极端是纯白 (255,255,255) 和纯黑（0,0,0）。通过将纯白或者纯黑的色块放置在原图上方，调整透明度，就等价于明度的调整。（当然可以也直接调明度啦！）另外，通过调整明度，也可以弱化背景，增加毛玻璃特效上文字的可读性。

颜色混合，则与 Windows 的主题色相关。会在前几层的基础上，再叠加一个半透明的 Windows 主题色块，以实现色彩风格的统一。

噪声，顾名思义就是给毛玻璃增加一点不规则性，让毛玻璃特效不那么呆板，这一块就不具体讲了。一种最简单的方法就是生成二维随机数组，然后把这些坐标上的点人为改为黑白灰。

最后，展示一下微软给出的 Acrylic 材质的窗口：

NfyUbi3.png!mobile Acrylic 材质的窗口 [5]

结尾碎碎念

这文章拖了三四个月，从构思到查资料到写稿到摸鱼，再加上读研第一学期课好多，愣是拖到了二月份。不过总算还是写完了，也解答了自己心中的一点疑问。

文章里的图只要没有标引用的都是我自己画的。ARGB 的那个是 Affinity Designer 截图，小方块是 HTML + CSS + JavaScript ，卷积核是 PPT。

引用

[1] 封面：Photo by the blowup on Unsplash

[2] Photo by Umberto on Unsplash

[3] Photo by Jessi Pena on Unsplash

[4] 百度图片—— 高斯分布

[5] [6] Acrylic Material 

> 下载少数派客户端、关注少数派公众号，让你的数字生活更精彩 :tada:

> 特惠、好用的硬件产品，尽在 少数派 sspai 官方店铺


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK