作为 UI 或 UX 设计师，迈向 VR 的第一步很难。我知道，因为我们也经历过，所以不要害怕！在这篇文章中，我将分享 VR 界面的设计流程，希望为你打开 VR 设计的大门。你不需要成为专家，只需将你的设计技能应用到这个新领域即可。

目前有哪些类型的虚拟现实应用程序（VR 应用程序）？

一般来说，从设计师的角度来看，VR应用程序由两类控制组成：环境和界面。

环境：可以理解为戴上VR头盔之后进入的世界——可能是虚拟的星际世界，也可能是坐过山车时看到的风景。

界面：它是一组用户交互元素，用户通过它们浏览环境并控制其体验。所有 VR 应用都可以根据这两个维度的复杂性来定义。

集中在第二象限（环境复杂，界面简单）的应用大多是模拟器，比如上面提到的过山车体验，你在滑行的同时会一直处于这个环境中。

三星的 Gear VR 主屏幕是其对立象限中丰富界面和简单环境的一个很好的例子。

设计地面、风景等虚拟环境需要设计师熟练使用3D建模工具，将元素绘制得生动逼真。这对很多UI和UX设计师来说有点难，而VR界面设计对他们来说是一个更好的选择，因为他们可以发挥自己的技能。

我们的第一个 VR 界面是为《The》设计的，与一家 VR 产品工作室合作。我们负责设计，也负责研发。

在介绍VR界面设计的具体细节之前，我们先以《The》为例，讲解一下VR app的设计方法。《The》可以在网站下载。

VR UI 设计流程

虽然大多数设计师可能对移动界面设计流程比较熟悉，但对VR界面设计流程却不太熟悉。当我们接到一个VR界面设计的项目时，我们第一步就是设计一套工作流程。

相同的旧流程，新的领域

当我们第一次使用三星的 Gear VR 时，我们发现它与传统的移动应用程序类似。它们的工作原理相同：用户通过与界面交互来浏览页面。这是一个重要的观点，虽然这里只是简要提到，但一定要牢记。

由于 VR 与传统应用界面相似，设计师花费多年时间学习和掌握的传统 UI 经验不会被浪费，也可以在 VR 领域重用。事实上，你在 VR 应用设计方面比你想象的要好！

在讲解VR界面设计流程之前，我们先回顾一下传统移动界面的设计流程。

步骤 1：线框

首先，通过快速多次迭代定义交互和整体布局。

第 2 步：视觉设计

此阶段设计风格和交互方式已经确定，将品牌风格与线框图相结合，经过精心设计得到美观的界面。

步骤 3：流程图

为了展示页面之间的交互流程，我们会用线把页面连接起来，称之为流程图。流程图将作为程序员在开发过程中的主要参考。

那么，我们如何将传统的设计流程应用于 VR 设计呢？

初始设置画布大小

我们花了几周时间才确定 VR 设计所需的画布尺寸。在设计移动应用时，画布尺寸由设备尺寸决定：移动设备为 1334×750 像素，桌面设备为 1280×720 像素。

要将您的移动应用程序设计流程应用于 VR，您必须首先确定合适的画布尺寸。

下图看起来就像一个 360 度的环境被压平成一个平面，这种表示形式称为等边投影。在 3D 虚拟环境中，这些投影环绕着一个球体，以模拟现实世界。

水平方向 360 度、垂直方向 180 度代表投影的整个宽度。我们可以用这个来定义画布的大小：3600×1800 像素。

照顾这么大的画布很困难。由于我们主要绘制 VR 界面，因此可以只关注画布的一部分。基于 Mike Alger 早期对视觉舒适区的研究，我们可以隔离出有用的界面。用户感兴趣的区域集中在 360 度环境区域的九分之一，该区域位于等距矩形图像的中心，大小为 1200×600 像素。

得出结论：

“360 视图”画布：3600 × 1800 像素

“UI 透视”画布：1200 × 600 像素

测试

一个屏幕使用两个视角是为了测试。“UI 视角”画布让我们可以专注于设计本身，制作流程图更加方便。同时，“360 视角”画布用于预览 VR 界面。为了获得真实的比例感，需要使用 VR 头盔来测试界面。

在正式演练前，首先了解一下需要用到的工具：

：我们将使用 来设计界面和交互流程。如果您没有，可以下载试用版。 是首选的界面设计软件，但如果您更习惯使用 或任何其他软件，也可以使用。

GoPro VR ：这是GoPro提供的360度界面查看器，免费。它可以用来预览设计并进行测试。

Rift：将 Rift 连接到 GoPro 播放器进行测试。

实践练习

在本节中，我们将花费不超过五分钟的时间来练习VR界面设计过程。

下载包链接

1. 设置“360 视图”画布

首先，创建一个 360 度画布。打开，创建一个新文件，然后创建一个 3600×1800 像素的画布。导入 .jpg 文件并将其放在画布中间。如果您想使用自己的素材，请确保背景图像的比例为 2:1，并将其大小调整为 3600×1800 像素。

2. 设置“UI 透视”画布

上面提到，“UI 透视”画布只选择了“360 透视”的一部分，只关注 VR 界面设计。因此sketch 试用，我们在 360 旁边新建一个 1200×600 像素的画布。然后，将 360 透视背景复制到新画布上，注意要放在新画布的中央，不要调整大小。我们希望保留背景的裁剪版本。

3. 设计界面

我们将在“UI 透视”画布上设计我们的界面。为了让练习更清晰直观，我们添加了一排卡片。如果你想偷懒，也可以将素材包中名为 tile.png 的文件直接拖到画布中央。复制同一行中的三个图块文件，然后将 -logo.png 文件拖出并放置在图块上方。

4. 合并两个画布并导出

将“UI ”画布放置在“360”画布的中间。请注意，“UI”层应位于“360”画布上方。以 png 格式导出“360”画布。

5.用VR设备测试效果

将刚刚导出的 png 文件拖到 GoPro VR 播放器窗口中，然后使用鼠标拖动图像进行预览。我们完成了这一步！非常简单！如果您在计算机上安装了 Rift，GoPro VR 播放器将检测到它并允许您使用 VR 设备预览图像。根据您计算机的配置，您可以处理 MacOS 中的显示设置。

技术因素1.分辨率低

有人说 VR 头戴设备的分辨率很差，这并不完全正确：它的分辨率相当于手机的分辨率。只不过由于设备距离眼睛 5 厘米，显示效果看起来不太清晰。

为了获得清晰的VR体验，我们需要为每只眼睛显示8K分辨率，相当于15360×7680像素的显示屏。目前的技术还无法做到这一点，但我相信最终会实现。

2. 文本可读性

由于分辨率的原因，所有漂亮、清晰的用户界面都会出现像素化。这意味着文本将难以阅读，直线上的元素将出现锯齿。在设计过程中，尽量避免使用大段文本和过于详细的 UI 元素。

收尾工作1.流程图

流程图这种在移动端界面常用的绘制方式，同样可以运用在VR界面中，将“UI视角”的界面连成流程图，对于开发者了解我们设计的整体架构非常有用。

2. 动效设计

制作漂亮的界面是一回事，展示它是如何工作的又是另一回事。让我们再次使用 2D 视角。设计界面后，使用 After 或显示动画。虽然这不是 3D 体验sketch 试用，但它可以作为开发团队的指南，使客户能够在项目早期了解我们的想法。

你可能会想：“2D 动画很酷，但 VR 会比它复杂得多。”没错。但问题是，我们可以在多大程度上将当前的 UI/UX 设计应用于这种新媒体？

VR UI设计能走多远？1.虚拟与现实的距离

有些 VR 体验严重依赖虚拟环境，而传统的顶层界面并不是用户使用 VR 的最佳方式。在这种情况下，我们希望用户直接与环境本身进行交互。

想象一下，你正在为一家高端旅行社开发一款应用。你想以最生动的方式将用户引导到各种潜在的度假目的地。于是你邀请用户戴上耳机，在你宽敞的办公室里开始体验。要从你的办公室切换到风景区，用户需要先选择他们想去的地方。他们可能会拿起一本旅游杂志，快速浏览，直到某一页吸引他们。或者你的办公桌上可能有一些有趣的东西，选择不同的东西可以把用户带到不同的地方。

显然这是一件很酷的事情，但它也有一些缺点。要达到完整的效果，你需要更先进的 VR 耳机和控制器。此外，与之前已经有选项可供选择的移动界面相比，这一操作需要更多的开发资源。

2. 商业与创新之间的平衡

事实上，这些沉浸式体验对于大多数公司来说都不具备商业可行性。除非他们拥有像 Valve 等公司那样近乎无限的资源，否则开发上述体验的成本太高、风险太大、耗时太长。这样的体验可以生动地展示你处于媒体和技术的前沿，但推广你的产品并不容易。毕竟，可操作性很重要。

通常，当一种新形态出现时，先驱者（这个世界的创造者和创新者）会将其推向极致。随着时间的推移，经过更深入的学习和更多的投入，它将被用户广泛接受。随着 VR 可穿戴设备越来越受欢迎，更多公司会从中发现商机，将 VR 融入到与消费者的互动中。

目前，VR应用所使用的界面非常直观，与人们习惯的穿戴设备、手机、平板和电脑上的应用程序基本相同，使得VR对于大多数企业来说是一项可以承受的、值得的投资。

是时候登上 VR 设计火箭了！

希望这篇文章能让 VR 看起来不那么可怕，并激励您开始设计自己的 VR。

俗话说：独行者快，众行者远，我们想和你一起走得更远。在 ，我们相信每家公司最终都会有自己的 VR 应用，就像今天每家公司都有自己的移动网站一样。所以我们打造了这枚关于 VR 的“火箭”，希望全球设计师能够齐心协力，大胆探索未知领域。VR 应用越早实现商业价值，当前的生态系统就会越早进化。

作为电子产品设计师，我们接下来的挑战是设计更复杂的应用，并通过手柄提供更多类型的输入。为了解决这些问题，我们需要更高效的原型设计工具来快速轻松地创建和测试设计。我们的团队将继续跟进类似的早期尝试和新工具的开发，并在后续文章中撰写相关内容。

进入“中华网”官方微信()，回复“一部分”，告诉你一个减肥小秘诀。

如有侵权请联系删除！