今天一起來看下，今年比較火的玻璃擬態(tài)設(shè)計(jì)風(fēng)格，通過這篇文章，我將帶大家了解玻璃擬態(tài)的美學(xué)發(fā)展過程、風(fēng)格特點(diǎn)。最后通過一些優(yōu)秀的案例，找到切入點(diǎn)，將這種設(shè)計(jì)風(fēng)格巧妙的運(yùn)用到設(shè)計(jì)中。

2022年初，如果你正好有項(xiàng)目改版或者風(fēng)格探索的工作，這篇文章看完后，或許能帶給你一些新的啟發(fā)。最后，你可以將這種風(fēng)格運(yùn)用到你的實(shí)際項(xiàng)目概念設(shè)計(jì)中，在團(tuán)隊(duì)中做出不一樣的設(shè)計(jì)方案。

01

什么是玻璃擬態(tài)？

玻璃擬態(tài)（Glassmorphism），更直觀的說就是玻璃擬物化。它是在2020年末開始在各大設(shè)計(jì)平臺(tái)流行起來的設(shè)計(jì)趨勢。當(dāng)時(shí)蘋果新發(fā)布的Mac OS Big Sur操作系統(tǒng)中也使用了這種風(fēng)格，因此玻璃擬態(tài)在設(shè)計(jì)圈就被廣泛流行起來了。

概念設(shè)計(jì)

這種設(shè)計(jì)風(fēng)格通過將陰影、透明度、深度、描邊結(jié)合到一起創(chuàng)建視覺層級(jí)，透明模糊質(zhì)感，形成一種全新的UI設(shè)計(jì)風(fēng)格，因?yàn)榻o人直觀感受像玻璃，所以被被稱為玻璃擬態(tài)（Glassmorphism）。

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

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

#2.懸?。和ㄟ^深度、透明度、陰影營造層次感

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

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

02

為什么會(huì)再次出現(xiàn)？

任何設(shè)計(jì)風(fēng)格到一定時(shí)間，都會(huì)慢慢退出我們的視線，然后又以新的方式出現(xiàn)在我們面前。早期的擬物化圖標(biāo)火爆的時(shí)候，各大設(shè)計(jì)網(wǎng)站都在舉行設(shè)計(jì)比賽，現(xiàn)今基本很少看到。因?yàn)闀r(shí)代往前走，用戶審美也一樣，手機(jī)系統(tǒng)也大轉(zhuǎn)變，走向扁平化。

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

玻璃擬態(tài)的出現(xiàn)也正是打破了純扁平化設(shè)計(jì)，讓界面看著有了更多光澤和質(zhì)感，豐富了視覺細(xì)節(jié)。

這種風(fēng)格雖然在蘋果大蘇爾系統(tǒng)有使用較多，網(wǎng)上也有很多設(shè)計(jì)好看的優(yōu)秀案例，但至今在移動(dòng)端見到極少，為什么會(huì)這樣？下面部分，我們來分析下這種風(fēng)格一些特征，然后大家就知道了為何沒有被大范圍使用。

03

為何沒被廣泛使用？

任何一個(gè)較為明顯的設(shè)計(jì)風(fēng)格出現(xiàn)時(shí)，如果沒有大廠帶路，其實(shí)很少有公司敢獨(dú)自冒險(xiǎn)去使用的。畢竟沒人能承擔(dān)起損失用戶的責(zé)任?；剡^頭來，我們看看正在盛行的玻璃擬態(tài)風(fēng)格，這種風(fēng)格，在網(wǎng)上也有很多特別漂亮的設(shè)計(jì)案例。

設(shè)計(jì)師 Ghani Pradita

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

我們來看看影響這個(gè)風(fēng)格關(guān)鍵的四大元素：透明度、懸浮、色彩、描邊。

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

另外開發(fā)實(shí)現(xiàn)成本，要計(jì)算這么多模糊，其實(shí)對系統(tǒng)壓力也蠻大的，加載卡頓、發(fā)熱問題等，當(dāng)然切圖除外，切圖效果也會(huì)折扣。之前騰訊文檔做改版，就運(yùn)用了玻璃擬態(tài)設(shè)計(jì)風(fēng)格，不過也只是先運(yùn)用在Web端的圖標(biāo)上先嘗試。

騰訊文檔

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

04

如何應(yīng)用這種風(fēng)格？

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

1. 應(yīng)用在功能局部位置

玻璃擬態(tài)風(fēng)格可以運(yùn)用在某些關(guān)鍵功能的局部位置，這樣既不會(huì)影響整體感受，也會(huì)在設(shè)計(jì)上有些亮點(diǎn)，突破純扁平化設(shè)計(jì)的壁壘。

2. 圖標(biāo)中使用

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

3. 網(wǎng)頁banner

騰訊文檔web端

Web端使用，整體感受會(huì)比移動(dòng)會(huì)好一些，畢竟面積大，效果展示好。

4. 車載HMI設(shè)計(jì)

車載HMI設(shè)計(jì)中，也開始出現(xiàn)這種玻璃擬物化卡片設(shè)計(jì)風(fēng)格，畢竟車載設(shè)計(jì)和其他領(lǐng)域有所區(qū)別，擬物化更有觸碰質(zhì)感，顯得車內(nèi)整體更有品質(zhì)感。

最后補(bǔ)充說一句，玻璃擬態(tài)風(fēng)格看起來細(xì)節(jié)會(huì)豐富很多，但是也不能大面積使用，建議大家選擇合適的切入角度使用，就是我上面例舉一些案例。

如果用sketch實(shí)現(xiàn)這種風(fēng)格，需要注意透明度和描邊的添加使用，不然實(shí)現(xiàn)的效果就不太像這種風(fēng)格。