对于很多设计师来说，虚拟领域还是一块未知领域。我们见证了VR硬件和应用在过去几年的爆发。VR体验从从普通到让人震惊，有很大的复杂性和实用性。
作为刚入门VR的UX或UI设计师可能会有些担心，我们已经进入了VR时代，但是却不知道如何设计。在这篇文章中，我们会分享设计VR app的流程，希望你会用这个流程开始你的VR设计。
关于设计VR和AR你需要知道的7件事
你不必成为VR领域的专家——你只要愿意把你的技能用到一个新的领域。最终，作为一个社会共同性的工作，我们能加快VR更快实现它的潜力。
“对UX或UI设计师来说，用他们的技能设计VR，这是一个巨大的机会”。
VR App类型
从设计师的角度，通常来说，VR应用是由两个部分组成的：环境和界面。
当你把VR耳机带上，想想你进入的这个环境——你会发现自己处于虚拟星球里，或者你会看到坐过山车时的风景。
界面是用户要与环境产生互动，控制体验的组成元素。根据这两个组成部分的复杂性，所有的VR app都可以被定义为是沿着两条轴线。
在第一象限是像加模拟器之类的，比如上面链接中提到的过山车体验。这个有一个全局的场景，但是没有界面。你只是简单地被锁定在车上。
在第四象限，是那些被开发了界面的app，但是只有少量环境或者没有环境。三星的Gear VR家庭界面就是一个很好的示例。
设计虚拟环境，比如说场所和风景需要精通3D建模工具，放这些元素超出了许多设计师的能力范围。但是，对于UX或 UI设计师来说用他们的能力设计虚拟世界的用户界面，是一个巨大的机会。
我们做的第一个完整的VR用户界面设计是为《经济学人》设计的一个app，是和VR设计工作室——Visualise联合创作的。我们做了设计，Visualise创建了内容，开发了这个app。
下个阶段，我们将用这个做一个工作示例。在进一步了解VR设计界面的本质之前，我们将给一个设计VR app的方法。你可以从Oculus网站下载经济学人app的Gear VR版。
VR用户界面设计流程
然而大多数设计师已经想出他们设计移动app的流程，设计VR界面的流程还没有被定义。当第一个VRapp设计项目来临时，逻辑上来说第一步是设计一个流程。
传统工作流程在新领域的应用
当我们第一次玩三星的Gear VR时，我们发现和传统的移动app是相似的。基于VR app的界面遵循着和传统app相同的基本动态：用户和界面进行交互，以帮助他们浏览页面。我们在这里只是简要描述，但是当前只要记住这个就好了。
考虑到和传统app的相似性，设计师花很多年去定义的测试移动app的流程将不会被浪费，也能被用在设计VR界面上。你会比想象中容易设计出一个VR app。
在描述如何设计VR界面之前，让我们回过头来看看设计一个传统移动app的流程。
1.线框图
首先，我们会要完成快速迭代，设计交互行为和整体布局。
2.视觉设计
这个阶段，功能和交互已经确定。品牌规范被用在了线框图上，漂亮的界面也制作出来了。
3. 行动方案
这里，我们已经把界面组织成了一个流程图，画出了界面之间的跳转链接，并为每个界面描述了交互行为。我们叫这个为解决方案，它会被开发人员作为主要参考。
那我们现在如何把这个流程应用到虚拟世界里呢？
设置Canvas尺寸
最简单的问题可能是最有挑战性的。面对360度的canvas，你会有些不知从何开始。其实UX和UI设计师只需专注在整个空间的某个特定部分就好了。
我们花了好几周尝试计算出什么尺寸的canvas对于VR来说更合理。当你设计移动app时，canvas的尺寸是由设计的尺寸决定的，比如iPhone 6的1334 × 750像素和安卓的1280 × 720像素。
为了把这个移动app流程应用到VR UI上，你首先要计算出合理的canvas尺寸。
“设计师花很多年定义的移动app工作流程能被用于设计VR界面。”
下面是一个360的环境被扁平化的样子。这个演示被叫做正方形投影。在3D虚拟环境，这些投影被包裹在一个球形领域来模拟真实世界。
整个投影的全屏宽度代表着水平方向上360度和垂直方向上180度。我们使用这个定义canvas的像素尺寸：3600 × 1800。
用这么大的尺寸是一个挑战。但是，因为我们主要是对VR app界面设计感兴趣，我们可以把精力集中在canvas这个部分。
基于Mike Alger对舒适的可视区域的早期研究，我们可以分离出一个部分让界面呈现得更合理。
这个区域代表着360度环境的九分之一。它正好在球面投影图片的中心区域，尺寸是1200 × 600像素。
我们来总结一下：
“360视图“: 3600 × 1800 像素
“UI视图“: 1200 × 600 像素
测试
为一个界面使用2个canvas的理由是为了测试。“UI视图”的canvas帮助让我们专注在我们正在设计的界面上，让设计流程变得更加简单。
与此同时，“360视图”被用于预览VR环境里的界面。为了获得比例上的真实感受，用VR设备测试界面是很有必要的。
工具
在开始演示之前，介绍一些我们需要的工具：
-
Sketch 我们会使用Sketch设计界面和用户流程。如果你没有，你可以下载一个试用版。Sketch是我们更偏爱的用户界面设计软件。
-
GoPro VR Player GoPro VR播放器是一个360度内容可视器。是由GoPro提供的，而且免费。我们使用它来预览和测试我们的设计。
-
Oculus Rift 把Oculus Rift嵌入GoPro VR播放器里能让我们基于场景测试设计效果。
VR界面设计流程
这个部分，我们会演示一个关于如何设计VR界面的简单教程。我们设计了一个简单的示例，不会超过5分钟。
对应视频地址：https://s3.amazonaws.com/blog.invisionapp.com/uploads/2017/03/vr-result-preview.webm
下载资源包(压缩包文件)，包含了预先设置了尺寸的UI元素和背景图片。如果你想使用你自己的资源包，没问题。
1. 设置 “360视图”
首先，让我们创建能表示360度视图的canvas。在Sketch新建一个文件，创建一个3600 × 1800像素大小的画板。
导入命名为background.jpg的图片，把它放在canvas中间。如果你使用你自己的球面投影背景，确保它的比例是2:1，并重新设置尺寸为3600 × 1800像素。
2. 设置画板
如上面说到的，“UI视图”是“360视图”的裁剪版，能让你只专注在VR界面上。
在背景投影图片旁边创建一个新的画板：1200 × 600像素。然后，复制刚刚我们添加到360视图的背景，把它放在新画板的中间，不要重新设置尺寸。这里我们想保留背景的裁剪版。
3. 设计界面
我们要在“UI视图”的canvas上设计界面了。考虑到是做练习，并且要添加一排砖，我们尽量做得简单点。如果你想偷懒，只要抓取命名为tile.png的图片，把它拖到UI视图中间就可以。复制它，创建3排砖。
从资源包抓取命名为kickpush-logo.png的图片，把它放在3排砖图片的上面。
4. 整合画板并输出
现在进入有意思的部分。确保“UI视图”画板是在“360视图”画板的上面。
把“UI视图”画板拖到“360视图”画板中间。把“360视图”画板以png格式导出。“UI视图”会出现在它的上面。
5. 用VR测试
打开GoPro VR播放器，拖动你刚刚导入窗口的“360视图”PNG。用你的鼠标拖动图片，在360度环境下预览。这就完成了！非常简单，不是吗？
如果你的机器设置了一个Oculus Rift，那GoPro VR播放器应该会检测它，能让你通过VR设备预览图片。根据你的配置，可以在MacOS操作演示设置。
技术顾虑
低分辨率
VR设备的分辨率是非常差的。这样说也不完全正确：其实和你的手机分辨率差不多。但是，考虑到这个设备距离你的眼睛只有5厘米，看起来就不是很清晰。
为了获得更清晰的VR体验，我们需要给每个眼睛K显示，也就是15,360 × 7680像素。我们离这个像素还差得很远，但终究还是要这样做的。
文字可读性
因为显示分辨率的问题，所有漂亮清晰的界面元素看起来都很像素化。这意味着，首先，文字会很难阅读；其次，直线的锯齿很明显。试着避免使用大文本块和高度精细的界面元素。
完成触控解决方案
还记得我们移动app设计流程中的解决方案吗？我们将把这个用到VR界面设计上。我们用UI视图，组织绘制了我们的流程，将其放入一个可理解的方案里，对开发人员而言，很容易理解我们设计的整个app架构。
动效设计
设计漂亮的用户界面是一方面，如何做动画演示则完全不同。我们决定从一个二维视角去实现动画效果。
使用Sketch做的设计，我们用Adobe After Effects和Principle做界面动效。但是输出效果不是一个3D体验效果。是给开发团队的一个指南，帮助客户理解我们的版本还处于流程中的初级阶段。
对应视频地址：https://s3.amazonaws.com/blog.invisionapp.com/uploads/2017/03/first-vr-ui.webm
我知道你正在想什么：“太棒啦，但是VR app可以做得更复杂”，是可以。问题是什么程度下我们能把当前UX和UI实际应用到这个新媒介上。
VR用户界面能走多远？
有些VR体验严重依赖于虚拟环境，用户用传统界面来控制这个app可能不是最佳选择。这种情况下，你可能想用户能直接与环境本身进行交互。
设想你为一个豪华的旅行社做了一个app。你想以尽可能生动的方式引导用户到潜在的度假地。所以，你邀请用户带上VR设备，开始体验你切尔西的豪华办公室。
为了把办公室转换到更远的地方，用户需要知道如何选择他们想去的地方。他们拿起了一本旅游杂志，开始浏览，看到了一个吸引人的页面。或者，可能你的桌上有一堆有趣物品，引导用户去不同的地方依赖于他们选择哪个。
这是相当酷的，但是也有一些缺点。为了获得这种效果，你需要更加先进的有手持控制器的VR设计。另外，比起传统app界面展示的精美外观的选项，一个像这样的app要花更多的精力开发。
Viva la revolución
事实是这种沉浸式的体验对大多数公司而言并不具有商业可行性。除非你已经获得了几乎无限的资源，比如Valve和Google。创造一个像上面说的那样的体验是需要很大成本的，也太具有风险性，太消耗时间。
这种体验是明智的，显示你正在媒体和科技的边缘，但是把你的产品定位到一个新的媒介不是那么好。可触达性是很重要的。
通常，当一种新的形式产生，是由早期的接纳者——这个世界的创造者和变革者推到极致的。经过一段时间以后，随着充分的学习和投资，会引来大量潜在用户。
基于VR设备变得越来越普遍，公司开始瞄准这个机会，将VR集成到他们的商业决策中。
依我们所见，有直观界面的VR app，也就是说用户界面接近人们已经习惯于的可穿戴设备、手机、平板和电脑——这会让VR成为大多数公司可以支付得起而且有价值的投资。
是时候乘上宇宙船了
希望这篇文章让你对VR有了更多了解，能激发你开始设计自己的VR。
有人说如果你想尽快旅游，就自己去，但你过你想去更远的地方旅游，就和大家一起去。我们想要飞得更远。在Kickpush工作室，我们认为每个公司都可以有一个VR app，就像每个公司现在都有一个移动网站。所以我们建立了一个宇宙船，一个由全球设计师共同努力的结果，让设计师大胆去没有去过的地方。做出的VR app对公司越有意义，整个VR生态系统就越早能被壮大。
作为数码产品设计师，我们接下来的挑战会是：更加复杂的应用和处理通过控制器输出的其他类型。为了处理这个问题，我们需要强有力的原型工具，让我们能简单快速地输出和测试设计效果。接下来我们会写文章来介绍我们早期的一些尝试，以及一些开发中的新工具。
