毛玻璃效果是当今视觉设计领域的一种新趋势，备受设计师们的追捧。它并非近期才出现的全新设计风格，早在苹果初期的 Aqua 风格和 Windows Vista 的 Aero 中就有运用。近年来，它在 UI 设计领域中再次火了起来，并在各大设计网站上大受欢迎。

在本篇文章中，我们将以毛玻璃天气卡片为例，详细介绍毛玻璃效果的常见应用场景和AE制作方法。同时，我们还会分享一些动效快速落地的技巧，帮助大家更高效地完成动效设计。

什么是毛玻璃效果？

毛玻璃效果它是继新拟物画【Neumorphism】之后又一流行起来的视觉设计风格，设计师 Michal Malewicz 称呼它为“毛玻璃”。这一词来源于 glass (玻璃) + morphism (形态主义)，毛玻璃风格的最大特点是具有像玻璃一样的通透性，可以透过表层看到背景的模糊形态，因此而得名。

一、  先夸夸毛玻璃风格的作用 & 优势：

 1. 增加画面美感：
毛玻璃的设计风格具有很强的品质感和通透感，可以增添页面的设计感，提升视觉美感，使页面看起来轻盈、柔和和呼吸感。

（图片素材源自网络，仅用于学习交流，侵联删）

 2.  增加画面层次感：
通过毛玻璃层，可以看到模糊的背景，但不会影响前景元素的展示，毛玻璃设计能够营造出层次感，让用户可以更加清晰地区分出前景和背景，同时虚化效果可以创造出空间感。

3.  提高用户体验度：
毛玻璃这种效果可以为设计带来一种柔和、模糊的感觉，同时也在一定程度上强化了设计作品的现代感和科技感，让观众感受到一种模糊、朦胧和神秘的氛围。同时它还具备通透感的精致微妙品质，有助于提升页面的设计感。不仅能很好地表达层级，虚化了背景同时强化了前景元素，能清晰地表现出页面的空间感，给用户带来更好的视觉体验。

二、  毛玻璃效果在UI设计中的应用 

毛玻璃效果的设计应用范围非常广泛，可以用于网页、海报、广告等多种场景，为设计作品增添独特的视觉魅力和艺术价值。同时也能够增加设计的层次感和深度，创造出一种立体感和运动感，能够吸引的眼球，给人眼前一亮的感觉。

下面我们一起来看下毛玻璃效果在 UI 设计中的具体应用。

1、图标设计
毛玻璃质感目前在图标设计方面应用最为广泛。采用毛玻璃效果的图标设计，可以为产品增添美感，并增强用户对产品的好感度。

2、界面设计
一个很典型的例子就是苹果和 Win 系统使用毛玻璃作为页面背景。这种处理方式让用户能够清楚地知道自己所在的位置，将弹窗的背景进行模糊处理，使得浮动感更强。

3、标签栏等UI按钮
Win操作系统底部任务栏、macOS 侧边栏和微信标签栏都采用了毛玻璃背景。毛玻璃风格的标签栏主要优点在于它减弱了标签栏和主体内容之间的分离感，强调了主体内容。

4、品牌形象
提升品牌形象可以有效提升用户对品牌的认知与好感度，例如腾讯文档的品牌升级迭代大量使用到了毛玻璃设计手法，从而进一步提升了品牌形象的品质。

5、UI 卡片设计
毛玻璃质感的天气卡片是手机桌面上广泛采用的 UI 卡片设计元素，它突出了天气图标并注重天气信息的展示，为用户创造了优质的使用体验。

三、  案例分析

像下面这套毛玻璃效果天气卡片是如何制作的？ 其实方法很简单。只要你掌握了基本的图形绘制技巧，并且能够合理地运用透明度、模糊度、和阴影关系等属性，你也可以轻松实现。
接下来我们以这个“晴转多云”的动效为例，来详细分析它的动画元素和图层关系。
教程难度：⭐️⭐️⭐️（进阶级）
使用软件：Adobe After Effects（动效）、PAGViewer（动效文件）

从下图可以看出，天气卡片的结构主要由三个部分构成，分别是底部色块层、文字层和天气图标层。在布局上，采用了左右对称的方式，将文字和天气图标分别放在上方的两个区域。这样的设计不仅可以使画面更加平衡和有序，还可以呈现出一种稳定、协调的视觉效果，同时也能有效地传达天气信息给用户。

在了解了整体结构之后，我们就可以将它们逐层分解，得到以下元素，方便大家清楚地看到每个图层的样式，为后面的 AE 制作部分做好准备。

话不多说，干货来啦， 3 2 1 上教程！ 
现在打开 AE，让我们一起来制作这个好看的毛玻璃天气卡片吧！

 1、  新建总合成
在 AE 中使用快捷键 “Ctrl + N” 新建合成，合成名称命名为“晴转多云”，尺寸为3000x1800px，像素长宽比为方形像素，帧速率设为 30fps，持续时间 5s。

2、  绘制图形 
「 1 」、绘制“云朵”造型
①. 再次新建一个同等大小的合成，命名为“云”，在这个新合成中绘制云朵造型，如下图展示。新建 2 个纯色层，使用“椭圆工具”按住 “Shift”键在图层 1 和图层 2 中绘制一大一小两个圆形；接着再新建一个纯色层，用“矩形工具”绘制一个矩形做封底将两个圆形连接起来（图层3），这样一个云朵的基本造型就搞定啦。

②. 接下来给这朵云整体染个色，在图层最上方新建一个调整图层，在调整图层上添加“梯度渐变”效果，渐变色起始颜色数值是 #F1FFA1 ，结束颜色数值是 #3F8393。

③.然后手动定位好“渐变起点”和“渐变终点”，位置如下图展示。

④.接下给云朵添加一个羽化的轮廓高光用来增加它的立体感。
选中刚绘制好的三个图层，按快捷键 “Ctrl + C” 复制一份。然后 “Ctrl + N” 新建合成，将合成命名为“云朵高光”，在这个新合成中 “Ctrl + V” 粘贴。

⑤.全选图层后--快捷键 “Ctrl + Shift + C” 新建预合成，命名为“云朵轮廓”；选中‘’云朵轮廓‘’合成按快捷键“Ctrl + D”复制一层，选中‘’图层2‘’设置其轨道遮罩属性为“Alpha反转遮罩[云朵轮廓]“；使用鼠标在画布中拉动”图层2“编辑框来调整大小，露出一个白云的轮廓边边即可；接着选中”图层1的白云轮廓合成“在效果控件栏中-右键-模糊和锐化-高斯模糊，模糊值给到120左右即可。

⑥.回到“晴转多云合成”并在项目窗口中找到“云”和“云朵高光”预合成，将它们拖入到“晴转多云合成”合成中，这样可爱的云朵造型就绘制完成啦！

「 2 」、绘制“太阳”造型
①.快捷键 “Ctrl + N” 新建合成，合成名称命名为“晴天图标”；接着按快捷键 “Ctrl + Y” 新建纯色层，命名为“太阳”，使用椭圆工具绘制一个正圆形遮罩，接着给它添加一个“梯度渐变”效果，渐变色起始颜色数值是 #FFC703 ，结束颜色数值是 #FC9703。

②.接着制作太阳光晕效果，利用“椭圆工具”按住“shift键”再画出一个同等大小的圆形，添加“高斯模糊”效果，模糊值给到 500 左右。

③.接着选择“圆角矩形工具”绘制一个条形，给它添加“中继器”效果，中继器副本参数: 9 , 变化矩形1下的旋转属性为：0x+80°。

④.在第0帧激活图层变换属性下的“旋转”秒表，并在第4s处添加关键帧，调整旋转参数：0x+200°。接下来 切换“图标编辑器”模式，参考下图调整控制杆给它添加缓动效果。

⑤.制作太阳的高光效果，按快捷键 “Ctrl + Y” 新建纯色层，命名为：太阳高光，颜色选择：白色。接着使用 “椭圆工具”绘制一个正圆形蒙版得到遮罩 1； 选中蒙版 1 使用快捷键 “Ctrl + D” 原位复制一层得到蒙版 2；将其属性改为“相减”模式，使用移动工具将蒙版 2 向左下方移动，并参考下图数值分别调整蒙版 1 和 2 的羽化值。

⑥.接下来按照下图所示的图层顺序组装所有元素，并关联子父关系和关键帧动画。

「 3 」、绘制“背景板”造型
①.在“晴转多云”合成中使用“圆角矩形工具”绘制一个长 2300 px ，高 700 px 的圆角矩形，命名为“框底色”，填充颜色为：白色，描边：无描边，图层透明度设置为：30

②.选中“框底色”图层，按快捷键“Ctrl+D”复制一层，将其图层名称改为“框底色”，填充颜色为：无填充，描边：5 px，图层透明度改为：100

3、  添加可编辑文字
①.将“晴天图标”合成拖入“晴转多云”总合成中，并调整到合适位置。使用”横排文字工具“鼠标左键拖住不放分别绘制 3 个文字边框，效果如下图所示。
使用带边框的文字图层制做可编辑文字的好处是如果需要自动换行和缩小字号，PAG 会在框内自动换行和缩小字号。如果只需要换行不需要缩小，则用框文本制作，且将框的宽度设置成你想要的宽度，框的高度设置尽量大一些，这样就不会缩小字号，只会增加行数。

②.接下来做卡片翻转效果，选中图层 1-5 将它们父级和链接关系关联到最下层的“框底色”图层上并激活所有图层的“ 3D 图层”属性，时间线拉到第 “ 20f 处 ”激活该图层 X 轴旋转小秒表，再将时间线拉回第 0 帧将 X 轴旋转数值改为“0x+90” ，按住“ Alt ” 键单击“ X轴旋转秒表”  添加弹性表达式。
弹性表达式如下：
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}
}
if (n == 0){
t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
amp = .03;
freq = 2.5;
decay = 4.0;
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{
value;
}

这样一套 Q 弹的天气卡片动效就制作完成了。
参考下面效果，举一反三，你可以继续完成其他天气图标卡片。

 4、  导出 PAG 文件与测试
①.在 AE 菜单栏中选择 “ 文件 ”--“ 导出 ”--“ PAG File (panel) ”
②.在弹出的“ 导出 PAG ”面板中选择 “晴天图标”合成后的设置“设置”小齿轮按钮，接着勾选 BMP 开关导出 PAG 文件。
③.回到“ 导出PAG ”面板中勾选 “ main 晴转多云 ”总合成后，选择 “ 导出 ”即可。

④.导出成功后，PAGViewer 将自动启动以进行预览播放。此时我们可对相应的可编辑图层进行编辑测试预览，且文件信息栏下的素材性能相关参数也是一目了然。

毛玻璃质感的动效设计方式适用于多种场景，包括图标设计、界面设计、标签栏、品牌形象及 UI 卡片设计。希望在今后的设计实践中，你能够灵活运用这些技巧，不断创新和突破，将你的设计作品提升到一个新的高度。

通过PAG也能完美实现这个效果，如果对毛玻璃效果实践或是PAG的使用有疑问，欢迎留言。

Powered by Froala Editor