原文链接：Getting Started With VR Interface Design
原文作者：Sam Applebee & Alex Deruette
对许多设计师而言，VR是一个未知的领域。在过去的几年中，我们见证了VR硬件和应用的大爆发。VR的体验从不尽人意到令人惊奇，他们的复杂性和功能都有了很大的不同。
作为UX/UI设计师，踏出VR的第一步可能会让人生怯。我们知道，因为我们这是这样走过来的。但是别害怕，在这篇文章里，我们会分享一个设计VR app的过程。我们希望你也能过借鉴然后去设计自己的VR产品。你不需要是在VR方面的专家，你只需要将你的技能应用到一个新的领域。最后，作为一个团队工作，我们可以充分探寻VR的潜力。
VR apps都是什么样的？
一般从设计师的角度来说，VR apps通过两类构成：环境和界面。
当你把VR耳机带上时，你可以把环境想象成另一个世界-你落在一个虚拟的星球上，或者正在坐过山车的一个视图。
界面是用户交互元素的集合，通过它来在环境中导航，并控制自己的体验。
所有的VR apps都可以根据这两个维度来定义复杂性。
位于左上象限的可能像是一些模拟器，例如过山车的体验就是在这一块。形成了一个完全的环境但是没有界面，你只是代入环境之中了。
相反的象限就更多的是开发界面，几乎没有环境。Samsung 的 Gear VR 主屏幕就是一个很好的例子。
设计虚拟环境和场景需要精通3D建模工具，这对许多设计师来说遥不可及。尽管如此，这里有很大的机会对UX/UI设计师应用他们的技能去为VR设计界面（VR UI）。
我们最早的VR UI是为“The Economist”设计的，与VR产品工作室Visualise一同合作。我们做设计，Visualise进行研发。
在接下来的部分中，我们将为以这个为案例进行分析，在进入VR界面细节设计之前，阐述我们设计 VR apps 的方法，您可以在Oculus网站上下载Economist到 Gear VR上试用。
VR UI的设计过程
大多数的设计师已经找到了移动app的设计流程，但是VR界面的设计流程还没有被定义。当我们的第一个VR app设计项目产出后，我们的第一步就是设计一个流程。
传统的工作流，新领域
当我们第一次把玩Samsung的Gear VR，我们注意到它与传统移动app有许多相似的地方，基于界面的VR apps会像传统的apps一样：用户与界面交互帮助他们在页面内导航。我们在这里简化，但是需要牢记这一点。
考虑到与传统apps的相似之处，设计师花费很多年定义的传统移动app流程不会被浪费，可以用在VR UI的设计上。你比你想的离设计VR apps更近！
在陈述如何设计VR界面之前，我们退回一步，看看传统移动app的设计过程。
1.线框图
首先，我们将通过快速迭代，定义交互和总体布局。
2.视觉设计
在这个阶段，功能和交互已经通过，品牌准则会被应用到线框图上，绘制一份漂亮的界面。
3.蓝图
我们将屏幕组织成页面流，通过连接各个页面来描述每屏的交互。我们称之为蓝图，它将作为项目开发人员的主要参考。
那么现在，我们该如何将工作流程迁移到VR界面的设计当中去呢？
设置
画布大小
最简单的问题可能也是最具有挑战性的问题。面对一个360度的画布，可能很难知道从哪去开始着手。事实证明，UX/UI设计师只需要专注于某一部分的空间。
我们花了好几个星期的时间，试图找出定义为VR设计的画布尺寸。当你在为移动app设计时，画布大小取决于设备的大小：1334*750是iPhone的尺寸，1280*720是Android的尺寸。
当移动端的流程沿用到VR UI的设计中时，就必须找出一种合适的画布大小，这是有意义的。
下面是一个360度环境展开后的样子。这种表现方法称为equirectangular投影，在三维的环境中，这些投影会包裹在一个球体上来模拟虚拟世界。
水平360度的全宽和180度的垂直投影。我们可以通过这个来定义画布的像素大小：3600*1800。
处理这么大的尺寸是一个挑战。但是因为我们主要集中在VR apps的界面，我们可以专注这一部分的画布。
建立在Mike Alger的舒适视图区域的早期研究，我们可以抽出一部分的页面来设计。
这个区域时整个360度环境中的九分之一，equirectangular核心投影的视图是1200*600像素的大小。
让我们总结一下：
360度视图：3600*1800
UI视图：1200*600
测试
对一个屏幕使用两个画布进行测试。“UI view”画布帮助聚焦在我们当前关注的界面，让设计流动变得简单。
同时，“360 view”被用于在VR环境中进行界面的预览。为了得到真实的比例，在VR头戴设备中去测试界面是非常重要的。
工具
在我们开始展开之前，这里有我们需要的一些工具：
Sketch
我们使用Sketch来设计我们的界面和用户流。如果你没有它，你可以下载一个试用版，Sketch是我们偏爱的界面设计软件，如果你觉得使用Photoshop或其他工具更顺手，那也欢迎。
GoPro VR Player
GoPro VR Player是一个360度的内容查看器。GoPro提供并且是免费的。我们使用它在场景中预览，进行测试。
Oculus Rift
使用Oculus Rift可以让我们在场景中测试设计。
VR界面设计流程
在本节当中，我们会通过一个简短的教程来展示如何设计一个VR界面。我们会一起设计一个简单的案例，只需要花费5分钟的时间。
下载这个资源包（https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0），包含了UI元素和背景图片，如果你想要使用自己的资源，也可以，这不会有任何问题。
1.建立“360 view”
首先要的事情，是创建一个360度视图的画布，在Sketch中打开新的文档，创建3600*1800像素的画板。导入background.jpg的文件，让后在画布上居中。如果你使用自己的equirectangular背景，确保它的比例是2:1，并且调整到3600*1800。
2.设置画板
正如上文提到的，“UI View”是“360 View”的一个裁剪，只需要专注VR界面本身。
在前面创建一个新的画板：1200*600像素。然后复制我们刚刚加入的背景，将它剪切到新画板中。不要调整，我们需要保持一个剪切的背景。
3.设计界面
我们将在“UI view”画布上设计我们的界面。我们让这个练习简单，添加一行tile。如果你很懒，就在设置页面命名为tile.png然后拖到UI视图的中间。
复制它，创建三行的tiles。
设置页面选中 kickpush-logo.png，然后将它放在tiles上。
看起来不错，是吗？
4.合并画板和导出
这是非常有趣的东西。确保在图层列表中，“UI view”画板在“360 view”画板的上方。
拖拽“UI view”画板到“360 view”画板的中间。将“360 view”画板作为png导出。“UI view”会在它的上面。
5.在VR中测试它
打开GoPro VR Player然后拖拽你刚才导出的“360 view”PNG到窗口中。用鼠标拖拽然后在360度的环境中去预览。
完成了。当你知道后是不是很简单？
如果你有一个Oculus Rift配置你的机器，那么GoPro VR Player会检测到它并允许你通过VR设备进行预览。根据你的配置，你可能会花费一些时间在MacOS的配置上。
技术因素
低分辨率
VR设备的分辨率挺糟糕的，这不是绝对：它相当于你手机的分辨率。然而，考虑到它距离你的眼睛只有5cm，显示的效果可能就会看不清。
为了匹配VR体验，我们需要每只眼睛8k的显示。这是一个15360*7680像素的显示屏。这离现在很遥远，但我们最终会触及的。
文本可读性
由于屏幕分辨率的关系，你所有漂亮的UI元素看起来可能都会像素化。这意味着你的文本将会很难阅读，尽量避免使用大段文本和高度细节化的UI元素。
收尾工作
蓝图
还记得我们在移动端app设计的蓝图流程吗？这种方法也适用在VR当中。使用我们的UI views，我们绘制并且组织蓝图流程，方便开发者了解我们设计的app整体结构。
运动设计
设计漂亮的UI是一件事，但是展示它的动画就是另一回事了。我们决定用一个两点透视来处理。
使用我们的Sketch来设计，通过Adobe After Effect和Principle来设计动画。尽管输出的并不是3D的体验，它也能作为开发团队的指导，帮助我们的客户在早期阶段理解我们的想象。
我知道你在想什么：“这看起来不错，但是VR apps会比这个更复杂。”是的，没错。但问题是，我们如何在有限的范围内将自己的UX/UI在这新的媒介中去实践？
VR UI能走多远？
Inter Your Face
一些VR体验是非依赖虚拟环境，这对用户来说，传统的交互可能并不是最佳的方法去控制app。在这种情况下，你可能希望用户直接与环境交互。
想象一下你正在为豪华旅游代理商做一款app。想通过最生动的方式让用户发现潜在的期望目的地。所以你会邀请用户戴上设备，开在Chelsea办公室开始体验。
从办公室到其他的地方，用户需要选择他们想去哪。他们可以受到一份旅游杂志去浏览，选择一个想要去的地方。也可以是一组有趣的内容摆放在书桌上，让用户去决定去哪一个。
这绝对很酷，但也有一些缺点，为了得到完整的效果，你需要更先进的虚拟头戴设备和手持控制器。此外，这样的一个app可能需要花费更多的精力去开发，远远超过外观精美的传统app界面。
VIVA LA REVOLUCIÓN!
事实是，这些身临其境的体验对大多数公司而言，在商业上并不可行。除非你有几乎无限的资源，例如Valve和Google，创造一个如上面描述的体验可能会过于昂贵，风险太大，耗时过长。
这种体验当然是精彩地展示你在技术和媒介的前沿，但是也许并没那么容易将你的产品市场化，可访问性是很重要的。
通常，当一种新的形式出现的时候，早期接受者会将它推向极致：世界的创造者和创新者。随着时间的推移，有足够的学习领悟和投资引入，它就会培育出大量的潜在用户。
随着VR头戴设备的普及，企业会开始发现机会，VR会慢慢融入他们与客户接触的方式。
从我们的角度看，VRapps和直观的用户界面-人们已经开始习惯了当前手机、平板、电脑的UI，这也证明VR有足够的潜力和投资价值，让企业去追求它。
登录火箭吧！
我们希望我们的VR空间能够少一些吓人的文章，并启发你开始设计VR。
他们说，如果你想旅行快，那就一个人出发。如果你想旅行很远，那就一同出发。我们想要走的更远，在Kickpush，我们认为有一天每个公司都会有自己的VRapps，就像每个公司现在都有自己的移动端网站（或者应该有，现在都2017年了，见鬼！）
我们建造一艘飞船，世界各地的设计师在共同的努力下，大胆地去探索未知的领域。那些公司越早让VRapps实现意义，现在的生态就越早会被改变。
作为数字产品设计师，我们的下一个挑战会是更加复杂的应用，通过控制器处理其他类型的输入。为了能够解决这些问题，我们需要更加有效的原型工具，让我们快速轻松地创建和测试设计。我们将会写一些跟进的文章，看一些这样做的早期尝试，和一些新工具的开发进展。
USEFUL LINKS
The UX of VR, Max Glenister
“A curated list of resources to help you on your journey into the user experience of virtual reality.”
Mike Alger (research vlog), YouTube channel
AR & VR Weekly (newsletter), Josh Anon
“A curated list of AR/VR/MR news and interesting pieces sent about once a week.”
“Virtual Reality Glossary,” Freefly VR
