最近“毛玻璃图标”疯狂刷屏，本文主要分享一个创作思路，让扁平化的“磨砂视觉”变得立体和生动起来。基于这个思路进行触类旁通，可以得到无限有趣的视觉创意。

去年开始很多品牌试水“磨砂风格” - 一种非常治愈和温润的风格。视觉上用轻盈、透亮的材质结合光线折射的效果去营造一种年轻的、元气的、多彩的、梦幻的微光世界，积极拥抱更年轻的用户圈层。

举几个例子。

▽ 微软Microsoft 365设计语言

▽ 腾讯文档品牌升级

▽ 优酷APP V9.0

▽ 小米MIUI V12

按照常规表现技法，这样的效果往往要用到C4D等三维软件，结合多层材质参数和HDR光源环境，通过Octane或Redshift等渲染插件去实现。

然而，学习成本高？参数不会调？硬件配置不抗造？

没关系。今天分享一个小技巧，教你用sketch或figma快速实现类似效果。

关键点：背景模糊、彩虹渐变、缩放模糊

STEP/01 基本形体

用Ai拉一个标准轴侧立方体。建议用正三角形为单元进行阵列，这样方便后期延展不同规格的立方体。

拷贝到sketch画板里，复制一层方向调转180°，编组放在下一层，作为立方体的背面。

将标红的四边形复制一份，放在最底层作为投影层。

需要注意的是，这块四边形作为立方体底面，跟立方体本身在接触面的阴影重合，用一层去实现即可，方便调整也避免多层叠加导致颜色变脏。

在正面和背面两组之间加一个球体，或其他你想要表达的体块。球体着色方便，对透视没有要求，这里就用球体做演示。

STEP/02 光色效果

自然光通过玻璃晶体折射会形成色散效应，因此我们看到的晶体不是单色，在一定角度下能观察到彩虹渐变。

所以在给四边形添加着色层的时候，可以结合真实世界晶体折射的物理效果，来分层“渲染”每一个面，这过程需要一点点耐心。

用两个面举例，大致示意一下渐变的方向。个人习惯用径向渐变，这样叠加了其他着色层之后比较有流动感。

正面3个块面先用彩虹渐变拉出基调，再错开角度用白色渐变塑造出明暗；然后添加内发光让边缘折射光强化，中间变得通透；最后用内阴影刻画出高光边，提高整体的精气神儿。

我额外给正面加了一道反光，用来强调它表层是镜面反射，而内里才是磨砂雾化效果。

背面3个块面就挑最底层的说吧，另外两个略过。用浅蓝灰的渐变拉出阴影层次，盖一层彩虹渐变（不盖问题也不大），最后加一个高光角（用来消除部分区域的黑影），混合模式为正片叠底。

6个面调整完毕之后，给中间层加一个球体。由于被遮盖，就大致调一个渐变着色好了，让它大眼看上去是个球体。

放一下我的各层参数，供参考。

基本形体着色完成之后，给背景来一点点微光渐变，然后按照顺序盖好每一层元素，你就能看到大致这样的效果。

是不是还，挺有内味的~

正面3块的磨砂程度不必完全相同，可以有所对比，这样能相应提高材质的丰富度，增加一点质感。

STEP/03 环境渲染

一个有质感的环境包含了反光、投影和焦散，尤其对于晶体来说，光线折射形成的焦散是画面的灵魂。在开始之前，要先确定场景的光源方向和角度。

接触面的反光比较简单也略过，比较关键的是投影层的处理。

投影的要点在于，一要体现更为真实的色散效果，二要大致符合光线的衰减原理，三要表达出核心区域的焦散。

关于第一点，还是用彩虹渐变；第二点，用sketch自带的缩放模糊可实现；第三点，加两个发光层。

△ 图片来自bilibili @白无常C4D

用我自己的图层属性做一个演示。先用蓝灰色给投影层一个悲凉的底色，接着逐层覆盖色散渐变层、空气氛围层、衰减层。

然后凭感觉添加一个非常重要的缩放模糊，缩放的起点可以大致参考我的位置。

投影层的基底就好了。在合适的位置（靠多观察）加两层高斯模糊的椭圆，用来模拟焦散效果。

再把接触面的反光层渐变也加上，整个场景是不是瞬间就活了起来！

其实到这一步已经离最终效果大差不差，但反复观察之后还是觉得缺了点什么。

回到现实中仔细观察，终于挖掘到了症结：真实的晶体除了光线折射会形成焦散外，光线在正面的反射也会有焦散！

于是哐哐一顿操作，把正面的也补上。由于时间关系，没有刻意还原焦散区域的形状，这里演示只用同样的四边形概括一下。

尝试过几种不同方向之后快速选了中间的方案，因为光的衰减更显自然，整体画面的线条结构更好看。

最后给画面添加一个色彩调整图层，配上简单的文字排版，就可以输出了。

看到这里也就花了一杯咖啡的时间，是不是就还，挺方便的？

有这个思路做支撑，相信你脑海里已经开始发散，想到了很多可能的创意。比如下图这样的夜光矩阵。

好了，今天的分享就先到这。如果有不同的想法欢迎在评论区切磋 ~ 



本文原创，未经作者允许不可转载！

更多内容，欢迎关注作者微信公众号：赏酒二两！

头部券商UX设计师主理，带你了解更多产品体验设计