如何开始VR界面设计？

对许多设计师而言，虚拟王国还是未知的领土。在过去几年里，我们见证了 VR 硬件与软件的百花齐放。从日常的运用到让人惊叹的创作，VR给人们带来了多样化的体验，蕴含着多样的复杂性和实用性。

作为 UI 或 UX 设计师，向 VR世界迈出第一步可能让你心生胆怯。我们深知这点，因为我们也曾经历过这个阶段。但是别害怕！在这篇文章里，我们将分享 VR 应用的设计过程。希望你可以由此开始，迈出独立设计 VR 的第一步。

你不需要成为 VR 领域的专家——你只需在这个新的领域尽情将你的才能施展。通过团队协作，我们最终能更快发挥出 VR 的无限潜能。

“在 VR 界面设计中，UI/UX 设计师拥有着巨大机会去施展他们的才能。”

VR app 的类型

一般来说，从设计师的角度来看，VR  app 有2个组成部分：环境和界面。

你戴上一个VR设备，想象你要进入的那个世界的环境——那是你置身其中的虚拟星球，或者你在一辆过山车上看到的场景。

界面是用户为浏览环境和控制体验而进行交互的元素集合。所有VR app可以根据这2个组成部分的复杂性定位2个抽线。

在左上象限像模拟装置，如过山车的体验。它有一个完全形成的环境，但没有界面。你只是被锁在车里。

在相反象限的APP有设计界面，但是没有或很少有环境体验。三星Gear VR的首页就是是一个很好的例子。

设计虚拟环境（如地点和风景） 需要熟练使用三维建模工具，许多设计师无法达到这些高度。然而，UX和UI设计师却可以用他们的技能来为虚拟现实设计用户界面，对于他们来说是一个很好的机会。

我们做的第一个完整的VR UI设计是为《经济学》杂志设计APP，与VR生产工作室Visualise合作的。我们做了设计，而Visualise创造内容并开发APP。

在下一小节中, 我们将用此作为一个项目示例。在进入VR界面细节设计之前，我们将制定出一种设计VR APP的方法。你可以从Oculus网站下载并安装（点击此处）这个支持Gear VR的《经济学》APP。

VR UI设计的过程

虽然大多数的设计师已经有了一套他们设计移动应用的工作流程，但是设计VR交互界面的流程并不明确。当第一个VR应用设计项目找上门的时候，对我们来说，逻辑上的第一步应该是设计一个流程。

传统的工作流程，新的应用领域

当我们初次把玩三星的Gear VR时，我们会发现它和传统移动应用的相似之处。基于界面的VR应用的运行和传统应用遵循一样的基本动态特性：用户和界面产生交互，来帮助他们访问页面。我们先简单说到这里，但是请将这些内容牢记于心。

鉴于和传统应用的相似性，经过设计人员数年优化和实践检验的移动应用工作流程不会白费，它可以在设计VR交互界面时派上用场。你比你想象中更加接近于VRapp设计师！

在描述怎么设计VR交互界面之前，让我们先回顾一下设计传统移动应用的整个流程。

1.线框图

首先，我们将进行快速迭代，规划出互动流程与总体版式。

2.视觉设计

在这个阶段，我们已确认了设计相关的具体功能与互动流程。 开始将品牌规范应用于线框图，并且制作出一个漂亮的界面。

3. 蓝图设计（blueprint）

在这里，我们将单个屏幕设计蓝图组合进动态图中，绘制单屏之间的链接，并描述每个屏幕的交互方式。 我们称此为应用程序的设计蓝图，它将被项目开发人员视为制作的主要参考。

现在，我们如何将这种工作流应用到虚拟现实？

启动程序

画布大小

最简单的问题可能是最具挑战性的。面对一个360度的画布，我们很难知道从哪里开始。原来，UI和UX设计师只需要总空间的某个部分。

我们花了几个星期试图弄清楚画布大小对VR会产生什么影响。当你设计一个移动APP时，画布的大小是由设备的大小决定的：iPhone 6大约1334×750像素，Android大约1280×720像素。

把这种手机app工作流应用到vr界面设计，你首先需要找到一个合理的画布大小。

“设计师们历经数年不断总结优化的移动应用工作流程可以应用在VR交互设计上。”

下图是将360度全景图展平后的样子。这被称为球面投影。在3D虚拟环境下，这些投影图像被卷曲成球体来模拟现实世界。

投影的全尺寸是水平360度、垂直180度。因此我们可以将画布尺寸确定为：3600×1800 px.

如此巨幅的画布，干起活来可有些挑战。但我们主要感兴趣的是VR应用的界面，因此将注意力集中在画布的一部分就好了。

根据Mike Alger关于视觉舒适区的早期研究的基础上，我们可以划分出一块区域来合理展示界面。

这片区域占全景画布的1/9，位于球面正中央，尺寸为：1200×600 px。

总结下：

360度全景画布：3600×1800 px

交互界面尺寸：1200×600 px

测试

在单屏上使用两个画布的目的是为了测试。“UI View”画布有助我们专注在制作的界面上，并且更便于设计流程。

同时，“360 View”用在VR环境中预览界面。为保持比例真实，使用VR头盔进行界面测试是必要的。

如图：

工具

在我们开始演练之前，这些是我们需要的工具：

• Sketch。我们使用Sketch来设计界面和流程，没有的话，赶紧下载一个试用版，这是我们最推荐的界面设计软件。
• GoPro VR Player。GoPro VR Player是一个360°全景播放器，它由GoPro提供，且免费。我们用它来预览和在特殊环境中测试我们的设计。
• Oculus Rift。将Oculus Rift和GoPro VR Player配合使用，能够让我们在真实的VR环境中进行设计测试。

VR界面设计流程

在这个环节中，我们将通过一个简单的教程学习如何设计一个VR界面。我们会一起设计一个简单的界面，不会花费超过5分钟。

如图：

点击下载【压缩包（ZIP文件）】，其中包含UI元素和背景图像。如果想使用你自己的设计，也没问题。

1.创建360度视图

现在最重要的是，我们先创建一个可以360度视角的视图，在Sketch软件中打开一个新的文件，并创建一个尺寸为3600*1800像素的画板。

导入文件名为background.jpg的背景图，并把它放置于画板中间。如果您使用的是自己的图片素材背景，确保它的长宽比例为2：1，并调整尺寸大小为3600*1800像素。

2.创建画板

如上所述，“UI视图”是一个裁剪版本的“360视图”，专注于虚拟现实界面。

在前一个画板创建一个新的画板：1200×600像素。然后，复制我们为“360视图”增加的背景图，放在我们新创建的画板中心。不要调整大小！我们想保留一个裁剪版本的背景。

3.界面设计

我们将在“UI视图”画布上设计界面。为了简单化这个练习，我们在界面是添加一排方块。如果你偷懒，把资源包里文件命名为tile.png找出并将其拖到UI视图的中间。

复制，并创建一排3个方块。

从资源包中找出kickpush-logo.png，并把它放在最上面。

看起来不错，嗯？

4. 合并画板和输出

现在来点有趣的，将 “UI View”画板放在左边的“360 View”画板之上。

拖动“UI View”画板在“360 View”画板的中间，将“360 View”画板作为PNG输出，“UI View”就会在它的最顶部。

5. 在VR里面测试

打开 GoPro VR 播放器，拖拽“360 View”的PNG到你刚刚打开的窗口，用鼠标拖动图像预览360°全景。

大功告成！现在觉得一点都不难了，对吧？

如果将Oculus Rift连接到你的机器上，那GoPro VR 播放器应该会检测到它并允许你用VR设备来预览图像。根据电脑配置的不同，你可能需要在Mac系统里面调整一下显示设置。

技术考虑

低分辨率

VR头戴设备的分辨率非常差。 事实上这句话也不完全对：分辨率取决于你手机的解析度。不过，考虑到该设备距离您的眼睛只有5厘米，显示屏会看起来不太清晰。

为了获得清晰的VR体验，单眼需要8K显示。就是15,360×7680像素显示。虽然目前差距比较大，不过总会实现滴。

文本可读性

由于显示器的分辨率，所有精美的UI元素将看起来像素化。这意味着，首先，这个文本将难以阅读，其次，直线会出现高水平的混叠。尽量避免使用大文本块和细节繁多的UI元素。

收尾工作

补充：（Blueprint是一款将三维的图片碎片拼凑成完整图片的3D拼图游戏，含有建筑、武器、玩具、生活工具和电子产品等各类图片，操作简单，只需用手指点击旋转移动图片即可，每一个关卡都有符合其风格的音乐，增加了玩家的游戏体验。来源百科）

蓝图设计  blueprint

还记得 blueprint 在我们手机移动端的设计过程吗，我们也将这种手法用于VR交互。打开UI views，我们将流程映射，组成一个可以理解的blueprint，让开发者更好地理解我们设计的应用程序的整体架构。

运动设计

设计一个界面精美的UI是一回事，但展示其在不同的情景下的变化又是另一回事。我们决定再次用二维试图来解决这个问题。

运行Sketch设计软件，用AE和Principle模拟变化。虽然结果并非3D的体验，但它可以作为开发团队的参考，以及帮助客户在早期阶段了解我们的想法和意愿。

你可能会想，尽管“还不错，但是VR应用远不止这么简单呐。”是的，确实如此。而问题是，我们能够多大程度将我们当前的UI和UX的实践应用到新的媒体上？

如图：

VR界面能走多远？

个性交互

一些虚拟现实的体验很大程度上依赖于虚拟环境，因此一个传统的界面可能不是用户控制app的最佳的方式。在这种情况下，您可能希望用户直接与环境本身进行交互。

想象一下你正在为一个豪华旅行社制作一个app。你想用最生动的方式用以将用户送到潜在的度假胜地。所以，你邀请用户戴上头戴设备，开始在你豪华的切尔西办公里体验。

要从办公室到一些遥远的地方，用户需要选择他们想去的地方。他们可以拿起一本旅行杂志，翻阅它，直到翻到一个吸引人的页面。或者可能有一些有趣的物体在您的桌面上，吸引用户到不同的地方取决于他们拿起什么东西。

这肯定很酷，但也有一些缺点。为了得到充分的效果，你需要一个更先进的VR头戴设备与手持控制器。此外，像这样的app比有序组织的传统界面的app的开发难度要大得多。

革命万岁！

现实是，这些身临其境的对于大多数公司而言不是商业上可行的。除非你有无限的资源，如Valve和谷Google，创造上述的这一种体验成本太高，风险太大，太费时。

这种体验可以完美炫耀你站在媒介和技术的前沿，但让你的产品通过一个新的媒介进入市场并不那么美好。易用性很重要。

通常情况下，当一个新的形式出现，它被早期采用者推崇到极限：创造者和创新者的世界。随着时间的推移，当有足够的学习和投资，它将被更广泛的潜在用户访问。

随着VR设备变得越来越普遍，公司将开始寻找机会，将VR融入到他们与客户接触的方式中。

从我们的角度来看，UI界面直观的VR app——UI界面已经接近人们习惯的与服饰、手机、平板电脑和电脑等的交互——能让VR更普及，更值得大多数企业进行投资。

是时候上车了

我们希望通过这篇文章让大家了解到VR并没有那么可怕，并且鼓励大家开始投身为VR做设计。

人们常说，一个人走得更快，但你想走得更远，就需要和团队前行。我们的选择是后者。在Kickpush，我们相信每家公司都将会开发VR应用程序。就像每家公司都有自己的移动网站一样。（或者说都该有一个吧—都2017年了，天哪！）

所以，我们其实正在集合全球设计师的努力，共同建造一艘宇宙飞船，大胆地探索更多可能性。一旦企业觉得VR应用程序对他们有利，整个行业的生态都将蓬勃发展。

作为数码产品设计师，我们未来的挑战是更复杂的应用程序和通过控制器处理其他类型的输入。要着手解决这个问题，我们需要强大的原型设计工具让我们能够更快更简单地创建和测试设计。我们将会撰写一篇后续文章，介绍一些比较前沿的做法，以及在开发中的一些新工具。

保持！

这篇文章最初由Smashing Magazine发行。

作者：达尔文，菲洛琪，火鱼Zero，lynn_dash，某蹦跶，Ruminate，幸若仁，Kentoness，juey，lemon，白色瓷盘

校对：Connie，Zoey