作者：Sam Applebee, Alex Deruette |  翻译：June&林龙飞 审校：天蛙

本文由人民邮电出版社异步社区授权UXRen翻译并发布，禁止转载或建立镜像。

 

对于很多设计师来说，虚拟现实（VR）都是一个未知的领域。在过去的这几年，我们见证了VR硬件与应用的爆炸式发展。各种VR体验，有的平淡无奇，有的令人惊叹，在复杂度和有用性上千差万别。

作为交互或者视觉设计师，刚刚接触VR时可能都会感到无从下手。我们非常理解这种感受，因为我们就是这样过来的。不过不用害怕，本文中我会分享一下设计VR应用的流程，希望可以帮助大家设计出自己的VR。你不需要成为VR专家，你只需要把你的设计才能应用到这个新领域。最终通过整个设计行业的共同努力一起来加速推动VR的发展。

 

VR应用的分类

总体而言，从设计师的角度来说，VR应用由两部分组成：场景和用户界面。

场景，你可以想象成是你戴上VR设备后进入的世界——可能是身处一个虚拟的星球，也可能是坐在一辆过山车上。

用户界面，则包含了一系列元素，用户用这些元素来探索场景和控制体验。所有的VR应用都可以根据其场景和界面的复杂度被置于一个坐标系之中。

位于左上象限的应用（复杂场景无界面）类似于模拟器，正如上文提到的过山车体验。这是一个完整构建的场景，没有任何界面，用户完全置身于场景其中。

位于相反象限（右下：复杂界面，无场景）的应用则包含了丰富的界面，而只有很少的甚至没有任何场景元素。三星的Gear VR主页就是一个很好的例子。

设计地点和景观的虚拟场景需要熟练应用3D建模工具，而这一技能对很多设计师很难。好在，交互和视觉设计师在VR领域还有机会，他们可以把设计技能应用在VR用户界面设计上（简称VR UI设计）。

我们做的第一个VR UI设计是给“经济学人”做的一款应用，是我们联合了一家名叫Visualise的VR 工作室共同完成的。我们负责设计，Visualise负责内容与开发。

下文中，我们将以此为例，讲解设计VR应用的流程，然后逐步接近VR界面设计的核心。你可以在Oculus网站下载这款名为经济学人（Economist）的VR应用。

 

VR用户界面设计流程

设计师在做移动应用设计时都有自己既定的工作流程，然而VR界面设计流程却还没有被定义出来。因此当第一个VR设计项目找到我们的时候，我们做的第一步就是创建一个设计流程。

一、传统的工作流程，新的领域

第一次玩三星的Gear VR时，我们就发现它跟传统移动应用有很多共同点。界面为本的VR应用和传统应用的交互动态是一样的：用户通过与界面互动来操控界面。这只是简化的说法，但我们需要把这点记在心里。

正是因为与传统应用具有相似之处，设计师们花费数年，经过数次尝试与测试而得来的移动应用设计流程不会被白白浪费，我们可以把这些经验和流程应用到VR UI设计中去。你其实比想象得要更接近VR设计！

因此在描述如何设计VR界面之前，让我们先后退一步，看看传统移动应用的设计流程是怎样进行的。

1. 线框图

首先，我们要通过快速迭代，定义出页面的交互与基本布局。

2. 视觉设计

在这一步，功能与交互已基本确定，现在要将品牌设计元素应用于线框图，设计出更加美观的界面。

3. 蓝图（其实应该成为流程图Page Flow）

现在，我们要把页面组织串联起来，绘出流程图，给出页面间的跳转逻辑并解释页面内的交互形式。我们把这一步称为应用的蓝图，在应用开发中，它将成为开发者的主要依据。

那么现在，我们怎样才能把这个设计流程应用到VR设计中去呢？

 

初始设置

画布大小

最简单的问题却可能是最具挑战性的。面对360度的画布，设计师会觉得无从下手。但其实，视觉和交互设计师们只需要关注整个空间的特定区域就好。

我们花费了好几周研究适合VR设计的画布大小。当你设计手机应用时，画布的大小取决于设备大小：iPhone6是1334 × 750px，安卓大概是1280 × 720px。

为了把移动应用的设计流程应用到VR UI设计中，你首先得确定一个合理的画布大小。

以下是一个360度场景的平铺展示。这种展示方式叫做等距柱状投影。在3D虚拟环境中，这些投影围绕着一个球体来模拟现实世界。

投影的尺寸是水平360度，垂直180度。我们可以据此来确定画布的像素大小为3600 × 1800。

在如此大尺寸的画布上工作是一个挑战。不过鉴于我们主要关注的是用户界面的部分，我们可以聚焦在画布的一小部分上。

基于Mike Alger早期关于舒适浏览区域的研究，我们可以在整个画布上分离出一个区域，用于展示用户界面。

这个视觉区域的大小是360度的1/9。它位于等距柱状投影图的正中心，大小是1200 × 600px。

总结一下：

• 360度视图：3600 ×1800 pixels
• UI视图：1200 ×600 pixels

 

测试

同一个界面使用两个视图来设计的原因是为了进行测试。UI视图可以帮助我们聚焦于界面设计，并且使流程设计更加简单。

与此同时，360度视图画布则用于把界面置于VR环境中进行预览。为获得真实的比例感，测试界面时使用VR设备也是很有必要的。

通过Avocode，你可以轻松直观地比较不同的设计版本。（审校注：使用Avocode，设计师可将PSD和Sketch设计文件导入，分享给开发者，在此平台进行沟通，并生成部分代码）

 

工具

在我们开始之前，先来讲讲我们要用到的工具。

• Sketch：我们将要使用Sketch来设计界面和用户流程。如果你还没有的话，可以下载一个试用版本。Sketch是我们推荐的界面设计软件，当然如果你更习惯使用Photoshop的话，也是可以的。
• GoPro VR 播放器：GoPro VR 播放器是一个360度内容浏览器，由GoPro公司免费提供。我们要利用它来预览，并在场景中测试我们的设计。
• Oculus Rift VR头戴设备：将Oculus Rift 连接到 GoPro VR播放器，我们就能在特定的场景下测试我们的设计效果。

 

VR界面设计流程

在这一节中，我们将提供一个简短的VR界面设计教程。接下来我们会一起设计一个简单的界面，这最多需要5分钟。

首先是下载资源包，这其中包含了预先设计好的UI元素和背景图片。如果你想用自己的资源，也没问题。 （资源下载地址：https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0）

 

1. 设置360度视图

首要的第一步，来创建展示360度视图的画布。在Sketch中打开一个新文件，然后创建画板：大小为3600 × 1800px。

导入名为背景.jpg的文件，将其置于画布中央。如果你使用的是自己的等距柱状投影图片，请确保背景图片长宽比例应当是2:1，大小为3600 × 1800px。

 

2. 设置画板

如同上文提到的，UI视图是360度视图的裁剪版本，只关注VR用户界面。

紧接着上一步，再创建一个大小为1200 × 600像素的新画板。然后复制我们刚才添加至360度视图的背景，并将其置于新画板的中央位置。不用调整背景图片大小！这里我们需要一个被剪裁过的背景。

 

3. 设计界面

接下来，我们需要在UI视图画布上开始设计界面。出于练习的目的，我们会做一点简单的东西，就是添加一排图片。如果你懒得动手，也可以直接把资源包里名为tile.png的文件拖进来，放在UI视图的中央。

复制图片，将3个图片排成一行。

然后从资源包里找到名为kickpush-logo.png的图片，放在这列图片的上方。

看起来还不错吧？

 

4. 合成画板并导出

接下来这部分特别有意思。我们要把UI视图画板放在左侧的360度视图画板的上面。.

把UI视图画板拖拽到360度视图画板度中央，然后把360度视图画板导出成图片；UI视图就在360度视图之上了。

 

5. 在VR环境中测试

打开GoPro VR播放器，然后把刚刚创建的360度视图图片拖到窗口中。用鼠标拖图片预览一下360度的场景。

这样就完成了！真的很简单吧？

如果你有Oculus Rift头盔，那么GoPro VR播放器会自动识别并允许你用VR设备预览图片。这里你可能需要调整一下Mac的显示设置。

 

技术考虑

1. 低分辨率

有人说VR设备的分辨率很糟糕，并不完全对。其实，VR设备的分辨率与手机分辨率是差不多的。然而，考虑到VR设备和你的眼睛之间只有5cm的距离，低分辨率会暴露得更加彻底。为了获得高清的VR体验，我们需要单眼8k的显示屏，也就是15 360 × 7680像素的显示屏。这个目标离我们还很遥远，但最终会实现的。

2. 文本可读性

由于低分辨率的问题，所有美丽的UI元素在VR上都会看起来像素化。这意味着，首先，文本很难被辨识及阅读；其次，直线会出现高度重影。所以我们在设计中要避免使用大文本块和过于细节的UI元素。

 

收尾工作

1. 蓝图

还记得从移动应用设计流程而来的设计蓝图吗？我们已经把它实践在了VR界面设计中。运用我们的UI视图，我们可以描绘出一个蓝图，帮助开发者理解应用的整体流程。

 

2. 动作设计

设计一个好看的UI是一回事，但展示出动态效果就是另外一回事了。我们再一次尝试用二维视角来解决这个问题。

基于Sketch界面设计，我们用Adobe After Effects 和 Principle来模拟界面的动画效果。虽然输出的并不是3D体验，但生成的结果可以成为开发团队的指南，并在早期帮助客户了解我们的设计愿景。

你刚刚已经完成了自己的第一个VR UI，可以欢呼庆祝了！

我们知道你肯定在想，“听上去很酷，但是真实的VR应用可是会复杂得多。“ 没错，是很复杂。但问题的关键在于， 我们能多大程度地把现有交互和视觉实践经验运用到这个新领域上。

 

VR UI设计能走多远

1. 你的界面

有一些VR体验非常依赖虚拟环境，因此传统的界面无法帮助用户很好地操作应用。在这种情况下，你可能想让用户直接跟虚拟环境交互。

想象一下你正在做一个奢华旅行应用，你想要用一种最生动的方式把用户传送到他们想去的度假圣地。所以，你邀请用户戴上VR头盔，在你高端的伦敦切尔西办公室开始体验。

从办公室到遥远的某个地方，用户首先需要选择他们想去的目的地。他们可以拿起一本旅行杂志，飞快地翻阅，知道视线落在其中一页上。又或者，在你的办公桌上堆放着许多收集来的有趣的物件，用户选择哪一个，就会把用户带去那里。

这当然很酷，但是也有一些缺陷。为了获得完整的体验，你需要一个更高级的配有手持控制器的VR设备。除此之外，设计开发一个这样的应用要比一个明确呈现旅游选择的传统应用要费力得多。

2. 革命万岁

摆在眼前的现实是，这种沉浸式的体验对于大部分公司来说都是不可行的。除非你像Valve和Google一样，拥有海量的虚拟资源，否则创造这样的虚拟体验是一件花费巨大，充满风险且费时费力的事。

虚拟现实体验可以让你秀出处在媒体和科技尖端的光芒，但通过这个新兴领域将产品推向市场就不那么容易了，易接近性是很重要的。

一般来说，当一种新形式出现时，它会被早期采用者推到一个很高的位置，一般是创造者和创新者。经过一段时间，经过充分的学习和投资，它才可能被更广泛的潜在用户接触到。

随着VR设备越来越普及，企业会开始寻找机会把VR引入到和消费者的互动中去。

从我们的角度来看，拥有更直观界面的VR应用——也就是说，VR 界面与用户已熟悉的可穿戴设备、手机、平板和电脑的界面更相似——对于大多数企业来说才负担得起也更有投资价值。

3. 登上宇宙飞船

我们希望通过这篇文章可以让VR世界不那么难以触及，并且可以启发你们开始做 VR设计。

人们常说，要想走的快，就要一个人走，但是要想走的远，就要大家一起走。我们想要走得更远。在Kickpush，我们相信未来的某一天，每个公司都会有一个VR应用，就像现在每个公司都有一个移动网站一样（如果没有的话就太不应该了，毕竟已经2017年了 ）。

所以，我们正在建造一艘宇宙飞船，让世界各地的设计师们可以共同努力，大胆地向以前从未去过的地方前进。我们相信，VR应用越快为企业创造价值，这个生态系统就会发展的越好。

作为数码产品设计师，我们接下来面临的挑战是设计更复杂的应用以及处理更多种类的控制器输入。要想开始解决这个问题，我们需要强大的原型设计工具来帮助我们更快更简单地设计和测试。我们后续会写一篇文章讨论一些初步的尝试，以及一些处于开发中的新工具。

8+

---

更多译文：

如何让用户初遇你的app时就一见钟情？

稀缺原则：我为那些黑暗魔法找到的理论支持

忽悠神技：如何让人们去做他们不想做的事

你并不是真正的用户：错误共识效应

全部190+篇译文>>

 

申请加入UXRen翻译组>>

 

---

译者：June&林龙飞  审校：天蛙

作者：Sam Applebee, Alex Deruette（Sam Applebee 和Alex Deruette联合创立了伦敦的设计工作室Kickpush. 他们旨在探索传统用户体验设计和虚拟现实设计之间的桥梁。）

原文标题：《Getting Started With VR Interface Design》

原文链接：https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design/

发布日期：2017年2月6日

版权声明：

• 本文版权归：UXRen翻译组 所有；
• 转载带有“UXRen译”抬头的翻译文章，文章标题必须保留“UXRen译”字样；
• 转载文中必须保留：“UXRen翻译组”、“作者”、“译者”及“审校者”信息；
• 转载文末必须保留本译文网页链接地址；
• 如未遵照上述规则转载，视为侵权，UXRen社区保留随时追责的权利。