对于许多设计师来说，虚拟现实(VR)是一个全新且陌生的领域。过去几年中，我们目睹了虚拟现实硬件和软件的爆炸式增长。从体验性上看，虚拟现实既有小而简单的也有专业复杂的，整体体验差异很大。
VR应用程序里有什么？
一般来说，从设计者的角度来看，VR应用程序由两种类型的组件组成：环境和交互元素。
环境：您可以将环境视为您戴上VR头盔时所进入的整个世界，比如你身处的虚拟星系或者驾驶过山车飞驰的乐园。
交互元素：界面上影响用户交互和操控体验的元素合集。
根据这两个组件的复杂性，所有VR应用程序都可以沿两个轴定位。
在左上象限中的VR应用有类似模拟器的东西，例如过山车的VR应用，这种应用具有完全成形的环境，但根本没有交互。你只是被锁在了车里。
在右下角的象限中，应用程序具有一个更好的界面，但比较少或没有3D环境。三星的GearVR主屏就是一个很好的例子。
设计场所和景观等虚拟环境需要熟练使用3D建模工具，许多设计师平时无法接触到这些元素。但是，UX和UI设计人员有很大的机会将他们的已有的技能应用于设计虚拟现实的用户界面。
我们所做的第一个完整VR的UI设计是TheEconomist的应用程序，与VR制作工作室Visualize合作。我们做设计，Visualize创建内容并开发应用程序。
VRUI设计的第一步-回顾传统流程
尽管大多数设计师已经熟悉了设计移动应用程序的工作流程，但还不太清楚设计VR界面的流程。当面对第一个VR应用程序设计项目时，我们首先要做的是合乎逻辑。
传统工作流程到全新领域
当我们第一次使用三星的GearVR时，我们注意到它与传统移动应用有很多相似之处。VR应用程序与传统应用程序有着相同的工作流程：帮助用户与界面进行交互。
在如何设计VR界面之前，让我们回过头来看看传统移动应用的设计过程。
1.线框
首先，我们将进行快速迭代，定义交互和总体布局。
2.视觉设计
在此阶段，功能和交互已经完成。我们把视觉规范与设计应用于线框图，并制作出漂亮的界面。
3.设计文档
在这里，我们将屏幕组织成流程，绘制屏幕之间的链接并描述每个屏幕的交互。我们将此称为应用程序的设计文档，它将被用作开发人员的主要参考。
现在，我们如何将此工作流程应用于虚拟现实的设计当中呢？
开始VRUI设计
一.画布的尺寸
要将移动应用程序工作流应用于VRUI，首先必须确定合适的画布大小。
以下是扁平化时360度环境的样子。这种视图叫做等角矩形投影。在3D虚拟环境中，这些投影围绕球体缠绕，以模仿现实世界。
整个投影的水平宽度是360度，垂直180度。我们可以用它来定义画布的像素大小：3600×1800。
使用这么大的尺寸可能是一个挑战。但因为我们主要对VR应用程序的界面设计感兴趣，所以我们可以专注于这个画布的一部分。
基于迈克·阿尔格（MikeAlger）对舒适观察区域的早期研究，我们可以找出一个合适的部分来展示界面。
感兴趣的区域占360度环境的九分之一。它位于图像的中心，大小为1200×600像素。
让我们总结一下：
“360度视图”：3600×1800像素
“UI视图”：1200×600像素
二.测试原型
“UI视图”画布有助于将我们的注意力集中在我们正在制作的界面上，并使设计流程变得更加容易。
同时也必须使用“360度视图”在VR环境中的预览界面。此外为了获得真实的比例感，使用VR头盔测试界面是也必要的。
使用Avocode，您可以轻松直观地比较设计
三.设计工具
在开始之前，我们需要以下工具：
sketch
我们将使用Sketch来设计我们的界面和用户流程。如果您没有，可以下载试用版。Sketch是我们首选的界面设计软件，但如果您使用Photoshop或其他任何软件更舒服，也没问题。
GoProVRPlayer
GoProVRPlayer是一款360度内容查看器。它由GoPro提供，是免费的。我们将使用它来预览我们的设计。
OculusRift
OculusRift连接到GoProVR播放器，这将使我们能够测试我们的设计。
四.VR界面设计流程
1.设置“360度视图”
首先要做的事情，让我们创建360度视图的画布。在Sketch中打开一个新文档，并创建一个画板：3600×1800像素。
导入文件background.jpg，并将其放在画布的中间。如果您使用自己的背景文件，请确保其比例为2：1，并将其大小调整为3600×1800像素。
2.设置画板
我们创建一个新画板：1200×600像素。然后，复制画板到“360view”中，并将其放在画板的中间。不要删除“360view”画板，我们同时保留着两个画板，以后会用到它们。
3.设计界面
我们将在“UIView”画布上设计我们的界面。我们会尽量简单一些，首先在视图上添加一些图块。您可以使用tile.png文件将其拖到UI视图的中间。
复制它，并创建一行三个图块。
使用kickpush-logo.png文件，并将其放在图块上方。
4.合并画板
现在来看看有趣的东西。确保“UIview”画板位于左侧图层列表的“360view”画板上方。
将“UIview”画板拖动到“360view”画板的中间。将“360View”画板导出为PNG;“UIview”将位于其上方。
5.在VR中测试它
打开GoProVRPlayer，并将刚刚导出的“360View”PNG拖到窗口中。使用鼠标拖动图像以预览360度环境。
我们完成了！是不是很简单？
如果您的机器上安装了OculusRift，则GoProVR播放器应该可以检测到它并允许您使用VR设备预览图像。根据您的配置，您可能需要在MacOS中做一些显示设置。
五.VR设计中需要注意的因素
低分辨率
VR头盔的分辨率非常糟糕？这不完全正确，其实它相当于手机的分辨率。但是，考虑到设备距离您的眼睛5厘米，显示器看起来并不清晰。
为了获得清晰的VR体验，我们需要一个8K的显示屏，这是一个15,360×7680像素的显示屏。相信这种设备早晚会普及。
文本可读性
由于显示器的分辨率较低，会导致所有精美的UI元素都会看起来像素化。这意味着，首先，文字难以阅读，其次，直线部分会出现锯齿。所以尽量避免使用大段文字和特别复杂的UI元素。
六.收尾工作
设计文档
还记得我们的移动应用中的流程图吗？我们现在将这种做法也应用到VR界面。用我们已经做好的界面组织成一个易于理解的流程图，这非常有益于开发人员理解我们设计的应用程序的整体架构。
动效设计
设计一个漂亮的UI是一回事，但让他动起来又是另外一回事了。我们决定以二维视角来处理它。
基于我们的Sketch文件，我们使用AdobeAfterEffects和Principle为界面设计动画。虽然输出的不是真实的3D体验，但它足以指导开发团队了，且能帮助我们的协作者在流程的早期阶段了解我们的愿景。
你刚刚设计了第一个VRUI。真棒！
我们知道你在想什么，“这很酷，但真实的VR应用程序会复杂的多。”是的，当然是。但重点在于我们可以在多大程度上将我们当前的UX和UI的经验应用于这种新媒介？
VRUI可以走多远？
新的交互体验
一些VR体验非常依赖虚拟环境，然而传统界面的确已经不是用户控制应用程序的最佳方式了。在这种情况下，您可能希望用户直接与环境本身进行交互。
想象一下，你正在为一家豪华旅行社制作应用程序。您希望以最生动的方式将用户转移到潜在的度假目的地。因此，您邀请用户佩戴耳机并在时髦的切尔西办公室开始体验。
要从办公室过转移至目的地，用户需要选择他们想去的地方。他们可以拿起一本旅行杂志，轻轻松松浏览它们，直到它们被某一页吸引。或者，桌面上可能会有一系列有趣的物品，根据用户选择的不同，将用户带到不同的位置。
这确实很酷，但也有一些缺点。为了达到完美的效果，你需要一个更先进的带手持控制器的VR头盔。不过，像这样的应用程序要比传统的应用程序花费更多的精力来开发。
革命万岁
现实情况是，对于大多数公司而言，这些沉浸式的体验在商业上还不可行。除非您拥有几乎无限的资源，例如Valve和Google，否则创建类似于上述体验的产品可能成本太高，风险太大且过于耗时。
这种体验非常出色，可以带你到媒体和技术的最前沿，但通过新媒体将产品推向市场并不太好。
随着VR头盔变得越来越普及，将会有越来越多的公司将VR融入他们与用户的互动当中。
从我们的角度看，相比于手机、平板，VR用户界面本质上是更直观高效的，并且更接近用户，随着科技和市场的发展，VR将会带来更大的价值。