VR界面设计实践指南

这是一篇 VR 实践指导文章。 Smashing Magazine 好久没有这样新一些的东西了。实践指导性质的内容非常简单易行，个人感觉需要重点关注的是将传统UX设计流程及方法融入VR产品设计的思路，以及作者对于VR设计开发工作前景的观点。新技术，新事物，大风刮去之后留下的一批实践者所始终坚持的那些，才是真实的、有长期价值的东西。这是走心；集体意淫无非走肾而已。

下面进入译文。

对于很多设计师而言，VR仍是一片未知领域。在过去的几年当中，我们见证了VR硬件设备与软件产品的爆发式增长。站在体验的角度来看，从枯燥无聊到精彩绝伦，不同类型的VR平台与软件形式所带给我们的也不一而同，其中的复杂度与使用效率方面的差异也相当明显。

作为传统UX设计师，踏入全新领域的第一步是最为困难的。我们知道，因为我们经历过。别担心，在本文中，我们将详细的分享VR app在设计方面的具体流程，包括相应的工具及方法，希望各位读过之后能够掌握到足够的知识去运用到自己的VR项目设计当中。要实现这一目标，你不必成为什么专家，但学习热情以及将能力运用到新领域当中的渴望则是必需的。希望我们最终能够通过更多的分享与交流来最大程度的推进VR的发展速度。

VR app的类型

从设计的角度讲，VR app大致由“环境”与“界面”这两部分所组成。

你可以将“环境”理解为戴上VR头显之后所进入的那个世界，譬如你所身处的那个虚拟行星表面，或是正在带你飞驰的过山车。

“界面”指用户为了游历环境或控制流程体验而必须与之进行互动的一系列虚拟对象。

所有的VR app都可以根据这两个组成部分的复杂度差异而被划分到四个象限当中：

左上方象限当中最具代表性的就是模拟器类产品，例如前面提到的提供过山车体验的VR app。这类产品通常会构造出完整的虚拟环境，但不提供任何界面，用户只能全程被动体验。

相对应的，归属于右下方象限中的产品通常会提供完善的界面交互体系，但在环境构建方面的笔墨通常较淡，甚至不提供环境。三星Gear VR的首屏就是一个典型的例子。

虚拟环境的设计工作需要纯熟的3D建模能力，这使得我们这些2D界面领域的交互或视觉设计师望而却步。但另一方面，VR产品当中的界面设计部分却是我们施展能力的大好舞台。

我们的工作室设计的第一款全界面式的VR产品是为《经济学人》杂志打造的app。我们负责设计，合作方Visualise工作室负责开发实现与内容创作。

在本文中，我们将以这款app的设计流程作为案例，首先对VR app的整体设计方式进行了解，然后重点聚焦于界面设计方面。 你也可以到Oculus的官网下载用于Gear VR的《经济学人杂志》VR app。

传统界面设计流程

我们多数人对于移动app的设计流程早已轻车熟路，然而VR界面的设计工作流程仍然没有所谓的标准定义。我们在着手启动第一个VR app项目时，首先做的就是对设计流程进行定义。

传统流程，新领域

我们第一次体验Gear VR时便注意到其中的界面设计与传统移动app有着相似之处，譬如在交互流程方面，用户都是通过与界面元素的互动来实现页面间的跳转。当然这个例子太过笼统，目前只要记得这个结论便好。因此我们多年以来所熟悉的那套“尝试、验证、迭代”的产品设计思维依然可以派上用场，我们这些“传统”设计师距离VR设计其实并没那么远的样子。

既然如此，我们不妨在正式进入VR界面设计话题之前，先来简单的梳理一下传统移动app的设计流程。

1. 线框稿

我们首先会通过线框稿的快速迭代来定义交互流程与界面布局。

2. 视觉稿

在这个阶段，功能与交互方式应该已经得到明确的定义，设计师需要将视觉设计语言以及品牌规范运用到线框稿当中，雕琢出最终的视觉稿。

3. 流程图

我们还需要通过界面组织起功能流程，将界面稿串联起来，添加必要的逻辑走向和描述，形成一份流程图，主要目的是帮助开发人员理解产品的功能逻辑。

那么，我们应该怎样将这套流程运用到VR设计当中呢？

设计文档配置

画布尺寸

有时，最基础的问题反而会最具挑战性。当你面对着360°的画布时，往往不知应该从何入手，毕竟我们多年来一直习惯于面对那些尺寸固定的2D界面窗口。

我们花费了几个星期的时间去摸索怎样的画布规格最适于承载VR空间。当你设计移动app时，画布规格通常由设备尺寸所决定，譬如750×1334对应着iPhone的基础尺寸，而720×1280则适于Android平台。同理，在试着将传统设计流程融入到VR产品的过程中，我们也需要找到最便于呈现虚拟3D空间全貌%