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

转自：优设（ID：uisdcer）

还记得今年年初大家追捧的新拟物化（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 所设计的小图标（https://dribbble.com/shots/14116729-Memer-Brand）

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

Glassmorphism 的优点有哪些？

1、愉悦感

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

设计师 Ghani Pradita 所设计的日历应用（Ghani Pradita | Dribbble）

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

2、层次感

Happy Tri Milliarta 设计的展示页面（Blur Concept Mobile Exploration by Happy Tri Milliarta for Noansa on Dribbble）

来自 Paperpillar 团队的 Ghani Pradita 设计的 UI 控件（https://dribbble.com/shots/13926958-Story-Sharing-App）

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

3、呈现语境

这是设计师 Ilham Maulana 为 Plainthing Studio 团队所设计的网页（Remote Working - Landing Page by Ilham Maulana for Plainthing Studio on Dribbble）

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

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

专注分享当下最实用的前端技术。关注前端达人，与达人一起学习进步！

长按关注"前端达人"