2025 年 6 月 22 日

Design iOS iPadOS macOS SwiftUI&UI Frameworks tvOS watchOS WWDC WWDC25

解構 Apple Liquid Glass:不僅視覺更新,更是跨裝置設計的數學革命

已複製到剪貼板


當介面開始呼吸

在 WWDC25 落下帷幕後,全球設計社群正屏息注視著一個名為「Liquid Glass」的體系。作為資深評論員,我認為這絕非僅是軟體外表的微調,而是 Apple 自 2013 年扁平化設計(Flat Design)以來,對軟體介面最徹底的一次「生理性」重構。

WWDC 2025:Get to know the new design system
WWDC 2025:Get to know the new design system

Liquid Glass 的核心在於透過一套嚴謹的「啟發式準則 Heuristics」,重新定義介面與內容的共生關係。它試圖解決現代 UI 的一個終極難題:如何在高度複雜的跨裝置生態中,實現「和諧、自適應且具表現力」的流動。這不再是靜態的像素堆砌,而是一個能感知環境、具備空間邏輯的有機系統。這種演進,是為了讓技術隱身於自然的感官體驗背後,讓介面真正開始「呼吸」。

這場革命的起點,並非來自感性的筆觸,而是源自極其冷靜的幾何學革命。

幾何學的勝利:從「圓角矩形」進化到「同心圓」邏輯

視覺設計的品質取決於對微小細節的執著。Liquid Glass 將硬體邊框的物理精確度引入 UI,使螢幕內的曲率與實體裝置的工業設計達成完美的節奏同步。

消除視覺張力:同心圓 Concentricity

過去,開發者常在嵌套容器中遇到「圓角擠壓 Pinched」或「發散 Flared」的視覺衝突。Apple 現在以「同心圓」邏輯取代了經驗法則:透過精確計算父層半徑與間距(Padding),確保內外半徑共享同一個中心。這種數學上的「光學平衡」,消除了不必要的視覺張力,讓元素能舒適地「嵌套」於彼此之中。

三種核心形狀類型與跨裝置策略

裝置與情境 固定形狀 Fixed 膠囊形狀 Capsule 同心形狀 Concentric
定義 恆定半徑,不隨容器變化 半徑恆等於容器高度之半 半徑 = 父層半徑 - 間距
iPhone(iOS) 用於標準、不變形的基礎組件 預設的首選,強調觸控與互動感 應用於裝置邊緣按鈕,確保比例和諧
Mac(macOS) 用於 Mini、Small、Medium 尺寸,維持高密度的資訊呈現 僅用於 Large 與 X-Large 尺寸,提供強大的空間強調感 用於視窗邊緣與視窗內部的嵌套結構

開發者秘訣 Pro-tip:

為了應對組件在「嵌套」與「獨立運作」間切換的需求,應採用具備「回退半徑 Fallback Radius」的同心形狀。當組件被嵌套時,同心值會自動適應父層;當其獨立存在時,回退半徑則確保其外觀依然完整。

此外,系統字體也同步進行了優化,變得更加粗壯(Bolder)並改為左對齊(Left-aligned),以提升在警告(Alerts)與啟動流程(Onboarding)中的可讀性。系統色彩則在色相區隔(Hue differentiation)上做了微調,確保在 Liquid Glass 的透明材質下依然能保有獨特的高辨識度。

懸浮與空間:Liquid Glass 重新定義的介面層級

Liquid Glass 不僅是美學,它更是一個獨立的「功能層 Functional Layer」,懸浮於內容之上以建立資訊架構。

「噴湧 Springing」:空間錨定的邏輯

過去的動作表單 (Action Sheet) 無論觸發點在哪,皆統一從底部彈出。現在,它們會直接從觸發點「噴湧」而出。這種空間上的連貫感強化了用戶直覺。分析師必須指出:在實作自定義控制項時,請務必將材質直接應用於控制項本身,而非其內部的視圖,以維持物理性的一致。

物理反饋與任務引導

材質行為的動態語義:

在處理「中斷任務 Interruption Tasks」時,系統結合調暗層(Dimming Layer)與 Liquid Glass 來鎖定用戶焦點。而在「平行任務 Parallel Tasks」中,Liquid Glass 則提供自然的物理分離。關鍵細節在於:當用戶向上拖曳表單(如進行深度操作)時,材質會變得更加不透明且體積微增,這是一種模擬實體深度變化的回饋邏輯。

滾動邊緣效果 Scroll Edge Effects 的警戒線

為了消除生硬的分割線,Liquid Glass 引入了兩類邊緣效果,但嚴禁濫用:

  • 柔和 Soft:iOS、iPadOS 預設。用於互動元素(按鈕、輸入框)
  • 硬質 Hard:多用於 macOS。用於互動文字、固定標題或無背景的控制項

分析警告:

滾動邊緣效果並非裝飾品,嚴禁在沒有懸浮 UI 元素的場景中使用,且不可疊加或混合使用不同樣式。

導覽系統的「減法藝術」:當 API 取代人工裝飾

Apple 正在推動一種「去裝飾化」的設計趨勢。在 Liquid Glass 的架構下,層級應透過佈局與正確的 API 群組來體現,而非額外的邊框或背景。

  • 自動群組化的魔力:使用正確的系統 API,組件會自動共享背景材質,維持空間關係
  • 認知一致性:嚴禁在同一個容器中混合符號與文字標籤(例如「Select」不應與分享圖示並列),這會導致功能邊界模糊
  • iOS 搜尋標籤 Search Tab:搜尋功能現已成為 iOS 標籤欄的獨立成員
  • 側邊欄 Sidebar 的沈浸式陷阱:內容現在可流動至側邊欄後方。但分析師提醒:所有文字與控制項必須分層於延伸背景之上,以避免嚴重的視覺扭曲與操作障礙

延續性 Continuity:將 iPad 視為設計的比例尺

「不需從零開始」是 Liquid Glass 的哲學。Apple 鼓勵開發者專注於定義一套「共享解剖結構 Shared Anatomy」:無論是 Mac 的彈出菜單或 iOS 的上下文菜單,儘管形式不同,但皆應包含相同的解剖元素:選取指示器、圖示、標籤與配件項。

跨裝置的角色定位

  • iPhone:垂直聚焦的視角
  • Mac:廣闊且高密度的畫布
  • iPad:系統的橋樑。它是設計系統如何實現「比例縮放 Scale」的最佳實驗場

符號與標籤的權衡準則

雖然系統趨向符號化,但 Apple 指出:若動作意義含糊(如「選擇」或「編輯」),文字標籤始終是更優解。 關鍵規則: 當菜單中包含高度相關的動作(如三種不同的複製方式)時,不要重複使用或微調圖示。只需為該群組提供一個導引圖示,其餘交給文字,以減少視覺噪音。

未來介面的流動方向

Liquid Glass 的意義在於它將設計語言與物理世界規律進行了深度融合。透過幾何數學、空間層級與行為連續性,介面正變得前所未有的「透明」。

這對開發者提出了一個發人深省的挑戰:當設計系統變得越來越像物理世界的自然延伸,品牌該如何在遵循系統和諧的同時,找到自己的聲音?Apple 的答案是:開發者的介面應與系統「彈奏同一個音調 Playing in the same music key」,在尊重物理節奏的前提下,創造獨有的旋律。

我們正處於介面設計的分水嶺。我強烈建議開發者立即查閱新版《人機介面準則 HIG》,並下載 Apple Design Resources 中的最新 UI Kits 進行實作。理解 Liquid Glass,就是理解未來十年的互動邏輯。

現在,讓您的設計順應這場流動革命。

分享文章

已複製到剪貼板

追蹤網站

透過 Google 追蹤

超級感謝

關於 XcodeProject

XcodeProject 創立於 2023,致力於協助開發者探索 Apple 的創新世界,學習在 iOS、iPadOS、macOS、tvOS、visionOS 與 watchOS 上開發 App,發現眾多技術與框架,讓開發者獲得更多能力。


Contacts

Ricky Chuang

XcodeProject

RickyChuang.xcodeproj@gmail.com

XcodeProject 聯絡

contact.xcodeproj@gmail.com

XcodeProject 的最新文章