2020-12-28 資深UI設計者
設計趨勢輪回，玻璃效果以一種新的展現(xiàn)形式回歸，我們以往對它的稱呼有毛玻璃效果、磨砂效果等，在下文中統(tǒng)稱為毛玻璃擬態(tài)。
設計趨勢總是在不斷的變化，近幾年擬物風格又以新的形式——新擬態(tài)回歸大眾視野，蘋果發(fā)布了macOS Big Sur 操作系統(tǒng)，整體風格應用了新擬態(tài)的設計思路，采用了3D質(zhì)感的元素設計，其中還包含了運用陰影、透明度以及背景模糊/高斯模糊手法模仿玻璃形態(tài)，構(gòu)建空間感的新興擬物態(tài)風格——毛玻璃擬態(tài)風格。
毛玻璃視覺其實可以追溯到2007年微軟發(fā)售的 Windows Vista和Windows7，隨之后來的OS X 10.10（Yosemite）和iOS7中大量出現(xiàn)毛玻璃效果，比如底部快捷菜單欄、通知中心和多任務切換窗口等，蘋果公司加大了模糊程度，透明效果基于扁平，更順應當時UI扁平化的設計趨勢。
后來，蘋果在他們的移動操作系統(tǒng)中大大減少了毛玻璃效果，但是最近在 MacOS Big Sur 中又增加了毛玻璃質(zhì)感。微軟的 Fluent 設計系統(tǒng)也非常注重這一效果，他們稱這種效果為 “亞克力”，并將其作為設計系統(tǒng)的組成部分之一。
毛玻璃擬態(tài)模仿了塑料材質(zhì)（凹凸質(zhì)感，凸顯層次感），這個新的視覺風格更加注重垂直空間Z軸的使用：
這是注重空間感的典型特征，意味著這種風格有助于用戶建立界面的層次結(jié)構(gòu)和深度。用戶可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像空間中真實的玻璃一樣。
毛玻璃擬態(tài)效果之所以被大家應用和認可除了它能帶來的優(yōu)秀視覺表現(xiàn)，更重要的是其本身的功能意義，它能幫助設計師更好的拉開信息層級并達到視覺統(tǒng)一
（1）視覺表達
通過背景毛玻璃化，可以中和扁平化圖文帶來的生硬不立體。在卡片元素上添加毛玻璃效果，與其他元素疊加后視覺上建立層次感，將信息層級更好的表達出來；在圖標中增加毛玻璃效果，可以提升圖標通透的質(zhì)感。
（2）品牌感
良好的視覺統(tǒng)一，有助于提升產(chǎn)品的品牌感。
毛玻璃擬態(tài)效果并不好應用于上線產(chǎn)品。它不適用于按鈕或開關(guān)（這些重要的界面元素應該具備高對比度，更加清晰明確），模糊效果也要注意分寸，屏幕上過度使用模糊效果，會使整個 UI 對某些用戶可閱讀性差，同時也會使頁面看起來顯臟。
也可以這樣理解，使用毛玻璃擬態(tài)風格的前提是卡片內(nèi)部有足夠的對比度和合適的間距來定義層次結(jié)構(gòu)，并在視覺上 “分組” 所有相關(guān)的對象。它可以只在一個元素上使用，也可以作為卡片背景修飾視覺效果，這種很容易達到較好的視覺效果，頁面風格也會特別亮眼，整體干凈、明亮。
用作卡片背景時，能很好的表達信息之間的層級感，朦朧透出下層視覺元素，營造了良好的視覺美感。
用作APP圖標，可以提升圖標通透的質(zhì)感。常見的三種圖標案例：A.頂部圖形為白色，底部圖形為其他色；B.頂部圖形和底部圖形為同色，頂部圖形顏色明度高；C.頂部圖形和底部圖形不同色
運用毛玻璃去包裝UI界面，頁面風格整體干凈、明亮，有較好的視覺效果。
1.和任何基于卡片的布局一樣，物體離我們越近，它吸引的光就越多。在這種情況下，意味著它會更透明一些。
2. 整個效果的基礎(chǔ)是陰影、透明度和背景模糊的組合。這種風格可以使用一個透明層，也可以使用多個透明層，但多個透明層疊加在復雜彩色背景上的效果會更好（當至少兩個透明層出現(xiàn)在一個相當復雜的彩色背景上時，玻璃形態(tài)的效果是最突出的）。
重要的是要記住，你不能讓整個形狀透明，需要調(diào)整填充的透明度來達到透明效果。如果不調(diào)整填充的透明度，僅僅是調(diào)整整個對象的透明度，就不會產(chǎn)生模糊的效果。
在上面的例子中，背景模糊值完全相同，但圓形圖像的疊加效果看起來完全不同。當填充不透明度為 100% 時，對象的透明度再低也沒有用，根本無法得到想要的模糊效果。
最底層背景在這個效果中扮演著重要的角色。不能太簡單或太單調(diào)，否則毛玻璃效果就看不出來，但也不能太復雜。
復雜的背景有助于玻璃形態(tài)的展現(xiàn)，這可能就是蘋果選擇了彩色背景作為 MacOS Big Sur 默認壁紙的原因。當模糊的透明層位于背景之上時，那些容易辨別的色調(diào)差異也很容易被看到。
用作卡片背景繪制操作比較簡單，使用背景模糊就可以搞定，重點在于根據(jù)實際情況進行透明度和模糊度的調(diào)整，這里就不再做展示。
第一步：繪制基礎(chǔ)圖形，頂部圖形顏色#DDEDFF，底部圖形漸變色#00EDFB——#001EEE
第二步：底部圖形復制一層，做高斯模糊效果，高斯模糊：12，不透明度72%，將模糊層置于頂部圖形上，添加蒙版
第三步：為了更好的增加圖標辨識度，增加漸變描邊，漸變色#FFFFFF——#D5E9FF，圖標繪制完成。
過程中用到的色值和模糊度可以根據(jù)視覺美觀度做適當調(diào)整，也可為圖標增加陰影，提升整體效果。
作為設計師，我們可以看到，設計趨勢一直在變化，每隔幾年就會轉(zhuǎn)向另一種風格，但似乎每種風格又有自己的前世今生。所謂趨勢輪回，并不只是單純的回歸，而是以一種的更豐富、更立體、更具有層次感的方式呈現(xiàn)在人們面前。
我們要做的就是不盲目，不盲從，看清楚趨勢變化的本質(zhì)。
藍藍設計( m.sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務