打牢基础！VR和AR应用的3个关键概念科普

本文已获得原作者Albert mauri aragonés 的翻译转载授权，根据原作者要求，这里放上他的Linkedin主页：https://www.linkedin.com/in/albert-mauri

原文地址：https://uxdesign.cc/3-key-concepts-for-vr-apps-bdd3ddc9e6aa

译者注：在文中，会多次提到一个工具 shapesXR，这是一个安装在 VR 眼镜里的设计原型工具，可以将设计稿、模型和场景放进工具里，在 VR 环境中亲自搭建一个 XR 原型。此工具已经成为译者日常设计工具之一，非常推荐 XR 设计者使用。后续，我会持续翻译该作者在 XR 领域里非常有用的文章，也会详细介绍这个工具。

更多VR干货：

以下是译文。

揭示未来 UI 的面纱

如果你已经是一名 UI/UX 设计师，你会更快地掌握这些概念。如果不是，建议你对 UI 设计基础和风格先有一个基本的了解后，再来看这篇文章，会有更好的理解。

VR 设计与手机和桌面应用设计大有不同，而这篇文章将讨论 VR UI 设计的三个基本概念：尺寸、高度和距离。

1. 尺寸：在 Figma 中，画布应该是什么尺寸?我的 UI 应该有多大？（其他设计工具都需要考虑这个问题，作者仅以 figma 为例）
2. 高度：应该在什么高度放置 UI？
3. 距离：距离如何影响 UI？

我将举例说明每个概念，并指导你如何在 Figma 中创建 VR UI。另外，我会展示如何使用 ShapesXR（XR 原型工具），直接在 VR 中测试。

以下面的登录界面案为例，我们将设计一个与用户相距 1 米的登录界面，并介绍相应的原则，相同的原则也适用于其他 VR 应用或游戏中的 2D 界面。

一、尺寸

Figma 中的画布

设计任何 UI 的第一步，是设置一个与设备屏幕大小相匹配的画布或框架。但是，当我们的“设备”是一个 360°的环境时，我们应该使用什么画布或框架呢？快速回答是 1920x1080 或 2304x1296，但这些只是设计过程中的参考，与设备本身没有直接关系。需要考虑的关键方面是我们可以利用多少画布来确保 UI 的可用性。

在 3D 领域，我们使用米或毫米，而不是像素。但是，如果你更习惯用像素，那也没问题。在 1 米的距离下，1 个像素相当于 1 毫米。以这个概念为基准你可以继续使用像素做单位来设计。我们会在“距离”部分更深入地探讨这个概念。

为了更好地了解我们在观察不同区域时需要移动眼睛或脖子的度数，我们加入一个角度网格。

在 Figma 画布中添加角度网格（关键概念！）

①舒适区 comfort zones

现在，让我们深入研究一下，究竟移动多少度会引起眼睛或脖子的不适。

舒适区的概念

舒适区指的是你可以无需大幅转动脖子观看的区域。任何超出此区域(30°)的 UI 界面都需要向用户弯曲或倾斜。（译者注：可以理解为市场上的曲面屏显示器，过宽的屏幕需要适当弯曲来保证观看舒适）

颈部舒适度极限

颈部舒适度极限指的是脖子转动到不舒服的角度。这个区域位于用户视野的最外围，超出此区域的任何内容都会超出用户的视野。

我强烈建议您利用 ShapesXR 来亲自测试和体验不同角度的舒适程度。这种亲身探索会让你对 VR 环境中用户舒适度有更好的理解。

UI 区域

根据眼部舒适度制定的 VR 登录界面

尺寸的界定已完成！

好的，现在我们已经对空间 UI 的原理、Figma 的画布大小，以及用户在看到 UI 时可能面临的问题有了深刻的理解。有了这些理解，你现在可以设计布局并探索 UI 组件的大小了。附录中的 Figma 文件提供了一些参考来帮你完成这个过程。

然而还有更多要考虑的，比如高度？是否应该将 UI 的中心放在用户的视线水平中心？答案是 NO，让我们深入探讨这个概念。

二、高度

好的，让我们简化一下。

我们需要将 UI 防止在略低于眼睛中心的位置。

居中的 UI 可能会感觉不舒服，因为人类自然倾向于稍微向下看。

尽管 Figma 在直接解决这个问题上可能选择有限，但它对于确保积极的用户体验至关重要。一定要在移交给开发人员时传达这一原则。

三、距离

针对不同距离进行设计

我们如何为不同的距离设计呢？不同距离下，界面尺寸会改变吗？答案是否定的。在 Figma 中，你只需要假设你现在设计的界面是距离用户 1m 远的大小，正如我们在上面的“尺寸”部分所讲到的：在 1 米距离下，1 像素等于 1 毫米。然后，如果我们要在 2 米远的地方放置我们的 UI，开发人员将其缩放 2 倍。同样，对于 0.5 米处的 UI，需要缩放 0.5 倍。但是，你在 Figma 中的设计保持不变，无论是针对 0.5 米、1 米还是 2 米。

我鼓励你利用 ShapesXR，亲身体验 VR 中不同距离的感觉。尽管它们占据相同的视觉空间，但会引发不同的感受。空间链接：link. 空间代码: 9r d9 d4 w6

（译者注：根据近大远小的原则，1m 处 1 倍大的 UI 和 2m 处 2 倍大的 UI，视觉上看起来是一样的，但仍会有一些距离感上的差异）

总结一下

总之，这些在 AR 和 VR 中的几个关键概念，将使您能够产生想法、建立设计模式并深入开发，以增强 XR 应用和游戏 UI 设计的一致性和可用性。最棒的是，你甚至不需要深入了解 Unity 等开发知识，即可开始尝试这些概念。这拉低了 VR 设计的门槛。但是，对 Unity 如何管理 UI 有一个基本的了解会是有利的，因为它可以与开发人员进行更好的沟通。

相关资源

①原型工具 ShapesXR

https://www.oculus.com/experiences/quest/3899112273551602/?store=quest&item_id=3899112273551602&r=1

②ShapesXR 范例链接

https://shapes.app/space/view/1701423b-7abc-4724-b97e-301a43dc7857/9rd9d4w6

③Shapes XR 中的 figma 文件

https://www.figma.com/community/file/1242434690291091636

欢迎关注作者的微信公众号：