原文引自 Megan Brown 的文章 《Glassmorphism: Definition and Best Practices》，譯者對原文進(jìn)行了部分刪減、補(bǔ)充和調(diào)整以便讀者理解。

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

一、什么是玻璃態(tài)？

玻璃態(tài)（Glassmorphism）是一種視覺設(shè)計風(fēng)格，它利用不同程度的半透明度來模仿磨砂玻璃質(zhì)感，從而創(chuàng)建前景和背景元素之間的層級和對比度。

通常，玻璃態(tài)元素放置在漸變或復(fù)雜背景上來強(qiáng)調(diào)界面層級時會顯得格外突出（見圖 1）。

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

二、設(shè)計系統(tǒng)中的玻璃態(tài)及其演變

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

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

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

圖 3. 應(yīng)用在 Windows 面板上的亞克力材質(zhì)。

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

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

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

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

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

圖 5. Apple Vision Pro 界面采用的玻璃態(tài)元素。

三、玻璃態(tài)的特征

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

1. 不透明度

要實現(xiàn)玻璃態(tài)外觀，就需要能透過元素看到底部層級。可以通過調(diào)整元素內(nèi)部的顏色、圖案或漸變的不透明度來實現(xiàn)這一點(diǎn)。

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

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

2. 背景模糊

背景模糊會使元素后面的物體呈現(xiàn)模糊、失焦的外觀。例如透過浴室的磨砂玻璃門或會議室的霧化玻璃，我們?nèi)匀豢梢钥吹搅硪粋?cè)的物體，但無法看清它們。

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

圖 7. 玻璃態(tài)組件上應(yīng)用的背景模糊越多，后面的元素就越難區(qū)分。

3. 描邊和漸變

除了不透明度和背景模糊之外，描邊（邊框）和漸變可以強(qiáng)調(diào)玻璃態(tài)元素的空間深度，在簡單或單色背景上時更能體現(xiàn)這一點(diǎn)。

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

四、利用玻璃態(tài)進(jìn)行設(shè)計

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

1. 滿足對比度要求

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

2. 越模糊越好

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

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

圖 9. Windows 的上下級菜單考慮了多種背景的情況，并強(qiáng)調(diào)當(dāng)下與菜單交互的任務(wù)來提高可讀性。

3. 讓用戶調(diào)整透明度

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

五、結(jié)論

綜上，玻璃態(tài)設(shè)計是一種用途極為廣泛的設(shè)計風(fēng)格，它可用于創(chuàng)建具有強(qiáng)層級關(guān)系的交互性界面。同時，使用玻璃態(tài)時最好多方面考慮，保持頁面層級關(guān)系以及元素可讀性?？蓞⒖际褂靡呀?jīng)成熟的設(shè)計系統(tǒng)，如蘋果的 SwfitUI，以避免從頭開始創(chuàng)建玻璃態(tài)元素時出現(xiàn)任何潛在問題。

作者：We-Design