前言

設(shè)計(jì)趨勢總是在不斷的變化，近幾年擬物風(fēng)格又以新的形式——新擬態(tài)回歸大眾視野，蘋果發(fā)布了macOS Big Sur 操作系統(tǒng)，整體風(fēng)格應(yīng)用了新擬態(tài)的設(shè)計(jì)思路，采用了3D質(zhì)感的元素設(shè)計(jì)，其中還包含了運(yùn)用陰影、透明度以及背景模糊/高斯模糊手法模仿玻璃形態(tài)，構(gòu)建空間感的新興擬物態(tài)風(fēng)格——毛玻璃擬態(tài)風(fēng)格。

一、毛玻璃擬態(tài)的歷史

毛玻璃視覺其實(shí)可以追溯到2007年微軟發(fā)售的 Windows Vista和Windows7，隨之后來的OS X 10.10（Yosemite）和iOS7中大量出現(xiàn)毛玻璃效果，比如底部快捷菜單欄、通知中心和多任務(wù)切換窗口等，蘋果公司加大了模糊程度，透明效果基于扁平，更順應(yīng)當(dāng)時(shí)UI扁平化的設(shè)計(jì)趨勢。

后來，蘋果在他們的移動(dòng)操作系統(tǒng)中大大減少了毛玻璃效果，但是最近在 MacOS Big Sur 中又增加了毛玻璃質(zhì)感。微軟的 Fluent 設(shè)計(jì)系統(tǒng)也非常注重這一效果，他們稱這種效果為 “亞克力”，并將其作為設(shè)計(jì)系統(tǒng)的組成部分之一。

二、毛玻璃擬態(tài)的特征及優(yōu)缺點(diǎn)

1.毛玻璃擬態(tài)的特征

毛玻璃擬態(tài)模仿了塑料材質(zhì)（凹凸質(zhì)感，凸顯層次感），這個(gè)新的視覺風(fēng)格更加注重垂直空間Z軸的使用：

—透明感（使用背景模糊/高斯模糊的磨砂玻璃效果）

—物體漂浮在空間中，通過前后關(guān)系表現(xiàn)層次感

—鮮艷的色彩感，更突出了模糊的透明度

—半透明物體邊緣的微妙處理，采用細(xì)膩的邊框來表現(xiàn)玻璃質(zhì)感

這是注重空間感的典型特征，意味著這種風(fēng)格有助于用戶建立界面的層次結(jié)構(gòu)和深度。用戶可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像空間中真實(shí)的玻璃一樣。

2.毛玻璃擬態(tài)的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

毛玻璃擬態(tài)效果之所以被大家應(yīng)用和認(rèn)可除了它能帶來的優(yōu)秀視覺表現(xiàn)，更重要的是其本身的功能意義，它能幫助設(shè)計(jì)師更好的拉開信息層級并達(dá)到視覺統(tǒng)一

（1）視覺表達(dá)

通過背景毛玻璃化，可以中和扁平化圖文帶來的生硬不立體。在卡片元素上添加毛玻璃效果，與其他元素疊加后視覺上建立層次感，將信息層級更好的表達(dá)出來；在圖標(biāo)中增加毛玻璃效果，可以提升圖標(biāo)通透的質(zhì)感。

（2）品牌感

良好的視覺統(tǒng)一，有助于提升產(chǎn)品的品牌感。

不足：

毛玻璃擬態(tài)效果并不好應(yīng)用于上線產(chǎn)品。它不適用于按鈕或開關(guān)（這些重要的界面元素應(yīng)該具備高對比度，更加清晰明確），模糊效果也要注意分寸，屏幕上過度使用模糊效果，會(huì)使整個(gè) UI 對某些用戶可閱讀性差，同時(shí)也會(huì)使頁面看起來顯臟。

也可以這樣理解，使用毛玻璃擬態(tài)風(fēng)格的前提是卡片內(nèi)部有足夠的對比度和合適的間距來定義層次結(jié)構(gòu)，并在視覺上 “分組” 所有相關(guān)的對象。它可以只在一個(gè)元素上使用，也可以作為卡片背景修飾視覺效果，這種很容易達(dá)到較好的視覺效果，頁面風(fēng)格也會(huì)特別亮眼，整體干凈、明亮。

三、毛玻璃擬態(tài)的應(yīng)用

1.卡片背景

用作卡片背景時(shí)，能很好的表達(dá)信息之間的層級感，朦朧透出下層視覺元素，營造了良好的視覺美感。

2.APP圖標(biāo)

用作APP圖標(biāo)，可以提升圖標(biāo)通透的質(zhì)感。常見的三種圖標(biāo)案例：A.頂部圖形為白色，底部圖形為其他色；B.頂部圖形和底部圖形為同色，頂部圖形顏色明度高；C.頂部圖形和底部圖形不同色

3.界面包裝

運(yùn)用毛玻璃去包裝UI界面，頁面風(fēng)格整體干凈、明亮，有較好的視覺效果。

四、毛玻璃擬態(tài)繪制原理

1.和任何基于卡片的布局一樣，物體離我們越近，它吸引的光就越多。在這種情況下，意味著它會(huì)更透明一些。

2. 整個(gè)效果的基礎(chǔ)是陰影、透明度和背景模糊的組合。這種風(fēng)格可以使用一個(gè)透明層，也可以使用多個(gè)透明層，但多個(gè)透明層疊加在復(fù)雜彩色背景上的效果會(huì)更好（當(dāng)至少兩個(gè)透明層出現(xiàn)在一個(gè)相當(dāng)復(fù)雜的彩色背景上時(shí)，玻璃形態(tài)的效果是最突出的）。

五、毛玻璃擬態(tài)-卡片背景的繪制要點(diǎn)

1. 如何設(shè)置正確的透明度

重要的是要記住，你不能讓整個(gè)形狀透明，需要調(diào)整填充的透明度來達(dá)到透明效果。如果不調(diào)整填充的透明度，僅僅是調(diào)整整個(gè)對象的透明度，就不會(huì)產(chǎn)生模糊的效果。

在上面的例子中，背景模糊值完全相同，但圓形圖像的疊加效果看起來完全不同。當(dāng)填充不透明度為 100% 時(shí)，對象的透明度再低也沒有用，根本無法得到想要的模糊效果。

2.如何選擇合適的背景

最底層背景在這個(gè)效果中扮演著重要的角色。不能太簡單或太單調(diào)，否則毛玻璃效果就看不出來，但也不能太復(fù)雜。

復(fù)雜的背景有助于玻璃形態(tài)的展現(xiàn)，這可能就是蘋果選擇了彩色背景作為 MacOS Big Sur 默認(rèn)壁紙的原因。當(dāng)模糊的透明層位于背景之上時(shí)，那些容易辨別的色調(diào)差異也很容易被看到。

六、毛玻璃擬態(tài)-圖標(biāo)的簡版教程

用作卡片背景繪制操作比較簡單，使用背景模糊就可以搞定，重點(diǎn)在于根據(jù)實(shí)際情況進(jìn)行透明度和模糊度的調(diào)整，這里就不再做展示。

下面是毛玻璃擬態(tài)-圖標(biāo)的教程：

第一步：繪制基礎(chǔ)圖形，頂部圖形顏色#DDEDFF，底部圖形漸變色#00EDFB——#001EEE

第二步：底部圖形復(fù)制一層，做高斯模糊效果，高斯模糊：12，不透明度72%，將模糊層置于頂部圖形上，添加蒙版

第三步：為了更好的增加圖標(biāo)辨識度，增加漸變描邊，漸變色#FFFFFF——#D5E9FF，圖標(biāo)繪制完成。

過程中用到的色值和模糊度可以根據(jù)視覺美觀度做適當(dāng)調(diào)整，也可為圖標(biāo)增加陰影，提升整體效果。

結(jié)束語

作為設(shè)計(jì)師，我們可以看到，設(shè)計(jì)趨勢一直在變化，每隔幾年就會(huì)轉(zhuǎn)向另一種風(fēng)格，但似乎每種風(fēng)格又有自己的前世今生。所謂趨勢輪回，并不只是單純的回歸，而是以一種的更豐富、更立體、更具有層次感的方式呈現(xiàn)在人們面前。

我們要做的就是不盲目，不盲從，看清楚趨勢變化的本質(zhì)。

藍(lán)藍(lán)設(shè)計(jì)( www.dzxscac.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)