原文引自 Megan Brown 的文章 《Glassmorphism: Definition and Best Practices》，譯者對原文進行了部分刪減、補充和調整以便讀者理解。

玻璃態是 2020 年以來逐漸流行起來的一種視覺設計趨勢，在蘋果和微軟的設計系統中占有重要地位。玻璃態元素看起來像磨砂玻璃。巧妙使用玻璃態可以幫助設計師有效地建立視覺層次。然而，如果沒有熟練掌握視覺設計原則，或者過度使用該形態，可能會影響界面可視性與可用性。

一、什么是玻璃態？

玻璃態（Glassmorphism）是一種視覺設計風格，它利用不同程度的半透明度來模仿磨砂玻璃質感，從而創建前景和背景元素之間的層級和對比度。

通常，玻璃態元素放置在漸變或復雜背景上來強調界面層級時會顯得格外突出（見圖 1）。

圖 1. 蘋果設計系統中的兩個玻璃態示例：iPadOS 應用程序文件夾（左）和 MacOS 通知（右）。背景元素仍然可見，但不易識別。

二、設計系統中的玻璃態及其演變

讓 UI 元素呈現玻璃外觀的想法可以追溯到 2013 年的 iOS 更新。在這次更新中，iOS 菜單進行了重新設計（見圖 2）。它以具有磨砂玻璃效果的半透明界面元素為特點。從此，玻璃態作為一種設計風格的種子就此種下。

圖 2. 2013 年 6 月 10 日 — Apple 發布了具有全新用戶界面的 iOS 7。

4 年后，微軟于 2017 年推出了 Fluent 設計系統。該系統的設計原則是創建一種看起來輕盈、具有層次感和深度、以及涵蓋了動畫與材質的設計語言。其中有一種背景效果被命名為亞克力材質（acrylic material），這種半透明、模糊的背景效果的靈感來自玻璃的外觀（見圖 3）。

圖 3. 應用在 Windows 面板上的亞克力材質。

3 年后，蘋果于 2020 年推出了 macOS Big Sur 更新，并在其操作系統中添加了類似的半透明和玻璃般的視覺元素（見圖 4），也就是現在 mac 用戶常見到的半透明面板。

圖 4. 應用在 macOS Big Sur 面板上的半透明視覺元素。

這些變化使操作系統看起來更加現代和優雅。很快，來自世界各地的 UI 設計師都對玻璃般的視覺元素在 UI 設計上的效果贊不絕口。到 2020 年，玻璃態被認證為一種 UI 設計趨勢。

（以上演變歷史參考《What is Glassmorphism?》一文。）

而到今天，玻璃態發展至虛擬現實或混合現實空間中。玻璃態元素通過為在標準屏幕上看起來可能是二維的對象提供材質紋理來幫助保持 3D 體驗。例如，Apple Vision Pro 在半透明 UI 覆蓋層中使用玻璃態（見圖 5），有效地模糊了它們背后的虛擬現實環境，同時保持它們可被感知。

圖 5. Apple Vision Pro 界面采用的玻璃態元素。

三、玻璃態的特征

玻璃態有以下 3 個主要特征：不透明度、背景模糊、描邊與漸變。

1. 不透明度

要實現玻璃態外觀，就需要能透過元素看到底部層級?？梢酝ㄟ^調整元素內部的顏色、圖案或漸變的不透明度來實現這一點。

不透明度定義了元素的透明度。不透明度越高，后面的內容就越難看到。不透明度越低，能看得越多。例如，我們可以清楚地通過家里的玻璃窗看到外面，那玻璃窗的不透明度即為 0%。

圖 6. 元素的不透明度越低，背景元素就越清晰。

2. 背景模糊

背景模糊會使元素后面的物體呈現模糊、失焦的外觀。例如透過浴室的磨砂玻璃門或會議室的霧化玻璃，我們仍然可以看到另一側的物體，但無法看清它們。

背景模糊與較低不透明度的效果是類似的。例如，不透明度為 30% 且模糊度為 25px 的白色矩形會扭曲背景元素，但仍可辨別背景元素邊緣。但是，通過將模糊度調整為 100px，這些背景元素會變得更加失焦并融合在一起。

圖 7. 玻璃態組件上應用的背景模糊越多，后面的元素就越難區分。

3. 描邊和漸變

除了不透明度和背景模糊之外，描邊（邊框）和漸變可以強調玻璃態元素的空間深度，在簡單或單色背景上時更能體現這一點。

圖 8. 為在簡單背景上的元素添加低透明度描邊可以營造厚度感。更進一步可以使用漸變描邊和漸變填充在單色背景上營造空間深度感。

四、利用玻璃態進行設計

在界面中加入玻璃態元素時，玻璃態元素上的文本可讀性很容易受到背景影響。以下有 3 個建議可供參考：

1. 滿足對比度要求

確保文本和圖形元素滿足對比度要求。由于玻璃態組件是半透明的，文本元素可能會覆蓋多種顏色，從而影響可讀性。這里推薦一個 figma 的插件 Contrast，它可以讓你快速檢查文本和其他設計元素的對比度。

2. 越模糊越好

背景虛化程度越高越好，尤其是在背景復雜的情況下（例如視頻、攝影、動畫）。Behance 或 Dribble 上的許多 UI 設計都努力地保持背景元素的可辨性。然而，過多的背景元素會讓用戶難以專注于有意義的內容，并影響文本的可讀性。

由于元素可能出現在各種上下層級中，例如網站上的疊加層或桌面應用程序上的上下文菜單，背景模糊必須考慮到元素可能出現的多種背景。

圖 9. Windows 的上下級菜單考慮了多種背景的情況，并強調當下與菜單交互的任務來提高可讀性。

3. 讓用戶調整透明度

如果可以的話，請為用戶提供控制對比度或透明度設置的選項。例如，蘋果的輔助功能允許用戶降低或提高對比度，從而使界面能夠適應視力較差的用戶。

五、結論

綜上，玻璃態設計是一種用途極為廣泛的設計風格，它可用于創建具有強層級關系的交互性界面。同時，使用玻璃態時最好多方面考慮，保持頁面層級關系以及元素可讀性?？蓞⒖际褂靡呀洺墒斓脑O計系統，如蘋果的 SwfitUI，以避免從頭開始創建玻璃態元素時出現任何潛在問題。

歡迎關注作者微信公眾號：「We-Design」