「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

2020-12-3    前端達(dá)人

還記得今年年初大家追捧的 新擬物化（Neumorphism）風(fēng)格嘛？這種風(fēng)格最初在社交媒體上風(fēng)靡，很大程度上，來源于資深設(shè)計師 Michal Malewicz 的文章《Neumorphism in user interfaces》，這篇文章透過 Medium 平臺，開始在各個設(shè)計師社區(qū)當(dāng)中發(fā)酵，隨后被不少平臺預(yù)測為 2020 年會逐漸流行的一種視覺設(shè)計風(fēng)格。

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

事實上，也確實有很多產(chǎn)品和 UI 界面跟進(jìn)了這種設(shè)計風(fēng)格。包括三星在內(nèi)的很多品牌甚至?xí)褂眠@種風(fēng)格來制作宣傳視頻，油管主播 MKBHD 也在自己的視頻中使用到了這種風(fēng)格：

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

從美學(xué)價值上來說，新擬物化足夠現(xiàn)代，看起來也頗為時尚，科技感也很足，不過在在實際的應(yīng)用上，新擬物化本身確實不算是一種系統(tǒng)全面的設(shè)計風(fēng)格，因為在很多具體的 UI 元素上，是難以保證可用性和易用性的。

在需要體現(xiàn)出視覺縱深（Z軸方向的高程、高度）的地方，新擬物化的 UI 元素很難做到顯著，而這也使得用戶很難立刻馬上意識到「這是一個可交互的元素」：

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

關(guān)于這一點，在彩云的這篇文章中有詳細(xì)的描述：

此外，彩云還梳理了新擬物化可以應(yīng)用的范疇和場景，可以說非常貼心了。不過，這不是今天要說的重點。

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

Michal Malewicz，對，就是去年年底讓我們注意到新擬物化風(fēng)格的這個小哥，他又搞事情了：他在油管和 Medium 上又預(yù)測了可能會流行的新設(shè)計風(fēng)格：Glassmorphism。

Glassmorphism 是什么？

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

顯而易見，Glassmorphism 這個詞是 Glass（玻璃）和 Skeumorphism（擬物化）的結(jié)合，我們姑且將其稱之為「玻璃擬物化設(shè)計」。

Malewicz 小哥對于這種風(fēng)格特征歸結(jié)為4點：

簡單的來說，「玻璃擬物化」在某些方面和「新擬物化」是一脈相承的，但是它有著相對更加具體的視覺隱喻，也就是我們?nèi)粘＝佑|的「玻璃」。

如果你和經(jīng)常翻看 Dribbble 或者 Behance ，你會注意到有很多設(shè)計師在有意識地采用「玻璃擬物化」美學(xué)的設(shè)計。

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

比如這是 Figma 團(tuán)隊的設(shè)計師 Rogie 所設(shè)計的小圖標(biāo)

大家著迷于這種風(fēng)格到底原因何在？

Glassmorphism 的優(yōu)點有哪些？

1、愉悅感

首先，當(dāng)然是視覺愉悅感。

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

設(shè)計師 Ghani Pradita 所設(shè)計的日歷應(yīng)用

使用「玻璃擬物化」來設(shè)計的界面，由于毛玻璃的通透性，在有多個控件的情況下，呈現(xiàn)出一種獨特的「虛實結(jié)合」的美感。

2、層次感

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

Happy Tri Milliarta 設(shè)計的展示頁面

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

來自 Paperpillar 團(tuán)隊的 Ghani Pradita 設(shè)計的 UI 控件

用戶可以很清晰地感知到多個不同的層次，看不清楚但是可以透過「玻璃」的「背景層」，創(chuàng)造朦朧效果的「玻璃層」，前景的UI控件，這已經(jīng)比原有的 UI 界面多了一層，當(dāng)然，實際上如果你用的巧妙，可以讓層次更多但是協(xié)調(diào)地存在。

3、呈現(xiàn)語境

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

這是設(shè)計師 Ilham Maulana 為 Plainthing Studio 團(tuán)隊所設(shè)計的網(wǎng)頁

有些東西應(yīng)該是不言自明的。比如「我在哪」「我是從哪里來的」這種事情，可以透過「玻璃」看到的背景層就能夠很好地暗示出此刻的位置。

4、微妙高級

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

設(shè)計師 Ghulam Rasool 設(shè)計的 UI 范例

經(jīng)過「玻璃層」處理之后的背景顯得非常柔和，無論是動態(tài)還是靜態(tài)的都不會影響前景元素的呈現(xiàn)。同時，位于前景的文本、色彩、UI 控件依然可以保證良好的可讀性。

在設(shè)計中間的「玻璃層」的時候，可能需要你控制好這個「微妙」的程度。不過不論怎樣，這種呈現(xiàn)方式都非常的雅致，甚至有那么一絲「詩意」存在。

那么，這種設(shè)計風(fēng)格到底是如何被塑造出來的？如果要追根溯源，「玻璃擬物化」到底是從哪里來的？

Glassmorphism 是從哪里來的？

老實說，玻璃擬物化，Glassmorphism，追根溯源還是在蘋果頭上。

我之前在《Mac 視覺史 vol.3：浴「水」重生的 Mac 視覺美學(xué)》這篇文章當(dāng)中，曾詳細(xì)回顧了設(shè)計師 Cordell Ratzlaff 是在怎樣的背景之下，發(fā)掘并延展出了蘋果的整套 Aqua 視覺美學(xué)：

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

而被我們稱之為「擬物化」的設(shè)計，則是在 Mac OS X 這套系統(tǒng)上經(jīng)過長時間的沉淀，并且遷移到 iOS 之后，借由當(dāng)時包括 Dribbble 在內(nèi)設(shè)計師社區(qū)（應(yīng)該還有人記得當(dāng)年國內(nèi)的 iconfans 吧？），逐步成為主流。

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

這種對于光影的追求也促使老競爭對手微軟做出了改變，很難說幾年后微軟在Windows Vista 上所推行的「Aero」（光）視覺風(fēng)格不是從「Aqua」上衍生出來的：

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

而「Aero」這種視覺風(fēng)格當(dāng)中，就使用了非常引人矚目的玻璃的質(zhì)感，只不過陰影的設(shè)計毫無疑問「參考學(xué)習(xí)」了同時期 Mac OS X 當(dāng)中相對明顯的黑色投影。

只是這種設(shè)計風(fēng)格經(jīng)歷了 Windows 7 之后，一直在自家 MP3 播放器 Zune 上使用實驗性的設(shè)計得到了青睞，并逐漸普及到整個微軟系產(chǎn)品，甚至因此犧牲了同時期的社交手機產(chǎn)品 Kin：

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

值得注意的是，在 Kin 系列的界面當(dāng)中，「玻璃」式的半透明元素是存在的，并且很明顯是延續(xù)自「Aero」美學(xué)，只是受限于屏幕分辨率（320×240 px，320×480 px），很難呈現(xiàn)出更多細(xì)節(jié)。

隨后，Windows Phone 誕生，Windows 8 問世，包豪斯十足的 Metro 視覺風(fēng)格成為微軟的選擇。

不過在此過程中，還有一些更重要的事情：Android 和 iOS 全面擁護(hù)扁平化設(shè)計。全新的 iOS 系統(tǒng)當(dāng)中，全新的通知系統(tǒng)會使用半透明材質(zhì)，用來暗示用戶當(dāng)前所處的環(huán)境：

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

這種對于毛玻璃材質(zhì)的選擇，很大程度上和時任設(shè)計高級副總裁的喬納森艾維分不開——這是一個對于材質(zhì)、場景、暗喻有著清晰認(rèn)知和感知力的工業(yè)設(shè)計大師，而這一點也體現(xiàn)在他為 iOS 7 所制作的設(shè)計語言的介紹視頻當(dāng)中。至于喬納森對于玻璃材質(zhì)的迷戀我們可以回頭在聊。

值得一提的是，在 移動端 UI 界面當(dāng)中，成體系地使用「玻璃」的隱喻，是從 iOS 7 開始的。但是 iOS 的設(shè)計美學(xué)是一個更加龐大的東西，真正的「文藝復(fù)興」應(yīng)該是在 Windows 10。

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

之所以說是文藝復(fù)興，很大程度上是因為微軟設(shè)計團(tuán)隊在2016年的時候開始構(gòu)建的 Fluent Design 這套設(shè)計美學(xué)體系，而它所使用的核心設(shè)計隱喻是「Acrylic」，也就是亞克力，是從「Aero」繼承而來。

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

實際上，最初的 Windows 10 更多的是在設(shè)計體系和交互上花心思，「Acrylic」其實是在發(fā)布之后很久，大概2017 年的某次重要更新中加入的「新材質(zhì)」。

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

相比于 Windows Vista/7 時代的 「Aero」，「Acrylic」更加具體，量化，功能性更強，美學(xué)上更加優(yōu)雅，而在具體的實施上，微軟的 Fluent Design 和如今的「玻璃擬物化」更加接近，而近年來很多接近「玻璃擬物化」的設(shè)計，也和這種設(shè)計美學(xué)架構(gòu)近似。

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

微軟的 Fluent Design 當(dāng)中，背景和前景之間的「Acrylic」層，其實是由5個部分構(gòu)成：

當(dāng)然，使用這么多手段這也是盡可能讓最終的色調(diào)盡可能地在前景的 UI 當(dāng)中，顯得自然不突兀。如果你想了解更多，可以看這里：

雖然 Fluent Design 并沒有如同最初大家所期待的一樣，像 Material Design 或者蘋果的 HIG 那樣成為一種極為主流、廣泛應(yīng)用的設(shè)計系統(tǒng)，但是它隨著 Windows 10 在世界范圍內(nèi)的普及而始終潛移默化地影響著整個設(shè)計領(lǐng)域。

一方面，在的 Windows 10 20H2 版本當(dāng)中，從開始菜單到具體的 UI 界面當(dāng)中，徹底將 Windows 8 時代 Metro 風(fēng)格去掉了，扎眼的動態(tài)磁貼都用上了 Fluent Design 風(fēng)格的毛玻璃效果：

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

另外一邊，的 macOS Big Sur 也在整個 UI 界面當(dāng)中大規(guī)模使用了接近「玻璃擬物化」的半透明毛玻璃視覺效果，在系統(tǒng)自帶的 APP 當(dāng)中尤其顯著：

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

而值得一提的是，macOS Big Sur 和當(dāng)下的 iOS 14 在視覺美學(xué)上也保持著高度的一致，尤其是在系統(tǒng)的設(shè)計美學(xué)邏輯上是統(tǒng)一的：

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

這種主流操作系統(tǒng)的背書，「玻璃擬物化」的進(jìn)一步推行和普及，無疑有著重要的影響。相比于看起來高級但是炫技多于實用性的「新擬物化」，「玻璃擬物化」這種風(fēng)格在各大操作系統(tǒng)的踐行和驗證之下，實用性更強，視覺美學(xué)上也得到目前的操作系統(tǒng)的驗證。

Glassmorphism 有哪些設(shè)計要點？

相比于 iOS 14，macOS Big Sur 和 Windows 10 20H2，我們此刻所討論的「玻璃擬物化」在視覺效果上無疑是更加激進(jìn)、強化的。

設(shè)計師 Malewicz 在他的文章當(dāng)中對于這種設(shè)計風(fēng)格有一個非常直觀的總結(jié)：

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！

「新擬物化」過時了！此刻你最應(yīng)該擁抱的是「玻璃擬物化」！
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

日歷

鏈接

個人資料

存檔