自從蘋果發(fā)布了他們近些年來最重大的視覺風(fēng)格更新，以蘋果的影響力，已經(jīng)帶動了一波設(shè)計趨勢，全球的設(shè)計師都在用液態(tài)設(shè)計作品。在設(shè)計平臺和開發(fā)者平臺上，都已經(jīng)有了很多設(shè)計作品和開發(fā)工程，大家都在模仿學(xué)習(xí)以及實現(xiàn)。

Dribbble

Behance

液態(tài)玻璃已然成為未來 10 年最重大的設(shè)計趨勢，所以最近一周以來，我對它進(jìn)行了比較深入的研究，我把蘋果官網(wǎng)，Medium，Behance，Dribbble，優(yōu)設(shè)之類的資料基本上都拿來研究學(xué)習(xí)。

現(xiàn)在，我越來越覺得這套設(shè)計真的還不錯，蘋果依然是引領(lǐng)設(shè)計趨勢的那個老大哥。所以，我想把我學(xué)習(xí)的筆記跟大家進(jìn)行分享，不敢說多深入，畢竟還沒有廣泛被應(yīng)用，但開始學(xué)習(xí)就是理解它的第一步。

一、Liquild Glass 的設(shè)計理念

其實 Liquid Glass 是蘋果設(shè)計理念的一種延續(xù)，并非簡單為了視覺效果而炫技，它為蘋果生態(tài)系統(tǒng)中的應(yīng)用和系統(tǒng)體驗，引入了一個靈活、動態(tài)的設(shè)計表達(dá)。

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

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

設(shè)計上的延續(xù)性是從 Mac OS X 的 Aqua 用戶界面開始的，

到 iOS 7 的實時模糊效果

到 iPhone X 的流暢性

再到靈動島的靈活性

再到 visionOS 的沉浸式界面。

在蘋果所理解的設(shè)計中，延續(xù)性不只是簡單的設(shè)計符號和質(zhì)感延續(xù)，它的延續(xù)包括了動態(tài)、效果、感受等等，都可以是設(shè)計的延續(xù)和融合。

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

二、Liquid Glass 的核心動態(tài)特性

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

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

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

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

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

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

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

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

總結(jié)它的新特性主要包括 4 個：

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

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

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

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

三、Liquid Glass 如何自動適應(yīng)不同的環(huán)境

為了更好的適應(yīng)不同內(nèi)容背景，Liquid Glass 由多個層級構(gòu)成，與以往具有固定淺色或深色外觀的材質(zhì)不同，它的每一層都會根據(jù)背后的內(nèi)容不斷適應(yīng)，蘋果官方說的是智能自適應(yīng)。

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

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

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

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

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

當(dāng)較暗的內(nèi)容在下方滾動，觸發(fā)玻璃本身轉(zhuǎn)換為其深色樣式時，該效果會智能地切換，改為應(yīng)用一層微妙的調(diào)暗效果，同樣是為了確保對比度和可讀性。

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

四、使用 Liquid Glass 的一些關(guān)鍵原則

要想利用好 Liquid Glass，充分了解使用原則很關(guān)鍵。

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

1）高光層

Liquid Glass 模擬了現(xiàn)實世界中的環(huán)境，當(dāng)環(huán)境中的光源照射在材質(zhì)上，產(chǎn)生的高光會像你預(yù)期的那樣，對幾何形狀做出反應(yīng)。

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

2）陰影層

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

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

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

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

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

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

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

總結(jié)一下，常規(guī)型可以在任何地方使用，而透明型只應(yīng)在滿足以下三個條件時使用：

1. 應(yīng)用它的元素位于富媒體內(nèi)容之上
2. 內(nèi)容層不會因為引入調(diào)暗層而受到負(fù)面影響
3. 位于它上方的內(nèi)容是粗體且明亮的

五、Liquid Glass 的可讀性

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

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

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

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

另一方面，內(nèi)容層也是避免任何不必要視覺噪音的關(guān)鍵。例如當(dāng)應(yīng)用首次啟動時，應(yīng)避免內(nèi)容與 Liquid Glass 之間出現(xiàn)交集。

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

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

最后

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

作者：彩云Sky