去年大家看到更多的設(shè)計(jì)和文章都在圍繞“新擬物化”展開行動(dòng)，隨著各種硬件的提升，代碼的優(yōu)化，更多的風(fēng)格和效果一一出現(xiàn)在我們的生活中，而今天呢，我們一起探索一下生活中最常見的，你可能沒有注意到的設(shè)計(jì)風(fēng)格——“玻璃擬物化”風(fēng)格，英文“Glassmorphism”，這也可能會(huì)成為新的設(shè)計(jì)趨勢(shì)。 

什么是玻璃擬物化呢？ 

在生活中的攝影，通過玻璃的層次感，給人以朦朧的美感，那什么是玻璃擬物化呢？

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

油管一管主Malewicz 小哥對(duì)于這種風(fēng)格特征歸結(jié)為4點(diǎn)：

• 透明：使用帶有模糊磨砂質(zhì)感背景的透明效果

• 懸?。簬в忻黠@懸浮感的多個(gè)層級(jí)

• 鮮明：使用鮮艷色彩作為強(qiáng)調(diào)色并且從半透明層中透出

• 微妙：使用輕薄微妙的邊框來強(qiáng)化物理質(zhì)感

  
  

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

玻璃擬物化的優(yōu)點(diǎn)有哪些？ 

1.愉悅感 

玻璃擬物化的應(yīng)用，讓扁平的UI界面不那么單調(diào)，打破了人們的視覺疲勞，增添歡快、愉悅的設(shè)呈現(xiàn)效果。 

2.層次感 

通過玻璃透明，加周圍顏色環(huán)境的烘托，頁(yè)面的層次能更容易的呈現(xiàn)出來。 

3.呈現(xiàn)語境 

你在哪，從哪里來，玻璃擬物化就很明白的告訴你了。通過透明的玻璃材質(zhì)，能告訴你所覆蓋的層級(jí)。

4.微妙高級(jí)感 

例如，以往的電商產(chǎn)品設(shè)計(jì)界面，更多的體現(xiàn)材質(zhì)或者簡(jiǎn)約風(fēng)體現(xiàn)產(chǎn)品本身，但玻璃擬物化會(huì)讓產(chǎn)品在呈現(xiàn)中更顯高級(jí)。  

玻璃擬物化的設(shè)計(jì)風(fēng)格從哪里來呢？

追根溯源。其實(shí)還是要追更到蘋果頭上。  

蘋果的合計(jì)將玻璃擬物化的風(fēng)格運(yùn)用的惟妙惟肖，無論是mac，iPhone還是iPad，設(shè)計(jì)風(fēng)格都保持著相對(duì)一致的玻璃擬物化風(fēng)格。 

重點(diǎn)來了，

玻璃擬物化如何用Sketch來設(shè)計(jì)一個(gè)玻璃面呢？ 

首先：我們打開sketch，建立一個(gè)畫板，隨便找張圖片作為背景，畫一個(gè)白色矩形 

接下來：調(diào)整矩形的屬性，再填充色中設(shè)置透明度為50%，邊框可以吸取一個(gè)30%透明的白色，2px，再添加一個(gè)環(huán)境色的10%陰影，做出層次感，最后就是調(diào)整玻璃模糊的效果了，玻璃擬物的關(guān)鍵就在于sketch自帶的背景模糊功能，我們常常以為這里只有一個(gè)高斯模糊，但卻忽略隱藏在里面的其他模糊效果。設(shè)置背景模糊值為10%，不用太大，太大的話模糊效果就沒有那么真實(shí)了，具體調(diào)整還是要看效果。我們看效果： 

單層的效果不是很明顯，我們復(fù)制兩個(gè)調(diào)好的玻璃效果，調(diào)整他們的透明度，底部的透明度為70%、中間的為50%，最上層的為30%，看效果：

在界面設(shè)計(jì)中，就可以通過不同層級(jí)，調(diào)整對(duì)應(yīng)的參數(shù)，達(dá)到更好的層級(jí)效果。 

那深色模式怎么辦呢？

很簡(jiǎn)單，我們復(fù)制這三個(gè)矩形，填充色設(shè)為黑色，可以不是純黑色，根據(jù)設(shè)計(jì)規(guī)范來定，看效果：  

在圖標(biāo)中怎么用玻璃擬物化設(shè)計(jì)呢？

玻璃是屬于透明物體，所以我們就了解到，通過玻璃看物體，層次感就出來了。 

所以圖標(biāo)這這里設(shè)計(jì)的關(guān)鍵就在于 玻璃面和層次感，下面我們來看幾個(gè)圖標(biāo)設(shè)計(jì)的案例 

看得出來，玻璃擬物化的設(shè)計(jì)很出效果。 

下面根據(jù)我說的我們來分析如何運(yùn)用玻璃擬物化設(shè)計(jì)圖標(biāo) 

我們以這個(gè)照片的圖標(biāo)為例來拆解分析，通過運(yùn)用剛才繪制的玻璃面的方法，與圖標(biāo)色塊組合起來，在組合的時(shí)候，調(diào)整好層級(jí)，一個(gè)輕巧且富有玻璃質(zhì)感的圖標(biāo)就繪制出來了，很簡(jiǎn)單、很容易上手對(duì)不對(duì)？一起來快來試試吧 

注意的細(xì)節(jié)：

1.在純白色背景中，一定要給玻璃面添加底部色塊的顏色，不然就不會(huì)出現(xiàn)看不見玻璃層的尷尬畫面； 

2.背景模糊值也是需要根據(jù)具體的需要來調(diào)整。  

---

玻璃擬物化在界面中的應(yīng)用越來越多，所以大家也要根據(jù)自己的業(yè)務(wù)有選擇性嘗試的去使用，不要盲目的跟隨設(shè)計(jì)趨勢(shì)設(shè)計(jì)而設(shè)計(jì)。  

就到這里兒吧，大家有空多去收藏一些類似的設(shè)計(jì)，多去吸取靈感，設(shè)計(jì)出更好用好看的產(chǎn)品！  

最后，讓我們?cè)賮砜偨Y(jié)一下

一玻璃擬物化的特點(diǎn)：

• 透明：使用帶有模糊磨砂質(zhì)感背景的透明效果

• 懸?。簬в忻黠@懸浮感的多個(gè)層級(jí)

• 鮮明：使用鮮艷色彩作為強(qiáng)調(diào)色并且從半透明層中透出

• 微妙：使用輕薄微妙的邊框來強(qiáng)化物理質(zhì)感

玻璃擬物化的優(yōu)點(diǎn)有哪些？

• 愉悅感

• 層次感

• 呈現(xiàn)語境

• 微妙高級(jí)感

  
  

  文章來源：站酷  作者：設(shè)計(jì)傳聲筒

  藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)