打开

iOS、Windows 好看的「毛玻璃」效果,原来是这样设计出来的

subtitle
少数派sspai 2021-02-24 16:24

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

RGBA

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

打开网易新闻 查看更多图片

RGB 像素 [1]

但是,如果做过设计,或者写过 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)。

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

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

模糊效果

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

模糊 [2]

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

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

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

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

高斯模糊

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

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

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

一维高斯分布 [3]

Acrylic 材质

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

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

微软 Fluent Design 中的 Acrylic 材质 [4]

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

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

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

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

Acrylic 材质的窗口 [5]

结尾碎碎念

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

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

引用链接:

[2] Photo by Umberto on Unsplash:

https://unsplash.com/s/photos/lcd-pixel?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText

[3] Photo by Jessi Pena on Unsplash:

https://unsplash.com/@jespl?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText

[3] 高斯分布:

https://graph.baidu.com/pcpage/similar?originSign=12151f56fe3059e436e7b01612262867&srcp=crs_pc_similar&tn=pc&idctag=tc&sids=10007_10803_10915_10913_11006_10924_10905_10018_10901_10942_10907_11012_10970_10968_10974_11031_11123_12202_13203_16202_17002_18022_17110_17850_17862_17070_18010_18102_19000_19109_17207_18240_18248_9999&logid=2855090928&entrance=general&tpl_from=pc&image=https%3A%2F%2Fss2.baidu.com%2F6ON1bjeh1BF3odCf%2Fit%2Fu%3D2062747996,609666156%26fm%3D15%26gp%3D0.jpg&carousel=503&index=0&page=1

[4] [5] Acrylic Material :

https://docs.microsoft.com/en-us/windows/uwp/design/style/acrylic

特别声明:本文为网易自媒体平台“网易号”作者上传并发布,仅代表该作者观点。网易仅提供信息发布平台。
12赞
大家都在看打开应用 查看全部
网易热搜每30分钟更新
打开应用 查看全部
打开