用sketch做玻璃拟态图标！

玻璃拟态是今年各大设计网站提到的比较多的风格，很多文章将其定义为设计领域的新趋势，我觉得这并不合理。因为玻璃拟态被实际应用的并不多，只能说在各设计网站上比较流行，有设计师自身拿来“意淫”的成分。

玻璃拟态尤其不适合在实际项目中的界面设计上使用，其主要不足有以下几点：①页面需要大量留白，过渡占用空间，②在日光环境下辨识度太低 ③开发实现成本高，渲染占用系统资源④除了新颖，视觉效果一般为了设计师“一己私欲”，这牺牲是不是有点过大了？

如果界面非要做成玻璃拟态的效果，我觉得只有在深色背景+黑夜模式下效果是最佳的。

难道被设计师煞费苦心发明出来的玻璃拟态就这么被抛弃了？不是的，我们只是全盘否定了用玻璃拟态做界面，但是用来做背景和图标还是可以的（做效果图也不错）。

做背景我就不多说了，iOS 14，macOS Big Sur 和 Windows 10 20H2上用到的比较多，跟早期说的毛玻璃效果类似。

今天主要介绍下拟态图标的实现方法，技法很简单，实现过程中有三个细节需要注：

1、模糊方式需要选择“背景模糊”

当模糊选项里背景模糊离奇消失时，试试重新选择一下其他模糊选项就会再次出现

2、一定要给图层样式填充添加不透明度而不是在图层外观里面添加

3、模糊图层的投影只投在后面的图层上：

如上图，图层A的投影只显示与图层B重叠区域的部分，投在B区域外的不显示，这需要把A复制一层加上投影，然后用B作为蒙版层对A的投影进行遮罩。

设计的关键在于遮挡部分实现的效果，图层A加投影是为了前后界限和空间区分更明显，模糊层A还可以细化加内隐影效果: 可以加两个一深一浅，浅的作为投影处的暗部反光，加两个也是为了让界限明显一些（尤其是在不透明度很低和深色背景下增加内阴影更加有必要）；其他效果可以自由发挥，如给整体加弥散投影、初始图层加一些微渐变等。

其它我就不多说了，下面是网上找的一些案例，效果和种类基本就这些，大家可以结合应用场景参考下。

更多干活查看“小桔设计”公粽号

1. 设计师要懂的字体代码知识

2. 什么？不会用Sketch画图标？看这里！

3. 冷门但好用的Sketch高频技巧