学过设计的同学应该都知道RGBA，在元素堆叠的情况下，改变上层Alpha值，就会形成透过上层看下层的颜色，类似于玻璃半透明的效果，这就是 不透明度，类似玻璃的效果。
那么毛玻璃呢？是在玻璃不透明度的基础上，加上一些材质的感觉，也就是 模糊效果，让元素边界模糊，就好像像素眼变成了高度近视，色块进行了混合，产生了磨砂材质的感觉，叫做毛玻璃。
MKBHD（油管博主） 首先提到了风格 Glassmorphism （玻璃拟物化）是 Glass（玻璃）和 Skeumorphism（拟物化）的结合，也确实在2020成为了流行视觉元素。
溯源的话是🍎ios开始，到win10开始更新在Fluent Design 当中，背景和前景之间的「Acrylic」层包含 饱和增强层、高斯模糊层、色彩融合层、色调叠加层、噪点肌理层。而后mac os广泛使用这种玻璃透明层，感兴趣的小伙伴可以查一下苹果微软设计的过程，这里不再赘述。
摘自dribbble
在视觉上体现出纵深感，这里涉及到Z轴的概念，也就是各元素之间的 空间感，去强调顶部关键信息，更好的建立界面的层次，提升 品质感和神秘感。
总的来说毛玻璃拟物化可以提升界面的： 层次感、品质感、用户的惊喜感、更好的表达用户当前的位置、多用于卡片的展示中。
摘自dribbble
▼元素的层次性如何体现？
具有明显的悬浮感，需要突出的主元素在最上层。
▼玻璃的透明感如何体现？
使用鲜艳的色彩从半透明的卡片层中透出。
▼那透明度需要如何调节？
填充和透明度调节程度不同，效果是不一样的，在卡片布局来说，离我们近的元素吸引的光就多，则更透明。
▼背景玻璃的质感？
磨砂材质的质感是通过各种背景模糊实现的，或者可以再叠加上纹理的效果。
▼细节质感表达。
你可以发现现实玻璃边缘是有光泽的，所以我们也可以在边框增加细微的光线边界去强化质感，更可以突出主体本身。
有时候我们总能看到很多流行趋势？可是怎么把这些趋势运用到自己的实际工作中呢？今天小核儿带大家来实际操作一下，模拟一下真实工作需要的环境去产出。
可以看到收集的很多参考都将这种玻璃拟物化效果做成了 卡片，具体优点上面提及了，但很少作为 按钮或者其他部分，因为这样会不利于部分 用户的阅读体验。这个 可用性测试结束后，我们还发现国内app也开始运用这些玻璃拟物，除了海报H5之外，可以看到最初自如的 图标这种通透新鲜感则是玻璃拟物化，而后腾讯、58都有相关设计。
拆解好思路后，我们实操尝试去运用，比方小核儿的公司需要做首页金刚区的图标，和产品商量过后可以尝试新的流行方案，那我们就开始做吧。
加入渐变色提升图标轻量感
思考把哪部分色块变成玻璃感
轻微错位与下层形成层次性
增加整体阴影层拟物化更具立体感
然后最后根据界面的主色去更改图标的颜色
讲道理，这个效果在很早就已经应用了，但这就是 流行趋 势，不断的轮回，设计师在感知和探索流行趋势的同时，去 创造出新的东西来，所以不妨动手试试看，在实验的同时会获得很多 新的灵感。
这就是设计，有趣且不单调，永远给你新的东西，永远让你保持热爱！
小核儿的原创需要你的支持☟☟
