WWDC Quick Look 💓 By SwiftGGTeam
Design hover interactions for visionOS

Design hover interactions for visionOS

观看原视频

Highlight

Session 讲了 visionOS 上三种基于眼动追踪的交互机制:自定义 hover 效果(Custom Hover Effects)、Look to Scroll(眼动滚动)、以及持久化控件(Persistent Controls)。


核心内容

设想一个常见痛点:你在做 visionOS 上的视频播放器,控件展开后会在几秒后自动隐藏。问题来了——用户正盯着进度条看时间,控件却消失了。再比如 Safari 标签页网格,你想”显得干净一点”,把关闭按钮藏起来,注视时再出现——结果用户的眼睛会本能跳到刚冒出来的按钮上,于是手指点下去时关错了标签。这两个例子都源自空间交互的新规则:用户的视线本身就是一种输入信号。

WWDC25 这个 Session 给出了 Apple 的解法:把”看”这个动作分成三档不同的反馈强度——hover 动画、滚动驱动、以及控件持久化。前提是 visionOS 的隐私架构:系统不告诉 App 用户在看哪里(03:00),它在 App 进程外渲染 hover 效果,App 只声明 View 的”标准态”和”hover 态”两套外观,系统在用户注视/移开时自动插值。这条限制带来一个直接推论:hover 只能驱动动画,不能触发动作(03:21)——下载按钮可以用 hover 显示文件大小,但下载这个动作必须等手指捏合手势。


详细内容

眼动输入的基础规则00:35)。重要内容放在视野正前方;可交互元素优先用圆角形状(圆、胶囊、圆角矩形),眼睛会被吸引到形状中心;每个元素至少 60 points 的预留空间,元素本身可以更小,但有效注视区要够大;3D 物体在 1 米距离时 60 points 约对应 4.4 cm。所有可交互元素都要加 highlight 效果,标准组件(如菜单)会自动高亮,自定义组件需要手动加并保证 highlight 形状贴合内容形状。

自定义 hover 的三种动画曲线04:01):

  • Instant:注视即触发。Mindfulness 的按钮在被看到时立刻出现箭头图标;标准视频播放器的播放头在被注视时立刻显示时间戳。适合”轻量、上下文相关、不可交互”的小信息。
  • Delayed:延时触发。Tooltip 是典型例子——延迟避免了用户快速扫视时到处弹出,只有持续注视才显示标题。Safari 的 profile 按钮也用同样的模式。
  • Ramp:渐进触发。Home View 的环境图标是范例(05:04)——注视瞬间开始缓慢放大(提示”再看一会就会展开”),持续注视后用 spring 快速弹开到完成态。曲线建议是慢 ease-in 起手、快 spring 收尾(05:43),适合”展开揭示更多内容”的场景。

自定义 hover 的设计原则05:53)。提供锚点元素:保持部分内容(如标题)位置不变,给用户上下文;hover 必须从可见元素触发——隐藏元素要在用户注视相邻可见元素时才浮现,比如窗口角上的缩放控件(06:42)。高频元素(工具栏按钮、列表行)用标准 highlight 即可,自定义缩放在频繁交互时反而干扰。效果尽量小巧,避免给整张照片这种大面积视图加自定义效果,也避免冲淡颜色——对图像和 3D 物体,先 highlight 再淡出露出真实色彩是更好的做法(07:55)。

Look to Scroll09:38)。用户注视滚动视图边缘即可滚动——纵向视图响应顶部和底部,横向视图响应左右两侧。这个能力默认关闭,需要 App 主动 opt-in 选定哪些视图启用。判断要点:阅读和浏览类视图(Safari 长文、TV 推荐内容)适合启用;UI 控件密集的视图(设置项、Notes 左侧列表)不适合启用,用户在那里需要快速扫视而非顺序阅读。视图最好占满窗口的整宽或整高,给用户清晰的边缘可看;如果是嵌入视图,要有清晰的边界提示(11:34);视差或自定义滚动速度的页面不适合 Look to Scroll,会破坏可预测性。

持久化控件 Persistent Controls12:18)。规则很直接:UI 上浮后会延时自动隐藏,但只要用户在看它,就保持显示;视线移开(比如回到视频本身),才隐藏。标准视频播放器(inline / windowed / immersive 三种形态)自动具备这个行为;用了自定义视频控件的 App 需要手动启用。FaceTime 的通话控件、Mindfulness 的会话控件都采用了这个机制——只要是”延时自动隐藏”的 UI,都应该接入持久化(13:13)。

真机调试09:01)。Simulator 无法模拟眼动追踪,看视频也体验不到效果,hover 设计必须在 Vision Pro 上反复迭代。


核心启发

  • 做什么:把视频/媒体应用的自定义控件接入 Persistent Controls 行为。

    • 为什么值得做:这是用户感知最强但实现最便宜的一项——只要标志位打开,就能消除”我正在看控件,控件却消失了”这个高频挫败。
    • 怎么开始:先把 App 内所有”延时自动隐藏”的 UI 列出来(视频控件、播放队列、沉浸式体验的退出按钮等),逐个判断是否要持久化;用标准视频播放器的页面直接获得行为,自定义控件按文档启用。
  • 做什么:为 App 的主内容滚动视图启用 Look to Scroll,UI 列表保持手动滚动。

    • 为什么值得做:长文阅读、媒体浏览这类场景,眼动滚动让”读完一段内容自然下移”变得无感。但 Settings 类列表强行启用反而拖慢用户。
    • 怎么开始:把 App 中的滚动视图按”阅读/浏览”vs”控件操作”分类,仅在前者 opt-in;同时确保启用的滚动视图占满窗口宽度或高度,且不使用视差等非线性滚动。
  • 做什么:用 Ramp 动画作为自定义 hover 的默认曲线。

    • 为什么值得做:Instant 容易在快速扫视时到处弹开,Delayed 缺少即时反馈。Ramp 的”先慢后弹”既给反馈又不打扰扫视,是 visionOS 系统级 UI 的主流选择。
    • 怎么开始:从 Home View 环境图标这类 Apple 系统范例反推曲线——前段 ease-in 缓慢放大作为提示,后段 spring 快速到位;先在卡片展开、按钮揭示更多信息这类场景试用。
  • 做什么:用 hover 显示信息,用 tap 触发动作,永远不要混用。

    • 为什么值得做:这是 visionOS 隐私架构带来的硬性约束,违反会让 App 在某些 OS 版本下无声失败。
    • 怎么开始:审视 App 中所有想”看一眼就执行”的交互(自动关闭、自动播放、自动跳转),把动作部分迁移到捏合手势上;hover 只用于动画反馈和信息揭示。

关联 Session

评论

GitHub Issues · utterances