从7个方面，总结 Vision Pro UI 设计基础

编者按：近期 VR 和 AR 相关的公司频繁地拿到高额的投资，足见 Vision Pro 整个行业的推动效果。今天的这篇文章是系列文章的第三篇，如果要针对 Vision Pro 进行设计，UI和排版的视觉设计需要遵循以下规则。文章来自设计师 Hajira 的搜集整理，以下是系列文章的上2篇：

以下为正文。

这篇文章重点介绍了如何使用出色的 UI 设计来创建有突破性的空间计算 APP。

APP 图标

APP 图标应该是三位立体的，层与层之间要有视觉纵深，当用户使用目光锁定查看的时候，它们会膨胀展开细节。

如何创建 APP 图标

所有的 APP 的图标最多有 3 个平面层，一个背景层和两个前景层。每个层都使用一个方形的图像，大小为 1024 x 1024 px，并且两个前景层都必须是带有透明底的图片。

然后所有的图层都使用圆形的剪切蒙版来约束轮廓。当所有的图层都匹配好了在一起的时候，会自动添加玻璃图层效果，以及相应的视觉纵深、镜面高光和对应的阴影，同时，所有的图层都会自动对齐居中。

材质

Vision Pro 的窗口界面采用了一种全新的视觉语言，采用的是类玻璃材质的视觉风格，可以适应不同的光照条件。空间平台没有明显的浅色和深色的设计，相反，当窗口界面分别被置于深色和浅色的背景下的时候，玻璃材质加持下的用户界面会自然地适配环境，变得更亮或者更暗。

窗口界面存在于空间当中，就像周围环境得一部分，界面内容被放置在虚拟得窗口内，以便用户可以轻松地浏览内容。

设计熟悉的元素和窗口界面

空间计算 APP 中的界面设计必须和通常的 2D  APP 界面类似，这样易于识别，具有熟悉感。

在下面的示例当中，音乐类空间 APP 的视觉元素和普通的音乐类应用的视觉设计是高度相似的。

2D 的应用和 空间应用在设计上的相似之处

如何设计清晰易读的窗口界面

为了保持 APP 不同界面元素组件之间的对比度，请尽量使用深浅搭配，在浅色的背景上承载深色的内容，或者在深色的背景上放置浅色的元素。

比如，在下面的音乐 APP 上，窗口界面使用的浅色，那么其上的侧边栏就使用相对更深的颜色，确保整体的对比度，而侧边栏顶部的按钮菜单，则使用的是更浅的颜色，这样可以引起用户对于这一元素的关注。而添加的诸如输入框、UI 小组件的时候，可以使用更暗的色调，来确保对比度。

使用白色的文本和符号，确保它们始终清晰可见，如果必须使用色彩，也最好只在背景层中使用颜色，而文本和图标依然使用白色，确保色彩的对比度。使用的颜色也尽量使用系统给定的配色。

在下面的示例当中，由于文本使用白色，并且搭配了浅色的按钮，所以最好的处理机制，因此最好是在这些区域后面添加一个深色的底，增加对比度。

参考下方的范例，避免使用浅色的元素叠加在一起，会降低整体的易读性，降低对比度。

字体版式

SF Pro 是 visionOS 中的系统默认字体，文本默认使用白色。

SF Pro 是一款动态字体，visionOS 使用当中相对更粗的字体应用到正文和标题里。

比如在正文中使用 medium 替代 regular 的粗细，在标题当中使用 bold 替代 semi-bold，这样可以保证文本清晰。

此外，在 visionOS 当中还引入了超大标题1和超大标题2 两个更大的字号，用于超宽的布局。

使用 2D 字体提高可读性，避免使用 3D 文本，因为 3D 文本难以阅读。

Vibrancy

注：Vibrancy 在英文中是通常被翻译为「活力、精力、元气」

Vibrancy 这一特性是保持整个视觉系统易读性的最重要细节之一，考虑到整个空间环境一直在不断变化，Vibrancy 加持下的文本能够随着环境变化而持续更新，确保始终清晰易读。在下方的示例当中，可以看到 Vibrancy 打开和关闭时的显示差异。

注意，Vibrancy 有3种等级，分别为 一级、二级和三级。可以将主要文本设置为一级，将辅助的解释性文本和字幕设置为 二级。

在下一篇文章当中，我们将会探讨的主题是，如何合理地调整 UI 元素的大小和空间关系。