前言

你曾經是這么實現毛玻璃的嗎？

可能以往大家都還在只是單獨給一個帶透明度的實色 + blur 模糊數值，如果只是這樣，效果上是無法達到 iOS 或者微軟的毛玻璃呈現的效果的，這也是為什么我們看蘋果的原生應用會覺得高端，但是自己好像寫不出來。

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

往期毛玻璃效果教程：

一、毛玻璃的前世今生

1. 2006 年的 Windows Vista

Windows Vista 系統的 UI 設計在當時引起了一定的爭議和討論，Windows Vista 引入了 Aero Glass 效果，其中包括了窗口的透明和模糊效果，這是當時操作系統界面設計中的一項創新。毛玻璃效果為界面帶來了一種現代感和高級感，給 Windows Vista 系統帶來了一種立體感和深度感，窗口和界面元素之間的層次感更加明顯。這種視覺效果使得界面看起來更加精致和高級，提升了用戶體驗。不過 Windows Vista 的毛玻璃效果也帶來了一些性能問題。由于 Aero Glass 效果需要較高的顯卡性能和系統資源，對于一些配置較低的計算機來說，可能會導致系統運行緩慢或卡頓。這一點引起了用戶的不滿和批評。作為毛玻璃在 UI 界面運用的開山鼻祖，Vista 系統的 UI 設計在當時的創新和視覺效果方面取得了一定的成就。

2. 2007 年的 Mac OS

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

3. 2013 年的 iOS 7

蘋果公司在 iOS 7（2013 年發布）中引入了全新的設計語言，即扁平化設計。其中包括了毛玻璃效果的應用，如控制中心和通知中心的背景模糊效果。這種景深感的效果強調了 Z 軸的信息層級。

4. 后續跨平臺的毛玻璃

隨著技術的發展，毛玻璃效果逐漸在各種跨平臺應用中得到應用，如 H5、web、App 內等。設計師們通過 CSS、圖形處理軟件和代碼庫等工具，實現了各種形式的毛玻璃效果。

二、毛玻璃優點

1. 增強視覺層次，強調內容

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

*通常蘋果在使用這種聚焦形式時會配合陰影一同使用

2. 提升美觀度

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

三、蘋果的處理手段

1. iOS Materials

從 iOS Materials 中可以看到，蘋果為 iOS 提供了標簽、填充、分隔符對應的深淺模糊模式，分隔符只有一個模糊級別，而標簽和填充提供了 N 個級別的虛化效果。

2. 處理手段與原理

我們用這個材料樣式舉例子

傳統方法就是先疊一層帶透明度的灰色：

這種手段也就是我們現在大多數人都在用的方式：

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

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

3. colordodge 的疊層原理：

接下來通屏會將 HSB 作為默認顏色格式進行敘述，當底層為一個馬卡龍紅色（H=0, S=53 B=76），頂層疊一層 overlay 模式的灰色（B=20）時。

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

同樣都是 blur=100，相同明度下，有 color dodge 處理過得卡片內顏色更加均衡，協調性強于直接帶透明度的毛玻璃，保障了淺色卡片下高斯模糊后不會因為底色有顯著差異導致卡片過花，從而保障了卡片里內容信息的可讀性 也就是說，淺色卡片帶 color dodge 疊層樣式的毛玻璃保留了圖形的形狀，通過弱化深色部分從而弱化了色彩的對比。

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

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

接下來會將 HSB 作為默認顏色格式進行敘述，當底層為一個馬卡龍紅色（H=0, S=53 B=76），頂層疊一層 overlay 模式的灰色（B=20）時。

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

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

處理的預期效果是：

四、微軟的處理手段

此外我們來看看另一套來自微軟的處理手段

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

對比蘋果與微軟的圖層修正模式

接下來具體看看微軟的樣式是怎么做的：

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

接著是丙烯酸樣式：

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

最后是薄丙烯酸：卡片是存放內容的小層-它們可以用于基礎或層表面。標準卡牌使用“卡默認”顏色，但如果你需要二次處理，你也可以使用“card Alt”。也有用于“薄丙烯酸”表面的卡片配方。

薄丙烯酸塊視覺細節，同時保留顏色的模糊和調暗的背景。使用“對比度安全層”渲染文本或圖標時，使用“文本原色”來通過對比度要求。

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

?

五、如何進行實現

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

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

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

六、蘋果的應用案例

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

打開手機隨便看兩下，到處都是毛玻璃，小到 icon 大到蒙層，簡直可以說是毛玻璃 OS。

visionOS 里 blendmode 的使用情況更加復雜，包括使用的 mode 組合樣式，以及使用場景都遠超出了 iOS 和 macOS，由于 visionOS 使用場景是在更加不可控的真實物理空間中承載 UI，所以他對毛玻璃材質效果的使用需求更強，甚至連一個細細的分割線和右側小小的導航字母都是經過 blendmode 處理過的。

七、真假毛玻璃 - 蘋果音樂

我們對比一下網易云音樂和蘋果音樂鎖屏界面，會發現同樣是“毛玻璃”質感，為什么效果差的有些多呢？

其實細細觀察會發現，蘋果用了心思在里面，這并不是毛玻璃。

其實經過這么幾步，首先是宮格化取色，取色后根據不同的 chaos 參數進行扭曲處理，然后遮罩一層毛玻璃來進行模糊+前面說到的 blendmode 進行色彩修正。

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

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

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

怎么發現的這個事呢？我有一天用 pad 上的音樂聽廣播時，發現背景的模糊怎么怪怪的，為啥黃色的星星能模糊到左下角和右上角，首先是想到了無限拼接，但又發現了其他不合理的地方，如果是錯開拼接，那藍色和白色的地方又說不過去，所以就開始思考是不是這里其實是一個“偽毛玻璃”，通過取色、混沌扭曲、模糊，將參數“混沌”作為核心變量把控效果。

蘋果為什么要多此一舉？其實是因為專輯封面內容信息的不確定性太大了，同樣的毛玻璃模糊參數下效果會有明顯差別。如下圖例，傳統毛玻璃的形式下，當相同的 blur = 100 時，模糊出的效果是不一樣的，而歌曲封面隨機變量太大，在鎖屏頁切換歌曲時的隨機性過強，整個鎖屏背景會驟變，為了防止這種情況發生，所以采用了宮格取色 + 混沌效果進行 “如毛玻璃” 的擬合效果。

在 iOS 16 蘋果音樂的背景中可以發現，背景是微弱動態流動的，所以更加契合驗證了這一點實現效果，即宮格取色后覆蓋一層動態/非動態的混沌處理從而再進行模糊達到不隨封面 chaos 程度影響擬合的毛玻璃視覺效果。如果升了 iOS 17 beta 的小白鼠同學也會發現，現在蘋果商店里也用到了這種動態 chaos 來進行背景氛圍的烘托。

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

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

首先是壁紙案例演示

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

同理，個人名片的效果也可以依托這種方式來進行實現。

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

歡迎大家關注作者微信公眾號：「IoT UX」