世界頂級(jí)團(tuán)隊(duì)如何做好毛玻璃設(shè)計(jì)？高手總結(jié)了8個(gè)章節(jié)！

前言

你曾經(jīng)是這么實(shí)現(xiàn)毛玻璃的嗎？

可能以往大家都還在只是單獨(dú)給一個(gè)帶透明度的實(shí)色 + blur 模糊數(shù)值，如果只是這樣，效果上是無(wú)法達(dá)到 iOS 或者微軟的毛玻璃呈現(xiàn)的效果的，這也是為什么我們看蘋果的原生應(yīng)用會(huì)覺(jué)得高端，但是自己好像寫不出來(lái)。

在剖析毛玻璃之前，讓我們先看看毛玻璃的發(fā)展史吧。

往期毛玻璃效果教程：

一、毛玻璃的前世今生

1. 2006 年的 Windows Vista

Windows Vista 系統(tǒng)的 UI 設(shè)計(jì)在當(dāng)時(shí)引起了一定的爭(zhēng)議和討論，Windows Vista 引入了 Aero Glass 效果，其中包括了窗口的透明和模糊效果，這是當(dāng)時(shí)操作系統(tǒng)界面設(shè)計(jì)中的一項(xiàng)創(chuàng)新。毛玻璃效果為界面帶來(lái)了一種現(xiàn)代感和高級(jí)感，給 Windows Vista 系統(tǒng)帶來(lái)了一種立體感和深度感，窗口和界面元素之間的層次感更加明顯。這種視覺(jué)效果使得界面看起來(lái)更加精致和高級(jí)，提升了用戶體驗(yàn)。不過(guò) Windows Vista 的毛玻璃效果也帶來(lái)了一些性能問(wèn)題。由于 Aero Glass 效果需要較高的顯卡性能和系統(tǒng)資源，對(duì)于一些配置較低的計(jì)算機(jī)來(lái)說(shuō)，可能會(huì)導(dǎo)致系統(tǒng)運(yùn)行緩慢或卡頓。這一點(diǎn)引起了用戶的不滿和批評(píng)。作為毛玻璃在 UI 界面運(yùn)用的開(kāi)山鼻祖，Vista 系統(tǒng)的 UI 設(shè)計(jì)在當(dāng)時(shí)的創(chuàng)新和視覺(jué)效果方面取得了一定的成就。

2. 2007 年的 Mac OS

而對(duì)于高模糊度毛玻璃的運(yùn)用上，比較好的應(yīng)用可以追溯到蘋果公司的 Mac OS X 10.5 Leopard 操作系統(tǒng)（2007 年發(fā)布）。當(dāng)時(shí)引入了 Aqua 界面的更新，其中包括了透明的菜單欄和 Dock，以及窗口背后的模糊效果。

3. 2013 年的 iOS 7

蘋果公司在 iOS 7（2013 年發(fā)布）中引入了全新的設(shè)計(jì)語(yǔ)言，即扁平化設(shè)計(jì)。其中包括了毛玻璃效果的應(yīng)用，如控制中心和通知中心的背景模糊效果。這種景深感的效果強(qiáng)調(diào)了 Z 軸的信息層級(jí)。

4. 后續(xù)跨平臺(tái)的毛玻璃

隨著技術(shù)的發(fā)展，毛玻璃效果逐漸在各種跨平臺(tái)應(yīng)用中得到應(yīng)用，如 H5、web、App 內(nèi)等。設(shè)計(jì)師們通過(guò) CSS、圖形處理軟件和代碼庫(kù)等工具，實(shí)現(xiàn)了各種形式的毛玻璃效果。

二、毛玻璃優(yōu)點(diǎn)

1. 增強(qiáng)視覺(jué)層次，強(qiáng)調(diào)內(nèi)容

毛玻璃效果可以為界面元素增加一定的模糊和透明度，劃分 Z 軸層級(jí)，從而營(yíng)造出層次感和深度感。這使得界面看起來(lái)更加立體，用戶可以更清晰地區(qū)分前景和背景元素，將用戶關(guān)注點(diǎn)集中在界面上的內(nèi)容上。這使得內(nèi)容更加突出，用戶可以更專注地瀏覽和操作界面。

*通常蘋果在使用這種聚焦形式時(shí)會(huì)配合陰影一同使用

2. 提升美觀度

毛玻璃效果作為具有功能性的效果除外，還天然的附帶質(zhì)感效果。它給界面帶來(lái)一種現(xiàn)代感和高級(jí)感，使得 UI 界面更加吸引人。它可以為界面添加一種柔和的視覺(jué)效果，使得界面看起來(lái)更加精致和優(yōu)雅。毛玻璃和非模糊蒙層以及實(shí)色卡片比起來(lái)，有種格外的清透感。俗話說(shuō)朦朧就是美，摘了眼鏡看誰(shuí)都是帥哥美女，往往朦朦朧朧窗戶紙不捅破的感覺(jué)是最讓人迷戀的感受（參考 90 年代電影，看誰(shuí)都覺(jué)得好看）。

三、蘋果的處理手段

1. iOS Materials

從 iOS Materials 中可以看到，蘋果為 iOS 提供了標(biāo)簽、填充、分隔符對(duì)應(yīng)的深淺模糊模式，分隔符只有一個(gè)模糊級(jí)別，而標(biāo)簽和填充提供了 N 個(gè)級(jí)別的虛化效果。

2. 處理手段與原理

我們用這個(gè)材料樣式舉例子

傳統(tǒng)方法就是先疊一層帶透明度的灰色：

這種手段也就是我們現(xiàn)在大多數(shù)人都在用的方式：

蘋果在這個(gè)基礎(chǔ)上，比我們多做了一步，就是色彩修正：

色彩修正就是我們的圖層樣式中的各種處理方式，蘋果的淺色處理使用的是 color dodge，暗色模式處理使用的是 overlay。

3. colordodge 的疊層原理：

接下來(lái)通屏?xí)?HSB 作為默認(rèn)顏色格式進(jìn)行敘述，當(dāng)?shù)讓訛橐粋€(gè)馬卡龍紅色（H=0, S=53 B=76），頂層疊一層 overlay 模式的灰色（B=20）時(shí)。

Color dodge 的結(jié)果是按照兩色差距，讓低明度的底色通過(guò)頂部顏色的對(duì)于純白色的差異值及兩色差異值為比例因子做提亮效果，不同的顏色提亮效果有所不同，底色越黑的部分提亮參數(shù)越高。

同樣都是 blur=100，相同明度下，有 color dodge 處理過(guò)得卡片內(nèi)顏色更加均衡，協(xié)調(diào)性強(qiáng)于直接帶透明度的毛玻璃，保障了淺色卡片下高斯模糊后不會(huì)因?yàn)榈咨酗@著差異導(dǎo)致卡片過(guò)花，從而保障了卡片里內(nèi)容信息的可讀性 也就是說(shuō)，淺色卡片帶 color dodge 疊層樣式的毛玻璃保留了圖形的形狀，通過(guò)弱化深色部分從而弱化了色彩的對(duì)比。

在需要淺色處理時(shí)，使用 color dodge 讓整體卡片內(nèi)的顏色在 原有底層 B = 70 的基礎(chǔ)上再次進(jìn)行 (B = 22) 的差值比率程度亮化，保障亮度可維持在 B = 90 左右浮動(dòng)。

而深色模式的 overlay 的疊層原理：

接下來(lái)會(huì)將 HSB 作為默認(rèn)顏色格式進(jìn)行敘述，當(dāng)?shù)讓訛橐粋€(gè)馬卡龍紅色（H=0, S=53 B=76），頂層疊一層 overlay 模式的灰色（B=20）時(shí)。

按照兩色差距，如果頂層疊加的 B 超過(guò) 50，則整體亮化處理，如果頂層疊加的 B 低于 50，則整體暗化處理，整體飽和度同理。

同樣都是 blur=100，相同花背景底色下，有 overlay 處理過(guò)得卡片內(nèi)顏色更加清透，同理放到 overlay 的應(yīng)用上，無(wú) overlay 的毛玻璃就會(huì)偏死板(死灰死灰的)，而 overlay 在保障視覺(jué)效果上明度一致性的情況下，達(dá)到適量還原顏色飽和度，讓毛玻璃更加清透 也就是說(shuō)，深色卡片帶 overlay 疊層樣式的毛玻璃保留了圖形的形狀，通過(guò)修正飽和去灰保障了卡片樣式的清透性和防止過(guò)低飽，盡量保障底圖與卡片飽和度上不產(chǎn)生過(guò)大反差。

處理的預(yù)期效果是：

四、微軟的處理手段

此外我們來(lái)看看另一套來(lái)自微軟的處理手段

在微軟的 Fluent Design 中定義了 acrylic 材質(zhì)，共疊加了 4 個(gè)附加層，分別是模糊層、明度處理層、顏色處理層、噪點(diǎn)層。

對(duì)比蘋果與微軟的圖層修正模式

接下來(lái)具體看看微軟的樣式是怎么做的：

首先是他的云母樣式：云母是一種不透明的材料，在激活時(shí)，它會(huì)被桌面圖像微妙地著色，而在不激活時(shí)，它的顏色是中性的。Mica 將體驗(yàn)整合到周圍環(huán)境中，提供焦點(diǎn)并引導(dǎo)用戶進(jìn)入他們所參與的體驗(yàn)。提供了 2 種云母樣式，應(yīng)用于 App 和窗口以及 tab。

接著是丙烯酸樣式：

彈出窗口是一種輕量級(jí)的上下文彈出窗口，它顯示與用戶正在做的事情相關(guān)的 UI。它包括位置和大小邏輯，并可用于顯示次要控件或顯示有關(guān)項(xiàng)目的更多細(xì)節(jié) 與對(duì)話框不同，彈出框可以通過(guò)點(diǎn)擊或點(diǎn)擊彈出框外的某個(gè)地方、按下 Escape 鍵或后退鍵、調(diào)整應(yīng)用程序窗口的大小或改變?cè)O(shè)備的方向來(lái)快速關(guān)閉 規(guī)范為我們提供了 3 種丙烯酸樣式，應(yīng)用于彈出窗口 (非對(duì)話框) 和外殼 (shell 不知道該咋翻譯就翻譯成外殼了) 等外圍結(jié)構(gòu)交互。

最后是薄丙烯酸：卡片是存放內(nèi)容的小層-它們可以用于基礎(chǔ)或?qū)颖砻妗?biāo)準(zhǔn)卡牌使用“卡默認(rèn)”顏色，但如果你需要二次處理，你也可以使用“card Alt”。也有用于“薄丙烯酸”表面的卡片配方。

薄丙烯酸塊視覺(jué)細(xì)節(jié)，同時(shí)保留顏色的模糊和調(diào)暗的背景。使用“對(duì)比度安全層”渲染文本或圖標(biāo)時(shí)，使用“文本原色”來(lái)通過(guò)對(duì)比度要求。

規(guī)范為我們提供了 1 種薄丙烯酸樣式，應(yīng)用于卡片底部。

?

五、如何進(jìn)行實(shí)現(xiàn)

圖層混合樣式要怎么寫呢？在 CSS 中很好處理，客戶端的話我們可以看開(kāi)發(fā)者平臺(tái)提供的能力。

首先是 iOS 的：https://developer.apple.com/documentation/swiftui/blendmode

接著是安卓的：https://developer.android.com/reference/android/graphics/BlendMode

六、蘋果的應(yīng)用案例

落到蘋果系統(tǒng)里，他是怎么使用這些毛玻璃的呢？

打開(kāi)手機(jī)隨便看兩下，到處都是毛玻璃，小到 icon 大到蒙層，簡(jiǎn)直可以說(shuō)是毛玻璃 OS。

visionOS 里 blendmode 的使用情況更加復(fù)雜，包括使用的 mode 組合樣式，以及使用場(chǎng)景都遠(yuǎn)超出了 iOS 和 macOS，由于 visionOS 使用場(chǎng)景是在更加不可控的真實(shí)物理空間中承載 UI，所以他對(duì)毛玻璃材質(zhì)效果的使用需求更強(qiáng)，甚至連一個(gè)細(xì)細(xì)的分割線和右側(cè)小小的導(dǎo)航字母都是經(jīng)過(guò) blendmode 處理過(guò)的。

七、真假毛玻璃 - 蘋果音樂(lè)

我們對(duì)比一下網(wǎng)易云音樂(lè)和蘋果音樂(lè)鎖屏界面，會(huì)發(fā)現(xiàn)同樣是“毛玻璃”質(zhì)感，為什么效果差的有些多呢？

其實(shí)細(xì)細(xì)觀察會(huì)發(fā)現(xiàn)，蘋果用了心思在里面，這并不是毛玻璃。

其實(shí)經(jīng)過(guò)這么幾步，首先是宮格化取色，取色后根據(jù)不同的 chaos 參數(shù)進(jìn)行扭曲處理，然后遮罩一層毛玻璃來(lái)進(jìn)行模糊+前面說(shuō)到的 blendmode 進(jìn)行色彩修正。

取色時(shí)會(huì)增加一步邏輯判斷，對(duì)于 B 過(guò)大或過(guò)小的情況會(huì)出現(xiàn)閾值封頂，在純白和純黑的情況下也不會(huì)出現(xiàn)層級(jí)不可見(jiàn)的情況（如果是純毛玻璃就會(huì)不可見(jiàn)了，如果只帶黑色透明度遮罩又會(huì)很臟）。

最后粗心的仿制了一個(gè)效果，看看是不是還挺像。

對(duì)于佐證因素，其實(shí)在寫完這篇文章的時(shí)候還沒(méi)有...但是最近升級(jí)了 iOS 17 的 beta 包后就發(fā)現(xiàn)了端倪，某一版本中鎖屏混沌樣式的隨機(jī)種子數(shù)出現(xiàn)了故障，導(dǎo)致連續(xù)幾首歌都采用了想用的混沌參數(shù)效果（可以看到左上角位置有一條相同的棱角處理，這就是一個(gè)相同銳利的混沌效果）。

怎么發(fā)現(xiàn)的這個(gè)事呢？我有一天用 pad 上的音樂(lè)聽(tīng)廣播時(shí)，發(fā)現(xiàn)背景的模糊怎么怪怪的，為啥黃色的星星能模糊到左下角和右上角，首先是想到了無(wú)限拼接，但又發(fā)現(xiàn)了其他不合理的地方，如果是錯(cuò)開(kāi)拼接，那藍(lán)色和白色的地方又說(shuō)不過(guò)去，所以就開(kāi)始思考是不是這里其實(shí)是一個(gè)“偽毛玻璃”，通過(guò)取色、混沌扭曲、模糊，將參數(shù)“混沌”作為核心變量把控效果。

蘋果為什么要多此一舉？其實(shí)是因?yàn)閷］嫹饷鎯?nèi)容信息的不確定性太大了，同樣的毛玻璃模糊參數(shù)下效果會(huì)有明顯差別。如下圖例，傳統(tǒng)毛玻璃的形式下，當(dāng)相同的 blur = 100 時(shí)，模糊出的效果是不一樣的，而歌曲封面隨機(jī)變量太大，在鎖屏頁(yè)切換歌曲時(shí)的隨機(jī)性過(guò)強(qiáng)，整個(gè)鎖屏背景會(huì)驟變，為了防止這種情況發(fā)生，所以采用了宮格取色 + 混沌效果進(jìn)行 “如毛玻璃” 的擬合效果。

在 iOS 16 蘋果音樂(lè)的背景中可以發(fā)現(xiàn)，背景是微弱動(dòng)態(tài)流動(dòng)的，所以更加契合驗(yàn)證了這一點(diǎn)實(shí)現(xiàn)效果，即宮格取色后覆蓋一層動(dòng)態(tài)/非動(dòng)態(tài)的混沌處理從而再進(jìn)行模糊達(dá)到不隨封面 chaos 程度影響擬合的毛玻璃視覺(jué)效果。如果升了 iOS 17 beta 的小白鼠同學(xué)也會(huì)發(fā)現(xiàn)，現(xiàn)在蘋果商店里也用到了這種動(dòng)態(tài) chaos 來(lái)進(jìn)行背景氛圍的烘托。

八、毛玻璃+漸變的使用方式

在 iOS 17 里，出現(xiàn)了這樣一種形式（如右圖），名片下方會(huì)有一層虛化漸變到背景中，而蘋果商店的頭圖底部也會(huì)有一層漸漸出現(xiàn)的模糊。

首先是壁紙案例演示

在底部增加背景模糊后，將這一整層再加一層 alpha 通道進(jìn)行漸變，從而疊在原始的壁紙頭部，這樣就會(huì)生成這種漸漸模糊的效果。

同理，個(gè)人名片的效果也可以依托這種方式來(lái)進(jìn)行實(shí)現(xiàn)。

毛玻璃真的很好玩，希望能給到大家一些啟示，通過(guò)顏色修正來(lái)讓毛玻璃更加清透舒服，歡迎大家討論與分享。

歡迎大家關(guān)注作者微信公眾號(hào)：「IoT UX」