还记得今年年初大家追捧的 新拟物化（Neumorphism）风格嘛？这种风格最初在社交媒体上风靡，很大程度上，来源于资深设计师 Michal Malewicz 的文章《Neumorphism in user interfac7 f d Fesk Q = – 2》，这篇文章透过 Medi? / f 2 ~ w | Kum 平台，开始在各个设k p 5 @ ) n计师社区当中发酵，随后被不少平台预测为 2020 年会逐渐流行的一种视觉设计风格。
事实上，也确实有很多产品和 UI 界面跟进了这种设计风格。包括三星在内的很多品牌甚至z E ` K : 6会使用这种风b ) w a * W格来制作宣传视频，油管主播 MKBHD 也在自己的视频中使用到了这种风格：
从美学价值上来说，新拟物化足够现代，看起来也颇为时尚，科技感也很足，不过在在实际的应用上，新拟物化本身确实不算是一种系统全面的设计风格，因为在很多具? Z R n r体的 UI 元素上，是难以保证可用性和易用性的。
在需要体现出视觉纵深（Z轴方向的高程、高度）的地方，新拟物化的 UI 元素很难做到显著，而这也使得用户很难立刻马上意识到「这是一个可交互的元素」：
关于这一点，在彩云的这篇文章中有详细的描述：
新拟物化会是2020年的UI设计趋势吗？
我承认，为「这个] J X {激动人心的新趋势」共同命名（注：Neumorphism 新拟物化，即 New 和 Skeumorphism 的结合词，最初由作者 Michal Malewicz 另一篇文章《Neumorphism in user inA 1 ! o M vterface》的一位读者提出）是件很有趣的事。但我没想到它能被e / j 4炒得这d } g D V u L 1么火热。
阅读文章 >>n 0 @ . D G
此外z 5 a U ; c 8 A，彩云还梳理了新拟物化可以应用的范畴和场景，可以说非常贴心了。不过，这不是今天要说的重点。
Michal Malewicz，对，就是去年年底让我们注意到新拟物化风格的这w @ S h b 5 , 3 ;个小哥，他又搞事情了g I w % 6 8 (：他在油管和 Medium 上又预测了可能会C 2 m K L F流行的新设计风格：Glassmorphism。
显而易见，GlasJ _ 3 Vsmorphism 这个词是 Glass X . ! L 3（玻璃）和 Skeumorphism（拟物化）的结合，我L s 3 9 p们姑且将其称之为「玻璃拟物化: v w 5设计」。
Malewicz 小哥对于这种风格特征归结为4点：
- 透明：使用带有模糊磨砂质感背景的透L [ : Q B T明效果
- 悬浮：带有明显悬浮感的多个层级
- 鲜明：使用鲜艳色彩作为强调色并且从半透明层中透出
- 微妙：使用轻薄微妙的边框来强化物理质感
简单的来说，「玻璃拟物化」在某些方面和「新拟物化」是一脉相承的，但是它有着相对更加具体的视觉隐喻，也就是) – : – c我们日常接触的「玻璃」。! F 4 n 6 R W
如果你和经常3 : k ` N翻看 Dribbble 或者 Behance ，你会注意到有很多设计师在有意识地采用「玻j q t S I y ~璃拟物化」美学的设计。
比如这是 Figma 团队的设计师 Rogie 所设计的小图标
大家着迷于这种风格到底原因何在？
1、愉悦感
首先，当然是视觉愉悦感。
设计师 Ghani Pradita 所设计的日历应用
使用「玻璃拟物化」来设计的界面，由于毛玻璃的通透性，在有多个控件的情况下，呈现出一种独特的「虚实结合」的美感。
2、层次感
Happy Tri Milliarta 设计的展示页面
来自 Paperpil4 c n X 0 + Vlar 团队的 Ghani Pradita 设计的 UI 控件
用户可以很清晰地感知到多个不同的层次，看不清楚但是可以透过「玻璃」的「背景层」，创造朦胧效果的「玻璃层」，前景的UI控件，这已经比原有? [ A D E a 9 O的 UI 界面多了一层，当然，实际上如果你用的巧妙，可以让层次更多但是协调地存在。
3、呈现语境
这是设计师 Ilham MaP y i 7 p 3 Aulana 为 PlainthingR f – ) 5 ; Studio 团队所设计的网页
有些东西应该是不言自明的。比如「我在哪」「我是从哪里来的」这种事情，可以透过「玻璃」看到的背景层就能够很好地暗示出此刻的位置。
4、微妙高级
设计师 Ghulam Rasool 设计的 UI 范例
经2 % U 8 Q w w过「玻璃层」处理之后的背景显得非常柔和，无论是动态还是静C J a态的都不会影响前景元素的呈现。同时，位于前景的文本、色彩、UI 控件依然S ; ~ 可以保证良好的可读性。
在设计中间的「玻璃层」的时候，可能需要你控制好这个「微妙」的程度* & d c ] ) + g。不过不论怎样，这种呈现方式都非常的l – 1 # L ; = 3雅致，甚至有那么一丝「诗意」存在。
那么，这种设计风格到底是如何被塑造出来的？如果要追根7 E x / q溯源，「玻璃拟物化」到底是从哪里来的？
老实说，玻璃拟物化9 e w a B，Glassmorphism，追根溯源还是在苹果头上。
我之前在《Mac 视觉史 vol.Q [ S [ x e i h 3：浴「水」重生的 Mac 视觉美学》这篇文章当中，曾详细回顾了设计师 CordS O f 3ell Ratzlaff 是在怎样的背景之下，发掘并延展出了苹果的整套 Aquaj : ~ 视觉美学：
Mac 视觉史 vol.3：浴「水」重生的 Mac 视觉美学
世间所有的相遇都是久别重逢。苹果和乔布斯是如此，NeXTSTEF ; J YP 和 Macintosh 是如此，iMac G3 和 Mac OS X 也是如此 。
阅读文章 >>
而被我们称之为「拟物化」的设计，则是在 Mac OS X 这套系统上经过长时间的沉淀，并且迁移到 iOS 之后，借由当时包括 DribbZ [ ? b , O Mble 在内设计师社区（应该] / t V 5还有人记g . y D b 3 S @得当年国内的7 o + . I 8 s iconfans 吧？），逐步成为主流。
这种对于光影P } p u的极致追求也促使老竞争对手微软做出了改变，很难说几年后微软在Windows Vista 上` u 6所推行的「Aero」（光）视觉风格不是从「Aqua」上衍生出来的：
而「Aero」这种视觉风格当中，就使用了非常引人瞩目的玻璃的质感，只不过阴影的设计毫u A 6 d t j & s .无疑问「? ! e 6参考学习」了同时期 Mac OS X 当中O e q U 9 5 H相% T ! 8 e k ; )对明显的黑色投V & ~ Z y Q d Q影。
只是这种X 6 + C 1 ~设计风格经历了 Windows 7 之后，一直在自家 MP3 播放器 Zune 上使用实验性的设计得到了青睐，并逐渐普及到整个微软系产品，甚至因此牺牲了同时期的社交手机产品 Kin：
值得注意的是，在 Kin 系列的界面当中，「玻璃」式的半透明元素是存在的，并且很明显是延续自「Aero」美学，只是受限于屏幕分辨率（320240 px，3z h e20480 px），~ @ D % v P u . A很难呈现出更多细节。
随后，Windows Phone 诞生，Windows 8 问世，包豪斯十足的 Metro 视觉风格成为微软的选择。
不过在此过程中，还有一些更重要的事情：Android 和 iOS 全面拥t ( . d护扁平化设计。全新的 iOS 系统当中，全新的通知系统会使用半透明材质，用来暗示用户当前所处的环境：a n 6 3 G N 3
这种对于毛玻璃材质的选择，很大程度上和时任设计高级副总裁的乔纳森艾维分不开——这是一个对于材质、场景、暗喻有着清晰认知和感知力的工业设计大师，而这一点也体现在他为 iOS 7 所制作的设计语言的介绍视频当中。至于乔纳森对于玻璃材: X ; E R R + U w质的迷恋我们可以[ # e 8回头在聊。
值得一提的是，在Q w $ W u o 移动端 UI 界面当中，成体系地使用「玻璃」的隐喻，是从 iOS 7 开始的。但是 iOS 的设计美学是一个更加S 2 t B + r庞大的东西，真正的「文艺复兴」应该是! e E h在 Windows 10。
之所以说是文艺复兴，很大程度上是因为微软设计团队在2016年的时候开始构建的 Fluent Design 这套设计美学体系，而它所使用的核心设计隐喻是「Acrylic」，也就是亚克力，是从「Aero」继承而来。
实际上，最初的 Windows 10 更多的是在设计体系和交互上花心思，「Acrylic」其实是在发布之后很久，大概2017 年A Q o的某次重要更新中加入的「新材质」。
相比于 Windows Vista/7 时代的 「Aero」，「Acrylic」更加具体，量化，功能性更强E . 8 v Q k Y，美学上更加0 N { _ 5 } 2 3优雅– i B，而在具t ( J S _体的实施上，微软的 Fluent DesiF ? Q j q – 7 Ogn 和如今的「玻= – H K 9 Q T G璃拟物化」更加接近，而近年来很多接近「玻璃拟物化」的设计，也和这种设计美学架构近似。
微软的 Flue= m D M W pnt Design 当中，背景和前景之间的「Acrylic」层，其实是由5个部分构成：
- 饱和增强层
- 高斯模糊层
- 色彩融合层J D d o & 3
- 色调叠加层
- 噪点肌理层
当然，使用这么多手段这也是g a k尽可能让最终的色调尽可能地在前景的 UI 当中，显得自然不突兀。如果你想了解更多4 & ~ * ^，可以看这里：
Office改版背后，藏着的这套超全面的宝藏设计系r r ^ * l &统
如果你是 Windows 10 系统的用户，那么最近应该会注意到 Windows 系统的图标正在逐步地被替换，升级，（在忽略广大国内全家桶软件影响的情况b / U N k T %下）Window# F j 5s 10 正在* C ; L 5 a随着 Fluent Design 的注入而正在变得越来越优雅。
随之而来的x f p } 1 Y E d 4，整个 WiV 4 ( wndows 10 系统也在迭代升级中逐步变得越来越有吸引力：
但是这种改变体现的更为显著的，则反映在装机必备的 Office 软件上了——不对，它现在应该叫 MicT 8 , | A p 0rosof] % ) } X e b h (t 365 了：
微软花费了大量的时间精…
阅读文章 >>
虽然 Fluent De$ ] V 3 I X 6sign 并没有如同最初大家所期待的一样，像 Material Design 或者苹果的x ~ n a HIG 那样成为一种极为主流、广泛应用的设计系统，但是u Z ^它随着 Windows 10 在世界范围内的普及而始终潜移默化地影响着整个设计领域。
一方面，在最新的 Windows 10 20H2 版本当中，从开始菜单到具体的 UI 界面当中，彻底将 Windows 8 时代 Metro 风格去掉了，扎眼的动态磁贴都用上了 Fluen{ E S 1 E ]t Design 风格的毛玻璃效果：
另外一边，最新的 macOS Big Sur 也在整个 UI 界面当中大规模使用了接近「玻璃& 8 P , n 3 x u C拟物化」的半透明毛玻璃视觉效果，在系统自带的 APP 当) q a * P G C . Q中尤其显著：
而值得一提的是，macOS Big Sur 和当下的 iOS 14 在视觉美学上也保持着高度的一致，尤其是在系统的设计美学逻D B /辑上是统一的：
这种主流操作系统的S : ) v v 9 } A 9背书，「玻璃拟物化」的进一步推行和普及，无疑有着重要的影响。相比于看起来高级但是炫技多于实用性的「新拟物化」，「玻璃拟物b / : e U / F化」这种风格在各大操作系统的践行和验证之下，实用性更强，视觉美学m ? 6 e f上也得到目前最新的操作系统的验证。
相比于 iOS 14，macOS Big Sur 和 Windows 10 20H2，我们此刻所讨论的「玻璃拟物化」在视觉效果上无疑是更加激进、强化的。
设计师 Malewicz 在他的文章当中对于这种设计风格有一; O Y b 5 | ~个非常直观的总结：
- 整体的效果是来w J Y (自于阴影、透明和背景模糊的组合
- 需要使用微妙的、贴合环境色的投影来呈现层次感
- 越是靠近前景的元素，通透性就越强
- 越是靠近背景的元素l ~ c F，通透性就越低
- 不要对整个对象设置透明度，而是要调整填充透明度
- 添加 1px 的内边框，同时为它单独设置透明度，这会让「玻璃层」和背景有显著的分离
- 选择有s m B u S b ^明显色彩变化的背景，这样能够让玻璃效果更容易被用户感知到
考虑到不同的软件差异，Malewizc 还专门录制了一个视H z { | x频放到油管上，教你如何在 Sketch 和 Figma 当中进行正确的实现：
或前往PC获得最佳体验。
虽然「玻璃拟物化」并非是全新的事物，但是确实有越来越多的设计师正在尝试– W 2 * , f y 0 !这样的设计风格，并且在这个多灾多难的2020年底能看到这样的新东西，总归会让我们对未来有那么一丝期待 。
引用来源：
https://uxdesign$ = , e W l @ A.cc/neur ( : _ f – { wmorphism-in-user-in6 Z 4 T % U n 8terfaces-b47cef3bf3a6
https://www.youtube.com/watch?v=GLHut0BM9nc
https://medium.com/microsoft-design/science-in-the-s. j $ G z Vystem-fluent-design-and-material-4K q N V B2b4dc532c14
https://c i & k puxdesigm : ? Z t % w 4n.cc/glassmorphism-in-user-interfaces-1f39bs ! _ –b1308c9
