2025 年 6 月 22 日
Design iOS iPadOS macOS SwiftUI&UI Frameworks tvOS watchOS WWDC WWDC25解構 Apple Liquid Glass:不僅視覺更新,更是跨裝置設計的數學革命
當介面開始呼吸
在 WWDC25 落下帷幕後,全球設計社群正屏息注視著一個名為「Liquid Glass」的體系。作為資深評論員,我認為這絕非僅是軟體外表的微調,而是 Apple 自 2013 年扁平化設計(Flat Design)以來,對軟體介面最徹底的一次「生理性」重構。
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,就是理解未來十年的互動邏輯。
現在,讓您的設計順應這場流動革命。
關於 XcodeProject
XcodeProject 創立於 2023,致力於協助開發者探索 Apple 的創新世界,學習在 iOS、iPadOS、macOS、tvOS、visionOS 與 watchOS 上開發 App,發現眾多技術與框架,讓開發者獲得更多能力。