設計新趨勢：玻璃擬態是什麼？如何實現該效果？

大家好，我是聿彤，設計趨勢總是處於不斷的變化當中，近幾年擬物風格又以新的形式——新擬態迴歸大眾視野，蘋果釋出了 MacOS Big Sur 作業系統，整體風格應用了新擬態的設計思路，採用了 3D 質感的元素設計。

其中還包含了運用陰影、透明度以及背景模糊手法模仿玻璃形態，構建空間感的新興擬物態風格，本文作者Michal Malewicz 稱之為 Glassmorphism（玻璃擬態），在文章中講述了其發展歷史和風格特徵，透過圖文和影片結合和形式說明了設計實現的思路和自己對待新風格的態度。

去年，新擬態（Neumorphism） 掀起了一陣熱潮，正如我當時預測的那樣，它並沒有真正佔據主流設計市場。

我曾經提出過，新擬態應用在實際線上產品中時，可能會出現可訪問性問題（使用者的可閱讀和可理解性），希望這篇文章對遇到類似問題的專案有所幫助。

這種風格通常被使用在需要視覺效果的宣傳物料中，比如三星的廣告和 MKBHD 的介紹影片。即使是實際產品，它也沒有被完整的使用在整套應用程式上，而是在區域性元素中。

這證明了我的論點，這種風格可以使用，但是僅限於少量元素的點綴，如果產品內容在沒有視覺修飾時仍然可以保持清晰的資訊結構和可讀性，就可以使用這種風格。

MKBHD 在 2020 的產品介紹中使用了新擬態風格

一、你好，玻璃擬態

玻璃擬態是目前市面上的新風格，越來越受歡迎。新擬態（Neumorphism）模仿了受到擠壓的塑膠材質（凹凸質感，凸顯層次感），這個新的視覺風格更加註重垂直空間 z 軸的使用。它最典型的特徵是：

• 透明度（使用背景模糊的磨砂玻璃效果）；
• 物體漂浮在空間中，透過前後關係表現層次感；
• 鮮豔的色彩突出了模糊的透明度；
• 半透明物體邊緣的微妙處理，採用細膩的邊框表現玻璃質感。

這些注重空間感的典型特徵，意味這種風格有助於使用者建立介面的層次結構和深度。使用者可以看到物體間的層次關係，哪一層在哪一層之上，就像物理空間中真實的玻璃一樣。

因為它看起來像玻璃，我相信最好的叫法是：「玻璃擬態」Glassmorphism

二、玻璃擬態的歷史

背景模糊的視覺表現方式，在 2013 年 iOS 7 系統中首次被廣泛引入。

這是一個非常重大的變化，但由於當時正處於擬物態快速切換到扁平化的階段，所有的爭議焦點圍繞著無襯線字型和扁平化圖示的變革，背景模糊並沒有受到影響，反而人們似乎很喜歡它。

iOS 7和 WindowsVista 中的背景模糊效果

下拉通知這個操作的創新，很快就變成了一件有趣的事情，你可以清楚地看到（當你慢慢地下拉通知時）新面板下的圖示是如何淡出和模糊的。

三、流行趨勢不斷加強

隨著時間推移，蘋果在他們的移動作業系統中大大減少了模糊的玻璃效果，但是最近在 MacOS Big Sur 中又增加了透明模糊的質感。

觀察這個視窗，看看背景照片被視窗遮擋的部分是如何表現隱約透明的玻璃質感的。我把視窗放在桌面中央，突出了背景模糊效果最明顯的地方。

當然，如果你不喜歡這個風格的話，可以在系統設定中完全關閉這種效果。

MacOS Big Sur 中可以設定背景模糊效果

微軟的 Fluent 設計系統也非常注重這一效果，他們稱這種特殊的元素為 “亞克力”，並將其作為設計系統的組成部分之一。

微軟 Fluent 設計系統

四、Dribbble 上的案例分析

與其他的 UI 趨勢一樣，一旦流行起來，便會在 Dribbble 出現大量的相關作品。玻璃擬態現在才慢慢的開始，已經有一些漂亮的案例了。

當然，這些案例看起來確實都很不錯，但是並不好應用於上線產品，在實際的手機螢幕上，它們很難這樣去覆蓋背景，因為手機上的應用程式都是全屏的。

Ghani Pradita 的智慧日曆 APP

上面這個案例還具備一些可讀性，它明顯是玻璃擬態風格的作品，具備玻璃質感的特徵：背景模糊，但仍然可見，透明層具有一點半透明的白色輪廓，用來模擬玻璃的邊緣。

Ghulam Rasool 設計的玻璃擬態風格網頁

就像新擬態一樣，當它只在一個元素上使用時，很容易達到較好的視覺效果，這種風格會特別亮眼，整體乾淨、明亮，就像 Ghani Pradita作品中的 APP 背景一樣。

在這個案例中，你還可以想象桌面 web 介面在背景上使用玻璃質感的效果。

Marshall 設計的玻璃擬態風格圖示

圖示使用玻璃擬態的風格設計可能有些爭議，就像上圖的例子一樣。

觀察Dribbble，玻璃擬態的設計現在都位於在 #玻璃（#glass）標籤下，但是我認為使用 #玻璃擬態（#Glassmorphism）作為標籤更合適。

玻璃是一種材質，這個標籤下可能包含非常多樣的內容，例如玻璃杯、窗子、茶几，如果使用 #玻璃 標籤去查詢玻璃擬態風格的設計作品，會非常困難，所以我認為這種風格值得擁有一個更容易識別的名字。

五、怎樣製作玻璃擬態

效果本身是很容易實現的，但是需要考慮兩點：

1. 和任何基於卡片的佈局一樣，物體離我們越近，它吸引的光就越多。在這種情況下，意味著它會更透明一些。
2. 整個效果的基礎是陰影、透明度和背景模糊的組合。這種風格可以使用一個透明層，也可以使用多個透明層，但多個透明層疊加在複雜彩色背景上的效果會更好（當至少兩個透明層出現在一個相當複雜的彩色背景上時，玻璃形態的效果是最突出的）。

透明玻璃形態卡片疊加的效果

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

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

使用填充的效果製作玻璃形態質感

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

2. 如何選擇合適的背景

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

複雜的背景有助於玻璃形態的展現

這可能就是蘋果選擇了彩色背景作為 MacOS Big Sur 預設桌布的原因。當模糊的透明層位於背景之上時，那些容易辨別的色調差異也很容易被看到。

當選擇背景時，要確保有足夠的色調差異，使玻璃效果可以被看到。

3. 最後的細節

最後，你可以嘗試為透明層新增一個帶有透明度的 1px 內邊框。

它模擬了玻璃的邊緣，可以使形狀從背景中更加突出。雖然模糊背景這種風格已經存在很多年了，但它現在越來越流行，因此，還有很多酷炫的、有創意的效果可以去探索。

左側影象有半透明的邊框；右側影象沒有邊框

你也可以觀看我製作的簡易教程：如何在 Sketch 和 Figma 中製作玻璃形態。

六、可訪問性

就像新擬態一樣，這種樣式可能不像預設的 Material Design 那樣易於使用。

新擬態的主要應用前提也適用於玻璃擬態 —— 具備良好的功能層次結構，介面元素在沒有視覺風格修飾的情況下依然具備可訪問性。這將確保視力障礙的人仍然能夠理解 UI，無障礙使用產品。

這是和新擬態一樣的反面案例，它在螢幕上過度的使用模糊效果。這樣做會使整個 UI 對某些使用者來說幾乎無法訪問，同時也會使它變得無聊和陳舊。

只有當這些透明效果純粹是裝飾，而不是體驗的一部分時，才會發生這種情況。應該避免使用它們作為按鈕或開關（這些重要的介面元素應該具備高對比度，更加清晰明確），但你可以使用這些視覺效果修飾卡片背景。

要確保卡片內部有足夠的對比度和正確的間距來定義層次結構，並在視覺上 “分組” 所有相關的物件。

這是一個正面案例，這張卡片有明確的結構，即使玻璃形態效果被完全刪除，內容也可以正常使用。這只是一個簡單的示例，色彩對比度還可以改善。

七、2021 年的玻璃形態

蘋果公司將玻璃擬態的風格引入了 Big Sur，可以預見在未來幾個月裡這種風格肯定會被大家模仿。它可能不會應用到大量的線上產品中，但是會比現在更火一些。

作為人類，我們很容易厭倦一種趨勢，每隔幾年就會轉向另一種風格。一段時間內，我們使用了極簡、近乎扁平的介面，但之後介面又會變得更豐富、更立體、更具有層次感。

作為設計師，我們需要探索開發產品的所有潛力和創造性方法。在某些情況下，適量使用 “玻璃” 效果實際上會使產品看起來更好，對使用者更有吸引力。

雖然我喜歡乾淨整潔，且具有超高對比度的黑白介面，但還是很興奮地嘗試製作了這種風格，看看它會帶給我什麼驚喜。

因為最終，設計應該是有趣的，這是我們探索新道路、享受過程，並交付真正與眾不同的東西的唯一途徑。

原文作者：Michal Malewicz

原文地址：https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9

譯者：張聿彤 ；公眾號：三分設

本文由 @三分設 翻譯釋出於人人都是產品經理，未經許可，禁止轉載。

題圖來自 Pexels，基於 CC0 協議