Elevate your windowed app for spatial computing
Spatial Computing 进阶 20m

提升窗口应用的空间计算体验

Elevate your windowed app for spatial computing

2023年6月5日

在 Apple 官方观看视频

一句话判断

用 Backyard Birds 示例应用手把手演示——只需要改几个 Xcode 设置、把位图换成矢量图、把固定颜色换成语义颜色，你的 iPad 应用就能在空间计算平台上看起来像原生应用。

这场 Session 讲了什么

SwiftUI 工程师 Harlan 通过 Backyard Birds（一个虚拟观鸟应用）演示了如何将现有 SwiftUI 应用适配到空间计算平台。

Glass 背景与 Vibrancy：应用窗口默认使用玻璃（Glass）背景，根据环境光线和背后物体自动调整对比度和色彩平衡。这意味着空间计算平台不区分明暗模式。语义颜色（如 .primary、.secondary）会自动在 Glass 上以 vibrant 方式呈现，确保始终清晰可读。固定颜色（如 .red）则无法适应环境变化。

矢量资产：空间计算中没有固定像素屏幕，应用可能被放在任何距离或角度查看。系统需要动态缩放内容，位图缩放会模糊，矢量图则始终清晰。文字和 SF Symbols 已经是矢量，自定义图标也必须使用矢量格式。

系统控件的自适应行为：SwiftUI 的内置控件自动适配空间计算——NavigationSplitView 的 sidebar 自动加深背景、List 行有 hover 效果、按钮有按下缩放动画。使用系统控件几乎不需要额外工作。

交互方式适配：四种交互方式中，间接捏合（看向按钮+手指轻点）最常用。系统自动处理 hover 高亮和点击反馈。

Session 还介绍了 ornamental（装饰性）场景类型，允许在窗口周围放置自定义 3D 装饰元素。

值得深挖的点

Glass 的自动适配机制：Glass 不是简单的半透明背景，它会根据环境光线和颜色动态调整。这意味着你不需要关心用户是在明亮的房间还是暗室中使用应用——Glass 自动保证可读性。

Vibrant 材质的设计哲学：用语义颜色（.tint、.primary）而非固定颜色。语义颜色在 Glass 上会自动添加额外的对比度和亮度，确保在任何背景下都清晰。固定颜色无法做到这一点。

矢量资产的关键性：在 Xcode 资产目录中，将自定义图标的 Scales 从 “Individual Scales” 改为 “Single Scale”，并勾选 “Preserve Vector Data”。这一步不是可选的——在空间计算中，用户可能把应用拉到非常近的距离查看。

ornamental 场景：这是新平台特有的场景类型，允许在窗口周围添加 3D 装饰——比如让鸟从窗口中飞出的 3D 动画效果。

代码片段

// 错误：使用固定颜色（无法适应 Glass 背景）
Circle()
    .fill(Color.green)  // 在某些环境下可能看不清

// 正确：使用语义颜色（自动 vibrant）
Circle()
    .fill(.tint)  // 自动适配 Glass 环境

// 错误：检测明暗模式
@Environment(\.colorScheme) var colorScheme
let bgColor = colorScheme == .dark ? .darkGreen : .lightGreen

// 正确：使用语义颜色，不需要检测 colorScheme
Circle()
    .fill(.tint)
// 为空间计算添加 ornamental 装饰
WindowGroup(for: Bird.self) { bird in
    BirdDetailView(bird: bird.value)
}
.defaultSize(width: 500, height: 500, depth: 200, in: .meters)

// 添加 3D 装饰元素
.ornament(visibility: .on(spaces: .sharedSpace)) {
    Model3D(named: "BirdDecoration")
        .offset(z: -0.5)
}
// 确保控件满足空间交互要求
// 使用系统控件自动满足 hover 和目标区域要求
List(selection: $selectedBird) {
    ForEach(birds) { bird in
        BirdRow(bird: bird)
    }
}

最佳实践

  • 把所有自定义图标换成矢量格式：在资产目录中选择 “Single Scale” 并勾选 “Preserve Vector Data”。这是空间计算适配的第一步。
  • 使用语义颜色代替固定颜色：.primary、.secondary、.tint 等语义颜色会自动适配 Glass 环境。移除所有 colorScheme 检测代码。
  • 优先使用系统控件：NavigationSplitView、List、Button 等系统控件自动适配空间计算的所有交互和视觉特性。
  • 在 Xcode 中添加新平台支持：Supported Platforms 菜单中添加新平台，即可在模拟器中预览。
  • 测试不同距离下的显示效果：把应用拉远和拉近，检查所有内容是否保持清晰。

还有什么值得关注

  • 大多数系统应用（Keynote、Freeform、TV）都用 SwiftUI 构建，说明 SwiftUI 在空间计算平台上已经足够成熟。
  • Glass 背景消除了明暗模式的设计负担——但这并不意味着你可以忽略色彩对比度。
  • ornamental 场景类型为窗口应用提供了从 2D 到 3D 的过渡路径。
  • 配合 “Meet SwiftUI for spatial computing” 和 “Run your iPad and iPhone apps in the Shared Space” 一起看能获得完整的多平台适配知识。
WWDC 2023