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

往期分析：

Dribbble

Behance

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

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

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

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

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

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

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

到 iOS 7 的實(shí)時(shí)模糊效果

到 iPhone X 的流暢性

再到靈動(dòng)島的靈活性

再到 visionOS 的沉浸式界面。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1）高光層

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

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

2）陰影層

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

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

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

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

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

Liquild glass 有 2 種樣式可以選擇使用：常規(guī)（Regular）和透明（Clear）。它們不能混合使用，因?yàn)樗鼈兏髯杂胁煌奶匦院吞囟ǖ氖褂脠?chǎng)景。常規(guī)型是最通用的，也是使用最多的。

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

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

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

五、Liquid Glass 的可讀性

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

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

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

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

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

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

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

最后

周末的時(shí)候，我一邊研究蘋(píng)果的這些規(guī)范，一邊在想蘋(píng)果這是要把手機(jī)界面變“活”啊！以后我們點(diǎn)的不再是普通按鈕，而是一個(gè)個(gè) Q 彈、會(huì)流動(dòng)的“小水珠”，每次觸摸都有了更自然的感覺(jué)。這波設(shè)計(jì)浪潮，估計(jì)又要火個(gè)十年了。作為設(shè)計(jì)師的我們，又有好幾年可以“卷”了，趕緊收藏學(xué)起來(lái)吧！