如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

对于许多设计师来说，虚拟现实（VR）是一个全新且陌生的领域。过去几年中，我们目睹了虚拟现实硬件和软件的爆炸式增长。从体验性上看，虚拟现实既有小而简单的也有专业复杂的，整体体验差异很大。

作为 UX 或 UI 设计师，初次接触 VR 可能会有所畏惧，但不要害怕，在本文中，我们将分享一个设计 VR 应用程序的完整过程，我们希望您可以通过这个案例来开始自己的 VR 设计之旅。你不需要成为 VR 的专家；你只需要将你之前的设计技能应用到一个新领域。最终，经过大家的共同努力，我们定可以加速 VR 的发展以发挥它的全部潜力。

一、VR应用程序里有什么？

一般来说，从设计者的角度来看，VR 应用程序由两种类型的组件组成：环境和交互元素。

环境：您可以将环境视为您戴上 VR 头盔时所进入的整个世界 ， 比如你身处的虚拟星系或者驾驶过山车飞驰的乐园。

交互元素：界面上影响用户交互和操控体验的元素合集。

根据这两个组件的复杂性，所有 VR 应用程序都可以沿两个轴定位。

在左上象限中的 VR 应用有类似模拟器的东西，例如过山车的 VR 应用，这种应用具有完全成形的环境，但根本没有交互。你只是被锁在了车里。

在右下角的象限中，应用程序具有一个更好的界面，但比较少或没有3D环境。三星的 Gear VR 主屏就是一个很好的例子。

设计场所和景观等虚拟环境需要熟练使用3D建模工具，许多设计师平时无法接触到这些元素。但是，UX 和 UI 设计人员有很大的机会将他们已有的技能应用于设计虚拟现实的用户界面。

我们所做的第一个完整 VR 的 UI 设计是 The Economist 的应用程序，与 VR 制作工作室 Visualize 合作。我们做设计，Visualize 创建内容并开发应用程序。

我们在之后文章中将此应用作为一个工作示例，现在我们将介绍设计 VR 应用程序的方法，然后再介绍设计 VR 界面的细节。您可以从 Oculus 网站下载Gear VR 的 Economist 应用程序。

二、VR UI设计的第一步-回顾传统流程

尽管大多数设计师已经熟悉了设计移动应用程序的工作流程，但还不太清楚设计 VR 界面的流程。当面对第一个VR应用程序设计项目时，我们首先要做的是合乎逻辑。

传统工作流程到全新领域

当我们第一次使用三星的 Gear VR 时，我们注意到它与传统移动应用有很多相似之处。VR 应用程序与传统应用程序有着相同的工作流程：帮助用户与界面进行交互。

现在请记住。鉴于与传统应用的相似性，设计师花费数年时间改进的久经考验的移动应用工作流程不会浪费，这些流程仍然可用于制作 VR UI。这让你比你想象的更接近 VR！

在如何设计 VR 界面之前，让我们回过头来看看传统移动应用的设计过程。

1. 线框

首先，我们将进行快速迭代，定义交互和总体布局。

2. 视觉设计

在此阶段，功能和交互已经完成。我们把视觉规范与设计应用于线框图，并制作出漂亮的界面。

3. 设计文档

在这里，我们将屏幕组织成流程，绘制屏幕之间的链接并描述每个屏幕的交互。我们将此称为应用程序的设计文档，它将被用作开发人员的主要参考。

现在，我们如何将此工作流程应用于虚拟现实的设计当中呢？

三、开始VR UI设计

1. 画布的尺寸

最简单的问题可能也是最具挑战性的。面对360度的画布，人们可能很难知道从哪里开始。事实证明，UX 和 UI 设计者只需要关注整个空间的某个部分即可。

我们花了几周时间试图弄清楚什么样的画布尺寸适用于 VR 设计。当您使用移动应用程序时，画布大小取决于设备的大小：iPhone 6为1334×750像素，Android大约1280×720像素。

要将移动应用程序工作流应用于 VR UI，首先必须确定合适的画布大小。

以下是扁平化时360度环境的样子。这种视图叫做等角矩形投影。在3D虚拟环境中，这些投影围绕球体缠绕，以模仿现实世界。

整个投影的水平宽度是360度，垂直180度。我们可以用它来定义画布的像素大小：3600×1800。

使用这么大的尺寸可能是一个挑战。但因为我们主要对 VR 应用程序的界面设计感兴趣，所以我们可以专注于这个画布的一部分。

基于迈克·阿尔格（Mike Alger）对舒适观察区域的早期研究，我们可以找出一个合适的部分来展示界面。

感兴趣的区域占360度环境的九分之一。它位于图像的中心，大小为1200×600像素。

让我们总结一下：

「 360度视图 」：3600×1800像素

「 UI视图 」：1200×600像素

四、测试原型

「UI视图」画布有助于将我们的注意力集中在我们正在制作的界面上，并使设计流程变得更加容易。

同时也必须使用「360度视图」在 VR 环境中的预览界面。此外为了获得真实的比例感，使用 VR 头盔测试界面也是必要的。

△ 使用Avocode，您可以轻松直观地比较设计

五、设计工具

在开始之前，我们需要以下工具：

1. sketch

我们将使用 Sketch 来设计我们的界面和用户流程。如果您没有，可以下载试用版。Sketch 是我们首选的界面设计软件，但如果您使用 Photoshop 或其他任何软件更舒服，也没问题。

2. GoPro VR Player

GoPro VR Player 是一款360度内容查看器。它由 GoPro 提供，是免费的。我们将使用它来预览我们的设计。

3. Oculus Rift

Oculus Rift 连接到 GoPro VR 播放器，这将使我们能够测试我们的设计。

六、VR界面设计流程

在本节中，我们将介绍如何设计 VR 界面。我们将一起设计一个简单的界面，最多花费5分钟时间。

下载源文件：https://pan.baidu.com/s/1WUUwNLlTJkG82Hxdofaqzg  密码：09vt，其中包含预设的 UI 元素和背景图像。如果你想使用自己的设计文件，那也是可以的。

1. 设置「360度视图」

首先要做的事情，让我们创建360度视图的画布。在 Sketch 中打开一个新文档，并创建一个画板：3600×1800像素。

导入文件 background.jpg，并将其放在画布的中间。如果您使用自己的背景文件，请确保其比例为2：1，并将其大小调整为3600×1800像素。

2. 设置画板

如上所述，「UI view」是「360 view」的裁剪版本，我们仅关注 VR 界面。

我们创建一个新画板：1200×600像素。然后，复制画板到「360 view」中，并将其放在画板的中间。不要删除「360 view」画板，我们同时保留着两个画板，以后会用到它们。

3. 设计界面

我们将在「UI View」画布上设计我们的界面。我们会尽量简单一些，首先在视图上添加一些图块。您可以使用 tile.png 文件将其拖到 UI 视图的中间。

复制它，并创建一行三个图块。

使用 kickpush-logo.png 文件，并将其放在图块上方。

4. 合并画板

现在来看看有趣的东西。确保「UI view」画板位于左侧图层列表的「360view」画板上方。

将「UI view」画板拖动到「360 view」画板的中间。将「360 View」画板导出为 PNG；「UI view」将位于其上方。

5. 在VR中测试它

打开 GoPro VR Player，并将刚刚导出的「360 View」PNG 拖到窗口中。使用鼠标拖动图像以预览360度环境。

我们完成了！是不是很简单？

如果您的机器上安装了 Oculus Rift，则 GoPro VR 播放器应该可以检测到它并允许您使用 VR 设备预览图像。根据您的配置，您可能需要在 MacOS 中做一些显示设置。

七、VR设计中需要注意的因素

1. 低分辨率

VR 头盔的分辨率非常糟糕？这不完全正确，其实它相当于手机的分辨率。但是，考虑到设备距离您的眼睛5厘米，显示器看起来并不清晰。

为了获得清晰的 VR 体验，我们需要一个8K的显示屏，这是一个15,360×7680像素的显示屏。相信这种设备早晚会普及。

2. 文本可读性

由于显示器的分辨率较低，会导致所有精美的 UI 元素都会看起来像素化。这意味着，首先，文字难以阅读，其次，直线部分会出现锯齿。所以尽量避免使用大段文字和特别复杂的 UI 元素。

八、收尾工作

1. 设计文档

还记得我们的移动应用中的流程图吗？我们现在将这种做法也应用到 VR 界面。用我们已经做好的界面组织成一个易于理解的流程图，这非常有益于开发人员理解我们设计的应用程序的整体架构。

2. 动效设计

设计一个漂亮的 UI 是一回事，但让他动起来又是另外一回事了。我们决定以二维视角来处理它。

基于我们的 Sketch 文件，我们使用 Adobe After Effects 和 Principle 为界面设计动画。虽然输出的不是真实的3D体验，但它足以指导开发团队了，且能帮助我们的协作者在流程的早期阶段了解我们的愿景。

△ 你刚刚设计了第一个 VR UI。真棒！

我们知道你在想什么，「这很酷，但真实的 VR 应用程序会复杂的多。」是的，当然是。但重点在于我们可以在多大程度上将我们当前的 UX 和 UI 的经验应用于这种新媒介？

九、VR UI可以走多远？

1. 新的交互体验

一些 VR 体验非常依赖虚拟环境，然而传统界面的确已经不是用户控制应用程序的最佳方式了。在这种情况下，您可能希望用户直接与环境本身进行交互。

想象一下，你正在为一家豪华旅行社制作应用程序。您希望以最生动的方式将用户转移到潜在的度假目的地。因此，您邀请用户佩戴耳机并在时髦的切尔西办公室开始体验。

要从办公室转移至目的地，用户需要选择他们想去的地方。他们可以拿起一本旅行杂志，轻轻松松浏览它们，直到它们被某一页吸引。或者，桌面上可能会有一系列有趣的物品，根据用户选择的不同，将用户带到不同的位置。

这确实很酷，但也有一些缺点。为了达到完美的效果，你需要一个更先进的带手持控制器的 VR 头盔。不过，像这样的应用程序要比传统的应用程序花费更多的精力来开发。

2. 革命万岁

现实情况是，对于大多数公司而言，这些沉浸式的体验在商业上还不可行。除非您拥有几乎无限的资源，例如 Valve 和 Google，否则创建类似于上述体验的产品可能成本太高，风险太大且过于耗时。

这种体验非常出色，可以带你到媒体和技术的最前沿，但通过新媒体将产品推向市场并不太好。

通常，当一种新形式出现时，它会是一个小众产品。随着时间的推移，成本的下降，有足够的人去学习和市场的资本注入，它就会成为应用广泛的产品。

随着 VR 头盔变得越来越普及，将会有越来越多的公司将 VR 融入他们与用户的互动当中。

从我们的角度看，相比于手机、平板，VR 用户界面本质上是更直观的，并且更接近用户，随着科技和市场的发展，VR 将会带来更大的价值。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。