「新拟物化」过时了！此刻你最应该拥抱的是「玻璃拟物化」！

还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？这种风格最初在社交媒体上风靡，很大程度上，来源于资深设计师 Michal Malewicz 的文章 《Neumorphism in user interfaces》 ，这篇文章透过 Medium 平台，开始在各个设计师社区当中发酵，随后被不少平台预测为 2020 年会逐渐流行的一种视觉设计风格。

事实上，也确实有很多产品和 UI 界面跟进了这种设计风格。包括三星在内的很多品牌甚至会使用这种风格来制作宣传视频，油管主播 MKBHD 也在自己的视频中使用到了这种风格：

从美学价值上来说，新拟物化足够现代，看起来也颇为时尚，科技感也很足，不过在在实际的应用上，新拟物化本身确实不算是一种系统全面的设计风格，因为在很多具体的 UI 元素上，是难以保证可用性和易用性的。

在需要体现出视觉纵深（Z轴方向的高程、高度）的地方，新拟物化的 UI 元素很难做到显著，而这也使得用户很难立刻马上意识到「这是一个可交互的元素」：

关于这一点，在彩云的这篇文章中有详细的描述：

此外，彩云还梳理了新拟物化可以应用的范畴和场景，可以说非常贴心了。不过，这不是今天要说的重点。

Michal Malewicz，对，就是去年年底让我们注意到新拟物化风格的这个小哥，他又搞事情了：他在油管和 Medium 上又预测了可能会流行的新设计风格：Glassmorphism。

Glassmorphism 是什么？

显而易见，Glassmorphism 这个词是 Glass（玻璃）和 Skeumorphism（拟物化）的结合，我们姑且将其称之为「玻璃拟物化设计」。

Malewicz 小哥对于这种风格特征归结为4点：

• 透明：使用带有模糊磨砂质感背景的透明效果
• 悬浮：带有明显悬浮感的多个层级
• 鲜明：使用鲜艳色彩作为强调色并且从半透明层中透出
• 微妙：使用轻薄微妙的边框来强化物理质感

简单的来说，「玻璃拟物化」在某些方面和「新拟物化」是一脉相承的，但是它有着相对更加具体的视觉隐喻，也就是我们日常接触的「玻璃」。

如果你和经常翻看 Dribbble 或者 Behance ，你会注意到有很多设计师在有意识地采用「玻璃拟物化」美学的设计。

比如这是 Figma 团队的设计师 Rogie 所设计的小图标

大家着迷于这种风格到底原因何在？

Glassmorphism 的优点有哪些？

1、愉悦感

首先，当然是视觉愉悦感。

设计师 Ghani Pradita 所设计的日历应用

使用「玻璃拟物化」来设计的界面，由于毛玻璃的通透性，在有多个控件的情况下，呈现出一种独特的「虚实结合」的美感。

2、层次感

Happy Tri Milliarta 设计的展示页面

来自 Paperpillar 团队的 Ghani Pradita 设计的 UI 控件

用户可以很清晰地感知到多个不同的层次，看不清楚但是可以透过「玻璃」的「背景层」，创造朦胧效果的「玻璃层」，前景的UI控件，这已经比原有的 UI 界面多了一层，当然，实际上如果你用的巧妙，可以让层次更多但是协调地存在。

3、呈现语境

这是设计师 Ilham Maulana 为 Plainthing Studio 团队所设计的网页

有些东西应该是不言自明的。比如「我在哪」「我是从哪里来的」这种事情，可以透过「玻璃」看到的背景层就能够很好地暗示出此刻的位置。

4、微妙高级

设计师 Ghulam Rasool 设计的 UI 范例

经过「玻璃层」处理之后的背景显得非常柔和，无论是动态还是静态的都不会影响前景元素的呈现。同时，位于前景的文本、色彩、UI 控件依然可以保证良好的可读性。

在设计中间的「玻璃层」的时候，可能需要你控制好这个「微妙」的程度。不过不论怎样，这种呈现方式都非常的雅致，甚至有那么一丝「诗意」存在。

那么，这种设计风格到底是如何被塑造出来的？如果要追根溯源，「玻璃拟物化」到底是从哪里来的？

Glassmorphism 是从哪里来的？

老实说，玻璃拟物化，Glassmorphism，追根溯源还是在苹果头上。

我之前在 《Mac 视觉史 vol.3：浴「水」重生的 Mac 视觉美学》 这篇文章当中，曾详细回顾了设计师 Cordell Ratzlaff 是在怎样的背景之下，发掘并延展出了苹果的整套 Aqua 视觉美学：

而被我们称之为「拟物化」的设计，则是在 Mac OS X 这套系统上经过长时间的沉淀，并且迁移到 iOS 之后，借由当时包括 Dribbble 在内设计师社区（应该还有人记得当年国内的 iconfans 吧？），逐步成为主流。

这种对于光影的极致追求也促使老竞争对手微软做出了改变，很难说几年后微软在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 在视觉美学上也保持着高度的一致，尤其是在系统的设计美学逻辑上是统一的：

这种主流操作系统的背书，「玻璃拟物化」的进一步推行和普及，无疑有着重要的影响。相比于看起来高级但是炫技多于实用性的「新拟物化」，「玻璃拟物化」这种风格在各大操作系统的践行和验证之下，实用性更强，视觉美学上也得到目前最新的操作系统的验证。

Glassmorphism 有哪些设计要点？

相比于 iOS 14，macOS Big Sur 和 Windows 10 20H2，我们此刻所讨论的「玻璃拟物化」在视觉效果上无疑是更加激进、强化的。

设计师 Malewicz 在他的文章当中对于这种设计风格有一个非常直观的总结：

• 整体的效果是来自于阴影、透明和背景模糊的组合
• 需要使用微妙的、贴合环境色的投影来呈现层次感
• 越是靠近前景的元素，通透性就越强
• 越是靠近背景的元素，通透性就越低

• 不要对整个对象设置透明度，而是要调整填充透明度
• 添加 1px 的内边框，同时为它单独设置透明度，这会让「玻璃层」和背景有显著的分离

• 选择有明显色彩变化的背景，这样能够让玻璃效果更容易被用户感知到

考虑到不同的软件差异，Malewizc 还专门录制了一个视频放到油管上，教你如何在 Sketch 和 Figma 当中进行正确的实现：

当视频无法加载时请刷新页面，

结语

虽然「玻璃拟物化」并非是全新的事物，但是确实有越来越多的设计师正在尝试这样的设计风格，并且在这个多灾多难的2020年底能看到这样的新东西，总归会让我们对未来有那么一丝期待 。

引用来源：

https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6

https://www.youtube.com/watch?v=GLHut0BM9nc

https://medium.com/microsoft-design/science-in-the-system-fluent-design-and-material-42b4dc532c14

https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9