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 中的深度、玻璃和物理反馈

为什么深度、半透明度和物理运动在扁平化设计之后又回到了 UI 设计中,Apple 的 Liquid Glass 和 Material 3 Expressive 改变了哪些内容,以及如何保持其可用性。

直接总结和定义

核心要点

经过十年的扁平化设计,深度和物理反馈又回来了。 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;谷歌推出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 — 谷歌设计

相关指南和示例

感受弹簧带来的不同

在浏览器中拖动、轻弹和按下,然后调整刚度和阻尼,直到反馈感觉正确为止。

打开游乐场
免费试用