想掌握Vision Pro空间设计？先掌握这12个基础概念！

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

编者按：近期 VR 和 AR 相关的公司频繁地拿到高额的投资，足见 Vision Pro 整个行业的推动效果。今天的这篇文章是系列文章的第一篇，如果要针对 Vision Pro 进行设计，需要知道的相关的 12 个关键的设计概念。文章来自设计师 Hajira 的搜集整理，以下为正文。

虽然苹果的 Vision Pro 明年才会正式开卖，但是随着开发与设计文档的公开，持续的关注就没有停过。整个领域正在蓬勃发展，对于多数设计师而言，Vision Pro 所涉及到的用户体验和设计规则和以往有着根本性的区别，从基础知识开始学习和理解个领域是非常合理的。

「空间设计指的是在 3D 的空间环境下进行用户界面和体验设计，提供更加身临其境和直观的方式与数字内容交互。」

在开始学习规范之前，有必要先弄清楚涉及的 Vision Pro 的 12 个核心概念。

更多Vision Pro 干货：

5000字干货！Apple Vision Pro 空间设计基本原则拆解

AR 设计，是基于已有设计基础的一次设计升维，在短短 20 分钟的官方视频中，给出了五个基本空间设计原则：熟悉感、以人为中心、空间维度、沉浸感、真实可信。

1、窗口（Windows）

• 窗口作为承载内容的容器，可以显示 2D 和 3D 的内容。
• 窗口可以单独存在也可以多窗口同时操作，并且窗口的比例可以做任意调整。

单窗口

多窗口

2、体块（Volumes）

• 可以从任何角度随意查看的 3D 内容和对象就是体块。比如在线购买商品之前，可以在电商网站上直接多角度查看商品的细节，了解它的整体外观。

• 对于体块类的内容和对象，并不会在它的周围显示窗口和框架。

3D 的体块对象，可以放置在 2D 的窗口旁边

3、配饰（Ornaments）

• 配饰是一个用来承载和窗口相关的操作控件和信息的
• 配饰可以是工具栏、选项卡栏，也可以是视频播放组件这与的控件载体。比如，当视频在窗口中播放的时候，控制播放的暂停、快进、后退等按钮，可以放置在配饰控件当中。

4、工具栏（Tool Bars）

• Vision Pro 中所提供的工具栏一般都是水平放置的，它们通常被放置于配饰控件当中，在三维空间当中，它们通常在Z轴方向上（垂直于窗口）更加靠前的位置。
• 工具栏承载常用的按钮控件，和当前窗口相关。

5、标签栏（Tab Bars）

• 标签栏的选项卡都是垂直排列，浮动在窗口靠前的位置
• 标签栏的主要功能是提供导航功能，方便用户在应用的不同功能之间快速跳转切换。

6、侧边栏（Side Bars）

• 当选中侧边栏的选项卡的时候，侧边栏会向前移动，展开现实更多的附加的导航选项。
• 比如在上图当中，在侧边栏当中选择 Library 图标下的选项卡时，相应的选项卡下属的菜单会相应展开。

7、菜单和弹出框

• 菜单和弹出框可以拓展到窗口之外
• 被选中的按钮，按钮的背景变为白色，其中的图标变为黑色，这可以帮助用户了解和弹出框关联的是哪个按钮，而菜单也无需使用箭头标识关联图标的位置，更加优雅。
• 作为平台的通用规则，按钮的背景要避免使用白色，除非当它被选中的时候。

8、工作表（Sheets）

• 工作表是一个模态的悬停弹出表单窗口，它通常会向前悬浮于它的父窗口之前。当用户向界面请求特定的信息、交互的时候，工作表会弹出，呈现出相应的详细信息，或者承载简短的交互。比如当用户请求订阅音乐服务的时候。

9、空间（Spaces）

• 共享空间：默认的空间范畴，多个应用的窗口可以并排存在，用户可以将它们重新放置在任何自己喜欢的位置。
• 全空间：为了获得更加身临其境的体验，用户可以将单个窗口扩展到全空间，占据整个空间范畴，其他的 APP 会隐藏，只有被选中的这个程序会呈现。此外，在全空间还支持更强的沉浸式体验，比如打开一个全新虚拟世界的门户进入其中，沉浸于完全不同的场景中。

10、沉浸光谱（Immersion Spectrum）

• 窗口（可以位于共享空间和全空间）
• 全境视图（全空间）
• 环境（全空间）

APP 在 Vision Pro 内可以的呈现是动态的，并且可以丝滑地在不同的沉浸状态之间流畅地转换，而这也成就了光谱式的沉浸状态切换。不同的 APP 可以以窗口的形式，在共享空间内共存。如果它需要更多的空间，那么它可以隐藏其他 APP，它可以独占尽可能多的空间。默认情况下，窗口会在共享空间模式下打开，这是沉浸度最低的状态，用户也可以轻松控制沉浸的程度。

在下面的范例当中，Keynote 在共享空间中以窗口模式打开，当需要播放幻灯片时，它会切换到全空间模式，并且默认情况下，会调低环境光，让目光尽可能集中在幻灯片内容上。

调光是一种增加内容和环境对比度的有效技巧，无需将用户带出环境即可创造出更高的沉浸度。

在排练演讲的时候，周围可以形成一个舞台环境，让人沉浸在这样的环境中。像这样的沉浸式的体验需要更大的空间，这个时候唯有 Keynote 位于画面当中，而其他的 APP 则被隐藏起来了。

下面显示的案例则是照片库，当你浏览器照片的时候，周围的环境会变暗，以这种聚焦而栩栩如生的方式浏览回忆是非常神奇的。当查看全景照片的时候，它会以全空间的模式展开，让人身临其境感知到拍摄时的场景。

11、通透（Passthrough）

• 通透功能让用户在佩戴 Vision Pro 的时候，能够通过设备外部的摄像头，实时看到周围的物理环境。
• 转动数字表冠能够调整通透的程度，改变周围环境可见的范畴大小，从而控制整体的沉浸感。

• 增加通透度，能够让真实环境的可见程度标高，减少通透度，能够带来更强的沉浸感。

12、过渡和微妙的动画

• 设计平滑、可预测的过渡，可以增加不同体验状态之间的连续性。
• 与现实世界有效地融合：当用户准备进入一个全新的沉浸空间场景的时候，周围的物理环境逐渐淡出，请确保 APP 使用柔和微妙的边缘动画，避免使用突兀的过渡，让用户尽量专注于内容本身。
• 最鼓舞人心的经历能够让人感觉充满活力，而微妙的动画则能够给整个场景注入活力。

还有很多东西值得探索。下一篇文章，将会详细探索用户使用手和眼睛在空间中的交互。