翻遍全網資料，用5個章節幫你深入讀懂液態玻璃設計

自從蘋果發布了他們近些年來最重大的視覺風格更新，以蘋果的影響力，已經帶動了一波設計趨勢，全球的設計師都在用液態設計作品。在設計平臺和開發者平臺上，都已經有了很多設計作品和開發工程，大家都在模仿學習以及實現。

往期分析：

Dribbble

Behance

液態玻璃已然成為未來 10 年最重大的設計趨勢，所以最近一周以來，我對它進行了比較深入的研究，我把蘋果官網，Medium，Behance，Dribbble，優設之類的資料基本上都拿來研究學習。

現在，我越來越覺得這套設計真的還不錯，蘋果依然是引領設計趨勢的那個老大哥。所以，我想把我學習的筆記跟大家進行分享，不敢說多深入，畢竟還沒有廣泛被應用，但開始學習就是理解它的第一步。

一、Liquild Glass 的設計理念

其實 Liquid Glass 是蘋果設計理念的一種延續，并非簡單為了視覺效果而炫技，它為蘋果生態系統中的應用和系統體驗，引入了一個靈活、動態的設計表達。

Liquid Glass 是蘋果繼扁平化、擬物化和空間玻璃之后，推出的全新一代設計哲學。它不僅僅是一種視覺風格，更是一套完整的、以物理光線和流體動力學為基礎的交互體驗框架。其核心在于模擬光線穿透不同密度、形態的玻璃介質時產生的折射、反射和焦散效果，并賦予界面元素以“液態”的流動性和響應性，創造出既清晰直觀又富有生命力的沉浸式體驗。

這套設計語言旨在模糊物理世界與數字世界的邊界，讓用戶感覺自己不是在“操作”界面，而是在與一個有質感、有回應的“材質”進行互動。

設計上的延續性是從 Mac OS X 的 Aqua 用戶界面開始的，

到 iOS 7 的實時模糊效果

到 iPhone X 的流暢性

再到靈動島的靈活性

再到 visionOS 的沉浸式界面。

在蘋果所理解的設計中，延續性不只是簡單的設計符號和質感延續，它的延續包括了動態、效果、感受等等，都可以是設計的延續和融合。

蘋果基于這些經驗，創造出了 Liquid Glass 這種全新的材質，能夠動態地彎曲和塑造光線。同時，它的行為和移動方式都非常有機，感覺更像一種輕盈的液體，既能回應觸控的流暢性，也能適應應用的動態性。

二、Liquid Glass 的核心動態特性

蘋果的 ID 和屏幕現在越來越圓潤，Liquid Glass 正好適合這種產品設計的演進。清晰定義的形狀讓人感覺容易點擊，其設計也參考了我們手指的自然幾何形態，因此在觸控和交互時感覺非常友好。

Liquid Glass 在視覺上利用了一種叫做“透鏡效果”(lensing) 的技術。透鏡效果在我們自然世界中無處不在。通過對真實現象的觀察，把這種材質該如何扭曲光線來傳達其運動和形態，有了一種直觀的理解。

Liquid Glass 利用這些自然的視覺線索，設計出了這種全新的材質，讓內容有更好的層次，同時讓底層的內容能夠穿透顯示。過去的材質是反射光線，而這套新材質則能實時動態地彎曲、塑造和集中光線。讓控件在界面上具備清晰的輪廓，同時在視覺上又保持我們對自然世界的一致體驗。通過這種方式利用光線，控件變得輕盈和透明，同時仍保持視覺上的可辨識度。

雖然當前在某些復雜背景上還有些可讀性問題，但都是有辦法優化的，只要有解決方案，那么就不是什么大問題。

Liquid Glass 在動效上不是像以前淡入淡出的方式，而是通過逐漸調節光線的彎曲和透鏡效果來顯現和消失，確保了平滑的過渡，并保持了材質的光學完整性。模擬了最真實的方式，讓用戶感受到自然。

材質的感覺和行為與它的外觀同等重要，Liquid Glass 的視覺效果和動態效果要做到一致性設計。我們都對液體的運動有著直觀的感受。它們平滑、靈敏且毫不費力的運動和行為，是 UI 可以參考的特性，使其移動和反應的方式與我們對物理世界的內在理解相符。為此，Liquid Glass 通過立即彎曲并用光影變化給予操作反饋。這使得界面感覺靈敏且充滿生機。它還具有一種內在的凝膠般的柔韌性，當它隨著你的交互同步移動時，能感覺到控件也像凝膠一樣可變和 Q 彈。

這種流動性幫助界面感覺與我們思維和運動的動態性及不斷變化的特性保持一致。當你在應用的不同狀態之間切換時，Liquid Glass 會在每個控件之間動態變形。這體現了所有控件都存在于一個單一懸浮平面上的概念。當控件不斷地形態變換時，它讓應用不同部分之間的過渡感覺流暢且無縫。

當顯示菜單時，氣泡會“彈開”以顯示其中的內容。這種輕盈的原地過渡效果將一切都保持在你剛點擊的位置，并且在按鈕和其包含的內容之間傳達了一種非常清晰和直接的關系。憑借這些特性，Liquid Glass 以全新方式彎曲和塑造光線的能力，再融合動態彎曲和形態變換的能力，讓應用的體驗從根本上感覺更有機、更沉浸、更流暢。

總結它的新特性主要包括 4 個：

1）清晰性 (Clarity)：盡管擁有豐富的視覺效果，但信息傳達的清晰度永遠是第一位的。Liquid Glass 通過動態對比度、智能景深和內容感知模糊，確保在任何背景下，文本和關鍵控件都清晰易讀。

2）維度感 (Dimensionality)：界面不再是平面的層疊，而是一個具有真實深度（Z 軸）的空間。元素之間通過光影、視差和材質厚度來區分層次，創造出可信的空間關系。

3）流動性 (Fluidity)：所有的過渡、動畫和響應都遵循流體動力學。元素在拖拽時會產生“粘滯感”，邊界會因“表面張力”而呈現柔和的動態變化，動畫的緩動曲線模擬液體流動的物理特性。

4）響應性 (Responsiveness)：界面會對用戶的輸入、環境光乃至設備的姿態做出實時反應。不僅包括觸摸反饋，還包括光標或手指懸停時產生的“光暈”和背景折射變化，以及傾斜設備時高光的動態漂移。

三、Liquid Glass 如何自動適應不同的環境

為了更好的適應不同內容背景，Liquid Glass 由多個層級構成，與以往具有固定淺色或深色外觀的材質不同，它的每一層都會根據背后的內容不斷適應，蘋果官方說的是智能自適應。

當文字在下方滾動時，陰影會變得更加突出，這樣層級會更清晰。色調和動態范圍的程度會變化，兼容深色和淺色，這樣做是要確保按鈕保持清晰可讀，同時讓盡可能多的內容穿透顯示。

當控件彎曲并變形成更大的尺寸時，例如從工具欄按鈕彈出菜單，它的材質特性會發生變化，以模擬一種更厚、更具實質感的材料。

它會投下更深、更柔和的陰影，具有更顯著的透鏡和折射效果，以及更柔和的光線散射。這些細微的變化增強了感官上的深度，并有助于提高玻璃元素內內容的可讀性。

在像側邊欄這樣較大的元素上，Liquid Glass 的外觀會受到應用內周遭環境的影響。來自附近彩色內容的光線會反射在 UI 表面上，從而強化了材質的情境感及其在界面中的懸浮感。而且這種效果不僅限于表面，光線也會反射、散射并滲入陰影中，就像在物理世界中一樣。它可以被視為一個單一的導航元素，隨著應用畫布的變化而流暢地縮放。

滾動邊緣效果與 Liquid Glass 能產生不錯的效果，讓 UI 和內容之間有比較好的層次，確保可讀性，尤其是在動態滾動內容時。就像 Liquid Glass 一樣，滾動邊緣效果本身就是自適應的。當內容開始在玻璃元素下方滾動時，該效果會輕柔地將內容融入背景，從視覺上將玻璃提升到移動的內容之上，并讓像標題這樣的懸浮元素始終保持清晰。

當較暗的內容在下方滾動，觸發玻璃本身轉換為其深色樣式時，該效果會智能地切換，改為應用一層微妙的調暗效果，同樣是為了確保對比度和可讀性。

當需要附屬視圖中的懸浮元素與下方滾動內容之間有更強的視覺分離時，使用硬切會更合適使用。例如當工具欄下方有固定的附屬視圖（如欄目標題）時，它不是逐漸淡出，而是在工具欄和固定附屬視圖的高度上均勻地應用效果。

四、使用 Liquid Glass 的一些關鍵原則

要想利用好 Liquid Glass，充分了解使用原則很關鍵。

Liquid Glass 的真正強的地方在于其整體的設計。光影效果、深度效果、自適應變化，這些都不是孤立的功能。它們是復雜系統中的層級，共同作用，創造出一種“1+1>2”的材質。

1）高光層

Liquid Glass 模擬了現實世界中的環境，當環境中的光源照射在材質上，產生的高光會像你預期的那樣，對幾何形狀做出反應。

在鎖屏界面交互中，光源會在空間中移動，導致光線圍繞著材質移動，從而定義其輪廓。讓人感覺 Liquid Glass 能夠感知其在現實世界中的位置，利用陰影能夠更好的體現元素輪廓和層級。

2）陰影層

控件元素能夠感知其背后的內容。當它位于文字上方時，會增加其陰影的不透明度。相反，當它位于純色淺色背景上時，則會降低其陰影的不透明度。這這樣做能確保元素總是容易被看到。當你與 Liquid Glass 交互時，材質會從內部發光，作為一種反饋形式。

光暈從你的指尖下開始，擴散到整個元素，并延伸到附近的任何 Liquid Glass 元素上，以一種感覺自然流暢的方式與材質的柔性特性交互。有時，多個層級會一起適應，以在 UI 層級結構中保持清晰度和焦點。

例如，當一個窗口在 Mac 或 iPad 上失去焦點時，Liquid Glass 會改變其外觀，并在視覺上后退，以引導注意力。

蘋果把這種復雜性設計做了內置，我們在設計的時候直接拿來用就可以了。把復雜的機制封裝好，一方面是方便用戶調用，另一方面也是為了維系整個系統設計的一致性，避免暴露太多參數給用戶隨意修改而帶來的不統一。

避免“玻璃疊玻璃”。將 Liquid Glass 元素堆疊在一起，會很快讓界面變得雜亂和混淆。當將元素放置在 Liquid Glass 之上時，避免對兩個層都應用該材質。相反，對頂層元素使用填充、透明度和鮮艷度，讓它們感覺像是材質一部分的薄薄覆蓋層。

Liquild glass 有 2 種樣式可以選擇使用：常規（Regular）和透明（Clear）。它們不能混合使用，因為它們各自有不同的特性和特定的使用場景。常規型是最通用的，也是使用最多的。

而透明型則更為透明，用于富媒體內容（如視頻播放控件），能更好地展示背景。但它沒有自適應行為，需要一個深色遮罩層 (Dimming Layer) 來確保其上符號的可讀性。

總結一下，常規型可以在任何地方使用，而透明型只應在滿足以下三個條件時使用：

1. 應用它的元素位于富媒體內容之上
2. 內容層不會因為引入調暗層而受到負面影響
3. 位于它上方的內容是粗體且明亮的

五、Liquid Glass 的可讀性

像導航欄和標簽頁欄這樣的小元素，會根據其背后的內容不斷調整其外觀。它們也會根據背景在淺色和深色之間翻轉，以確保材質在看起來最好的同時，也易于辨識。但像菜單或側邊欄這樣較大的元素也會根據情境進行調整，但它們不會在淺色和深色之間翻轉。它們的表面積太大了，這樣的過渡會讓人分心。

為了保持可讀性，Liquid Glass 上的符號和圖標也會做同樣的事情。它們在淺色和深色之間翻轉，反之亦然，模仿玻璃的行為以最大化對比度。你也可以使用自定義顏色，但要有選擇地使用。

當項目或元素具有獨特的功能性目的時，你可以為它們加上顏色，以引起注意。選擇一種顏色會生成一系列色調，這些色調會對應到著色元素下方內容的亮度。它的靈感來自于有色玻璃在現實中的運作方式，根據背后的內容改變其色相、亮度和飽和度，而不會過多偏離預期的顏色。

著色只應用于強調 UI 中的主要元素和操作。避免為所有元素都著色。當每個元素都被著色時，就沒有什么能脫穎而出，而且可能會令人困惑。

另一方面，內容層也是避免任何不必要視覺噪音的關鍵。例如當應用首次啟動時，應避免內容與 Liquid Glass 之間出現交集。

除了這些可讀性考量，Liquid Glass 還提供了幾種輔助功能，以適應各種人群和需求。這些功能作為材質的修飾符，改變了 Liquid Glass 的某些層級，而不會犧牲其材質特性。例如，“降低透明度”使 Liquid Glass 變得更模糊，遮擋了更多背后的內容。“增強對比度”使元素主要變為黑色或白色，并用對比鮮明的邊框來突顯它們。而“減弱動態效果”則降低了某些效果的強度，并禁用了材質的任何彈性特性。

在一些特殊情況下，也考慮為材質做一些降級和特殊處理，其目的是為了更好的服務更多人，而不是死板的應用一致性，因為這些拓展性是為了照顧到一些小眾場景，所以并沒有特別影響大部分情況下的一致性設計。

最后

周末的時候，我一邊研究蘋果的這些規范，一邊在想蘋果這是要把手機界面變“活”啊！以后我們點的不再是普通按鈕，而是一個個 Q 彈、會流動的“小水珠”，每次觸摸都有了更自然的感覺。這波設計浪潮，估計又要火個十年了。作為設計師的我們，又有好幾年可以“卷”了，趕緊收藏學起來吧！