毛玻璃图标与实际应用

设计趋势总是在不断的变化，近两年新拟态回归我们的视野，毛玻璃风在推出之后已经过去将近一年,其实已经又有了很多在原有基础上的发散和创意,自如、腾讯早已经纷纷上线,最近喜马拉雅也更新了icon.

跟风给我们公司的功能区图标也换一换,先分析一下毛玻璃图标的组成.

拆分之后更能理解它的结构

第1步

绘制基础形状,我用的是sketch,工具不限按平时自己顺手的来。

第2步

1. 将图标调整理想状态,复制背景进行高斯模糊,我的模糊数值是:4(可根据情况调整)。

2. 将主形状层复制,将复制的主形状层与背景层进行:减去顶层。

3. 将主形状层不透明度调成60%(可根据情况自行调整,如果像玻璃质感更强一些可调得更低一点,磨砂感更强可向上调数值),增加1px描边将描边调整渐变,我设置的是#FEC360-#FFFFFF角度渐变,再将模糊层A剪切蒙版到主形状层得到C。

4. 将点缀图形增加阴影,增加整体精致度。
   

首页功能区的图标延展

因为我们公司是做家庭教育 主要针对用户是二三线地区的家长,图标设计不能过于年轻化,根据产品定位将首页功能区的图标进行毛玻璃风格延展设计。

总结

• 在绘制毛玻璃图标是也要把握模糊程度，模糊过大也会造成视觉障碍，每个颜色色相的视觉透感不同也会造成整体不统一，同样的透明度我在做“亲子沟通”图标的颜色就会显得很通透，需要手动进行调整。

• 毛玻璃风格少量使用或用在背景卡片上，都可以让整体页面显得明亮、轻快。