玻璃質感_玻璃拟物化磨砂玻璃質感又正在漸漸流行起來了

還記得今年年初大家追捧的新拟物化(Neumorphism)風格嘛？這種風格最初在社交媒體上風靡，很大程度上，來源于資深設計師 Michal Malewicz 的文章《Neumorphism in user interfaces》，這篇文章透過 Medium 平台，開始在各個設計師社群當中發酵，随後被不少平台預測為 2021 年會逐漸流行的一種視覺設計風格。

事實上，也确實有很多産品和 UI 界面跟進了這種設計風格。包括三星在内的很多品牌甚至會使用這種風格來制作宣傳視訊，油管主播 MKBHD 也在自己的視訊中使用到了這種風格：

從美學價值上來說，新拟物化足夠現代，看起來也頗為時尚，科技感也很足，不過在在實際的應用上，新拟物化本身确實不算是一種系統全面的設計風格，因為在很多具體的 UI 元素上，是難以保證可用性和易用性的。

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

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

Glassmorphism 是什麼？

顯而易見，Glassmorphism 這個詞是 Glass(玻璃)和 Skeumorphism(拟物化)的結合，我們姑且将其稱之為「玻璃拟物化設計」。

Malewicz 小哥對于這種風格特征歸結為4點：

透明：使用帶有模糊磨砂質感背景的透明效果

懸浮：帶有明顯懸浮感的多個層級

鮮明：使用鮮豔色彩作為強調色并且從半透明層中透出

微妙：使用輕薄微妙的邊框來強化實體質感

簡單的來說，「玻璃拟物化」在某些方面和「新拟物化」是一脈相承的，但是它有着相對更加具體的視覺隐喻，也就是我們日常接觸的「玻璃」。

如果你和經常翻看 Dribbble 或者 Behance ，你會注意到有很多設計師在有意識地采用「玻璃拟物化」美學的設計。

比如這是 Figma 團隊的設計師 Rogie 所設計的小圖示

大家着迷于這種風格到底原因何在？

Glassmorphism 的優點有哪些？

1、愉悅感 首先，當然是視覺愉悅感。

設計師 Ghani Pradita 所設計的月曆應用 使用「玻璃拟物化」來設計的界面，由于毛玻璃的通透性，在有多個控件的情況下，呈現出一種獨特的「虛實結合」的美感。 2、層次感

Happy Tri Milliarta 設計的展示頁面 (Blur Concept Mobile Exploration by Happy Tri Milliarta for Noansa on Dribbble)

來自 Paperpillar 團隊的 Ghani Pradita 設計的 UI 控件 使用者可以很清晰地感覺到多個不同的層次，看不清楚但是可以透過「玻璃」的「背景層」，創造朦胧效果的「玻璃層」，前景的UI控件，這已經比原有的 UI 界面多了一層，當然，實際上如果你用的巧妙，可以讓層次更多但是協調地存在。 3、呈現語境

這是設計師 Ilham Maulana 為 Plainthing Studio 團隊所設計的網頁 有些東西應該是不言自明的。比如「我在哪」「我是從哪裡來的」這種事情，可以透過「玻璃」看到的背景層就能夠很好地暗示出此刻的位置。 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 在他的文章當中對于這種設計風格有一個非常直覺的總結：

1.整體的效果是來自于陰影、透明和背景模糊的組合 2.需要使用微妙的、貼合環境色的投影來呈現層次感 3.越是靠近前景的元素，通透性就越強 4.越是靠近背景的元素，通透性就越低

1.不要對整個對象設定透明度，而是要調整填充透明度 2.添加 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 本文轉自：優設

----------------- 點再看 多留言 --------------- #精彩必看# 
           

聖誕節海報做了嗎？為你準備好了聖誕素材合集