Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →
視覺設計8 分鐘閱讀·Updated 2026 年 10 月·ExodeUI 團隊

觸覺捲土重來:現代 UI 中的深度、玻璃和物理回饋

Why depth, translucency and physical motion are back in UI design after flat design, what Apple's Liquid Glass and Material 3 Expressive changed, and how to keep it usable.

直接總結與定義

核心要點

經過十年的扁平化設計,深度和物理回饋又回來了。 2025 年,苹果推出了 Liquid Glass,一种用于控制和导航的半透明材料,而谷歌则在更具情感化设计研究的支持下推出了 Material 3 Expressive。使用得當,深度顯示什麼是互動的,動作確認動作;如果使用不當,半透明會降低對比度並損害可讀性。

2025 年發生了什麼變化

2025 年 6 月 9 日,Apple 宣布了最廣泛的軟體設計更新,該更新圍繞著一種名為 Liquid Glass 的新材料構建。它是半透明的,反射和折射背後的內容,並延伸到 iOS 26、iPadOS 26、macOS Tahoe 26、watchOS 26 和 tvOS 26。与此同时,Google 将 Material 3 Expressive 描述为其研究最多的设计系统更新,基于 46 项研究,涉及超过 18,000 名参与者。谷歌報告稱,參與者在富有表現力的設計中發現關鍵 UI 元素的速度提高了四倍,而且這種偏好在 18 至 24 歲的參與者中最為強烈,高達 87%。

工作深度

Apple 的指南对材料所属位置进行了具体说明:Liquid Glass 形成浮动在内容之上的控件和导航的功能层,并且不应在内容层本身中使用。這是整個趨勢背後的有用原則:深度應該解釋結構,將你可以採取的行動與你所閱讀的內容分開。

觸覺 UI 的四個原則:分層、按壓回饋、物理運動和約束,以按下按鈕為例
當深度顯示互動性並且動作確認動作時,觸覺設計就會發揮作用。

可用性成本

並非所有人都相信。 Nielsen Norman Group 认为 iOS 26 中的 Liquid Glass 模糊了内容,并且任何放置在其他东西之上的东西都会变得更难看到,尤其是在繁忙背景上的文本。實際教訓是,半透明度需要護欄:測試真實內容的對比度,增加文字背後的模糊或不透明度,並支援系統設定以降低透明度和增加對比度。

物理回饋是持久的部分

視覺趨勢來來去去,但物理回饋會持續存在,因為它對人們有幫助。按下時會輕微壓縮的按鈕、跟隨手指並用彈簧固定的薄片或卡入到位的撥動開關都可以確認已記錄操作。彈簧物理是實現此目的的天然工具,因為它像真實物體一樣響應中斷和手勢速度。

如何謹慎採用

從回饋開始,而不是裝飾:

  • 為人們最常使用的控制添加按下、拖曳和釋放回饋。
  • 使用分層和陰影將控制項與內容分開。
  • 檢查任何半透明表面上的文字對比度。
  • 尊重減少運動、降低透明度和增加對比度的設定。
  • 透過運動和高度標記保持效果一致。

要記住的關鍵 Principle

  • 蘋果於 2025 年 6 月推出 Liquid Glass;Google推出Material 3 Expressive
  • 當深度將控制與內容分開時,深度就起作用了
  • 半透明會損害對比度和可讀性;用真實內容進行測試
  • 物理回饋(按壓、拖曳、彈簧穩定)是趨勢的持久部分
  • 尊重減少的運動、降低的透明度和增加的對比度

常見問題解答

來源

  1. Apple introduces a delightful and elegant new software design — Apple 新聞編輯室(2025 年 6 月 9 日)
  2. Materials — Apple 人機介面指南
  3. Liquid Glass Is Cracked, and Usability Suffers in iOS 26 — Nielsen Norman Group
  4. Expressive Design: Google's UX Research — Google設計

相關指南和範例

感受彈簧帶來的不同

在瀏覽器中拖曳、輕彈和按下,然後調整剛度和阻尼,直到回饋感覺正確為止。

打開遊樂場
免費試用