在本文中，我们将详细的分享VR app在设计方面的具体流程，包括相应的工具及方法，希望各位读过之后能够掌握到足够的知识去运用到自己的VR项目设计当中。
欢迎关注译者@C7210?（高级交互设计师、猫奴、吉他手、鼓手、老狗，现就职于腾讯ISUX）的微信公众号：Beforweb
这儿有他的访谈：《优设访谈！腾讯高级交互设计师C7210的十年设计路》
下面进入译文。
对于很多设计师而言，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空间全貌的画布尺寸。
下图便是360° VR环境以2D形式呈现出的样子。这种形式叫做“圆柱投影”（Equirectangular Projection）。在3D虚拟环境中，这样的投影图形会被包围在球形空间当中，模拟出真实世界的样子。
投影图片的宽度代表着3D世界当中360°的横向视野，高度代表着180°的纵向视野。基于此，以像素为单位，我们将画布的尺寸设定为3600×1800.
在如此巨大的画布上工作还是有些挑战性的。不过由于我们主要关注于app当中界面部分的设计，所以在多数时候可以只聚焦在画布的一小部分上。
参考着Mike Alger?关于VR视野舒适区域的早期研究，我们可以从整个画布当中割离出一块区域专门用于呈现界面相关的元素。我们选定的区域占据整个画布的1/9，位于正中，尺寸为1200×600.
归纳下来，以像素为单位：
- 360°视图：3600×1800
- 界面视图：1200×600
测试
我们使用两块独立的画布来进行测试，其中一块（1200×600）用于承载界面视图部分，使我们得以更好的聚焦于界面设计流程，而另一块（3600×1800）则专门用于呈现环境的部分。为了验证界面区域的尺寸是否合理，我们必须通过实际的VR设备进行测试体验。
使用Avocado，你可以很轻松的通过可视化的方式直接比较不同版本的设计方案。
工具
在讲解实际设计流程之前，我们先来了解一下需要用到的工具：
- Sketch：我们仍然使用Sketch来设计界面并制作流程图。如果你还没用过Sketch，不妨到官网下载一份试用版；如果你更习惯于Photoshop一类的工具，也无妨，事情可以照做。
- GoPro VR Player：一款来自GoPro的360°内容播放器，免费。我们通过它在实际VR设备环境中预览设计方案。
- Oculus Rift：搭配GoPro VR Player进行实境测试。
VR界面设计流程
接下来我们将进入VR界面的实际设计流程，一起完成一个简单的案例；实际操作时间加在一起也不会超过五分钟的样子。
你可以下载案例素材包，其中包含了所有将会用到的UI元素图形及环境背景图片。当然，使用自己的素材也完全没问题。
1.创建360°视图
首先，我们要创建用来呈现360°环境背景的画布。在Sketch当中新建文档，添加一个画板（Artboard），尺寸为3600×1800像素。
将素材包中的background.jpg拖入Sketch，置于画板正中。如果你在使用自己的素材图片，也要确保2:1的宽高比，并将尺寸设置为3600×1800.
2.创建界面视图