2020-11-30 資深UI設計者
還記得今年年初大家追捧的 新擬物化（Neumorphism）風格嘛？這種風格最初在社交媒體上風靡，很大程度上，來源于資深設計師 Michal Malewicz 的文章《Neumorphism in user interfaces》，這篇文章透過 Medium 平臺，開始在各個設計師社區(qū)當中發(fā)酵，隨后被不少平臺預測為 2020 年會逐漸流行的一種視覺設計風格。
事實上，也確實有很多產(chǎn)品和 UI 界面跟進了這種設計風格。包括三星在內(nèi)的很多品牌甚至會使用這種風格來制作宣傳視頻，油管主播 MKBHD 也在自己的視頻中使用到了這種風格：
從美學價值上來說，新擬物化足夠現(xiàn)代，看起來也頗為時尚，科技感也很足，不過在在實際的應用上，新擬物化本身確實不算是一種系統(tǒng)全面的設計風格，因為在很多具體的 UI 元素上，是難以保證可用性和易用性的。
在需要體現(xiàn)出視覺縱深（Z軸方向的高程、高度）的地方，新擬物化的 UI 元素很難做到顯著，而這也使得用戶很難立刻馬上意識到「這是一個可交互的元素」：
此外，彩云還梳理了新擬物化可以應用的范疇和場景，可以說非常貼心了。不過，這不是今天要說的重點。
Michal Malewicz，對，就是去年年底讓我們注意到新擬物化風格的這個小哥，他又搞事情了：他在油管和 Medium 上又預測了可能會流行的新設計風格：Glassmorphism。
顯而易見，Glassmorphism 這個詞是 Glass（玻璃）和 Skeumorphism（擬物化）的結合，我們姑且將其稱之為「玻璃擬物化設計」。
Malewicz 小哥對于這種風格特征歸結為4點：
簡單的來說，「玻璃擬物化」在某些方面和「新擬物化」是一脈相承的，但是它有著相對更加具體的視覺隱喻，也就是我們?nèi)粘＝佑|的「玻璃」。
如果你和經(jīng)常翻看 Dribbble 或者 Behance ，你會注意到有很多設計師在有意識地采用「玻璃擬物化」美學的設計。
比如這是 Figma 團隊的設計師 Rogie 所設計的小圖標
大家著迷于這種風格到底原因何在？
1、愉悅感
首先，當然是視覺愉悅感。
使用「玻璃擬物化」來設計的界面，由于毛玻璃的通透性，在有多個控件的情況下，呈現(xiàn)出一種獨特的「虛實結合」的美感。
2、層次感
來自 Paperpillar 團隊的 Ghani Pradita 設計的 UI 控件
用戶可以很清晰地感知到多個不同的層次，看不清楚但是可以透過「玻璃」的「背景層」，創(chuàng)造朦朧效果的「玻璃層」，前景的UI控件，這已經(jīng)比原有的 UI 界面多了一層，當然，實際上如果你用的巧妙，可以讓層次更多但是協(xié)調(diào)地存在。
3、呈現(xiàn)語境
這是設計師 Ilham Maulana 為 Plainthing Studio 團隊所設計的網(wǎng)頁
有些東西應該是不言自明的。比如「我在哪」「我是從哪里來的」這種事情，可以透過「玻璃」看到的背景層就能夠很好地暗示出此刻的位置。
4、微妙高級
設計師 Ghulam Rasool 設計的 UI 范例
經(jīng)過「玻璃層」處理之后的背景顯得非常柔和，無論是動態(tài)還是靜態(tài)的都不會影響前景元素的呈現(xiàn)。同時，位于前景的文本、色彩、UI 控件依然可以保證良好的可讀性。
在設計中間的「玻璃層」的時候，可能需要你控制好這個「微妙」的程度。不過不論怎樣，這種呈現(xiàn)方式都非常的雅致，甚至有那么一絲「詩意」存在。
那么，這種設計風格到底是如何被塑造出來的？如果要追根溯源，「玻璃擬物化」到底是從哪里來的？
老實說，玻璃擬物化，Glassmorphism，追根溯源還是在蘋果頭上。
我之前在《Mac 視覺史 vol.3：浴「水」重生的 Mac 視覺美學》這篇文章當中，曾詳細回顧了設計師 Cordell Ratzlaff 是在怎樣的背景之下，發(fā)掘并延展出了蘋果的整套 Aqua 視覺美學：
這種對于光影的追求也促使老競爭對手微軟做出了改變，很難說幾年后微軟在Windows Vista 上所推行的「Aero」（光）視覺風格不是從「Aqua」上衍生出來的：
而「Aero」這種視覺風格當中，就使用了非常引人矚目的玻璃的質(zhì)感，只不過陰影的設計毫無疑問「參考學習」了同時期 Mac OS X 當中相對明顯的黑色投影。
只是這種設計風格經(jīng)歷了 Windows 7 之后，一直在自家 MP3 播放器 Zune 上使用實驗性的設計得到了青睞，并逐漸普及到整個微軟系產(chǎn)品，甚至因此犧牲了同時期的社交手機產(chǎn)品 Kin：
值得注意的是，在 Kin 系列的界面當中，「玻璃」式的半透明元素是存在的，并且很明顯是延續(xù)自「Aero」美學，只是受限于屏幕分辨率（320×240 px，320×480 px），很難呈現(xiàn)出更多細節(jié)。
隨后，Windows Phone 誕生，Windows 8 問世，包豪斯十足的 Metro 視覺風格成為微軟的選擇。
不過在此過程中，還有一些更重要的事情：Android 和 iOS 全面擁護扁平化設計。全新的 iOS 系統(tǒng)當中，全新的通知系統(tǒng)會使用半透明材質(zhì)，用來暗示用戶當前所處的環(huán)境：
這種對于毛玻璃材質(zhì)的選擇，很大程度上和時任設計高級副總裁的喬納森艾維分不開——這是一個對于材質(zhì)、場景、暗喻有著清晰認知和感知力的工業(yè)設計大師，而這一點也體現(xiàn)在他為 iOS 7 所制作的設計語言的介紹視頻當中。至于喬納森對于玻璃材質(zhì)的迷戀我們可以回頭在聊。
值得一提的是，在 移動端 UI 界面當中，成體系地使用「玻璃」的隱喻，是從 iOS 7 開始的。但是 iOS 的設計美學是一個更加龐大的東西，真正的「文藝復興」應該是在 Windows 10。
之所以說是文藝復興，很大程度上是因為微軟設計團隊在2016年的時候開始構建的 Fluent Design 這套設計美學體系，而它所使用的核心設計隱喻是「Acrylic」，也就是亞克力，是從「Aero」繼承而來。
實際上，最初的 Windows 10 更多的是在設計體系和交互上花心思，「Acrylic」其實是在發(fā)布之后很久，大概2017 年的某次重要更新中加入的「新材質(zhì)」。
相比于 Windows Vista/7 時代的 「Aero」，「Acrylic」更加具體，量化，功能性更強，美學上更加優(yōu)雅，而在具體的實施上，微軟的 Fluent Design 和如今的「玻璃擬物化」更加接近，而近年來很多接近「玻璃擬物化」的設計，也和這種設計美學架構近似。
微軟的 Fluent Design 當中，背景和前景之間的「Acrylic」層，其實是由5個部分構成：
當然，使用這么多手段這也是盡可能讓最終的色調(diào)盡可能地在前景的 UI 當中，顯得自然不突兀。如果你想了解更多，可以看這里：
雖然 Fluent Design 并沒有如同最初大家所期待的一樣，像 Material Design 或者蘋果的 HIG 那樣成為一種極為主流、廣泛應用的設計系統(tǒng)，但是它隨著 Windows 10 在世界范圍內(nèi)的普及而始終潛移默化地影響著整個設計領域。
一方面，在的 Windows 10 20H2 版本當中，從開始菜單到具體的 UI 界面當中，徹底將 Windows 8 時代 Metro 風格去掉了，扎眼的動態(tài)磁貼都用上了 Fluent Design 風格的毛玻璃效果：
另外一邊，的 macOS Big Sur 也在整個 UI 界面當中大規(guī)模使用了接近「玻璃擬物化」的半透明毛玻璃視覺效果，在系統(tǒng)自帶的 APP 當中尤其顯著：
而值得一提的是，macOS Big Sur 和當下的 iOS 14 在視覺美學上也保持著高度的一致，尤其是在系統(tǒng)的設計美學邏輯上是統(tǒng)一的：
這種主流操作系統(tǒng)的背書，「玻璃擬物化」的進一步推行和普及，無疑有著重要的影響。相比于看起來高級但是炫技多于實用性的「新擬物化」，「玻璃擬物化」這種風格在各大操作系統(tǒng)的踐行和驗證之下，實用性更強，視覺美學上也得到目前的操作系統(tǒng)的驗證。
相比于 iOS 14，macOS Big Sur 和 Windows 10 20H2，我們此刻所討論的「玻璃擬物化」在視覺效果上無疑是更加激進、強化的。
設計師 Malewicz 在他的文章當中對于這種設計風格有一個非常直觀的總結：
藍藍設計( m.sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務