Design for spatial user interfaces
Spatial Computing 进阶 20m

空间用户界面设计指南

Design for spatial user interfaces

2023年6月5日

在 Apple 官方观看视频

一句话判断

如果你要为 visionOS 设计 UI，这场 Session 提供了苹果官方的设计语言指南——从 App 图标的多层结构到窗口尺寸的推荐值，从人体工学的交互距离到材质选择的最佳实践。

这场 Session 讲了什么

Session 系统性地介绍了 visionOS 的 UI 设计规范，分为三个部分：UI 基础与设计原则、布局与人体工学、系统组件。

App 图标。visionOS 的图标是真正的 3D——系统根据你提供的多层图像自动生成立体效果、高光和阴影。图标最多三层：背景层（1024x1024 实心方块）和最多两个前景层（透明背景）。系统会自动裁剪为圆形蒙版并添加深度效果。用户注视图标时它会微微膨胀。

UI 基础。设计原则包括：熟悉感（与 iOS/macOS 保持一致的视觉语言）、可读性（字体、间距、对比度需要适应空间环境）、可用性（目标区域足够大、交互反馈清晰）。空间 UI 使用玻璃材质（Glass Material）作为基础，让界面元素融入环境而非遮挡视野。

布局与人体工学。推荐的交互距离是 0.5-1.5 米。窗口和控件的尺寸需要在这个距离下保持可读和可点击。目标区域至少 60pt 才能保证可靠的捏合选择。避免把 UI 放在用户需要大幅转头才能看到的位置——舒适区域大约是前方 30 度视野。

系统组件。visionOS 上的大多数系统组件（按钮、开关、滑块、列表等）与 iOS/macOS 视觉上相似，但针对空间环境做了调整——比如更大的触控目标、玻璃材质背景、注视时的微妙高亮。

值得深挖的点

玻璃材质的设计哲学：不是半透明毛玻璃的简单移植。空间 UI 的背景需要让用户”透过界面看到环境”，同时保持内容的可读性。玻璃材质的模糊程度和亮度是动态调整的——亮环境中更模糊，暗环境中更透明。

注视 + 捏合的交互尺寸要求：60pt 的最小目标尺寸比 iOS 的 44pt 还要大。这意味着你不能在 visionOS 上沿用 iOS 的紧凑布局。按钮之间的间距也要更大，防止误触。

3D 图标的自动生成：你只需要提供平面图层，系统自动创建 3D 效果。这意味着设计工作量并没有增加很多——分层设计本身就符合现代品牌指南的做法。

代码片段

配置 visionOS App 的多层图标（概念示意）：

AppIcon.visionos/
  ├── Back.png          # 背景层：1024x1024 实心
  ├── Middle.png        # 中间层：1024x1024 透明背景
  └── Front.png         # 前景层：1024x1024 透明背景

// 系统自动处理：
// 1. 裁剪为圆形蒙版
// 2. 添加层间深度视差
// 3. 根据注视角度添加高光
// 4. 投射阴影到 Home View

空间 UI 中的按钮尺寸建议：

// visionOS 上的最小触控目标
Button("操作") {
    // 处理操作
}
.frame(minWidth: 60, minHeight: 60)  // 最小 60pt 确保捏合选择可靠
.padding(12)  // 按钮之间保持足够间距

最佳实践

  • App 图标使用三层设计，让系统自动生成 3D 效果
  • 交互目标至少 60pt，按钮间距要充裕
  • 主要内容放在用户前方 30 度视野范围内
  • 使用玻璃材质背景，让 UI 融入环境
  • 不要把所有 UI 都放在同一距离——利用深度创造信息层级
  • 测试时在 0.5-1.5 米的交互距离下验证可读性和可用性

还有什么值得关注

  • 玻璃材质在不同光照环境下的渲染效果
  • 深度层级（depth layer）的设计指南
  • 空间 UI 中的字体选择和尺寸建议
  • 从 iOS App 迁移到 visionOS 时的布局适配策略
WWDC 2023