国外大佬手把手教你从0开始学好VR设计

转自：彩云译设计（ID：caiyunyisheji） [转载出处：www.ii77.com]

译者：菜菜

[本文来自：www.ii77.com]

本期由菜菜为人人带来一篇精选译文，文章由Sam Applebee and Alex Deruette原创，菜菜翻译，彩云协助优化及版式编纂。

译文：

媒介：对很多设计师来说，VR是一个未知范畴。近年来，我们目睹了VR相关硬件和软件的蓬勃成长。VR的体验从不尽人意到令人惊异，他们的复杂性和功能性都有了很大的转变。

作为UI或UX设计师，迈向VR的第一步是艰难的。我知道，因为我们也是如许过来的，所以无需怕惧！在这篇文章，我将分享VR界面的设计流程，进展能够借此为你开启VR设计的大门。你无需成为专家，只要将本身的设计花样运用在这片新的范畴就好。

今朝都有哪些类型的虚拟实际应用（VR App）？

一样来说，从设计师的角度来看，VR App由两类控件构成：情况和界面。

情况  能够懂得为你带上VR头盔后所进入的世界——或者是一个虚拟的星际世界，也或者是你坐过山车看到的景致。

界面  是用户交互元素的鸠合，经由它来在情况中导航，并掌握本身的体验。所有的VR App都能够凭据这两个维度的复杂水平来界说。

集中在二象限（情况复杂、界面简洁）的app多为模拟器类，好比上文提到的过山车体验，在滑行时你会一向处于这种情况。

与其相对的四象限有雄厚的界面和简洁的情况，三星的Gear VR主屏幕就是一个很好的例子。

设计地面、景致等虚拟情况需要设计师熟练运用3D模型对象，将元素绘制得生动真切。对于很多UI和UX设计师来说有些难题，而VR界面设计则是他们更好的选择，能够运用自身花样。

我们最早的VR界面是为“The Economist”设计的，与VR产物工作室Visualise一同合作。我们做设计，Visualise进行研发。

在介绍VR界面设计的具体细节之前，我们先以“The Economist”为例，来阐述VR app的设计方式。你能够经由Oculus网站先下载一下“The Economist”。

VR UI设计过程

固然大多数设计师对移动端界面设计流程或者已经管窥蠡测了，然则对VR界面的设计流程却不甚认识。当我们接到设计VR界面的项目时，我们做的第一步就是设计一套工作流程。

换汤不换药（新范畴，旧流程）

第一次使用三星的Gear VR时，我们发现这和传统的移动端app是相似的。他们有沟通的工作道理：用户经由与界面交互来浏览页面。这点很主要，固然这里只是简洁提了一下，但需要切记在心。

既然VR与传统app界面相似，那么设计师们破费数年时间进修并把握的传统UI经验不会虚耗，同样能够复用于VR范畴。事实上，你比你想象的更擅长VR app设计！

在讲解VR界面设计流程之前，让我们先回首一下传统移动界面的设计流程。

第一步：线框图

首先，经由快速多次迭代来界说交互体式和总体结构。

第二步：视觉设计

在这个阶段，设计气势和交互体式已经确立。将品牌气势与线框图相连系，经由精心设计获得时兴的界面。

第三步：流程图

为了表明页面之间的交互流程，我们会用线把页面保持起来，并将其称之为流程图。流程图将作为法式员在斥地过程中的首要参考。

那么，我们若何将传统的设计流程应用于VR设计中呢？

初始设置

画布巨细

最简洁的问题或者是最具挑战性的。面临360度的画布，用户很难知道从哪里起头交互。事实上，UX和UI设计师只需要存眷空间中的某一部门即可。

我们花了几周时间来弄清楚VR设计所需的画布尺寸。在设计移动端app时，画布尺寸是由设备巨细决意的：好比iPhone6的尺寸为1334×750像素，Android为1280×720像素。

要想将移动端app设计流程应用于VR，首先必需确定一个行之有效的画布巨细。

下图看起来像是一个360度的情况被睁开成了平面，这种示意形式被称为等边投影。在三维虚拟情况中，这些投影会包裹在一个球体四周，来模拟真实世界。

水平360度和垂直180度代表了投影的全宽。我们能够以此来界说画布的巨细：3600×1800像素。

这么大的画布很难顾全，因为我们首要是为了绘制VR界面，我们能够将注重力只集中在画布的一部门上。基于 Mike Alger早期对视觉舒适区域的研究，我们能够把有效的界面星散出来。用户感乐趣的区域集中在360度情况面积的九分之一，它位于等矩形图像的中心，巨细为1200×600像素。

得出结论：

“360视角”画布: 3600 × 1800像素

“UI视角”画布: 1200 × 600像素

测试

在一块屏幕上使用两种视角的画布是为了测试。“UI视角“的画布能够使我们的注重力集中在设计自己，建造流程图也会更便捷。同时，“360视角“画布用于预览VR界面，为了获得真实的比例感，使用VR头盔测试界面是很有需要的。

对象

在正式练习之前，先认识下所需的对象：

sketch：我们将使用sketch来设计界面和交互流程。若是没有，能够下载试用版。sketch是首选的界面设计软件，不外若是你更习惯于使用photoshop或其他任何软件，也是能够的。

GoPro VR播放器：它是一个360度界面查察器，由Gopro供应，免费。能够用来预览设计并测试。

Oculus Rift（译者按：是一款头戴VR显露器，价钱在399美元摆布）：将Oculus Rift保持到GoPro播放器来进行测试。

实操练练

在本节，我们将破费最多五分钟时间，来演习下VR界面设计流程。

下载素材包（https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0），里面有调整好的UI元素和配景图。若是你想用本身的素材，也是能够的。

1、设置“360视角”画布

首先，建立一个360度视角的画布。打开sketch，建立新文件，并建立一个3600×1800像素的画布。导入名为background.jpg的文件，并将其放置在画布的中央。若是想用本身的素材，请确保配景图像的比例为2:1，并将其调整为3600×1800像素。

2、设置“UI视角”画布

如上文所述，“UI视角”的画布只拔取“360视角”的一部门，而且只专注于VR界面设计。是以，我们在360旁边竖立新的1200x600像素的画布。然后，将360视角的配景复制到新画布，注重，要放置在新画布的正中央，而且不要调整巨细。我们要保留配景的裁剪版本。

3、设计界面

我们将在“UI视角“画布上设计我们的界面。为了使演习加倍清楚直观，我们添加了一行卡片。若是你想偷懒，也能够从素材包里直接把名为tile.png的文件拖到画布中央。在统一行复制三个tile文件，然后把kickpush-logo.png文件拖出来放在tile上方。

4、归并两个画布而且导出

将"UI视角”的画安置于“360”画布的中央，注重“UI”的图层要在“360”之上。导出“360”画布的png花样。

5、用VR设备测试结果

把方才导出的png拖进GoPro VR播放器的窗口，用鼠标拖动图像来预览。做到这一步我们就悉数完成了！很简洁吧！若是你电脑上有设置Oculus Rift，那么GoPro VR播放器会监测到它，而且许可你用VR设备来预览图像。凭据你电脑的设置，你能够在MacOS中处理显露设置。

手艺身分

低差别率

有人说VR头盔的差别率很差，这不是完全准确的：它相当于你手机的差别率。只是因为设备距离你的眼睛有5厘米远，显露器看起来就不那么清楚了。

为了获得清楚的VR体验，我们每只眼睛需要显露8K差别率，这相当于一个15360×7680像素的显露器。今朝的手艺还做不到，然则相信最终必然会实现的。

文本可读性

受差别率所限，所有时兴、清楚的用户界面看起来都是像素化的。这意味着文本将很难阅读，而且一条直线上的元素会显现混叠。设计过程中要尽量避免使用大文本块和过度细节化的UI元素。

收尾工作

流程图

在移动端界面中常用的流程图，也能够应用于VR界面。将“UI视角”界面保持成流程图，这对于斥地人员懂得我们设计的总体架构是非常有效的。

动效设计

建造时兴的界面是一回事，展示界面若何把持是另一回事。让我们再一次用二维视角来展示。用sketch设计好界面后，用AE或principle来展示动效。固然获得的并不是3D体验，但它能够用来作为斥地团队的指导偏向，而且能够使客户在项目早期懂得我们的设法。

你或者会感觉：“二维动效固然很酷，然则VR会比这个复杂的多。”是的，的确是如许。但问题是我们能多大水平大将我们当前的UI/UX设计应用在这个新的序言上呢？

VR UI设计能够走多远呢？

虚拟与实际的距离

一些VR体验严重依靠于虚拟情况，这时传统的置于顶部的把持界面并不是用户使用VR的最佳体式。在这种情形下，我们进展用户直接与情况自己进行交互。

想象一下，你正在为一个高档观光社斥地一款应用。你进展用最生动的体式将用户引流至各个潜在的度假目的地。是以，你邀请用户戴上头盔，在你宽敞的办公室起头体验。要从你的办公室切换到景致区，用户需要先选择他们想去的处所。他们或者会拿起一本旅行杂志，快速浏览，直到被某一页面吸引。也或者在你的办公桌上有一些有趣的器材，选择分歧的器材能够把用户带到分歧的处所。

显然这种把持很酷炫，但也有一些瑕玷。要达到完整的结果，需要一个更进步的VR头盔和手柄。此外，比拟以前移动端界面已经设置好了能够选择的选项，如许的把持需要花消更多的斥地资源。

贸易与立异的均衡

事实上，对大多数公司来说，这些身临其境的体验在贸易上并弗成行，除非拥有像Valve和Google那样几乎无限的资源，不然斥地出如上文描述的体验对他们而言太昂贵、太冒险，也太耗时。这种体验能够生动的示意出你处于媒体和手艺的前沿，然则要想将你的产物市场化却并不轻易。究竟，可把持性是很主要的。

平日，当一种新的形式显现，先行者们（这个世界的缔造者和立异者）会将它推向极致。跟着时间推移，经由更深入的进修，以及更多资金投入，才会被用户普遍接管。跟着VR穿戴设备的普及，更多的企业会发现商机，将VR融入他们与消费者的互动之中。

今朝来看，VR应用法式使用的界面都很直观，与人们习认为常的可穿戴设备、手机、平板和电脑等的应用法式根基无异，这使得VR成为大多数公司可肩负和值得投资的项目。

是时候搭上VR设计的火箭了！

进展这篇文章能够使VR看起来不那么恐怖，并激励你起头本身的VR设计。

常言道：独行者步疾,结伴者行远，而我们进展与你一路并肩远行。在Kickpush，我们认为每个公司最终都邑有本身的VR app，就像现在每个公司都有本身的移动端网站一般。所以我们制造了这艘关于VR的“火箭”，进展世界各地的设计师能够通力合作，勇敢地去索求未知的范畴。VR app越早实现贸易价格，当下的生态系统就越早进化。

作为电子产物的设计师，我们的下一个挑战是设计加倍复杂的应用，以及经由手柄进行更多类型的输入。为认识决这些问题，我们需要更高效率的原型对象，来快速轻松地建立及测试设计。我们团队会持续跟进雷同的早期测验及新对象的斥地进展，而且写在后续文章里。

原文：https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design

作者：Sam Applebee and Alex Deruette

译者: 菜菜菜菜来吃肉

本文翻译已获得作者的正式授权

介绍阅读

（点击题目可跳转阅读）

那些10年前经典的设计，如今若何（上）

2020年设计趋势 · 产物篇

深度进修能用于界面设计吗？

存眷『UI设计达人』

看更多精选UI设计文章

↓↓↓

好文章，我在看❤️