用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高频技巧

推荐阅读更多精彩内容