大纲

• 什么是毛玻璃？

• 毛玻璃的作用

• 毛玻璃的实际运用

• 案例练习

1. 什么是毛玻璃？

毛玻璃是近两年来继新拟物化 「Neumorphism」之后又一流行起来的视觉设计风格，设计师 Michal Malewicz称呼它为「Glassmorphism」 (毛玻璃)[2]。这一词来源于glass (玻璃) + morphism (形态主义)，其风格的最大特点是像玻璃一样的通透性，可以透过表层看到背景的模糊形态，因此而得名。

Michal总结的毛玻璃风格的四个特征为[2]：

• 使用背景模糊营造出的「玻璃透明质感」
•「多层级」使得物件看起来悬浮在界面上
•「鲜艳的色彩」突出了模糊的透明性
• 半透明物件的「轻薄微妙边框」

也有一部分人会把这种风格叫作「Aero」，此名来自Windows Vista开始使用的新型用户界面 - 「Windows Aero」。「Aero」取自四个英文单词首字母:

• Authentic (真实)
• Energetic (动感)
• Reflective (反射)
• Open (开阔)

意为Aero界面是具立体感、令人震撼、具透视感和阔大的用户界面[3]。

毛玻璃其实并不是最近才出现的全新设计风格，它可以追溯到苹果早期的「Aqua」风格，以及Windows Vista的「Aero」。而自2020年以来毛玻璃再次得以发展，在电脑端和移动端用户界面中都可以看到毛玻璃风格的身影。尤其在设计网站Dribbble上毛玻璃风格更是风靡一时，直到现在还有很多毛玻璃风格的作品层出不穷。

2. 毛玻璃的作用

(1) 视觉美感

有通透性的玻璃质感，页面轻盈，有呼吸感。

(2) 层次感

透过毛玻璃层，可以看到下面模糊的背景，并不会影响前景元素的展示。这种方式可以将层级很好的表达，虚化了背景而强化前景，用户也可以清晰地感知到自己身处何处。

(3) 精致微妙的品质感

毛玻璃图标的使用使得图标更加精致，具备透视感，可以增添页面的活力。

3. 毛玻璃的实际运用

(1) 用于整个页面背景

典型的例子 —— iOS以及macOS系统对毛玻璃作为页面背景的使用。比如，iPhone的搜索和控制中心页面，还有macOS的桌面。这样的处理可以让用户知道自己所处位置，也不会影响当前功能的视觉与使用。

这种目前在实际app及web页面设计中并不十分常见，但在设计中若有突出层级以及营造品质感的需求，毛玻璃背景不失为一种很好的表现形式。

(2) 用于标签栏等UI控件背景

我们可以看到iOS的底部标签栏和macOS的侧边栏都使用了毛玻璃背景形式，而微信标签栏也采用了相同形式。毛玻璃风格的标签栏主要优点在于弱化了标签栏和主体内容之间的割裂感，突出了主体内容。同样的，它并不会影响用户对标签栏按钮的操作使用。

(3) 用于图标设计

毛玻璃同样适用于图标设计，精美的毛玻璃风格图标可以给我们的页面带来活力和品质感。可以看到，喜马拉雅App主页的图标就使用了毛玻璃风格。

(4) 用于特殊控件

除了作为背景、图标设计，毛玻璃还可用于一些特殊控件。比如下图QQ音乐App就使用了毛玻璃风格，作为小图标的背景，置于歌曲图片之上。这样的表现形式使得图片展示与其上的图标功能过渡自然，歌曲图片并不会有图片被挡住的不适感。

以上，可以看出，目前市场上对于毛玻璃的使用还是比较谨慎的，一般会用于比较小的控件中，比如标签栏和图标。通过细小的控件设计，营造出精致与品质感。大面积的毛玻璃形式还是要小心使用。

4. 案例练习

我们就以毛玻璃图标为例，做个小练习 (使用工具：Figma)。

在做的过程中，谨记Michal总结的4个特征 - 背景模糊 (玻璃透明质感)、多层级 (悬浮)、鲜艳色彩、轻薄微妙边框。

Step 1: 构建基础图标

这里我们以「照相机」图标为例，我们使用填充类型的图标，复制一个相机形状并缩小，旋转15度左右，置于正的相机右上方，图层置于后方。这里设置的整体大小为32x32px。

Step 2: 填充鲜艳色彩

我们给后方的相机填充一个鲜艳的色彩，也可以使用渐变色。这里使用的色值如下：

Step 3: 背景模糊

这里给前方的相机填充一个带透明度的相近颜色，添加背景模糊 (数值需要根据图标应用大小和实际操作效果而设置)。我们可以看到图标已经有了玻璃透明质感。

Step 4: 添加轻薄微妙边框
我们给玻璃透明质感的相机涂层添加一层淡淡的边框，数值参考下图。边框最好设置渐变色由x% 到0%，营造微妙感。

Step 5: 增添细节
相机的圆圈添加渐变效果，与背景更加融合。

这样我们一个毛玻璃风格的图标就做好了！可以试着自己练习设计一下其它的图标。

参考引用

[1] Food Ordering Website Design - By Tazrin
[2] Glassmorphism in user interfaces
[3] Windows Aero百度百科
[4] Sales Pop ‑ Social Proof Popup - By Ibrahim emran

[5] Food Delivery Dashboard - By Alexandra Ivanchenko
[6] Freebie: Iconly Glass | Dark - By Amir Baqian