Design for spatial user interfaces

Highlight

Apple 为 visionOS 建立了一套空间 UI 视觉语言：三层 3D 图标、玻璃材质窗口、动态 Vibrancy 效果，以及针对空间环境调整的字重和排版，让 iOS 开发者的知识可以迁移到空间计算平台。

核心内容

3D 图标设计

visionOS 的图标是立体对象。用户注视图标时，它会微微膨胀，系统会自动添加高光和阴影来强化层间深度（01:25）。

设计方式很简单：提供最多三层 1024x1024 的方形图片。背景层是实心方块，两个前景层使用透明背景。系统会自动裁剪为圆形并添加玻璃效果。图形要居中，避免靠近边缘，否则膨胀时会看起来偏移。

玻璃材质（Glass Material）

visionOS 没有传统意义上的浅色/深色模式。窗口使用系统定义的玻璃材质，它会根据环境光线动态调整对比度和色彩平衡（03:15）。

玻璃材质有几个特性：

允许环境光和虚拟内容透过
高光和阴影强化了在空间中的位置和尺度感
让背后的内容隐约可见，减少遮挡感

避免在窗口上使用纯色背景。太多不透明窗口会让人感到压抑。如果需要分隔区域，用更深的材质；需要突出交互元素，用更浅的材质。

排版调整

为了在空间环境中保持可读性，visionOS 对字重做了调整（05:56）：

iOS 的 Body 用 Regular，visionOS 改用 Medium
iOS 的标题用 Semibold，visionOS 改用 Bold
字距（tracking）略微增加

新增了两个超大标题样式（Extra Large Title），适合空间中的宽幅编辑式布局。

Vibrancy 效果

Vibrancy 是保持可读性的关键机制。它从背景中提取光线和颜色，让前景内容（文字、符号、填充）更加醒目（06:57）。

有三种模式：

Primary：标准文字
Secondary：描述文字、脚注、副标题
Tertiary：更低层级的信息

因为玻璃材质会显示背后的颜色，彩色元素可能被背景淹没。大部分情况下使用白色文字和符号，确保始终清晰可见。

详细内容

人体工学布局

visionOS 上用户主要通过眼睛和手部交互，设计必须考虑身体舒适度（09:25）。

颈部左右转动的范围比上下更大。所以如果需要大画布，选择宽屏比例而不是竖屏。Freeform 的 canvas 就是横向延伸的。

最重要的信息放在视野中央。避免把内容放得太高或太低。

目标区域尺寸

交互元素的可点击区域至少 60pt（10:36）。视觉尺寸可以更小，比如标准按钮是 44pt，但周围需要至少 8pt 的空白。

几个按钮堆叠时，使用标准系统按钮，间距至少 16pt。大号按钮需要的周围空白更少。

Focus Feedback（焦点反馈）

系统组件自带焦点反馈：用户注视时，元素会微微变亮（12:04）。这让用户知道哪些部分可以交互。

设计列表或菜单时，项目之间留出至少 4pt 的间距，避免焦点反馈重叠。自定义交互区域需要定义形状，让系统能正确显示 hover 效果。

同心圆角

嵌套元素的圆角要保持同心。公式很简单：内层圆角半径 + 内外间距 = 外层圆角半径（13:37）。圆角要设为 continuous corners，保持平滑。

visionOS 的 Tab Bar 是垂直的，固定在窗口左侧（16:32）。用户注视时自动展开显示标签，移开视线后自动收起。保持轻量，不要超过 6 个项。

Sidebar 和 Tab Bar 共存于窗口中，提供次级导航。

Ornaments（装饰控件）

Ornament 是 visionOS 新增的呈现方式，把控件放在窗口前方的独立玻璃容器中（17:34）。

适合放置工具栏和持久控件。放在窗口底部时，让 ornament 重叠底部边缘 20pt，与主窗口融为一体。Ornament 可以出现/消失，也可以展开显示更多内容。

菜单、Popover 和 Sheet

在 visionOS 上，菜单和 popover 可以超出窗口边界，默认居中显示（19:54）。

按钮触发 popover 后，按钮进入 selected 状态：黑字白底。这是系统模式，不要用白底按钮做普通状态。

Sheet 以模态视图呈现，与父窗口同 Z 位置，父窗口后推并变暗。二级 sheet 再往前推一层。

核心启发

做什么：把现有的 iOS 音乐播放器适配到 visionOS，利用玻璃材质和 ornament 做 Now Playing 控件。
为什么值得做：Music app 已经展示了 ornament 的最佳实践——持久播放控件不遮挡内容，同时随时可访问。
怎么开始：用 .glassBackgroundEffect() 做控件背景，把播放控件做成 ornament 放在窗口底部。
做什么：设计一个空间相册应用，用 Extra Large Title 做年份标题，营造沉浸感。
为什么值得做：超大标题样式适合空间的宽幅布局，配合玻璃材质让照片成为焦点。
怎么开始：使用 .font(.extraLargeTitle) 和 .font(.extraLargeTitle2)，配合 Vibrancy 效果确保文字在任何背景上都清晰。
做什么：开发一个 3D 产品展示应用，用 volumetric window 展示商品模型。
为什么值得做：volumetric window 让用户可以从任意角度查看 3D 模型，玻璃材质让 UI 不抢夺模型的注意力。
怎么开始：用 WindowGroup + .windowStyle(.volumetric) 创建体积窗口，内部用 Model3D 加载 USDZ 模型。
做什么：做一个空间白板应用，支持多人协作。
为什么值得做：宽屏布局适合横向延伸的画布，Focus Feedback 让用户知道哪些元素可以交互。
怎么开始：使用宽比例窗口，交互元素保持 60pt 目标区域，用同心圆角设计工具面板。

关联 Session

Design spatial SharePlay experiences — visionOS 上的 SharePlay 与 Spatial Persona 设计
Design considerations for vision and motion — 空间计算中的视觉与运动舒适度设计
Build spatial experiences with RealityKit — 用 RealityKit 构建 3D 空间体验
Principles of spatial design — 空间设计原则总览