一篇文章搞懂毛玻璃拟态

前言

设计趋势总是在不断的变化，近几年拟物风格又以新的形式——新拟态回归大众视野，苹果发布了macOS Big Sur 操作系统，整体风格应用了新拟态的设计思路，采用了3D质感的元素设计，其中还包含了运用阴影、透明度以及背景模糊/高斯模糊手法模仿玻璃形态，构建空间感的新兴拟物态风格——毛玻璃拟态风格。

一、毛玻璃拟态的历史

毛玻璃视觉其实可以追溯到2007年微软发售的 Windows Vista和Windows7，随之后来的OS X 10.10（Yosemite）和iOS7中大量出现毛玻璃效果，比如底部快捷菜单栏、通知中心和多任务切换窗口等，苹果公司加大了模糊程度，透明效果基于扁平，更顺应当时UI扁平化的设计趋势。

后来，苹果在他们的移动操作系统中大大减少了毛玻璃效果，但是最近在 MacOS Big Sur 中又增加了毛玻璃质感。微软的 Fluent 设计系统也非常注重这一效果，他们称这种效果为 “亚克力”，并将其作为设计系统的组成部分之一。

二、毛玻璃拟态的特征及优缺点

1.毛玻璃拟态的特征

毛玻璃拟态模仿了塑料材质（凹凸质感，凸显层次感），这个新的视觉风格更加注重垂直空间Z轴的使用：

—透明感（使用背景模糊/高斯模糊的磨砂玻璃效果）

—物体漂浮在空间中，通过前后关系表现层次感

—鲜艳的色彩感，更突出了模糊的透明度

—半透明物体边缘的微妙处理，采用细腻的边框来表现玻璃质感

这是注重空间感的典型特征，意味着这种风格有助于用户建立界面的层次结构和深度。用户可以看到物体间的层次关系，哪一层在哪一层之上，就像空间中真实的玻璃一样。

2.毛玻璃拟态的优缺点

优点：

毛玻璃拟态效果之所以被大家应用和认可除了它能带来的优秀视觉表现，更重要的是其本身的功能意义，它能帮助设计师更好的拉开信息层级并达到视觉统一

（1）视觉表达

通过背景毛玻璃化，可以中和扁平化图文带来的生硬不立体。在卡片元素上添加毛玻璃效果，与其他元素叠加后视觉上建立层次感，将信息层级更好的表达出来；在图标中增加毛玻璃效果，可以提升图标通透的质感。

（2）品牌感

良好的视觉统一，有助于提升产品的品牌感。

不足：

毛玻璃拟态效果并不好应用于上线产品。它不适用于按钮或开关（这些重要的界面元素应该具备高对比度，更加清晰明确），模糊效果也要注意分寸，屏幕上过度使用模糊效果，会使整个 UI 对某些用户可阅读性差，同时也会使页面看起来显脏。

也可以这样理解，使用毛玻璃拟态风格的前提是卡片内部有足够的对比度和合适的间距来定义层次结构，并在视觉上 “分组” 所有相关的对象。它可以只在一个元素上使用，也可以作为卡片背景修饰视觉效果，这种很容易达到较好的视觉效果，页面风格也会特别亮眼，整体干净、明亮。

三、毛玻璃拟态的应用

1.卡片背景

用作卡片背景时，能很好的表达信息之间的层级感，朦胧透出下层视觉元素，营造了良好的视觉美感。

2.APP图标

用作APP图标，可以提升图标通透的质感。常见的三种图标案例：A.顶部图形为白色，底部图形为其他色；B.顶部图形和底部图形为同色，顶部图形颜色明度高；C.顶部图形和底部图形不同色

3.界面包装

运用毛玻璃去包装UI界面，页面风格整体干净、明亮，有较好的视觉效果。

四、毛玻璃拟态绘制原理

1.和任何基于卡片的布局一样，物体离我们越近，它吸引的光就越多。在这种情况下，意味着它会更透明一些。

2. 整个效果的基础是阴影、透明度和背景模糊的组合。这种风格可以使用一个透明层，也可以使用多个透明层，但多个透明层叠加在复杂彩色背景上的效果会更好（当至少两个透明层出现在一个相当复杂的彩色背景上时，玻璃形态的效果是最突出的）。

五、毛玻璃拟态-卡片背景的绘制要点

1. 如何设置正确的透明度

重要的是要记住，你不能让整个形状透明，需要调整填充的透明度来达到透明效果。如果不调整填充的透明度，仅仅是调整整个对象的透明度，就不会产生模糊的效果。

在上面的例子中，背景模糊值完全相同，但圆形图像的叠加效果看起来完全不同。当填充不透明度为 100% 时，对象的透明度再低也没有用，根本无法得到想要的模糊效果。

2.如何选择合适的背景

最底层背景在这个效果中扮演着重要的角色。不能太简单或太单调，否则毛玻璃效果就看不出来，但也不能太复杂。

复杂的背景有助于玻璃形态的展现，这可能就是苹果选择了彩色背景作为 MacOS Big Sur 默认壁纸的原因。当模糊的透明层位于背景之上时，那些容易辨别的色调差异也很容易被看到。

六、毛玻璃拟态-图标的简版教程

用作卡片背景绘制操作比较简单，使用背景模糊就可以搞定，重点在于根据实际情况进行透明度和模糊度的调整，这里就不再做展示。

下面是毛玻璃拟态-图标的教程：

第一步：绘制基础图形，顶部图形颜色#DDEDFF，底部图形渐变色#00EDFB——#001EEE

第二步：底部图形复制一层，做高斯模糊效果，高斯模糊：12，不透明度72%，将模糊层置于顶部图形上，添加蒙版

第三步：为了更好的增加图标辨识度，增加渐变描边，渐变色#FFFFFF——#D5E9FF，图标绘制完成。

过程中用到的色值和模糊度可以根据视觉美观度做适当调整，也可为图标增加阴影，提升整体效果。

结束语

作为设计师，我们可以看到，设计趋势一直在变化，每隔几年就会转向另一种风格，但似乎每种风格又有自己的前世今生。所谓趋势轮回，并不只是单纯的回归，而是以一种的更丰富、更立体、更具有层次感的方式呈现在人们面前。

我们要做的就是不盲目，不盲从，看清楚趋势变化的本质。