注册页面
玻璃质感的注册页面
玻璃拟物化
愉悦感、层次感、呈现语境、微妙高级
Figma，ProtoPie，Adobe，sketch
2020年—-至今
Glassmorphism是一种新趋势，在诸如以下的社区论坛上越来越受欢迎Dribbble、Behance。
「玻璃拟物化」是什么？MKBHD（油管博主） 首先提到了风格Glassmorphism （玻璃拟物化）是 Glass（玻璃）和 Skeumorphism（拟物化）的结合，也确实在2020成为了流行视觉元素。
「玻璃拟物化」在某些方面和「新拟物化」是一脉相承的，但是它有着相对更加具体的视觉隐喻，也就是我们日常接触的「玻璃」。
首先，当然是视觉愉悦感。使用「玻璃拟物化」来设计的界面，由于毛玻璃的通透性，在有多个控件的情况下，呈现出一种独特的「虚实结合」的美感。
用户可以很清晰地感知到多个不同的层次，看不清楚但是可以透过「玻璃」的「背景层」，创造朦胧效果的「玻璃层」，前景的UI控件，这已经比原有的 UI 界面多了一层，当然，实际上如果你用的巧妙，可以让层次更多但是协调地存在。
有些东西应该是不言自明的。比如「我在哪」「我是从哪里来的」这种事情，可以透过「玻璃」看到的背景层就能够很好地暗示出此刻的位置。
经过「玻璃层」处理之后的背景显得非常柔和，无论是动态还是静态的都不会影响前景元素的呈现。同时，位于前景的文本、色彩、UI 控件依然可以保证良好的可读性。
在设计中间的「玻璃层」的时候，可能需要你控制好这个「微妙」的程度。不过不论怎样，这种呈现方式都非常的雅致，甚至有那么一丝「诗意」存在。
1、在最新的 Windows 10 20H2 版本当中，从开始菜单到具体的 UI 界面当中，彻底将 Windows 8 时代 Metro 风格去掉了，扎眼的动态磁贴都用上了 Fluent Design 风格的毛玻璃效果：
2、最新的 macOS Big Sur 也在整个 UI 界面当中大规模使用了接近「玻璃拟物化」的半透明毛玻璃视觉效果，在系统自带的 APP 当中尤其显著：
3、而值得一提的是，macOS Big Sur 和当下的 iOS 14 在视觉美学上也保持着高度的一致，尤其是在系统的设计美学逻辑上是统一的：
这种主流操作系统的背书，「玻璃拟物化」的进一步推行和普及，无疑有着重要的影响。相比于看起来高级但是炫技多于实用性的「新拟物化」，「玻璃拟物化」这种风格在各大操作系统的践行和验证之下，实用性更强，视觉美学上也得到目前最新的操作系统的验证。
微软的 Fluent Design 当中，背景和前景之间的「Acrylic」层，其实是由5个部分构成：饱和增强层、高斯模糊层、色彩融合层、色调叠加层、噪点肌理层。使用这么多手段这也是尽可能让最终的色调尽可能地在前景的 UI 当中，显得自然不突兀。
整体的效果是来自于阴影、透明和背景模糊的组合， 需要使用微妙的、贴合环境色的投影来呈现层次感， 越是靠近前景的元素，通透性就越强， 越是靠近背景的元素，通透性就越低。
不要对整个对象设置透明度，而是要调整填充透明度； 添加 1px 的内边框，同时为它单独设置透明度，这会让「玻璃层」和背景有显著的分离。
选择有明显色彩变化的背景，这样能够让玻璃效果更容易被用户感知到；细微的阴影效果有助于增强视觉层次。由于阴影的存在，区分所有层将更加容易。
做出玻璃质感的图标设计，必须加入渐变色提升图标轻量感，把模糊改成背景模糊调节数值，增加细微边框调节玻璃边缘光感，轻微错位与下层形成层次性，然后最后根据界面的主色去更改图标的颜色。
利用卡片式设计增强信息层级对比，强化卡片之间的层级关系。功能类别切换上的处理技巧目前常见的有：字体大小对比、字体粗细对比、字体颜色深浅对比、短线装饰强化、按钮化处理、图形化处理等，基于这些处理技巧之外尝试了新的形式，探索更多可能性的设计。
在视觉上体现出纵深感，这里涉及到Z轴的概念，也就是各元素之间的空间感，去强调顶部关键信息，更好的建立界面的层次，提升品质感和神秘感。
总的来说毛玻璃拟物化可以提升界面的：层次感、品质感、用户的惊喜感、更好的表达用户当前的位置、多用于卡片的展示中。
玻璃质感的注册页面
Move Your Body
玻璃态的常用卡片形式
非常有质感的银行卡
玻璃质感的登录页面
在图标方面的新探索
作为设计师，我们需要探索所有潜在的，创造性的产品制造方式。
虽然新拟物化风格在特殊人群阅读性上有其天生的缺陷、玻璃拟物化风格在图标icon上表现不足，但这并不妨碍这两种风格的流行，目前越来越多的国内外知名大厂在其产品上应用了这两种风格。
