学过设计的同学应该都知道RGBA，在元素堆叠的情况下，改变上层Alpha值，就会形成透过上层看下层的颜色，类似于玻璃半透明的效果，这就是不透明度，类似玻璃的效果。

那么毛玻璃呢？是在玻璃不透明度的基础上，加上一些材质的感觉，也就是模糊效果，让元素边界模糊，就好像像素眼变成了高度近视，色块进行了混合，产生了磨砂材质的感觉，叫做毛玻璃。

MKBHD（油管博主） 首先提到了风格Glassmorphism （玻璃拟物化）是 Glass（玻璃）和 Skeumorphism（拟物化）的结合，也确实在2020成为了流行视觉元素。

• 摘自dribbble

溯源的话是ios开始，到win10开始更新在Fluent Design 当中，背景和前景之间的「Acrylic」层包含饱和增强层、高斯模糊层、色彩融合层、色调叠加层、噪点肌理层。而后mac os广泛使用这种玻璃透明层，感兴趣的小伙伴可以查一下苹果微软设计的过程，这里不再赘述。

摘自dribbble

在视觉上体现出纵深感，这里涉及到Z轴的概念，也就是各元素之间的空间感，去强调顶部关键信息，更好的建立界面的层次，提升品质感和神秘感。              

总的来说毛玻璃拟物化可以提升界面的：层次感、品质感、用户的惊喜感、更好的表达用户当前的位置、多用于卡片的展示中。

摘自dribbble

首先，我们来观察玻璃拟物化需要的细节特点

▼元素的层次性如何体现？

具有明显的悬浮感，需要突出的主元素在最上层。

▼玻璃的透明感如何体现？

使用鲜艳的色彩从半透明的卡片层中透出。

▼那透明度需要如何调节？

填充和透明度调节程度不同，效果是不一样的，在卡片布局来说，离我们近的元素吸引的光就多，则更透明。

▼背景玻璃的质感？

磨砂材质的质感是通过各种背景模糊实现的，或者可以再叠加上纹理的效果。

▼细节质感表达。

你可以发现现实玻璃边缘是有光泽的，所以我们也可以在边框增加细微的光线边界去强化质感，更可以突出主体本身。

摘自dribbble

有时候我们总能看到很多流行趋势？可是怎么把这些趋势运用到自己的实际工作中呢？今天小核儿带大家来实际操作一下，模拟一下真实工作需要的环境去产出。

首先我们分析这种流行因素适用于什么环境？可以看到收集的很多参考都将这种玻璃拟物化效果做成了卡片，具体优点上面提及了，但很少作为按钮或者其他部分，因为这样会不利于部分用户的阅读体验。这个可用性测试结束后，我们还发现国内app也开始运用这些玻璃拟物，除了海报H5之外，可以看到最初自如的图标这种通透新鲜感则是玻璃拟物化，而后腾讯、58都有相关设计。

摘自dribbble

拆解好思路后，我们实操尝试去运用，比方小核儿的公司需要做首页金刚区的图标，和产品商量过后可以尝试新的流行方案，那我们就开始做吧。

首先做出面性组合图标的图形设计

• ——加入渐变色提升图标轻量感

• ——思考把哪部分色块变成玻璃感

• 

• 
  

  • 
    

  • ——复制一层在上面作为玻璃透明层调节填充的不透明度数值

  • ——把模糊改成背景模糊调节数值

  • ——增加细微边框调节玻璃边缘光感

    
    

  • 

  • 
    
    • 
      

    • ——轻微错位与下层形成层次性

    • ——增加整体阴影层拟物化更具立体感

    • ——然后最后根据界面的主色去更改图标的颜色

总结 讲道理，这个效果在很早就已经应用了，但这就是流行趋势，不断的轮回，设计师在感知和探索流行趋势的同时，去创造出新的东西来，所以不妨动手试试看，在实验的同时会获得很多新的灵感。

这就是设计，有趣且不单调，永远给你新的东西，永远让你保持热爱！

Powered by Froala Editor