Acrylic 材质实现(上)

初识 Acrylic

最开始接触到Fluent Design System的时候(以下简称FDS),这些立方体的质感一下子就把我的目光抓牢了。朴实简单的形状里藏着丰富的层次,表面是哑光又泛出一层温润的光泽,实心纯色却带给人通透的感受。 仿佛是一种介于虚拟与现实之间的材质。

icons_vp_1144x994_4-6.png

将这样一种材质打薄蒙在其他物体前面,锐利的和刺眼的都会被收敛,留下的只有物体朦胧的轮廓和自然融合的色泽。

官方将这一材质效果命名为“Acrylic”,也就是亚克力的英文。很多人包括我自己在第一次见到应用效果图的时候,都误认为这就是Windows早期的毛玻璃效果。

 Acrylic 特效计时器效果图

Acrylic 特效计时器效果图

乍一看的确是与“毛玻璃”材质非常相似,但无论是实物本身、设计实现的方式还是最终呈现的效果,实际都存在着区别。

 

毛玻璃与亚克力

首先是作为两种特效灵感来源的实物材料,毛玻璃与亚克力的区别。

 毛玻璃(上)与半透明亚克力板(下)实物对比

毛玻璃(上)与半透明亚克力板(下)实物对比

毛玻璃又称磨砂玻璃,是经机械喷砂、手工研磨或化学处理形成粗糙不规则表面的玻璃;亚克力是音译名,acrylic的真实翻译是丙烯酸塑料,是一种有机高分子材料,具有较好的透光性和展色效果,加工处理后可呈现出半透明或不透明的质地。

简单来说,一个是玻璃,一个是塑料,达到半透明状态的加工方法也不尽相同,当然不可混为一谈。

Win7时期推出的Aero毛玻璃效果,使用的是小半径的高斯模糊和色调调整,而FDS中的亚克力特效,则运用了更加复杂的合成算法。他们在Windows系统应用中的表现,在我看来前者更有立体感和现实感,精致夺目,后者则如一块温润而不张扬的玉石。

 

高斯模糊

说完区别,再谈谈共性。

无论是毛玻璃的粗糙表面造成的漫反射,还是亚克力染色时混杂在其中的颗粒,最终的结果都是模糊了原本清晰的成像。而作为设计特效来说,两者最大的相同之处也是让大家最容易混淆的原因,就是其中运用的高斯模糊效果。

高斯模糊是一种比普通的均值模糊效果更加平滑的模糊算法,在图像处理软件中被广泛使用,其视觉效果就像通过一个半透明屏幕在观察图像,为整体图像增加了深度感,这也正是毛玻璃和亚克力特效需要达成的效果之一。

 Acrylic 材质的半透明效果

Acrylic 材质的半透明效果

其实,抛开Win7特有的毛玻璃特效不谈,现在在很多场合下会直接使用“毛玻璃效果”这一名称来代指高斯模糊效果,尽管这种叫法可能会造成一些误解。

当然,虽然同样是高斯模糊效果,根据取值的不同、或配合以不同的画面调整,最终呈现的效果还是会有细微的差别。

 

用 Sketch 软件做一个自己的 Acrylic-like 效果

再次回到我最开始接触到这一材质的时候,当即跃跃欲试地想要直接上手画出一个类似的效果图来。

首先进行的尝试是模仿Acrylic材质在立方体上的表现绘制一个带Reveal Highlight效果的播放按钮。

(Reveal Highlight是FDS中另一个重要元素,在本篇中不作赘述)

最终的按钮效果如图,共使用了6个图层对应六种不同的处理。除了参照了Acrylic材质的立方体添加的效果以外,我还试着融入了一些自己对播放图标本身的想法。

 Acrylic-like 效果分解

Acrylic-like 效果分解

由下往上走,

第一层是一个半透明白色的叠加层,对按钮图标为界的背景图案做一个局部提亮;

第二层是作为核心效果的背景高斯模糊;

第三层和第四层分别是白色和黑色半透明填充,使用动态模糊在水平方向延展,想以此营造出一种动态感,不过效果很轻微,黑色的模糊使得图标在纯白背景下也有轮廓;

第五层使用由中心发散的白色到透明的圆形渐变,模拟光照中心,尽量放大减淡并使用图标形状的遮罩限制光照的范围;第六层为图标的轮廓加上极细的渐变描边,渐变中有白、灰和透明的部分,具体的位置需要根据光照角度调节,可以增强图标边缘的锐利感并丰富细节。

这个我戏称为Acrylic-like的效果可以说完全是出于兴趣的产物,实现起来很简单,起主要作用的依旧是高斯模糊。而我认为最有趣的部分,是在这个过程中能体会到高斯模糊以外的那些细节效果对整体观感的影响。正因为这些影响,同是模糊却有不同的名字,而时代会以独特的审美作出选择。

 

官方提供的 Acrylic 材质设计模板

自己摸索终究是兴趣所致,用在最终的设计上总还是有考虑不周之处,最终还应当参考正确的做法,再结合播放器的需求来实现。FDS官方网站上提供有不同制图软件下Acrylic材质的设计参考模板。

 Acrylic 效果分解

Acrylic 效果分解

从透明度、模糊和噪点开始,为扁平界面增加视觉深度和维度;排除混合模式层确保材质上的UI控件具有对比度和易读性;着色层提供个性化的选择。将这些层叠加在一起便实现了Acrylic这一新颖而实用的材质。