前言

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

一、毛玻璃擬態的歷史

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

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

二、毛玻璃擬態的特征及優缺點

1.毛玻璃擬態的特征

毛玻璃擬態模仿了塑料材質（凹凸質感，凸顯層次感），這個新的視覺風格更加注重垂直空間Z軸的使用：

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

—物體漂浮在空間中，通過前后關系表現層次感

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

—半透明物體邊緣的微妙處理，采用細膩的邊框來表現玻璃質感

這是注重空間感的典型特征，意味著這種風格有助于用戶建立界面的層次結構和深度。用戶可以看到物體間的層次關系，哪一層在哪一層之上，就像空間中真實的玻璃一樣。

2.毛玻璃擬態的優缺點

優點：

毛玻璃擬態效果之所以被大家應用和認可除了它能帶來的優秀視覺表現，更重要的是其本身的功能意義，它能幫助設計師更好的拉開信息層級并達到視覺統一

（1）視覺表達

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

（2）品牌感

良好的視覺統一，有助于提升產品的品牌感。

不足：

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

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

三、毛玻璃擬態的應用

1.卡片背景

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

2.APP圖標

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

3.界面包裝

運用毛玻璃去包裝UI界面，頁面風格整體干凈、明亮，有較好的視覺效果。

四、毛玻璃擬態繪制原理

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

2. 整個效果的基礎是陰影、透明度和背景模糊的組合。這種風格可以使用一個透明層，也可以使用多個透明層，但多個透明層疊加在復雜彩色背景上的效果會更好（當至少兩個透明層出現在一個相當復雜的彩色背景上時，玻璃形態的效果是最突出的）。

五、毛玻璃擬態-卡片背景的繪制要點

1. 如何設置正確的透明度

重要的是要記住，你不能讓整個形狀透明，需要調整填充的透明度來達到透明效果。如果不調整填充的透明度，僅僅是調整整個對象的透明度，就不會產生模糊的效果。

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

2.如何選擇合適的背景

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

復雜的背景有助于玻璃形態的展現，這可能就是蘋果選擇了彩色背景作為 MacOS Big Sur 默認壁紙的原因。當模糊的透明層位于背景之上時，那些容易辨別的色調差異也很容易被看到。

六、毛玻璃擬態-圖標的簡版教程

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

下面是毛玻璃擬態-圖標的教程：

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

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

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

過程中用到的色值和模糊度可以根據視覺美觀度做適當調整，也可為圖標增加陰影，提升整體效果。

結束語

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

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

藍藍設計( www.izc.net.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務