空间输入设计

♪ 悦耳的器乐嘻哈 ♪ ♪ Israel Pastrana Vicente： 大家好 欢迎来到 “空间输入设计” 我是 Israel 今天和我一起的还有 Eugene 我们是 Apple Design 团队的设计师 Eugene Krivoruchko： 今天我们将介绍 面向眼睛与手的交互设计 我们将介绍这些 新输入方式有何特别之处 以及如何 在我们的平台上充分利用它们 Israel：让我们快速了解一下 所有可用的输入模式 使用空间输入 你只需注视某个按钮 同时轻点手指来选中它 这样你的手臂可以放松地放在腿上 我们的系统旨在让使用者与 UI 进行舒适的远距离交互 在某些情况下 你还可以直接与元素进行交互 例如 使用指尖 在虚拟键盘上打字 将手举在空中可能导致疲劳 但我们会发现有些任务 更适合进行直接交互 眼睛和手是新的空间输入方式 但你也可以使用其他熟悉的输入方式 例如无需打字即可进行语音搜索 或者键盘和触控板 这些都是 完成工作的好帮手 最后 你还可以连接一个游戏控制器 来玩你喜爱的游戏 我们将重点介绍最新的 也是最激动人心的 空间输入方式：使用眼睛和手 用眼睛和手进行交互 有许多特别之处 首先 它是私人输入方式 你的眼部动作和手势是独一无二的 设备内外的一系列摄像头 可捕捉你自然动作的所有细节 并尊重你的隐私 其次 这种输入方式很舒适 你可以将双手放在身旁 因为设备可以看到你周围的广阔空间 最后 这种输入方式使空间交互更加精确 设备对所有数据进行过滤 并将其转化为 开发者可以在 App 中 使用的准确交互指令 因此 空间输入是一种私人输入方式 能够让你有非常舒适的体验 同时为你提供 极高的精确度来控制你的交互 今天 我们将介绍如何用眼睛和手 自然地与你的 App 进行交互 我们先从眼睛开始 眼睛是空间体验的 主要瞄准机制 系统中的所有界面 都会对你的视线做出反应 而且 我们只需注视任何一项元素 即可轻松锁定目标 无论距离多远 接下来 我将介绍如何打造 能够进行舒适交互的 App； 如何让这些 App 便于用眼睛瞄准； 以及如何制作能够对你的视线 做出反应的界面 同时尊重隐私； 最后 视线意图如何简化我们的布局 并提供独特的辅助选项 要打造适合眼睛交互的 App 我们需要考虑 如何在设备中显示你的内容 首先要考虑的是： 尽管你的 App 拥有无限大小的画布 但你只能看到视场内的内容 在视场范围内 看中央最舒适 看边缘则不太舒适 因此 在设计 App 时 应使其置于视场范围内 减少颈部和身体的移动 尽量将 App 的主要内容放在 视场中央 这是你眼睛最舒适的区域 看向视场的边缘 可能会使眼睛疲劳 因此请将这些区域 用来放置并非始终需要呈现的内容 如次级操作 这些操作仍可访问 且不会干扰主要内容 请你始终将 App 内容 放置在视场范围内 以最大限度地 提高眼睛和颈部的舒适度 接下来 我们还应该考虑深度 对眼睛舒适度的影响 深度是空间体验的一种独特特征 通过将你的内容放在近处或远处 你的项目可以提供多样化的体验 但是 我们的眼睛 每次只能聚焦于一个距离 频繁改变聚焦深度 可能会造成眼睛疲劳 请尽可能保持交互内容的深度一致 这样可以在切换 UI 时 感觉自然轻松 例如 你可以呈现一个模型的视图 沿 Z 轴推动主视图 而模型保持在原来的距离上 通过保持 Z 轴位置不变 你的眼睛无需适应新的距离 你可以使用深度的微妙变化 来传达层次结构 比如这里的 左侧标签栏和底部的 分段控件 这样 你可以充分利用深度 同时避免眼睛不适 既然我们已经了解了 如何让 App 更舒适 那么我们还需要让它 更易于眼睛使用 眼睛是非常精确的 但有一些特质 可以帮助我们的眼睛 成功瞄准 UI 元素 我们的眼睛会自然聚焦在 某些形状上 从而将我们的注意力 引导到物体的中心 为了辅助我们的眼睛 请使用圆润的形状 如圆形、药丸形和圆角矩形 请避免使用边缘尖锐的形状 当你使用尖锐的边缘时 眼睛往往会 聚焦于外侧 从而降低眼睛的精确度 此外 请保持形状扁平 避免使用粗边轮廓 以及会将注意力引向边缘的效果 最后 请确保使用充足的内边距 来将你元素中的文字和符号居中 因此 在设计 UI 时请始终确保 其能将引导到元素的中心 现在我们的注意力 已经在元素的中心了 让我们来看看控件的正确尺寸是什么 支持眼睛瞄准的元素区域所需的 最小尺寸为 60 点 但是元素本身可以小于 60 点 你可以结合尺寸和间距 来实现最小瞄准区域 在布局中 元素之间的间距应大一些 这样可以帮你用眼睛快速而准确地 锁定目标 再次强调 遵守 60 点的最小瞄准区域 非常重要 将尺寸和间距相结合 可以让你的 UI 看起来很棒 并且易于用眼睛使用 开箱即用的标准组件 具有易于瞄准的尺寸 请尽量多使用这些组件 如果你使用自己的组件 请确保遵循我们的尺寸指南 要进一步了解关于点和布局的信息 请查看“设计空间用户界面”讲座 既然我们已经了解了瞄准区域 对眼睛的重要性 我们就必须确保 在空间的任何位置 都能保持这个瞄准区域 为此 我们需要了解如何缩放 UI 让我们来看看两种不同的缩放机制 系统为 App 窗口提供动态缩放 你可以看到 窗口在向远处移动时会变大 向近处移动时会变小 动态缩放会使 UI 填充相同的视场 并保持瞄准区域的大小 而不受窗口位置影响 如果使用固定缩放 UI 会随着向远处移动 而变小 固定缩放会改变界面大小 使你的 App 难以用眼睛进行交互 让我们将这两种模式并排来看一下 动态缩放可使 UI 和瞄准区域 保持相同大小 而固定缩放 则会改变尺寸并使瞄准区域过小 当你创建自定义 UI 时 请使用动态缩放 以确保 你的眼睛能够始终瞄准所有控件 除了缩放 方向也会影响 App 的可用性 如果界面带有一定角度 就会难以阅读和使用 这就是为什么 系统窗口总是朝向使用者 但是如果你在 App 中 创建自定义窗口 请务必确保你的 UI 朝向使用者 正如我们刚才所看到的 窗口和 UI 的 正确比例和方向 是保证眼睛交互准确性的基础 要进一步了解关于 该平台上窗口的行为方式 请查看“空间设计原理”讲座 眼睛是一种非常新颖的输入方式 因此让你的界面 对眼睛做出反应是非常重要的 当交互元素突出显示时 你就知道你的眼睛正在引导着交互 让我们看看 当你注视一组按钮时会发生什么 可以看到 当你注视每一个按钮时 这些按钮都会突出显示 所有的交互元素都应该突出显示 我们可以通过悬停效果来实现这一点 但是 由于眼睛的移动速度很快 因此这种效果不能过于明显 并且要能在任何内容上实现 比如在查看你喜爱的照片时 可以强化视线意图 但不会过于突出 多亏了悬停效果 所有系统提供的控件 都会在你注视它们时突出显示 如果你为自己的 App 创建自定义元素 可以使用悬停效果来增加视线反馈 让你的元素更具响应性 视线意图是非常敏感的信息 在处理眼睛的数据时 隐私具有最高优先级 悬停效果发生在 App 的进程之外 因此只有当手势 触发某个元素上的交互时 你才会知道聚焦到了哪个元素 用眼睛悬停在某个元素上 是一种意图的信号 如果你长时间注视某个元素 我们就会知道你对该元素感兴趣 这是一个展示 更多相关信息的绝佳机会 例如 按钮可以 在你注视时显示工具提示 此外 当你聚焦在标签栏时 它们就会展开 显示每个标签页的标签 最后 当你聚焦在系统搜索框内的 麦克风图标时 将触发 Speak to Search 该界面将出现 并允许你仅通过眼睛和语音 进行搜索 所有这些系统元素 都能在你需要时提供额外信息 同时在未聚焦时保持 UI 简洁 你可以在打造 App 时充分利用它们 我们在构建这些系统元素时 还考虑到了隐私问题 以确保不会向 App 发送视线聚焦信息 视线意图还为辅助技术 提供了绝佳的机会 例如 使用 停留控制 功能 你可以仅用眼睛选择内容 在本例中 当你短时间聚焦在一个按钮上时 停留控制 UI 就会出现 你无需用手 做出轻点手势即可选中按钮 那么 我们刚刚学习了 哪些为眼睛设计交互的知识呢？ 我们了解了如何让 App 更适宜于眼睛 我们可以将内容 放在观看者正前方的 视场范围内 并且合理使用深度 然后 我们学习了 如何设计易于使用的界面 以及如何将你的视线 引导到元素的中心 我们还强调了 在控件中保证 60 点最小瞄准区域的 重要性 以及我们应该始终传达互动性 并通过在元素中添加悬停效果 来更好地瞄准目标 最后是利用 UI 元素 来展示关于视线意图的额外信息 这些功能真的很棒 而且还有更多可以探索的内容 我们已经认识到 眼睛是一种出色的定位机制 当你将其与双手相结合时 眼睛的作用会变得更加强大 接下来让 Eugene 来为我们介绍 Eugene：谢谢 Israel 让我们来谈谈双手的作用 与视线瞄准相结合 手势是整个系统的 主要交互方式 将手指捏在一起就相当于 点击手机屏幕 系统还支持其他我们熟悉的手势 例如 你可以捏合手指 并拖动来滚动屏幕 还可以使用双手 做出缩放和旋转等手势 请注意 在所有这些情况下 UI 的反馈 都与手部动作保持一致 这的确可以让人感受到 这些反馈和手势之间的联系 这些手势在整个系统中 以相同的方式发挥作用 并遵循与多点触控手势类似的逻辑 这意味着用户可以真正专注于体验 而不必考虑如何进行交互 这就是为什么你在设计体验时 应该借鉴这些熟悉的模式 并确保使用 符合用户期望的方式来响应手势 在某些情况下 你的体验中 可能会存在独特的行为 而这种行为不容易用标准手势来表达 在这种情况下 你可能想定义一个自定义手势 以下这些建议 可以帮助你成功构建自定义手势 首先 要确保手势易于 解释和执行 以便用户能够快速学会如何使用 避免手势冲突也很重要 你的自定义手势必须与标准系统手势集 或人们在对话中可能使用的 常见手部动作有明显不同 这样的手势必须是人们能够持续重复 而不会感到紧张或疲劳 并且不易错误激活的手势 你还需要考虑到使用辅助技术 与系统进行交互的用户 并考虑在这些情况下 你的手势将如何发挥作用 要进一步了解关于辅助功能的信息 请查看“创建无障碍的空间体验”讲座 手势对不同的人也可能 有不同的含义 因此请确保 你的自定义手势 不会传达你本无意传达的信息 考量所有这些因素 可能需要找到一个微妙的平衡点 因此采用 UI 形式值得作为 一种后备方案纳入考虑 我们的输入模式中 最令人兴奋的方面之一 就是可以将眼睛作为一种意图信号 将视线的方向与手势相结合 我们可以创建精确而令人满意的交互 这在其他平台上是不可能实现的 让我们再通过缩放手势 来了解这一点 在手势开始时 缩放的原点 由你的眼睛当时在图像中 所聚焦的位置决定 这样 该特定区域在进行缩放时 会放大并居中 因此 你只需看向四周 并做出这个简单的手势 即可轻松浏览图像 这让人感觉非常神奇 同时又完全 在意料之中 你所注视的点自然地表明了 这项交互的意图 这种行为的另一个例子 是标记操作中的指针移动 绘制时 你可以用手控制画笔光标 这与鼠标指针类似 但如果你看向 画布的另一侧并轻点一下 光标就会跳到你所注视的位置 这将带来一种精确的操纵感 并有助于在整个画布上快速移动 这些交互实例展示了 视线指向的应用能让简单的行为 更加精确、更令人满意 眼睛不仅用于瞄准元素 而且还间接地为该交互 提供了更细化的定位 这是我们输入模式非常强大的一点 让我们能够以更加智能的方式 对交互做出响应 现在我们来谈谈直接触控 我们的整个系统都支持 用户直接伸出手 用指尖进行交互 例如 你可以让 Safari 浏览器靠近你 并直接滚动页面 你还可以使用双手 在虚拟键盘上打字 甚至还可以在伸手可及的范围内 操作 3D 内容 以获得更多空间体验 远距离交互可以长时间保持舒适 因为眼睛可以轻松瞄准控件 并且双手可以在 执行最小手势时保持休息 在设计直接交互时 我们需要记住 用户把手举在空中 一段时间后会导致疲劳 尽管如此 对某些 App 来说 将内容置于手臂可及的范围内 进行直接触控仍然是有好处的 例如需要近距离观察 或操纵物体的体验； 或任何建立在生活中的 以肌肉记忆为基础的交互机制； 通常来说 就是体验的核心 与实际动作相关 缺乏触觉反应是设计直接交互时 需要考虑的另一个问题 每当我们触摸 物理世界中的某样东西时 我们的双手都会接收到 大量的多感官反馈 这对我们的感知至关重要 但当我们伸手触摸虚拟内容时 这些反馈都不会发生 为了实现这种交互 我们需要用其他类型的反馈来弥补 缺失的感官信息 让我们来看看 在键盘按钮上我们是如何 应对这个挑战的 按键的高度实际上高于盘面 来引导用户直接按下 当手指位于键盘上方时 按钮会显示悬浮状态 并且高亮 也会随着手指接近按钮表面而变亮 这样的状态可以提示手指正在接近 有助于引导手指定位 在接触的瞬间 状态会迅速变化 且快速回应 并伴随有 相应的空间声效 这些额外的界面反馈对于 弥补触觉信息的缺失 以及确保可靠且令人满意的 直接交互体验来说至关重要 音频在连接整个系统的输入 和虚拟内容方面发挥着特殊作用 要进一步了解相关信息 请查看 “探索沉浸式声音设计”的讲座 让我们来总结一下 设计手势交互的要点 请使用与系统一致的手势语言 以便用户能够专注于内容 而非交互本身 请注意 只有在使用标准手势集 无法实现预期行为时 才需引入自定义手势 利用视线作为意图信号 尝试改善交互 只有在关乎体验的核心时 才使用直接交互 如果你采用这一方法 请提供丰富的反馈 以弥补缺失的感官信息 今天 我们讨论了用眼睛和手 进行空间交互的一些设计原则 我们讨论了很多 关于舒适性和人体工程学的问题 在这个平台上 有多种多样的软件外观、 行为和对输入的反应方式 因此设计师和开发人员更有责任 确保这些体验是舒适且无障碍的 通过在设备上运行你的 App 用户将你的作品 带入其空间并给予充分关注 软件不再存在于在某个屏幕中 而是可以在用户的物理环境中 占据更重要的位置 并对他们的自然肢体动作做出反应 用手与虚拟内容进行交互 对大多数人来说也是很新奇的体验 所以通过提供清晰的反馈 来进行引导 并尽可能使用 熟悉的交互模式至关重要 我们从其他平台的设计中可以知道 优秀的输入体验 不需要让使用者特意思考 软件响应成为你身体动作的 自然延续 并与交互意图完美匹配 我们的平台可以使用眼睛作为 输入模式的基础 可以用 魔法般的精确度对互动进行响应 这真的非常强大 我们希望开发者能加以利用 为空间媒介创造出 令人愉悦的新颖互动 请务必查看我们在讲解中 提到的讲座 感谢你的观看！ Israel：再见！ ♪