网易首页 > 网易号 > 正文 申请入驻

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

0
分享至

  毛玻璃特效被广泛应用于现代操作系统中,不管是 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

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐

悲剧!皮蓬33岁大儿子不幸去世,他与4女生8个孩子,二儿子将冲击NBA

818体育
2021-04-20 10:56:54

赵本山“女徒弟”再炫富,称在北京有两个四合院供自己“使用”

影视综艺大观
2021-04-20 07:30:02

2021年养老金上涨4.5%,工龄30年,养老金3000元,涨多少?

慢镜头看社会
2021-04-19 10:38:48

那些比马云还牛的人,可以低调到什么程度?

新东方在线
2021-04-20 01:26:27

许敏又迎好消息?“南归难往”重磅发声,真实性存疑

木头演义
2021-04-20 04:52:33

“窝囊废”老爸干翻整个黑社会,今年第一部动作爽片来了

环球银幕
2021-04-20 01:57:15

日本帝王级牛郎罗兰告别招牌金发 “染黑"改走气质路线气炸经纪人

明星八卦net
2021-04-20 09:14:36

网约车,被“毁掉“的中年人

用车指南
2021-04-20 15:13:22

我被矮胖的杨钰莹惊到,她还会吸睛吗?!

心里很想瘦
2021-04-19 00:17:50

“三亚海胆”事件游客删道歉视频,记者实地调查发现...

南都周刊
2021-04-17 18:44:33

小鹏汽车董事长晒用户脑部核磁共振图,遭网友批评

IT之家
2021-04-19 14:23:20

康纳性侵案出结果了,这次没有反转!康纳对得起养自己8年的妻子

体育组之虎刘达华
2021-04-20 13:32:32

男人若“用手”过度,3个危害可能会登门拜访,别不当其回事!

漫说健康
2021-04-18 08:00:07

13岁少女裸跪受虐10小时,不雅视频疯传看哭无数人:被霸凌的孩子,一生都困在噩梦里

哈市大呲花
2021-04-19 22:53:37

10-5!10-7!10-8!2场大逆转,火老师对手确定,丁俊晖命运揭晓

体坛全视角
2021-04-20 16:19:42

其实根本无需将核废水排入大海?俄专家提出建议,日本:绝不接受

狙击前沿
2021-04-18 08:41:56

“拆迁潮”卷土重来?城中这3类住房还有拆迁的可能,你家符合吗

好学美食
2021-04-20 16:36:11

中国渔民再立大功!美军高密级“水下间谍”被一网捞起,能抓个更先进的吗?

军武次位面
2021-04-18 01:24:11

取消中考,初高中合并为四年?教育部作出回应,家长欣喜不已!

supreme大学
2021-04-18 16:48:15

当生命还剩下10分钟, 死刑犯是什么状态, 杀人犯和毒贩完全不同

热血汽车资讯
2021-04-17 07:42:38
2021-04-20 19:40:51
少数派sspai
少数派sspai
高品质数字消费指南
2542文章数 20635关注度
往期回顾 全部

艺术要闻

水木湛清华:中国绘画中的自然

头条要闻

男子大量收购亲戚朋友二手车当道具 4年骗保高达81万

头条要闻

男子大量收购亲戚朋友二手车当道具 4年骗保高达81万

体育要闻

金州勇士的樱木花道:豁出命去救球

娱乐要闻

钟丽缇穿透视装上围傲人 风韵不减

财经要闻

科技要闻

华为决定卖车,余承东:弥补手机业务利润下滑

汽车要闻

全方面的惊喜诚意十足 实拍体验全新一代奇骏

态度原创

教育
艺术
房产
时尚
军事航空

教育要闻

强基计划是孩子去名校的跳板?有这个想法的家长务必三思

艺术要闻

水木湛清华:中国绘画中的自然

房产要闻

一季度21城二手房成交43万套 创近五年同期新高

张雨绮疑似新恋情被拍 男友是小8岁的帅哥提琴手

军事要闻

F16真能装:一次挂6枚空空导弹5大1小