iOS、Windows 好看的「毛玻璃」效果,原来是这样设计出来的
▍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
霸霸值到了
校验提示文案
仿真时光
校验提示文案
值友5026165542
校验提示文案
永远的那条雨巷
校验提示文案
Goon滚雪球
校验提示文案
金沙子
校验提示文案
晨哥来了
校验提示文案
色魔长得美
校验提示文案
战逗逼
校验提示文案
战逗逼
校验提示文案
色魔长得美
校验提示文案
晨哥来了
校验提示文案
金沙子
校验提示文案
Goon滚雪球
校验提示文案
永远的那条雨巷
校验提示文案
仿真时光
校验提示文案
值友5026165542
校验提示文案
霸霸值到了
校验提示文案