Spatial Design空间设计: 8 条沉浸式体验设计原则和指南

本文我们探讨 Apple 推出的 Spatial Design 操作系统背后的用户体验原则。

我们正在一项新的技术平台上设计，为了确保这个平台依然拥有流畅的用户体验，其最为关键的要素还是取决于创新度和熟悉度之间的平衡关系。

首先，我们先设计用户最为熟悉的界面元素，例如侧边栏、标签栏和搜索栏，我们的目标就是让用户自由自在掌控导航并且能够快速的找到他们想要找的东西，就像他们早已习惯。

关键要点：保持与特定空间环境相适应的可识别性和用户友好界面

在空间操作系统中，视窗设计采用了一种全新的视觉语言，大大提升了用户体验。

在关键特性中，我们发现透明的 玻璃背景 能让用户感知后面的空间，给用户一种在真实空间里漂浮窗口的感觉。

对于视窗管理，还有各种组件可以让用户选择：

由元素和界面组件混合而成的互动方式，让界面体验更加流畅，更加吸引人。

视窗可以适应不同的尺寸，具有高度的灵活性和可伸缩性。

用户可以完全控制视窗的大小，选择他们想要的尺寸。

然而，用户体验设计师应该基于正在阅读的内容设置 标准尺寸。

举个例子，打开 Safari ，网站的弹窗应该是垂直方向的视窗，因为用户习惯从上到下查看网站内容。如果在 Keynote 或 Slides 上打开的幻灯片，则需要一个水平方向的视窗。

基于 Apple 的空间设计技术，视窗的选项和命令应该设计在视窗之外。

在空间设计中，让界面适配不同的屏幕非常重要。Apple 在设计中引入 pt 的概念作为标准测量单位，让界面元素基于用户的距离进行适配和缩放。

基于 pt 单位来设计，用户体验设计师们可以确保用户在任何距离下保持可阅读性和可用性，创造一致的用户体验。

当基于空间设计用户体验来设计应用时，我们必须考虑以下与用户相关的方面：

界面设计应该能让用户从不同的位置查看内容。（不管是躺着坐着）用户都可以看到界面内容。

考虑到基础人体工程学原则，界面不应该设计得离用户太近或设计在用户后面。

应该要想象一个视觉操作区域，在这个区域内不需要设计任何内容，并且在设计过程中应该设定基础距离。

空间设计指南建议移动的最小限度，或重新定位。用户可能需要换房间或者移动并转向所处空间的另一边。在这种场景下，用户可以通过按下查看器中的重置按钮来重制中心视图。

针对空间管理，Apple 研究出可以让 2 种环境共存的最佳方式：

向用户展示真实环境中的元素，虽然为用户提供一种与现实世界连接的熟悉感，但是，这些元素也可能分散用户的注意力，会让用户感到疲惫。

为此我们制定一个混合解决方案，考虑 2 种情景：

对于用户主动操作的交互，例如移动视窗或放置元素，微调位置，此时可以使用透明度来同时展示 2 种环境。

因为视窗在挪动的时候，有透明属性，所以真实元素（如椅子）在用户主动操作界面的过程中可见。

用户只要释放视窗，开始播放音乐，视窗的透明度会消失变实，为用户提供最大的沉浸感。

接下来我们聊一聊用户的消极情况，此时，用户很放松，他们操作很少，甚至没有操作。

在此情况下，空间设计指南建议能让用户通过头戴设备上的按钮，让用户选择沉浸等级。

在上张图片，背景的真实元素仍依稀可见；但在下张图，这些元素就被隐藏起来了，并且视窗过渡到完全沉浸式。

当设计周围空间环境中的用户体验时，有必要使用纵深技术，避免设计出又大又繁琐的 UI 界面。

通过这项技术，即使在远离用户视线的环境里，也可以创建层级结构，并聚焦内容。

纵深感对我们感知空间里的物品有着巨大的影响，我们应该将纵深感融入有效的设计之中。

在下面示例中，我们能看到，和视频本身相比，视频控制器离用户更近（能调整声音、视频的暂停和快进等），保持一定的比例。

如果视频控制器是放在视频界面里的，那么它会变得更大，对用户而言不实用。

另外还有一个可以实现纵深感的 UI 元素是灯光和阴影。比如我们在看视频的时候，就可以看到上下反射出的屏幕光和投影，创造出一种让用户愉悦的纵深感。

沉浸式体验代表着空间设计的巅峰。

使用 Apple 的空间设计指南设计产品，可以让我们设计出沉浸式体验，从共享空间视窗到全屏都能吸引用户注意力，同时用户还能关注到周边真实环境。

通过这种方式，我们可以创造一个和真实环境混合沉浸式数字体验。

为了让用户能够保持积极的参与度，在沉浸式体验中，我们必须引导用户集中注意力。

引导注意力的技巧包括：

在本章节，我们将根据 Apple 的空间设计原则讨论 UI 设计。

Apple 的视觉语言结合连贯性和熟悉度，适应沉浸式的空间体验。

视觉语言包含 5 项基础原则：

通过空间设计，Apple 将主屏幕（主页桌面）图标的概念提升到更逼真，更立体的水平。

当用户注视具体的图标时，系统会通过镜面反射和阴影来突出该图标的深度层级。

空间设计，推荐使用多图层实现三维效果。

每个应用图标最多由三个图层构成

将背景层设置为方形，为了获得最佳的视觉效果，记住保持图形的视觉居中。

系统会自动应用圆形蒙版，并将图标渲染成 3D 样式 。另外在图层上也不建议使用不透明度。

设计空间界面时，考虑使用的材质非常关键。

应用产品需要适应不同的灯光环境，并在不同的环境下容易定位和查看。

玻璃材质因为视觉效果好且适应性强，非常适合上述用途。它可以悄无声息地和现实物理世界融为一体，让周围环境光和虚拟内容进行交互。

即使在深色的效果下，例如在夜晚昏暗灯光的房间，玻璃材质的效果也是最佳的。

使用玻璃材质，你可以创建简而美的界面，从而提供一种深度和具体感。

考虑一条设计指南：如何设计浅色和深色图层之间叠加。

举个例子，如下图界面，视觉表达类似卡片设计，在浅色层之上使用深色层来突出显示元素，这是一种正确的做法。

在视觉排版不变的情况下，如果在一个浅色层上再放一个浅色层，视觉对比变差了，内容的可读性也出现了问题。

正如我们在界面设计课程中所学的，本章节的内容在界面设计过程中起到至关重要的作用，内容的可访问性、可读性，能够适应不同的情况。

相同的原则也适用于空间设计，但是，在设计技巧层面，我们建议稍微增加厚度。

在 iOS 系统，原则建议正文使用“常规”，标题使用“中粗体”；然而，在空间设计中，就建议增加字重：

除此之外，为了提升可读性，增加行间距，并且针对宽版布局进行优化，并引入新的字符样式。

亮度是另一个保持可读性的重要方面。我们可以点亮前景内容并动态适应背景变化，确保前景的文本清晰易读。

Apple 不同层级亮度：一级、二级、三级等。

我们还应该要考虑色彩的使用。

所有基于网络的无障碍规则依旧适用，但在空间设计中，特别是在使用玻璃材质等非平面背景的时候，我们需要对所有的视觉对比保持警惕。

如果我们需要使用色彩，那么强烈建议应用在整体元素，而不只是应用在文本。否则，更推荐使用白色文本和图标。

创建一个符合人体工程学的布局，我们必须要考虑用户的舒适度和安全性。

为了达到这一目的，我们需要在设计阶段，将内容定位在用户视野范围内。首先我们要牢记之前关于窗口设计、图标间距等基础规则，还要考虑用户的视野、眼距以及颈部运动规律。

空间设计指南偏好更宽的元素和居中的信息。

确保用户可交互，选择热区至少预留 60pt 大小。即使，视觉上较小的元素，需要在四周加上足够的空间来达到可交互选择热区的基本标准。

最后，利用视觉焦点来暗示 UI 组件的可交互性，给悬停效果加一个背景填充。

在空间界面里，用户使用他们的眼睛、手和声音进行交互。

在空间中创造一个键盘，用户使用手指打字，就像在现实物理环境下一样。

当然，也可以连接蓝牙键盘或者触控板，正常书写和交互。

设计直观的体验必须要理解输入模式。

通过使用系统组件，你可以快速创建流畅的响应用户操作的界面。

对于装饰元素，例如导航元素或选项，建议使用无边框或无背景的简单设计，因为用户眼睛注视或其他交互方式选中时，才需要添加效果。

对于更大的元素（如视窗），这些装饰应放置在视窗的边缘（如底部、侧边或顶部）。

在下列的“播放器”栏例子中，建议将播放器栏放在比主控制窗口底部高 20pt 的位置。

熟悉诸如视窗、标签栏和侧边栏等组件，有助于我们设计用户体验，优化内容结构。

作为主要的定位机制，视觉焦点在空间设计中起到了重要的作用。为了确保舒适的交互，必须要把元素放置在用户视野内，并将最重要的内容放在最中间。

剩下的空间区域可以放不常用的内容（例如次级操作），确保主要内容居中，且容易被访问。

我们还要考虑空间纵深。保持同一纵深，让 UI 元素之间轻松过渡转化。通过细微的纵深变化有效展现信息层级，减轻用户眼部疲劳感。

为了有效利用视觉定位，设计师可以使用圆形，（例如圆形和圆角矩形）这些元素自然而然引导用户聚焦到中心区域。

另外，在元素和文本之间充足的间距可以增江眼睛定位的准确性和可用性。

就像我们之前提到的，保持至少 60pt 的定位热区对于以眼为基础的交互必不可少。即便系统提供的标准组件有助于轻松定位，但是在设计自定义元素时，遵守尺寸规范非常重要。

可以通过细微的悬停效果来加强眼部交互，标明用户的凝视正在推动交互。悬停的效果需要很谨慎、要和内容协调，从而加强对 UI 元素的响应能力。

手势是另一种强大的与空间输入交互的方式。

手势能实现直观的控制，可以带来流畅且吸引人的用户体验。

手势应该直观和自然。使用常见手势（比如捏住缩放或拖拽移动）可以让用户舒服并在快速学会交互。

设计组件和间距大小时，必须考虑到用户手的大小。元素太小还是太大，都会阻碍用户操作。

决定最佳的元素尺寸关键在于测试和迭代优化。

空间设计最令人激动的体验之一就是眼部手部交互的结合。下图例子中，在屏幕上用户可以在视窗图片上用视焦一个区域，同时，通过手势对这个区域进行放大缩小。