为 visionOS 设计悬停交互

大家好 我叫 Nathan 是 Apple Design 团队的设计师 欢迎观看本场关于为 visionOS 设计 悬停交互的讲座 借助对用户视线位置的全新响应方式 App 可以更具生动感 让用户感觉仿佛在用 意念引导整个体验流程

今天的内容安排如下： 我们将依次回顾眼动输入的基础知识 探索自定效果 实现通过注视滚动内容 了解如何让重要控件持久显示 我们直接开始吧！ 大家可能都知道 用户在 visionOS 中 主要通过眼睛和手势进行操作 用户通过注视元素 并轻触手指来完成选取操作 以下是一些实用提示 有助于 构建更契合眼动与手势操作的 App 将最重要的内容置于 用户正前方 方便查看和操作 对于交互元素 优先采用 圆形、胶囊形或圆角矩形等 圆润的形状 这些形状更容易被视觉捕捉 有效引导用户的视线聚焦于中心区域

要实现精准交互 请为每个元素预留至少 60 磅的空间 元素本身可以小于 60 磅 只要它们整体占据的 交互空间达到 60 磅即可

对于具有固定缩放比例的 3D 对象 60 磅大致相当于 2.5 度的 视角大小 相当于 1 米距离外 约 4.4 厘米的物体尺寸

为所有交互元素添加高亮效果 像菜单这样的标准组件 会自动呈现高亮效果

对于自定组件 请添加高亮效果并确保 它的形状与内容的轮廓相匹配

同时也请为可选的 3D 对象 添加高亮效果

要进一步了解更多基础内容 欢迎观看 2023 年的讲座 “空间输入设计”

今天 我们来谈谈如何为 App 打造更强大的交互体验 首先从自定效果开始 标准高亮显示效果在大多数 情况下都能达到理想的效果 但也可以根据需要扩展或替换为 自定动画 我们将它们称为“自定悬停效果” 在 visionOS 中我们 广泛运用了自定悬停效果

标签页栏会弹出 以显示每个标签的名称 返回按钮尺寸变大 以显示上一个页面的标题 滑块显示旋钮 以吸引用户进行互动

工具提示会显示在按钮下方 用于说明功能信息

在 Safari 浏览器中 导航栏会展开 以显示浏览器标签页 在主屏幕视图中 环境图标 会呈现更多景观细节

你也可以在自己的 App 中实现类似的自定效果！

这些效果特别适合给予反馈 同时又能体现 App 的个性 或游戏的视觉风格 但首先 让我们先来深入了解 这些效果的运作方式 为了保护用户的隐私 系统会在你的 App 进程之外 应用悬停效果 因此 App 无法获知 用户的视线位置 你的视图不会直接响应悬停事件 而是定义两种状态： 标准外观和悬停外观 当用户注视视图或移开视线时 系统会切换这两种动画状态

这非常适合播放我们前面 看到的那类动画效果 但也表示自定悬停效果不能用于 在 App 内执行操作 我来演示一下这一点 假设我正在设计一款照片浏览类 App 我可以添加下载按钮让用户 将喜欢的照片保存下来

我可以用自定效果 在用户注视按钮时显示下载文件大小 因为这只是动画效果 但我无法仅通过注视 按钮来触发下载操作 因为这要求 App 知道悬停效果何时被应用

相应地 用户需要通过 轻点手势来保存照片

也就是说 自定效果可驱动动画效果 那什么样的动画效果最合适呢？ 通常可以分为三类： 即时动画、延迟动画和渐变动画 第一类是“即时”动画 在用户注视某个视图的 立即开始播放

在“正念”中 按钮会显示一个箭头图标 让用户知道还有更多可选项

标准视频播放器 在用户注视播放头时会显示时间戳 这些额外信息体积小 具备关联性但不具备交互功能 有时 即时动画在用户四处浏览时 容易引发突兀的动态效果 因此 可以改用“延迟”动画 这类动画通常会在 短暂延迟后显示更多内容

工具提示就是很好的例子 这种延迟设计允许用户快速点击按钮 并且仅当用户表现出 持续关注时 才会显示标题

另一个例子是 Safari 浏览器的 个人资料按钮 它采用相同的交互模式 但布局方式有所不同

最后一种是“渐变”动画 它们类似于延迟动画 但在一开始会有提示 并采用自定的动画曲线 我们来看一下主屏幕视图 中的环境图标 当用户注视这些图标时 它们会缓慢放大 并随之展开展示更多景观细节 这种缩放效果能清晰地传达出 只要持续注视 图标就会展开 但只有在用户表现出明确意图时 它才会完全打开 这样一来 用户可以自由浏览整个网格 而不会让图标在视线掠过时频繁弹出

再来看一个例子 这张卡片会展开 以显示完整文本内容 这些渐变动画 均衡了“即时”与“延迟”动画 的特点 能提供即时反馈又不会造成干扰

要创建自定渐变动画 可以 尝试使用类似的动画曲线 动画以缓慢的缓入效果开始 随后通过快速的弹性效果完成展开 当视图需要展开以显示更多内容时 这种动画曲线通常能带来最佳体验 在开始为 App 设计这些悬停效果时 以下是一些值得参考的最佳实践 首先 提供锚定元素 优秀的自定效果通常 会保留视图的一部分不变 这些静态元素就像这里的标题一样 起到锚定作用 能够为用户提供上下文 帮助他们识别新增内容

如果用户在注视视图时 文字发生移动 可能会打断他们的阅读 因此 建议尽量保持文字位置固定

或者当视图在两种状态下差异过大时 用户往往会难以判断 当前正在查看的内容

此外 悬停效果应始终 从可见的元素开始触发 如果没有任何线索指示元素的位置 用户将难以发现 即使偶然发现也会感到意外 相反 如果你有隐藏的元素 建议在用户注视某个可见元素时 将它们显示出来 例如 当用户注视窗口角落时 调整尺寸控件就会出现 这有助于用户轻松找到所需的控件

接下来 谨慎地应用自定效果

思考一下哪些地方适合加入自定效果 来引导注意力 比如这个指南针 你可以展示诸如定位状态等额外信息

或通过动画瀑布等效果 营造令人愉悦的视觉体验

但请避免在用户视线 游移时过度变化界面内容 过多的自定效果 例如显示每个图钉的名称 可能会分散用户注意力 甚至造成视觉不适 即便是轻微的缩放效果 在工具栏按钮或 表格单元格等高频使用的视图中 也可能造成干扰 因为这些效果会移动 用户试图聚焦的内容 对于这类视图 建议使用标准高亮效果即可

尽量让效果简洁低调

优秀的自定效果应当足够细腻 适用于如前面提到的 下载按钮这类小型视图 避免将自定效果应用于 大型视图 例如整张照片 因为这会带来过多动态变化 让用户难以理解当前发生了什么 对于这类图像内容 应避免 使用会冲淡画面色彩的效果

一种理想的做法是使用 高亮效果提供即时反馈 然后自动淡出 让用户能够看到 照片的真实色彩 这同样适用于 3D 对象 比如这个植物模型 它会先呈现高亮效果 然后 逐渐淡出 恢复真实色彩

最后 避免出现突兀的动画效果 我经常会遇到这种情况 有时可能觉得自己的想法不错 但最终却带来了意想不到的副作用 我来演示一下 Safari 浏览器的标签页概览会以 网格形式显示打开的标签页 你也许会想到一个不错的主意： 默认隐藏所有关闭按钮 仅在用户注视标签页时显示关闭按钮 看起来更简洁 对吧？ 但当用户看向标签页而按钮出现时 他们的视线会不自觉地跳向它 这可能导致用户在尝试选中标签页时 因视线落在关闭按钮上 而误触关闭功能 更好的做法是： 当用户注视标签页时 先以半透明状态缓慢淡入按钮 待他们的视线移至按钮上时 再完全显现

这种方式既能减少标签页网格中的 视觉干扰 又能避免用户误触关闭按钮 强烈建议在真实设备上 测试这些效果！ 观看演示视频无法真实体验这些效果 因为它是根据视线实时响应的 我也很喜欢 visionOS 模拟器 但它无法替代 在真实设备上的测试体验

设计自定效果比界面中其他部分 更需要反复打磨 你需要做好充分准备 多尝试不同方案 并花时间不断调校 才能达到理想效果

随着经验积累 你自会培养出判断优劣的直觉力 但只要有想法 就大胆去尝试吧！ 或许就会有突破 接下来 我们来聊聊 另一种强大的交互方式： Look to Scroll Look to Scroll 让用户仅通过 眼睛就能完成滚动操作 例如在 Safari 浏览器中 当我将视线移向页面底部时 页面会平滑地向上滚动

比如在“音乐”中 当我将视线 移向最后一个播放列表时 界面会向中心滚动

这让浏览体验更加自然 就像视线 在将内容轻轻拉入视野 这是一种轻量级的交互方式 可与手势滚动配合使用

当用户将视线移至滚动视图边缘时 就会触发滚动操作 当视线移至顶部或底部时 可垂直滚动 当视线移至左右两侧时 可水平滚动

App 可能包含多个滚动视图 而 Look to Scroll 默认未启用 因此 你需要明确指定 哪些视图应启用这项功能 在决定是否启用时 可以考虑以下几点：

首先 如果视图主要用于 阅读或浏览内容 建议启用 Look to Scroll 非常适用于在 Safari 浏览器等 App 中 阅读文章或在 TV 等 App 中浏览 下一部节目

但在“设置”等 App 中 人们更倾向于快速 浏览以查找合适的选项 而不会逐项阅读列表 因此 Look to Scroll 并不适用于这类场景 一般来说 如果视图中 主要是 UI 控件 则不应启用 Look to Scroll

接下来 请考虑你的内容 通常 Look to Scroll 最适用于 App 的主要内容区域 因此 在“备忘录”中 当用户看向页面边缘时 备忘录内容会滚动 而左侧的列表则不会滚动 这与我们刚才在“设置”中 看到的模式一致

最后 请考虑在 App 内 保持一致的交互体验

在 TV 中 相关节目的列表 与主资料库中的列表外观一致 因此 用户也会预期 Look to Scroll 在这里同样适用

现在 你可以初步判断 Look to Scroll 的适用场景 接下来我们来看看如何 让滚动体验更自然、可预测

理想情况下 启用了 Look to Scroll 功能的滚动视图 应占据窗口的整个宽度或高度 这样可以为用户提供充足的滚动空间 并带来清晰可见的滚动边缘

如果滚动视图未贴合窗口边缘 请提供清晰的边界 方便用户判断该看向哪里

如果 App 会根据滚动位置 以不同速度呈现动画效果 应用视差效果 或驱动自定动画 建议调整设计使它以正常速度滚动 又或者 对于这些视图而言 可能并不适合应用 Look to Scroll

但当滚动视图填满整个窗口 边缘清晰且以正常速度滚动时 浏览体验将更加顺畅且可预测 最后 我们来看看持久显示的控件 一个虽不显眼却能带来 显著提升的细节功能 这是 visionOS 上的 一个标准视频播放器 播放控件可通过轻点来显示或隐藏 当控件处于显示状态时 会在短暂延迟后自动隐藏 这种方式效果不错 但当注视控件时 它们可能会意外消失！ 现在我们进行了优化 当用户注视时 控件会保持常显 而在将视线移回视频画面时 控件才会自动隐藏 起初你可能根本察觉不到这种变化 因为它符合直觉预期

如果 App 使用的是 标准视频播放器 无论是内嵌、窗口还是沉浸式播放 都可免费使用这个功能 但如果 App 使用了自定视频控件 则需要手动启用这个功能 而且 这项功能的优势 不仅限于视频类 App！ FaceTime 通话会持久显示通话控件

“正念”也会持久显示练习控件 只要界面中有延时自动隐藏的 UI 无论是视频播放还是沉浸式体验 都可采用持久显示行为 正如我们所见 悬停交互为 App 带来了 丰富的表现形式 让体验更生动自然： 通过自定动画效果 为界面增添动感

通过注视触发滚动视图

以及长时间显示媒体控件

在设计 App 期间 引入这些功能时 不妨从一些初步构想开始 实际体验后再决定哪些最适合！ 积极发掘在 App 中应用 自定悬停效果的契机 可以使用 SwiftUI 或 RealityKit 创建这些效果 要进一步了解构建方式 可观看以下 2024 年的相关讲座 要启用 Look to Scroll 和持久显示行为 请参阅 developer.apple.com/cn 上的相关文档 感谢观看 祝开发愉快！