2020-11-30 资深UI设计者
还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？这种风格最初在社交媒体上风靡，很大程度上，来源于资深设计师 Michal Malewicz 的文章《Neumorphism in user interfaces》，这篇文章透过 Medium 平台，开始在各个设计师社区当中发酵，随后被不少平台预测为 2020 年会逐渐流行的一种视觉设计风格。
事实上，也确实有很多产品和 UI 界面跟进了这种设计风格。包括三星在内的很多品牌甚至会使用这种风格来制作宣传视频，油管主播 MKBHD 也在自己的视频中使用到了这种风格：
从美学价值上来说，新拟物化足够现代，看起来也颇为时尚，科技感也很足，不过在在实际的应用上，新拟物化本身确实不算是一种系统全面的设计风格，因为在很多具体的 UI 元素上，是难以保证可用性和易用性的。
在需要体现出视觉纵深（Z轴方向的高程、高度）的地方，新拟物化的 UI 元素很难做到显著，而这也使得用户很难立刻马上意识到「这是一个可交互的元素」：
此外，彩云还梳理了新拟物化可以应用的范畴和场景，可以说非常贴心了。不过，这不是今天要说的重点。
Michal Malewicz，对，就是去年年底让我们注意到新拟物化风格的这个小哥，他又搞事情了：他在油管和 Medium 上又预测了可能会流行的新设计风格：Glassmorphism。
显而易见，Glassmorphism 这个词是 Glass（玻璃）和 Skeumorphism（拟物化）的结合，我们姑且将其称之为「玻璃拟物化设计」。
Malewicz 小哥对于这种风格特征归结为4点：
简单的来说，「玻璃拟物化」在某些方面和「新拟物化」是一脉相承的，但是它有着相对更加具体的视觉隐喻，也就是我们日常接触的「玻璃」。
如果你和经常翻看 Dribbble 或者 Behance ，你会注意到有很多设计师在有意识地采用「玻璃拟物化」美学的设计。
比如这是 Figma 团队的设计师 Rogie 所设计的小图标
大家着迷于这种风格到底原因何在？
1、愉悦感
首先，当然是视觉愉悦感。
使用「玻璃拟物化」来设计的界面，由于毛玻璃的通透性，在有多个控件的情况下，呈现出一种独特的「虚实结合」的美感。
2、层次感
来自 Paperpillar 团队的 Ghani Pradita 设计的 UI 控件
用户可以很清晰地感知到多个不同的层次，看不清楚但是可以透过「玻璃」的「背景层」，创造朦胧效果的「玻璃层」，前景的UI控件，这已经比原有的 UI 界面多了一层，当然，实际上如果你用的巧妙，可以让层次更多但是协调地存在。
3、呈现语境
这是设计师 Ilham Maulana 为 Plainthing Studio 团队所设计的网页
有些东西应该是不言自明的。比如「我在哪」「我是从哪里来的」这种事情，可以透过「玻璃」看到的背景层就能够很好地暗示出此刻的位置。
4、微妙高级
设计师 Ghulam Rasool 设计的 UI 范例
经过「玻璃层」处理之后的背景显得非常柔和，无论是动态还是静态的都不会影响前景元素的呈现。同时，位于前景的文本、色彩、UI 控件依然可以保证良好的可读性。
在设计中间的「玻璃层」的时候，可能需要你控制好这个「微妙」的程度。不过不论怎样，这种呈现方式都非常的雅致，甚至有那么一丝「诗意」存在。
那么，这种设计风格到底是如何被塑造出来的？如果要追根溯源，「玻璃拟物化」到底是从哪里来的？
老实说，玻璃拟物化，Glassmorphism，追根溯源还是在苹果头上。
我之前在《Mac 视觉史 vol.3：浴「水」重生的 Mac 视觉美学》这篇文章当中，曾详细回顾了设计师 Cordell Ratzlaff 是在怎样的背景之下，发掘并延展出了苹果的整套 Aqua 视觉美学：
这种对于光影的追求也促使老竞争对手微软做出了改变，很难说几年后微软在Windows Vista 上所推行的「Aero」（光）视觉风格不是从「Aqua」上衍生出来的：
而「Aero」这种视觉风格当中，就使用了非常引人瞩目的玻璃的质感，只不过阴影的设计毫无疑问「参考学习」了同时期 Mac OS X 当中相对明显的黑色投影。
只是这种设计风格经历了 Windows 7 之后，一直在自家 MP3 播放器 Zune 上使用实验性的设计得到了青睐，并逐渐普及到整个微软系产品，甚至因此牺牲了同时期的社交手机产品 Kin：
值得注意的是，在 Kin 系列的界面当中，「玻璃」式的半透明元素是存在的，并且很明显是延续自「Aero」美学，只是受限于屏幕分辨率（320×240 px，320×480 px），很难呈现出更多细节。
随后，Windows Phone 诞生，Windows 8 问世，包豪斯十足的 Metro 视觉风格成为微软的选择。
不过在此过程中，还有一些更重要的事情：Android 和 iOS 全面拥护扁平化设计。全新的 iOS 系统当中，全新的通知系统会使用半透明材质，用来暗示用户当前所处的环境：
这种对于毛玻璃材质的选择，很大程度上和时任设计高级副总裁的乔纳森艾维分不开——这是一个对于材质、场景、暗喻有着清晰认知和感知力的工业设计大师，而这一点也体现在他为 iOS 7 所制作的设计语言的介绍视频当中。至于乔纳森对于玻璃材质的迷恋我们可以回头在聊。
值得一提的是，在 移动端 UI 界面当中，成体系地使用「玻璃」的隐喻，是从 iOS 7 开始的。但是 iOS 的设计美学是一个更加庞大的东西，真正的「文艺复兴」应该是在 Windows 10。
之所以说是文艺复兴，很大程度上是因为微软设计团队在2016年的时候开始构建的 Fluent Design 这套设计美学体系，而它所使用的核心设计隐喻是「Acrylic」，也就是亚克力，是从「Aero」继承而来。
实际上，最初的 Windows 10 更多的是在设计体系和交互上花心思，「Acrylic」其实是在发布之后很久，大概2017 年的某次重要更新中加入的「新材质」。
相比于 Windows Vista/7 时代的 「Aero」，「Acrylic」更加具体，量化，功能性更强，美学上更加优雅，而在具体的实施上，微软的 Fluent Design 和如今的「玻璃拟物化」更加接近，而近年来很多接近「玻璃拟物化」的设计，也和这种设计美学架构近似。
微软的 Fluent Design 当中，背景和前景之间的「Acrylic」层，其实是由5个部分构成：
当然，使用这么多手段这也是尽可能让最终的色调尽可能地在前景的 UI 当中，显得自然不突兀。如果你想了解更多，可以看这里：
虽然 Fluent Design 并没有如同最初大家所期待的一样，像 Material Design 或者苹果的 HIG 那样成为一种极为主流、广泛应用的设计系统，但是它随着 Windows 10 在世界范围内的普及而始终潜移默化地影响着整个设计领域。
一方面，在的 Windows 10 20H2 版本当中，从开始菜单到具体的 UI 界面当中，彻底将 Windows 8 时代 Metro 风格去掉了，扎眼的动态磁贴都用上了 Fluent Design 风格的毛玻璃效果：
另外一边，的 macOS Big Sur 也在整个 UI 界面当中大规模使用了接近「玻璃拟物化」的半透明毛玻璃视觉效果，在系统自带的 APP 当中尤其显著：
而值得一提的是，macOS Big Sur 和当下的 iOS 14 在视觉美学上也保持着高度的一致，尤其是在系统的设计美学逻辑上是统一的：
这种主流操作系统的背书，「玻璃拟物化」的进一步推行和普及，无疑有着重要的影响。相比于看起来高级但是炫技多于实用性的「新拟物化」，「玻璃拟物化」这种风格在各大操作系统的践行和验证之下，实用性更强，视觉美学上也得到目前的操作系统的验证。
相比于 iOS 14，macOS Big Sur 和 Windows 10 20H2，我们此刻所讨论的「玻璃拟物化」在视觉效果上无疑是更加激进、强化的。
设计师 Malewicz 在他的文章当中对于这种设计风格有一个非常直观的总结：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务