visionOS——空间设计（Spatial Design）: 沉浸式体验的原则与指南

在本文中，我们将探索苹果新的空间设计操作系统背后的用户体验原则。

注：本文中所用到的空间设计均由 Spatial Design 翻译而来。

空间设计：为用户而设计

为了确保在我们使用这种技术设计的平台上有一个平稳的用户体验，在创新和熟悉之间取得平衡是至关重要的。

用户已经很熟悉的元素，如侧边栏、标签和搜索字段，需要设计成用户熟悉的样式，减少用户的学习成本。

空间设计：设计Windows

在空间操作系统中，Windows 采用了新的可视化语言，增强了用户体验。

毛玻璃背景可以通过透明度感知后面的空间，给用户一种真实空间中浮动窗口的感觉。

此外，对于窗口管理，还有 UI 组件允许用户：

● 移动

● 关闭

● 调整大小

空间设计：窗口尺寸和可扩展性

Windows可以适应不同的尺寸，且具有高度的灵活性和可扩展性。

用户可以选择自己想要的尺寸并完全操控它。

然而，用户体验设计师应该根据正在查看的内容设置标准尺寸。

例如，Safari 上的网站应该在垂直方向的窗口中打开，因为用户习惯于垂直使用网页内容。而Keynote或PPT应该采用更水平的窗口。

空间设计：Windows 中的控制管理

根据苹果的空间设计技术，窗口选项和命令应该设计在窗口本身之外。

空间设计：使用像素来适应窗口

在空间设计中，将界面适应于不同的屏幕是至关重要的。

苹果在设计中引入了像素的概念作为标准测量单位，允许界面元素根据用户距离进行调整和缩放。用户体验设计师可以确保任何距离的可读性和可用性，创建一致的用户体验。

在基于空间设计用户体验的应用程序设计中，我们必须考虑以下与用户相关的地方:

 ● 用户周围的环境

 ● 眼睛和手的交互 

● 人机工程学 

例如，界面的设计应该允许用户从不同的位置查看内容，例如躺着或坐着。

考虑到基本的人机工程学原理，界面不应设计得太靠近用户或位于用户后面。

苹果的指南还涉及最小化的移动。

空间设计指南建议允许最小的移动，甚至重新定位。用户可能需要更换房间或移动并转向房间的其他部分。在这种情况下，可以通过在查看器上按一个按钮来重置中央视图。

6.空间设计：空间、深度和比例 

空间管理：指南 

关于空间管理，苹果已经研究了使两种类型的环境共存的最佳方法：

● 数字环境，如网站、窗口、音乐应用等 

● 真实环境，如墙壁、吊灯、沙发、椅子等

虽然展示来自真实环境的元素可以为用户提供与现实的连接感，但也可能分散注意力，阻碍放松。

解决方案是一个混合方案，考虑到两种情况：

● 主动交互动作

● 被动交互动作

对于主动交互动作，例如移动窗口或放置元素和微小移动，可以使用透明度来显示两个环境。

在上图的中，用户将窗口拖动到右侧。

像椅子这样的真实元素在这个活动操作期间是可见的，因为当移动窗口时，窗口具有透明属性。

当窗口被释放并且所需的视频开始播放时，透明度将完全消除，为用户提供最大的沉浸感。

而在被动交互动作阶段，用户放松，他们的动作很小甚至是静止不动的。

在这种情况下，空间设计指南建议用户使用耳机上的按钮选择沉浸程度。

在上图中，背景中的真实元素仍然可见，而在下图中，背景已被隐藏，并且已经过渡到完全沉浸。

深度控制：指南

2D和3D体现在界面上最大的差别在于深度（depth）。在设计周围空间环境中的用户体验时，有必要使用深度设计来避免创建太大而繁琐的UI。

通过深度设计，即使在远离用户眼睛的环境中，也可以创建层次结构并专注于内容。

深度显着影响我们对空间物体的感知。

在下图中，我们可以看到视频控制元素（可以调整、暂停、快进等声音）的位置比视频本身更靠近用户，从而保持了画面比例。

如果上图中的操作区被放置在视频中，它会更大并且对用户来说更不可用。

另一个可用于实现深度的 UI 元素是光照和阴影。例如，在观看视频时，您可以看到上下反射的灯光和阴影，从而营造出令用户愉悦的沉浸感。

空间设计：沉浸感

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

根据苹果的空间设计准则设计用户体验，可以让我们创建吸引用户注意力的应用程序，同时尊重周围的物理环境，从共享空间窗口到全屏体验。

这样，我们可以创建与现实融为一体的数字体验。

为了确保用户保持参与感，引导他们在沉浸式体验中的注意力是至关重要的。

推荐的引导注意力的技巧包括：

● 运动

● 动画

● 空间音频

● 以及对物料的谨慎使用

空间设计：设计用户界面

在这个部分，我们将根据苹果的空间设计原则讨论用户界面设计。

开发的视觉语言将一致性与熟悉感相结合，适应沉浸式和空间体验。

有五个基础：

●应用图标

●材质

●物料

●饱和度

●颜色

空间设计用户界面：应用图标

通过空间设计，苹果将主屏幕图标的概念提升到更加逼真和立体的水平。

当用户查看某一个图标时，系统通过添加镜面反射和阴影来强调这种效果，从而在图层之间体现纵深感。

应用图标：多图层

对于空间设计中的图标，建议使用多个图层来实现3D效果。

每个应用程序图标最多可以包含三层：

背景

最多两层前层。

在方形背景图上设计图形icon，并使图形居中以获得最佳视觉吸引力。

系统将自动应用圆形裁剪并以 3D 形式渲染它们。

不建议在图层上使用透明度。

空间设计UI：毛玻璃效果

在设计空间界面时，考虑所使用的材料至关重要。

应用程序应适应不同的照明条件，并易于在各种环境中定位和查看。

毛玻璃材质非常适合这种用途，因为它具有视觉吸引力和适应性。它与物理世界无缝衔接，让周围环境的光线与虚拟内容进行交互。

即使是黑暗效果，例如夜间光线昏暗的房间，毛玻璃效果也是最佳的视觉形式。

使用毛玻璃效果，可以创建轻量级且视觉上感知更沉浸的界面，营造纵深感和现实感。

需要考虑的一项准则是在浅色层和深色层之间交替。

例如，在此界面中，正确的做法是在浅色图层之上使用深色图层来突出显示元素，并在视觉上像卡片设计一样。

将一个浅色图层放在另一个浅色图层上等未经处理的效果，在对比度和视觉可访问性方面效果不佳。

空间设计UI：字体

在我们的视觉和用户界面设计课程中所学到的内容中，文字在界面中起着至关重要的作用，应该具备可访问性、易读性，并能够适应不同的情况。

这些原则同样适用于空间设计，但设计技巧建议稍微增加字体的粗细。

在iOS中，建议在正文元素中使用“regular”字体类型，在标题中使用“semibold”字体类型。而在空间设计中，建议增加字体的粗细：

·正文使用中等粗细的字体；

·标题使用粗体字体。

空间设计UI：饱和度

饱和度是保持可读性的另一个重要元素。

通过饱和度，我们可以照亮前景内容并动态适应背景变化，确保文本保持清晰易读。

Apple 使用不同级别的饱和度：一级、二级、三级等。

空间设计UI：颜色

还应重点考虑颜色如何使用。

除了可访问性原理，对于空间设计，我们需要谨慎对待对比度，特别是在使用玻璃等非平坦背景时。

如果我们想使用颜色，建议将它们应用于整个元素，而不仅仅是文本。否则，强烈建议使用白色文本和图标。

空间设计UI：布局

为了在空间设计中创建符合人体工程学的布局，必须考虑使用者的舒适性和安全性。

为了实现这个目标，我们当然可以记住我们之前看到的关于窗口设计和图标间距的规则，同时考虑用户的视野、眼睛和脖子的运动，目的是在设计阶段将内容定位在他们的视野范围内。

空间设计指导方针更喜欢更广泛的元素和集中的信息。

关于交互式元素定位，确保它们有至少60个像素的选择区域。即使在视觉上较小的元素也可以通过在它们周围添加足够的空间来满足这一要求。

最后，利用视觉焦点来指示 UI 组件的交互性，并考虑悬停效果的填充。

空间设计: 输入

在空间界面中，人们通过眼睛、手和声音进行交互。

也有可能在“空间”内创建键盘，并使用手指打字，就好像它是真实的。

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

理解输入模式对于设计直观体验是至关重要的。

通过使用系统组件，您可以快速创建对用户操作作出平稳响应的接口。

至于导航元素或选项，最好使用一个没有边框或背景的简单设计，因为效果是通过用户的眼睛或选择框架添加的。

对于较大的类似窗口的元素，这些装饰应该显示在窗口的边缘(例如底部、侧面或顶部)。

在这个“播放器”栏的例子中，建议将其放置在被控制的主窗口上方20像素的位置。

空间设计: 眼睛和手

空间设计引入了与用户界面交互的新方式,

利用眼睛和手。通过空间设计，用户可以通过查看 UI 元素和使用手势轻松地控制他们的设备。这使得用户体验更加个性化、舒适和精确。

适配眼睛的设计

眼睛在空间体验中起着基础性的作用，是空间定位的主要机制。为了确保舒适的交互，将 UI 内容放置在用户的视野中是至关重要的，要注意中心位置。

可以将外围区域保留给使用频率较低的内容，例如辅助操作，同时保持主要内容易于访问和居中。

在空间设计中也应该考虑深度。将交互式内容维护在一致的深度上，可以轻松地在 UI 元素之间进行转换。通过使用微妙的深度变化，设计师可以有效地传达层级，同时减少眼睛疲劳。

为了优化眼球定位，设计师可以利用圆形的形状，如圆形和圆形矩形，这自然引导注意力到中心。避免运用尖锐的方形，会导致眼睛的注意力被四个直角分散。

此外，元素和文本之间的充足间距提高了视觉精度和可用性。

正如前面提到的，维持一个最小的目标面积为60个像素点的眼睛为基础的互动是至关重要的。该系统提供的标准组件方便了定位，但是在设计定制元素时，坚持尺寸指南是至关重要的。

眼睛的交互可以通过微妙的悬停效果来增强，这表明用户的凝视正在驱动交互。悬停效果应该是谨慎的，并与内容协调，添加到 UI 元素的响应。

适配手的设计

手是另一种与空间输入交互方式。

手势应该是直观和自然的。识别常见的手势，如手指缩放或拖动移动，使用户感到舒适，并迅速上手学习并互动。

元素尺寸和间距必须考虑到用户手的大小来设计。太小的元素会很难交互到，而太大的元素会让人难以触及 UI 界面上的某个特定区域。

测试和迭代是确定最佳单元尺寸的关键。

空间设计最令人兴奋的体验之一就是眼-手交互的结合。例如，在这个屏幕上，用户可以在一个窗口中查看图像中的特定点，并使用他们的手只放大选中的区域。

文章参考：

 Apple Developers

图片来源：Apple Developers