2020年曾有網頁設計大神預言，Neomorphism(新擬物風)將為成為當時網絡興起的設計風格。不過，到目前為止，我們仍然鮮少見到Neomorphism被應用，而且近期有關它的熱度更是大不如此。

相反，Apple在WWDC2020大會上發佈新一代操作系統macOS Big Sur後，卻聞到一股新的UI設計風潮正悄然而來。

Glassmorphism，或成為2021年熱門網頁設計趨勢

從Apple官方宣傳片中，我們看到macOS Big Sur採用了深度、陰影和半透明創建層級的UI設計思路，營造出玻璃質感的設計風格。這種設計風格能夠在多個層級下，透過磨砂玻璃的通透，呈現出一種「虛實結合」的美觀，因而被稱為Glassmorphism(暫譯：玻璃擬態)。

Glassmorphism的主要特徵：

· 透明度，通過背景模糊營造磨砂玻璃效果;

· 使對象在多層級間懸浮的視覺效果;

· 突出模糊透明度的鮮艷色彩;

· 在半透明對象上添加類似玻璃高光般的纖細邊框。

有關Glassmorphism的案例欣賞

與其他UI趨勢一樣，一旦流行起來，便會在Dribbble出現大量相關作品，雖然Glassmorphism才剛出現，但已經不乏漂亮的案例。

Ghani Pradita：智能日曆APP

這款APP雖然是Glassmorphism風格，如背景模糊，透明層具有一點半透明白色輪廓，用來模擬玻璃邊緣，但對界面可讀性的影響並不大，內容仍然清晰可見。

Ghulam Rasool：Glassmorphism風格網頁設計

事實上，Glassmorphism不僅會讓整體設計顯得特別亮眼、乾淨，還能增加主體的立體感，非常真實，就像Ghulam Rasool 這款作品一樣。

Marshall：Glassmorphism風格Icon

Icon使用Glassmorphism風格設計可能會有些爭議，就像上圖例子一樣，會有種模糊不清，顯得很髒的感覺。

如何實現Glassmorphism風格的效果?

1.實現Glassmorphism風格的原則

要實現Glassmorphism效果並不難，但需要考慮兩點：

○ 和任何基於卡片布局一樣，物體離我們越近，吸引的光就越多，同時也意味着它會更透明些。

○ 整個效果的基礎是陰影、透明度和背景模糊的組合。這種風格可使用一個透明層，也可使用多個透明層，但多個透明層疊加在相對複雜的彩色背景上時，玻璃形態的效果會更佳。

2.實現Glassmorphism風格的方法

① 設置正確透明度

首先，設置物體透明度時，不能讓整個形狀透明，而是需要調整填充的透明度來達到透明效果，否則不會產生背景模糊的效果。

從上面的例子來看，背景模糊值雖然相同，但圓形圖像疊加效果並不完全一樣。當填充不透明度為100%時，對象的透明度再低也無法得到想要的模糊效果。

② 選擇合適的背景

Glassmorphism風格的背景不能太簡單或太單調，否則效果是很難看出來的;當然背景也不能太花，否則就會分散用戶的注意力。

這或許就是Apple選擇彩色背景作為MacOS Big Sur默認壁紙的原因，即確保背景有足夠的色調差異，玻璃效果才會更容易被看到。

③ 添加玻璃的內邊框

嘗試為透明層添加帶有透明度1px的內邊框，模擬玻璃的邊緣，使形狀從背景中更加突出。

④ 可訪問性

像Neomorphism一樣，Glassmorphism可能不像默認的Material Design那樣易用。

如上面例子，在屏幕上過度使用模糊效果，會影響某些用戶使用，同時也會使它變得無聊和陳舊。

通常只有當這些透明效果純粹是裝飾，而不是體驗一部分時，才會發生這種情況，因此應避免使用它們作為按鈕或開關(這些重要界面元素應該具備高對比度，更加清晰明確)。

但你可以使用這些視覺效果修飾卡片背景，並確保卡片內部有足夠對比度和正確間距定義層次結構，並在視覺上「分組」所有相關對象。

如上面例子，UI有明確的結構，即使玻璃形態效果被完全刪除，內容也可正常使用。

總結，要設計Glassmorphism風格的作品，必須具備良好的功能層次結構，界面元素在沒有視覺風格修飾情況下，依然具備可訪問性，並確保視力障礙用戶也能理解並無障礙使用產品。