編輯導(dǎo)語：在設(shè)計領(lǐng)域，總會有一些新的趨勢或者以往的風(fēng)格以新的形式出現(xiàn)，每一個新趨勢都值得設(shè)計師去拆解、思考和學(xué)習(xí)。今天，本文作者通過蘋果發(fā)布的 MacOS Big Sur 操作系統(tǒng)，對玻璃擬態(tài)的前世和今生展開了分析，玻璃擬態(tài)是什么？我們又該如何實現(xiàn)該效果？一起來看作者的文章吧。

大家好，我是聿彤，設(shè)計趨勢總是處于不斷的變化當(dāng)中，近幾年擬物風(fēng)格又以新的形式——新擬態(tài)回歸大眾視野，蘋果發(fā)布了 MacOS Big Sur 操作系統(tǒng)，整體風(fēng)格應(yīng)用了新擬態(tài)的設(shè)計思路，采用了 3D 質(zhì)感的元素設(shè)計。

其中還包含了運用陰影、透明度以及背景模糊手法模仿玻璃形態(tài)，構(gòu)建空間感的新興擬物態(tài)風(fēng)格，本文作者M(jìn)ichal Malewicz 稱之為 Glassmorphism（玻璃擬態(tài)），在文章中講述了其發(fā)展歷史和風(fēng)格特征，通過圖文和視頻結(jié)合和形式說明了設(shè)計實現(xiàn)的思路和自己對待新風(fēng)格的態(tài)度。

去年，新擬態(tài)（Neumorphism） 掀起了一陣熱潮，正如我當(dāng)時預(yù)測的那樣，它并沒有真正占據(jù)主流設(shè)計市場。

我曾經(jīng)提出過，新擬態(tài)應(yīng)用在實際線上產(chǎn)品中時，可能會出現(xiàn)可訪問性問題（用戶的可閱讀和可理解性），希望這篇文章對遇到類似問題的項目有所幫助。

這種風(fēng)格通常被使用在需要視覺效果的宣傳物料中，比如三星的廣告和 MKBHD 的介紹視頻。即使是實際產(chǎn)品，它也沒有被完整的使用在整套應(yīng)用程序上，而是在局部元素中。

這證明了我的論點，這種風(fēng)格可以使用，但是僅限于少量元素的點綴，如果產(chǎn)品內(nèi)容在沒有視覺修飾時仍然可以保持清晰的信息結(jié)構(gòu)和可讀性，就可以使用這種風(fēng)格。

MKBHD 在 2020 的產(chǎn)品介紹中使用了新擬態(tài)風(fēng)格

一、你好，玻璃擬態(tài)

玻璃擬態(tài)是目前市面上的新風(fēng)格，越來越受歡迎。新擬態(tài)（Neumorphism）模仿了受到擠壓的塑料材質(zhì)（凹凸質(zhì)感，凸顯層次感），這個新的視覺風(fēng)格更加注重垂直空間 z 軸的使用。它最典型的特征是：

• 透明度（使用背景模糊的磨砂玻璃效果）；
• 物體漂浮在空間中，通過前后關(guān)系表現(xiàn)層次感；
• 鮮艷的色彩突出了模糊的透明度；
• 半透明物體邊緣的微妙處理，采用細(xì)膩的邊框表現(xiàn)玻璃質(zhì)感。

這些注重空間感的典型特征，意味這種風(fēng)格有助于用戶建立界面的層次結(jié)構(gòu)和深度。用戶可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像物理空間中真實的玻璃一樣。

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

二、玻璃擬態(tài)的歷史

背景模糊的視覺表現(xiàn)方式，在 2013 年 iOS 7 系統(tǒng)中首次被廣泛引入。

這是一個非常重大的變化，但由于當(dāng)時正處于擬物態(tài)快速切換到扁平化的階段，所有的爭議焦點圍繞著無襯線字體和扁平化圖標(biāo)的變革，背景模糊并沒有受到影響，反而人們似乎很喜歡它。

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

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

三、流行趨勢不斷加強

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

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

當(dāng)然，如果你不喜歡這個風(fēng)格的話，可以在系統(tǒng)設(shè)置中完全關(guān)閉這種效果。

MacOS Big Sur 中可以設(shè)置背景模糊效果

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

微軟 Fluent 設(shè)計系統(tǒng)

亞克力是一種可以產(chǎn)生半透明質(zhì)感的畫筆。你可以將亞克力質(zhì)感應(yīng)用于界面設(shè)計來增加深度感，從而增加整體的視覺層次。——Microsoft Fluent DesignSystem

四、Dribbble 上的案例分析

與其他的 UI 趨勢一樣，一旦流行起來，便會在 Dribbble 出現(xiàn)大量的相關(guān)作品。玻璃擬態(tài)現(xiàn)在才慢慢的開始，已經(jīng)有一些漂亮的案例了。

當(dāng)然，這些案例看起來確實都很不錯，但是并不好應(yīng)用于上線產(chǎn)品，在實際的手機屏幕上，它們很難這樣去覆蓋背景，因為手機上的應(yīng)用程序都是全屏的。

Ghani Pradita 的智能日歷 APP

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

Ghulam Rasool 設(shè)計的玻璃擬態(tài)風(fēng)格網(wǎng)頁

就像新擬態(tài)一樣，當(dāng)它只在一個元素上使用時，很容易達(dá)到較好的視覺效果，這種風(fēng)格會特別亮眼，整體干凈、明亮，就像 Ghani Pradita作品中的 APP 背景一樣。

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

Marshall 設(shè)計的玻璃擬態(tài)風(fēng)格圖標(biāo)

圖標(biāo)使用玻璃擬態(tài)的風(fēng)格設(shè)計可能有些爭議，就像上圖的例子一樣。

觀察Dribbble，玻璃擬態(tài)的設(shè)計現(xiàn)在都位于在 #玻璃（#glass）標(biāo)簽下，但是我認(rèn)為使用 #玻璃擬態(tài)（#Glassmorphism）作為標(biāo)簽更合適。

玻璃是一種材質(zhì)，這個標(biāo)簽下可能包含非常多樣的內(nèi)容，例如玻璃杯、窗子、茶幾，如果使用 #玻璃 標(biāo)簽去查找玻璃擬態(tài)風(fēng)格的設(shè)計作品，會非常困難，所以我認(rèn)為這種風(fēng)格值得擁有一個更容易識別的名字。

五、怎樣制作玻璃擬態(tài)

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

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

透明玻璃形態(tài)卡片疊加的效果

1. 如何設(shè)置正確的透明度

重要的是要記住，你不能讓整個形狀透明，需要調(diào)整填充的透明度來達(dá)到透明效果。如果不調(diào)整填充的透明度，僅僅是調(diào)整整個對象的透明度，就不會產(chǎn)生背景模糊的效果。

使用填充的效果制作玻璃形態(tài)質(zhì)感

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

2. 如何選擇合適的背景

背景在這個效果中扮演著重要的角色。不能太簡單或太單調(diào)，否則效果就看不出來，但也不能太復(fù)雜。

復(fù)雜的背景有助于玻璃形態(tài)的展現(xiàn)

這可能就是蘋果選擇了彩色背景作為 MacOS Big Sur 默認(rèn)壁紙的原因。當(dāng)模糊的透明層位于背景之上時，那些容易辨別的色調(diào)差異也很容易被看到。

當(dāng)選擇背景時，要確保有足夠的色調(diào)差異，使玻璃效果可以被看到。

3. 最后的細(xì)節(jié)

最后，你可以嘗試為透明層添加一個帶有透明度的 1px 內(nèi)邊框。

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

左側(cè)圖像有半透明的邊框；右側(cè)圖像沒有邊框

你也可以觀看我制作的簡易教程：如何在 Sketch 和 Figma 中制作玻璃形態(tài)。

六、可訪問性

就像新擬態(tài)一樣，這種樣式可能不像默認(rèn)的 Material Design 那樣易于使用。

新擬態(tài)的主要應(yīng)用前提也適用于玻璃擬態(tài) —— 具備良好的功能層次結(jié)構(gòu)，界面元素在沒有視覺風(fēng)格修飾的情況下依然具備可訪問性。這將確保視力障礙的人仍然能夠理解 UI，無障礙使用產(chǎn)品。

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

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

要確保卡片內(nèi)部有足夠的對比度和正確的間距來定義層次結(jié)構(gòu)，并在視覺上 “分組” 所有相關(guān)的對象。

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

七、2021 年的玻璃形態(tài)

蘋果公司將玻璃擬態(tài)的風(fēng)格引入了 Big Sur，可以預(yù)見在未來幾個月里這種風(fēng)格肯定會被大家模仿。它可能不會應(yīng)用到大量的線上產(chǎn)品中，但是會比現(xiàn)在更火一些。

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

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

雖然我喜歡干凈整潔，且具有超高對比度的黑白界面，但還是很興奮地嘗試制作了這種風(fēng)格，看看它會帶給我什么驚喜。

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

原文作者：Michal Malewicz

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

譯者：張聿彤 ；公眾號：三分設(shè)

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議