還記得今年年初大家追捧的 新擬物化（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 視覺美學：
而被我們稱之為「擬物化」的設計，則是在 Mac OS X 這套系統上經過長時間的沉淀，并且遷移到 iOS 之后，借由當時包括 Dribbble 在內設計師社區（應該還有人記得當年國內的 iconfans 吧？），逐步成為主流。
這種對于光影的極致追求也促使老競爭對手微軟做出了改變，很難說幾年后微軟在Windows Vista 上所推行的「Aero」（光）視覺風格不是從「Aqua」上衍生出來的：
而「Aero」這種視覺風格當中，就使用了非常引人矚目的玻璃的質感，只不過陰影的設計毫無疑問「參考學習」了同時期 Mac OS X 當中相對明顯的黑色投影。
只是這種設計風格經歷了 Windows 7 之后，一直在自家 MP3 播放器 Zune 上使用實驗性的設計得到了青睞，并逐漸普及到整個微軟系產品，甚至因此犧牲了同時期的社交手機產品 Kin：
值得注意的是，在 Kin 系列的界面當中，「玻璃」式的半透明元素是存在的，并且很明顯是延續自「Aero」美學，只是受限于屏幕分辨率（320x240 px，320x480 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 在他的文章當中對于這種設計風格有一個非常直觀的總結：
- 整體的效果是來自于陰影、透明和背景模糊的組合
- 需要使用微妙的、貼合環境色的投影來呈現層次感
- 越是靠近前景的元素，通透性就越強
- 越是靠近背景的元素，通透性就越低
- 不要對整個對象設置透明度，而是要調整填充透明度
- 添加 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
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
熱評 太公 · 姜子牙