visionos-design-guidelines

visionOS 设计指南

基于 Apple 人机界面指南的 Apple Vision Pro 全面设计规则。这些规则可确保空间计算应用舒适、直观，并符合平台惯例。

---

1. 空间布局 [CRITICAL]

空间布局决定用户的舒适度和可用性。位置不当会导致颈部劳损、方向感错乱或内容无法访问。

规则

SL-01：将内容置于视野中央。 将主要窗口和内容放在用户正前方、与视线齐平的位置。舒适的垂直视角范围大约为水平视线以上和以下各 30 度。超出此范围的内容需要用户转动头部，会造成疲劳。

SL-02：保持舒适的距离。 将内容放置在与用户自然舒适的距离，窗口通常为 1-2 米。内容太近会让人感到冒犯，太远则难以阅读。系统默认的放置距离约为 1.5 米。除非有充分理由，否则应遵循此设置。

SL-03：绝不要将内容放在用户身后。 用户无法看到身后的内容，除非实际转身。所有 UI 元素都必须位于用户面朝方向的半球范围内。如果内容必须环绕用户，应提供清晰的导航方式，以便用户转动或重新定位。

SL-04：尊重个人空间。 不要将 3D 对象或窗口放置在距离用户头部小于手臂长度（约 0.5 米）的位置。进入个人空间的对象会造成不适和被侵扰的感觉。直接触控交互是例外，因为对象会被有意放在可触及范围内。

SL-05：利用 Z 轴深度建立层级。 距离用户更近的元素会显得更突出，也更具交互性。将次要内容或背景内容放得更远一些。在分层元素之间使用细微的深度偏移（几厘米），而不是大幅分离，以免界面显得支离破碎。

SL-06：谨慎管理多个窗口。 显示多个窗口时，应让它们围绕用户呈柔和弧形排列，而不是堆叠或相互重叠。每个窗口都应可单独重新定位。避免同时生成过多窗口，以免空间显得杂乱。

SL-07：将内容锚定到环境，而非头部。 用户转动头部时，窗口和对象应固定在世界空间中。锁定在头部的内容（随头部移动的内容）会造成不适和晕动症。只有对于工具提示等短暂显示的元素，才使用相对于头部的位置。

---

2. 眼睛与手部输入 [CRITICAL]

visionOS 主要采用间接交互作为输入模式：用户注视目标并捏合手指进行选择。这与触控或鼠标输入有本质区别。

规则

EH-01：将注视并捏合设计为主要交互方式。 标准交互方式是：用户注视某个元素（用眼睛进行定位），然后将拇指和食指捏合（用手进行确认）。所有主要交互都应围绕这一模式设计。用户无需抬手或指向物体。

EH-02：交互目标的最小尺寸为 60pt。 眼动追踪本身存在误差。所有可点击元素的直径至少应为 60pt，才能通过注视可靠定位。这比 iOS 的触控目标（44pt）更大。较小的目标会让用户感到沮丧并造成误选。

正确：

// visionOS — button meeting 60pt minimum
Button(action: confirmAction) {
    Label("Confirm", systemImage: "checkmark")
        .frame(minWidth: 60, minHeight: 60)
        .padding(.horizontal, 16)
}
.buttonStyle(.borderedProminent)

错误：

// visionOS — 32pt button too small for reliable gaze targeting
Button(action: confirmAction) {
    Image(systemName: "checkmark")
        .frame(width: 32, height: 32)  // Below 60pt minimum; unreliable with eye tracking
}

EH-03：注视时提供悬停反馈。 当用户的视线停留在交互元素上时，应显示明显的高亮或轻微放大效果，以确认该元素已被定位。这种反馈至关重要，因为界面中没有光标。没有悬停状态，用户就无法判断即将选择哪个元素。

EH-04：支持对近距离物体进行直接触摸。 当 3D 物体或 UI 元素处于伸手可及的范围内时，应允许用户直接触摸交互（伸手并轻点）。直接触摸应自然流畅：接触时提供视觉和音频反馈。在能增强临场感的沉浸式体验中使用直接触摸。

EH-05：绝不将注视追踪用于内容目的。 眼睛位置仅用于系统交互定位。不得根据注视方向推断用户兴趣、根据用户注视的内容更改内容，或记录用户的注视位置。这是平台的核心隐私原则。系统不会向应用暴露原始眼动追踪数据。

EH-06：保持自定义手势简单直观。 如果定义了系统捏合手势之外的自定义手势，应确保这些手势易于发现、执行时身体舒适，且不会与系统手势冲突。避免要求持续抬手、复杂手指动作或双手协调才能完成基本操作的手势。

EH-07：无需精确摆放手部位置。 用户交互时双手自然地放在膝上或身体两侧。不要要求用户将手保持在特定位置、伸手触及特定位置，或持续保持手势。采用间接交互模式正是为了减少身体用力。

EH-08：在交互开始时确认用户意图。 系统一旦识别到注视目标、捏合、拖动拾取或直接触摸接触，就应立即显示明显的状态变化。延迟确认会打断眼手配合，使选择过程显得不确定。

空间交互快速参考

交互	方式	使用场景
轻点／选择	注视 + 捏合	按钮、链接、列表项
滚动	注视 + 捏合并拖动	列表、长内容
缩放	双手捏合	地图、图像、3D 模型
旋转	双手扭转	操控 3D 物体
拖动	注视 + 捏合并按住移动	重新放置窗口
直接触摸	伸手轻点	近距离 3D 物体
长按	注视 + 捏合并按住	上下文菜单

目标尺寸参考

元素	最小尺寸	建议尺寸
按钮	60pt	60-80pt
列表行	高度 60pt	高度 80pt
标签栏项目	60pt	72pt
关闭／关闭显示	60pt	60pt
工具栏项目	60pt	60pt
3D 交互物体	等效 60pt	根据场景调整比例

---

3. 窗口 [HIGH]

在 visionOS 中，窗口悬浮于用户的物理空间中。窗口使用玻璃材质，可与真实世界环境融为一体。

规则

WN-01：默认使用玻璃材质作为窗口背景。 系统玻璃材质会根据用户的现实环境动态调整，提供一致且清晰易读的背景。除非有特定的设计理由（例如播放媒体），否则不要用不透明的纯色替代玻璃。玻璃让界面融入共享空间。

WN-02：保留标准窗口控件。 窗口底部包含系统提供的窗口栏，可用于重新定位窗口，并设有关闭按钮。不要隐藏、覆盖或替换这些控件。用户依赖所有应用中一致的窗口管理方式。

WN-03：适当支持调整窗口大小。 如果不同尺寸有利于展示内容（如文档、浏览器、媒体），请支持调整窗口大小。使用系统的调整大小手柄。设置合理的最小和最大尺寸，并在窗口大小改变时自适应调整布局。

WN-04：将标签栏放在前导侧（左侧），作为装饰元素。 在 visionOS 上，标签栏（应用导航）位于窗口前导侧（左侧）的垂直装饰栏中，而不是像 iOS 那样放在底部。这样可以让导航触手可及，同时不占用窗口内容区域。标签图标请使用 SF Symbols。

WN-05：将工具栏放在底部，作为装饰元素。 主要操作控件应放在锚定于窗口底边的工具栏装饰栏中。这样可以让控件靠近用户自然放置双手的位置，同时不遮挡内容区域。

WN-06：窗口在空间中浮动，不存在固定屏幕。 这里没有固定的显示屏。窗口存在于用户的物理环境中。设计内容时，应确保从略微偏斜的角度和不同距离观看时都能正确显示。避免采用假定视口尺寸固定或要求像素级精确定位的设计。

---

4. 体积 [HIGH]

体积会在有边界的立方体中显示 3D 内容，适用于 3D 模型、可视化内容以及用户可以从多个角度查看的对象。

规则

VL-01：将 3D 内容限制在体积边界内。 所有内容都必须位于定义的体积尺寸范围内。超出边界的内容会被裁切。请根据内容合理设置体积尺寸，并遵守系统强制的限制。

VL-02：针对全方位观看进行设计。 用户可以绕着体积走动或重新摆放体积。请确保从所有角度观看时，3D 内容都能正确呈现，而不只是正面。避免使用从侧面看起来像纸板剪影的平面立面。

VL-03：不要要求特定的观看位置。 用户可能从上方、下方或任意侧面观看体积。无论观看角度如何，内容都必须易于理解。如果方向很重要，请使用视觉提示（例如底座或标签），而不是强制要求特定位置。

VL-04：根据空间合理缩放内容。 体积的大小应与其内容和用户所处的环境相适应。分子模型可能较小，可以拿在手臂长度之外观看；建筑可视化则可能铺满一张桌子。请考虑用户与体积交互时所处的环境。

VL-05：将体积用于独立完整的 3D 体验。 体积不是装有 3D 对象的窗口。当 3D 内容是主要体验（例如查看产品模型或 3D 图表）时，请使用体积。如果界面主要是 2D，只包含少量 3D 元素，则请使用窗口。

---

5. 沉浸式空间 [HIGH]

visionOS 支持从共享空间（应用与现实环境并存）到完全沉浸（完整虚拟环境）的一系列沉浸程度。

规则

IS-01：从共享空间开始。 应用默认在共享空间中启动，多个应用窗口与现实世界并存。只有在用户明确请求时，才切换到更具沉浸感的体验。不要在启动时强制进入沉浸模式。

IS-02：逐步增强沉浸感。 逐步切换沉浸级别：从共享空间（窗口与现实并存），到完整空间（应用接管空间，但仍保留透视画面），再到完全沉浸（完全虚拟的环境）。每一步都应有明确意图，并由用户发起。

IS-03：始终提供退出途径。 用户必须始终能够返回沉浸感较低的状态，或完全退出体验。数码表冠是系统级退出方式。在应用中，应提供清晰的控件来降低沉浸感。绝不要将用户困在沉浸式体验中。

IS-04：利用透视画面保障安全。 在用户可能移动的体验中，应保留对真实环境的透视画面，或提供安全边界。用户需要留意实体障碍物、他人和房间边界。只有在用户保持静止时，才适合完全沉浸。

IS-05：逐步调暗透视画面。 切换到更高沉浸级别时，应逐步调暗透视画面，而不是直接切换为黑屏。突然的视觉变化会使人感到迷失方向。应在不同沉浸级别之间使用平滑的动画过渡。

IS-06：不要假设房间的布局或大小。 用户身处各种各样的实体空间中。不要设计要求房间达到最小面积、假设地面区域畅通无阻或预期家具按特定方式摆放的体验。应根据实际可用空间灵活适配。

IS-07：提供空间音频提示。 在沉浸式空间中，应使用空间音频帮助用户辨别方向。声音应从虚拟环境中声源所在的方向传来。音频提示无需用户将视觉焦点移开，就能引导注意力并提供反馈。

---

6. 材质与深度 [中]

visionOS 使用基于物理的材质系统，可对真实世界的光线作出响应。正确使用材质可以建立深度层级并确保可读性。

规则

MD-01：界面表面使用系统玻璃材质。 玻璃材质是 visionOS 界面的基础。它能呈现深度和半透明效果，并融入环境。应使用系统提供的玻璃变体（常规、薄型、超薄型），而不是自定义半透明材质。

MD-02：镜面高光应随环境变化。 visionOS 中的材质会对真实世界的光照条件作出响应。设计元素时应善用这一点：交互元素上细微的镜面高光可增强其立体感。不要使用纯哑光表面，让材质失去层次感。

MD-03：分层使用材质以建立深度层级。 前景元素使用更浅、更厚的玻璃，背景元素使用更深、更薄的玻璃。侧边栏使用与内容区域略有不同的玻璃色调。这种分层无需明显边框，也能自然地建立视觉层级。

MD-04：使用活力效果确保文本可读。 玻璃材质上的文本会使用活力效果，无论背景环境如何都能保持清晰易读。应使用包含适当活力效果的系统文本样式。在玻璃上自定义渲染文本时，必须考虑背景亮度和颜色的变化。

MD-05：利用阴影和高光表现高度。 浮在窗口表面上方的元素（弹出框、菜单、悬停状态）应投射细微阴影，并在上边缘呈现轻微的镜面高光。这些深度线索有助于用户理解界面各层之间的空间关系。

MD-06：在共享空间中避免使用完全不透明的背景。 共享空间中的不透明表面会在环境中形成视觉上的空洞。应使用能让环境透出的半透明玻璃材质。媒体播放（视频、照片）等场景除外，此时不透明背景有助于提升观看体验。

7. 装饰控件 [中等]

装饰控件是附着在窗口边缘的 UI 控件，会部分悬浮在窗口边界之外。它们提供工具栏、导航和上下文操作。

规则

OR-01：将控件作为装饰控件附加，而非嵌入内容。 工具栏、标签栏和常驻操作按钮应作为装饰控件，而不是嵌入窗口内容区域。装饰控件能保持内容区域整洁，并在控件与内容之间建立清晰的空间层级。

OR-02：将主要操作放在底部装饰控件中。 底部边缘装饰控件是放置操作控件（播放／暂停、格式工具、分享）的主要位置。这个位置符合人体工学，便于使用且视觉上醒目，同时不会遮挡内容。

OR-03：将导航放在前导（左侧）装饰控件中。 应用级导航（相当于标签栏）应附着在窗口的前导边缘。这样可让导航始终可见且易于访问，同时将内容区域和底部装饰控件留给上下文控件。

OR-04：不要让装饰控件遮挡窗口内容。 装饰控件应从窗口边缘向外延伸，而非向内延伸。它们不应覆盖或与窗口内容区域重叠。应合理设置装饰控件的尺寸，使其保持实用，同时不会在视觉上压过内容。

OR-05：在适当情境下显示装饰控件。 并非所有装饰控件都需要始终可见。工具栏可以在用户注视窗口时显示，并在用户移开视线时淡出。这样既能保持界面整洁，又不影响功能的可发现性。

OR-06：使用标准的装饰控件样式。 装饰控件使用与窗口相同的玻璃材质系统，但深度略有不同。应使用系统提供的装饰控件容器，而非自定义浮动 UI。这样可确保与其他 visionOS 应用保持视觉一致。

OR-07：确保重要控件易于发现。 使用装饰控件承载用户需要反复使用的命令，例如导航、播放或主要操作。不要将重要控件隐藏在需要记忆的手势或仅悬停时才出现的交互方式之后。

---

8. 无障碍 [关键]

visionOS 支持 VoiceOver、切换控制和指针控制等替代操作方式。空间 UI 必须能够在不单纯依赖眼动和手部输入的情况下进行导航。

规则

ACC-01：每个交互元素都必须有明确的无障碍标签。 用户可以交互的按钮、控件和 3D 对象都必须带有 VoiceOver 可以播报的标签。不要仅依赖视觉外观或位置。

ACC-02：VoiceOver 必须能够访问所有交互元素。 确保无障碍树涵盖所有可聚焦控件。可交互的自定义 RealityKit 实体必须注册到无障碍层级中。

ACC-03：支持指针控制和切换控制等替代方式。 并非所有用户都能使用眼动追踪和手指捏合。确保应用也能通过头部指针、切换控制或键盘导航等替代输入方式完整导航。

ACC-04：遵循“减少动态效果”设置。 启用“减少动态效果”时，必须禁用或减少空间动画、沉浸式转场和视差效果。空间环境中的突然运动可能导致方向感混乱。

@Environment(\.accessibilityReduceMotion) var reduceMotion

var body: some View {
    Model3D(named: "SceneObject")
        .rotation3DEffect(reduceMotion ? .zero : rotation, axis: (0, 1, 0))
}

ACC-05：响应“粗体文本”设置。 用户启用“粗体文本”时，visionOS 中自定义渲染的文本必须随之调整。SwiftUI 动态字体样式会自动处理此设置；自定义渲染必须检查 UIAccessibility.isBoldTextEnabled，或使用 @Environment(\.legibilityWeight) 检测并应用更粗的字重。

ACC-06：响应“增加对比度”设置。 用户启用“增加对比度”时，自定义颜色必须提供更高对比度的变体。在 SwiftUI 中使用 @Environment(\.colorSchemeContrast) 检测 .increased，并为玻璃材质或环境背景上的文本和 UI 元素替换为对比度更高的颜色值。

---

评估清单

使用此清单评估 visionOS 设计或实现。

空间布局

• 主要内容居中显示在前方视野中
• 内容放置在舒适的距离（窗口为 1-2m）
• 用户身后不放置任何内容
• 尊重个人空间（距离不近于约 0.5m）
• 有意义地利用 Z 轴深度构建层级
• 多个窗口呈弧形排列，而非堆叠
• 内容锚定于世界空间，而非锁定在头部

眼动与手部输入

• 所有交互都支持注视并捏合
• 所有交互目标均 >= 60pt
• 所有交互元素都显示悬停状态
• 近距离物体支持直接触摸
• 不将注视追踪用于内容或分析目的
• 自定义手势简单且易于发现
• 无需持续抬手

窗口

• 默认背景使用玻璃材质
• 显示标准窗口栏和关闭按钮
• 标签栏放置为前置装饰栏
• 工具栏放置为底部装饰栏
• 布局适配不同窗口尺寸
• 内容针对悬浮于空间中的场景进行设计

体积

• 内容位于体积边界内
• 从所有视角观看时，内容都显示正常
• 无需特定的观看位置
• 缩放比例适合内容和使用场景

沉浸式空间

• App 在共享空间中启动
• 沉浸感逐步增强
• 始终提供明确的退出路径
• 在安全需要时保留透视画面
• 不同沉浸级别之间的过渡平滑
• 不对房间大小或布局作任何假设

材质与深度

• UI 表面使用系统玻璃材质
• 材质分层营造深度层级
• 文本使用鲜明效果，确保在玻璃上清晰易读
• 阴影和高光体现高度
• 共享空间中不使用完全不透明的表面（媒体除外）

装饰栏

• 控件作为装饰栏附加，而非内嵌
• 主要操作放置在底部装饰栏
• 导航放置在前置装饰栏
• 装饰栏向外延伸，不覆盖内容
• 使用标准装饰栏样式

辅助功能

• 遵循粗体文本偏好（SwiftUI 会自动处理；自定义文本需检查 legibilityWeight 或 UIAccessibility.isBoldTextEnabled）
• 遵循增强对比度偏好（自定义颜色通过 colorSchemeContrast 提供高对比度变体）
• 所有交互元素和 3D 对象都有有意义的辅助功能标签
• App 可通过头部指针或切换控制完全导航（不能仅依赖眼动与捏合）
• 启用减少动态效果时，禁用或减少空间动画和沉浸式过渡
• 交互式 RealityKit 实体已注册到辅助功能层级结构中

---

反模式

以下是 visionOS 设计中常见的错误，请避免。

反模式	问题	正确做法
锁定在头部的 UI	会导致晕动症，令人感到压抑	将 UI 锚定在世界空间
过小的点击目标	眼动追踪无法可靠地定位小于 60pt 的目标	交互目标至少为 60pt
没有悬停状态	用户无法判断哪些元素可交互	注视时始终显示高亮
共享空间中的不透明窗口	会在环境中形成视觉空洞	使用系统玻璃材质
强制完全沉浸	令人迷失方向，也会困住用户	从共享空间开始，逐步增强沉浸感
用户身后的内容	内容不可见，用户必须大幅转动身体	将内容保持在前方半球范围内
由注视驱动的内容	侵犯隐私，让人感觉受到监视	仅将注视用于系统定位
扁平的 3D 体积	从侧面看起来像纸板剪影	从所有观看角度进行设计
内联工具栏	浪费内容空间，违背惯例	使用装饰项放置控件
假设空间较小	在狭窄空间中无法正常使用	适应可用的物理空间
沉浸感突然变化	令人迷失方向，破坏临场感	通过动画实现渐进式过渡
长时间抬起手臂	几分钟内就会造成身体疲劳	设计时考虑双手自然垂放的姿势
自定义窗口装饰	破坏平台一致性	使用系统窗口控件
Z 轴冲突图层	画面闪烁，层级不明确	使用有意设置的深度偏移