Design for spatial input
Spatial Computing 进阶 20m

空间输入设计指南

Design for spatial input

2023年6月5日

在 Apple 官方观看视频

一句话判断

这场 Session 给出了空间计算平台眼动+手势交互的完整设计规范——60pt 最小触控区域、动态缩放保持目标尺寸、圆形控件优于尖角形状、hover 效果要微妙而非炫目,这些规则直接决定了你的应用是否”好用”。

这场 Session 讲了什么

Apple 设计团队的 Israel Pastrana Vicente 和 Eugene Krivoruchko 系统性地讲解了空间计算平台上眼动和手势交互的设计原则。

空间输入有五个模态:眼动+手势(最核心)、语音、键盘和触控板(高效生产力)、游戏控制器。Session 聚焦于眼动和手势这两个最核心的新输入方式。

眼动设计:眼睛是主要的瞄准机制。系统界面都会响应用户看向的位置。设计眼动友好的界面需要考虑舒适度(内容在视野中心)、目标大小(最小 60pt 区域)、形状(圆形优于尖角)、动态缩放(保持目标区域大小不变)和朝向(UI 始终面向用户)。

手势设计:间接捏合(手指轻点,手放在膝盖上)是最常见的远距离交互。直接触摸(用手指触碰虚拟界面)适合近距离操作但容易疲劳。系统会自动判断用户的意图。

hover 效果:当用户看向交互元素时,系统自动显示高亮反馈。效果需要微妙而非突兀,因为眼球移动非常快速。

辅助功能:眼动意图(Eye Intent)简化了布局设计,也为运动障碍用户提供了替代输入方式。

值得深挖的点

60pt 最小目标区域的计算方式:元素本身可以小于 60pt,但加上周围间距后整个可交互区域必须达到 60pt。这意味着密集排列的小按钮需要足够间距才能保持眼动瞄准的准确性。

动态缩放 vs 固定缩放:系统窗口使用动态缩放——窗口远离时变大,靠近时变小,保持视野中的目标区域大小不变。固定缩放会让远处的窗口变小到无法用眼动精确瞄准。自定义 UI 必须使用动态缩放。

深度一致性原则:眼睛同一时间只聚焦一个距离,频繁切换焦点会导致疲劳。交互内容应该保持在同一深度。Modal 弹出时推后主视图而不是在更近的距离弹出 Modal。

hover 的微妙性设计:眼球移动速度极快(每秒可以扫视多个元素),如果 hover 效果太强会产生闪烁感。系统使用微妙的高亮效果——既足够让用户知道自己的注视被检测到,又不会造成视觉干扰。

代码片段

这场 Session 主要是设计指南,不涉及具体代码。但其设计原则直接影响以下 SwiftUI API 的使用方式:

// 确保控件满足最小 60pt 目标区域
Button(action: {}) {
    Image(systemName: "star")
        .frame(width: 44, height: 44)  // 按钮本身
}
.padding(8)  // 加上间距,总区域达到 60pt

// 使用语义化颜色(自动适配 vibrant 材质)
Circle()
    .fill(.tint)  // 不使用 .red 等固定颜色
// 使用系统标准控件(自动满足目标区域要求)
// 系统控件已内置正确的 hover 效果和目标大小
NavigationSplitView {
    SidebarContent()
} detail: {
    DetailContent()
}

最佳实践

  • 主内容放在视野中心:视野边缘用于次要操作。减少头部和颈部运动。
  • 使用圆形和圆角矩形:避免尖角形状,它们会让眼睛聚焦在边缘而非中心。
  • 所有交互元素都要有 hover 效果:这是眼动交互的基本反馈。使用系统控件会自动获得。
  • 交互内容保持在同一深度:避免频繁的焦点距离切换。用 Z 轴微小变化表达层级,而非大幅跳跃。
  • 间接交互优先于直接交互:手放在膝盖上用捏合手势比抬手触碰更舒适。直接交互只用于键盘输入等必要场景。

还有什么值得关注

  • 眼动和手势数据在设备端处理,不上传云端——隐私保护从设计层面就内置了。
  • 空间输入是”个人化”的——每个人的眼动模式和手势习惯都不同,系统会适配个体差异。
  • Eye Intent 为辅助功能用户提供了全新的交互方式,Session 中有简要提及。
  • 配合 “Design for spatial user interfaces” 和 “Principles of spatial design” Session 一起看,能获得完整的空间计算设计知识体系。
WWDC 2023