毛玻璃拟态风格设计

在网上搜索毛玻璃效果，发现这种视觉设计最早可以追溯到2007年，在网上搜索相关教程的时候发现这玩意儿看起来高大上，一旦知道了实现原理，操作起来就轻松许多！

先来说一下毛玻璃特征：

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

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

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

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

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

 

展示一下我的练习小作业：

 

使用软件：sketch

要点：背景模糊

我们先尝试这来分解一个图标，这里去找一个别人的图标做案例

来看这个icon，简单拆分出来基础形状（卡片通过布尔运算做出）

如果想要做出磨砂的感觉，就一定要透，所以给上层的卡片一个渐变方式的透明

透明度调整好了之后给开始做元素排列

 

排列好之后给上方的元素一个背景模糊，就这样，简单的毛玻璃效果就完成了60%，最后再给上面的卡片一个渐变描边，适当加一些阴影/内阴影/投影就可以啦。

 

 

一个粗糙的半成品就出来啦！