一、什么是“毛玻璃”效果

毛玻璃拟态(Glass morphism)是通过阴影、透明度、背景模糊等处理方式，造成类似毛玻璃、磨砂效果的表现形式。主要应用于界面中的icon设计、Web网页、UI界面等视觉设计。 毛玻璃效果最早是在2007年微软的 Windows Vista 和 win7 的系统UI中。苹果在2013年发布的 iOS7 系统和2014年发布的 OS X 10.10Yosemite 系统中广泛使用了这个效果。

二、“毛玻璃”效果图分享

1. icon 设计

2. App 界面设计

3. Web界面设计

4. 卡片设计

三、如何做出毛玻璃效果

以在“Figma”中做“毛玻璃”效果的文件夹icon为例

  1. 先画出想要的图形，通过“布尔运算”中的“连集所选项”完成图形制作

  1. 为图形添加颜色

  1. 添加圆角矩形，将该矩形参数设置为“白色 #FFFFFF”，“透明度50%”

  1. 为白色圆角矩形添加“内阴影 inner shadow”，并调整参数，以下为参考参数

  1. 添加“背景模糊 background blur”，并调整参数，以下为参考参数

  1. 添加长方形如图位置，并调整参数，做出渐变效果，以下为参考参数

最终效果如下图所示

大家可以参考此方法尝试将“毛玻璃”效果运用到App页面设计以及网页设计中

天桥洗碗临时工