今天一起來看下，今年比較火的玻璃擬態設計風格，通過這篇文章，我將帶大家了解玻璃擬態的美學發展過程、風格特點。最后通過一些優秀的案例，找到切入點，將這種設計風格巧妙的運用到設計中。

2022年初，如果你正好有項目改版或者風格探索的工作，這篇文章看完后，或許能帶給你一些新的啟發。最后，你可以將這種風格運用到你的實際項目概念設計中，在團隊中做出不一樣的設計方案。

01

什么是玻璃擬態？

玻璃擬態（Glassmorphism），更直觀的說就是玻璃擬物化。它是在2020年末開始在各大設計平臺流行起來的設計趨勢。當時蘋果新發布的Mac OS Big Sur操作系統中也使用了這種風格，因此玻璃擬態在設計圈就被廣泛流行起來了。

概念設計

這種設計風格通過將陰影、透明度、深度、描邊結合到一起創建視覺層級，透明模糊質感，形成一種全新的UI設計風格，因為給人直觀感受像玻璃，所以被被稱為玻璃擬態（Glassmorphism）。

影響玻璃擬態的美學因素有透明度、懸浮、色彩、描邊等4大關鍵要素，正是這些它們相互集合與微妙的光影變化，才形成質感豐富的擬態效果。下面我們看下每個影響因素具體內容是什么？

#1.透明度：半透明帶有模糊磨砂質感背景

#2.懸浮：通過深度、透明度、陰影營造層次感

#3.色彩：使用色彩鮮明的顏色與半透明磨砂背景疊加組合

#4.描邊：輕微描邊可用來模擬玻璃高光質感

02

為什么會再次出現？

任何設計風格到一定時間，都會慢慢退出我們的視線，然后又以新的方式出現在我們面前。早期的擬物化圖標火爆的時候，各大設計網站都在舉行設計比賽，現今基本很少看到。因為時代往前走，用戶審美也一樣，手機系統也大轉變，走向扁平化。

以蘋果IOS系統為代表的扁平化設計風格風靡一時，影響著眾多設計師作品產出。但是什么都是物極必反，扁平化也是會看膩的。因此設計師開始絞盡腦汁想出各種新鮮風格，想走出目前的窘境。正好，出現了新擬化風格、玻璃擬物化、光感風格等，開始在UI設計中大量出現。

玻璃擬態的出現也正是打破了純扁平化設計，讓界面看著有了更多光澤和質感，豐富了視覺細節。

這種風格雖然在蘋果大蘇爾系統有使用較多，網上也有很多設計好看的優秀案例，但至今在移動端見到極少，為什么會這樣？下面部分，我們來分析下這種風格一些特征，然后大家就知道了為何沒有被大范圍使用。

03

為何沒被廣泛使用？

任何一個較為明顯的設計風格出現時，如果沒有大廠帶路，其實很少有公司敢獨自冒險去使用的。畢竟沒人能承擔起損失用戶的責任。回過頭來，我們看看正在盛行的玻璃擬態風格，這種風格，在網上也有很多特別漂亮的設計案例。

設計師 Ghani Pradita

這兩張概念設計，是我最喜歡Dribbble上的一位設計師。他的概念設計特別細膩，用色也是我喜歡感覺。但，這種風格第一眼看確實不錯，最起碼打破了現階段扁平的UI設計。如果它作為前瞻概念探索的方案，是可以吸引老大們注意一下的。

我們來看看影響這個風格關鍵的四大元素：透明度、懸浮、色彩、描邊。

大家知道，我們移動設計基本都是整個屏幕的，因此有些效果全屏根本看不到，懸浮效果就需要一個大背景來承載，不然描邊效果也看不到。另外一個點就是對比度問題，這種大面積透明度看時間久了眼睛會疲憊。

另外開發實現成本，要計算這么多模糊，其實對系統壓力也蠻大的，加載卡頓、發熱問題等，當然切圖除外，切圖效果也會折扣。之前騰訊文檔做改版，就運用了玻璃擬態設計風格，不過也只是先運用在Web端的圖標上先嘗試。

騰訊文檔

這樣說來，其實這種風格還是并不差的，而更需要設計師們擅于去挖掘它的潛在價值。它適合用在哪里？接著下面我會分析下這種風格目前可運用的一些地方，幫助大家走出困境。

04

如何應用這種風格？

2021下半年，設計師如何更好的利用這種風格，在概念設計探索過程中，做出更新穎、更有設計感的界面？首先，來看下目前應用比較不錯的一些案例，從這些案例中，可以找到合適的切入角度。

1. 應用在功能局部位置

玻璃擬態風格可以運用在某些關鍵功能的局部位置，這樣既不會影響整體感受，也會在設計上有些亮點，突破純扁平化設計的壁壘。

2. 圖標中使用

圖標中使用是最接近我們能落地，畢竟占面積小，而且直接切圖給開發。不過這種風格也不能單獨出現在界面中，它需要和整體世界觀一致才可以。不然就會顯得格格不入。

3. 網頁banner

騰訊文檔web端

Web端使用，整體感受會比移動會好一些，畢竟面積大，效果展示好。

4. 車載HMI設計

車載HMI設計中，也開始出現這種玻璃擬物化卡片設計風格，畢竟車載設計和其他領域有所區別，擬物化更有觸碰質感，顯得車內整體更有品質感。

最后補充說一句，玻璃擬態風格看起來細節會豐富很多，但是也不能大面積使用，建議大家選擇合適的切入角度使用，就是我上面例舉一些案例。

如果用sketch實現這種風格，需要注意透明度和描邊的添加使用，不然實現的效果就不太像這種風格。