刚刚还在和朋友念叨,近来很少再像去年夏秋时那样大段大段的当作随笔一样写着各种有的没的,以至于需要在公众号中单独分一篇“前言”出来才好。时间变少了或是事情变多了,或是需要依靠那般的状态才能调整身心的时期已经过去。不知道,只是不想再那样写了。
突然想到走心和走肾的问题。简直不知这是从何说起。哦对了,前面一个朋友特意加了个人微信号来询问5年多以前一篇译文里提到的一本英文书是否有中文版引进的问题,无法提供帮助,抱歉移除了好友。也希望任何有意交流这类通过任何搜索引擎都能轻松得到答案的问题的朋友真的不必花时间找到我的个人号然后等待好友验证之后在手机上打字交流,大家时间都很宝贵。
仍是2月时节却开始时不时的一副春意盎然的面目,这世界。身在红坊,Musee Cafe,阳光下的人们那么幸福,老老少少,狗狗们在追逐奔跑,小朋友们踢着足球。真不坏啊,有时你甚至会这样觉得。
时间不多。一篇VR实践指导文章。Smashing Magazine好久没有这样新一些的东西了。实践指导性质的内容非常简单易行,个人感觉需要重点关注的是将传统UX设计流程及方法融入VR产品设计的思路,以及作者对于VR设计开发工作前景的观点。新技术,新事物,大风刮去之后留下的一批实践者所始终坚持的那些,才是真实的、有长期价值的东西。这是走心;集体意淫无非走肾而已。
下面进入译文。
对于很多设计师而言,VR仍是一片未知领域。在过去的几年当中,我们见证了VR硬件设备与软件产品的爆发式增长。站在体验的角度来看,从枯燥无聊到精彩绝伦,不同类型的VR平台与软件形式所带给我们的也不一而同,其中的复杂度与使用效率方面的差异也相当明显。
作为传统UX设计师,踏入全新领域的第一步是最为困难的。我们知道,因为我们经历过。别担心,在本文中,我们将详细的分享VR app在设计方面的具体流程,包括相应的工具及方法,希望各位读过之后能够掌握到足够的知识去运用到自己的VR项目设计当中。要实现这一目标,你不必成为什么专家,但学习热情以及将能力运用到新领域当中的渴望则是必需的。希望我们最终能够通过更多的分享与交流来最大程度的推进VR的发展速度。
VR app的类型
从设计的角度讲,VR app大致由“环境”与“界面”这两部分所组成。
你可以将“环境”理解为戴上VR头显之后所进入的那个世界,譬如你所身处的那个虚拟行星表面,或是正在带你飞驰的过山车。
“界面”指用户为了游历环境或控制流程体验而必须与之进行互动的一系列虚拟对象。
所有的VR app都可以根据这两个组成部分的复杂度差异而被划分到四个象限当中:
左上方象限当中最具代表性的就是模拟器类产品,例如前面提到的提供过山车体验的VR app。这类产品通常会构造出完整的虚拟环境,但不提供任何界面,用户只能全程被动体验。
相对应的,归属于右下方象限中的产品通常会提供完善的界面交互体系,但在环境构建方面的笔墨通常较淡,甚至不提供环境。三星Gear VR的首屏就是一个典型的例子。
虚拟环境的设计工作需要纯熟的3D建模能力,这使得我们这些2D界面领域的交互或视觉设计师望而却步。但另一方面,VR产品当中的界面设计部分却是我们施展能力的大好舞台。
我们的工作室设计的第一款全界面式的VR产品是为《经济学人》杂志打造的app。我们负责设计,合作方Visualise工作室负责开发实现与内容创作。
在本文中,我们将以这款app的设计流程作为案例,首先对VR app的整体设计方式进行了解,然后重点聚焦于界面设计方面。 你也可以到Oculus的官网下载用于Gear VR的《经济学人杂志》VR app。
传统界面设计流程
我们多数人对于移动app的设计流程早已轻车熟路,然而VR界面的设计工作流程仍然没有所谓的标准定义。我们在着手启动第一个VR app项目时,首先做的就是对设计流程进行定义。
传统流程,新领域
我们第一次体验Gear VR时便注意到其中的界面设计与传统移动app有着相似之处,譬如在交互流程方面,用户都是通过与界面元素的互动来实现页面间的跳转。当然这个例子太过笼统,目前只要记得这个结论便好。因此我们多年以来所熟悉的那套“尝试、验证、迭代”的产品设计思维依然可以派上用场,我们这些“传统”设计师距离VR设计其实并没那么远的样子。
既然如此,我们不妨在正式进入VR界面设计话题之前,先来简单的梳理一下传统移动app的设计流程。
1.线框稿
我们首先会通过线框稿的快速迭代来定义交互流程与界面布局。
2.视觉稿
在这个阶段,功能与交互方式应该已经得到明确的定义,设计师需要将视觉设计语言以及品牌规范运用到线框稿当中,雕琢出最终的视觉稿。
3.流程图
我们还需要通过界面组织起功能流程,将界面稿串联起来,添加必要的逻辑走向和描述,形成一份流程图,主要目的是帮助开发人员理解产品的功能逻辑。
那么,我们应该怎样将这套流程运用到VR设计当中呢?
设计文档配置
画布尺寸
有时,最基础的问题反而会最具挑战性。当你面对着360°的画布时,往往不知应该从何入手,毕竟我们多年来一直习惯于面对那些尺寸固定的2D界面窗口。
我们花费了几个星期的时间去摸索怎样的画布规格最适于承载VR空间。当你设计移动app时,画布规格通常由设备尺寸所决定,譬如750x1334对应着iPhone的基础尺寸,而720x1280则适于Android平台。同理,在试着将传统设计流程融入到VR产品的过程中,我们也需要找到最便于呈现虚拟3D空间全貌的画布尺寸。
下图便是360° VR环境以2D形式呈现出的样子。这种形式叫做“圆柱投影”(Equirectangular Projection)。在3D虚拟环境中,这样的投影图形会被包围在球形空间当中,模拟出真实世界的样子。
投影图片的宽度代表着3D世界当中360°的横向视野,高度代表着180°的纵向视野。基于此,以像素为单位,我们将画布的尺寸设定为3600x1800.
在如此巨大的画布上工作还是有些挑战性的。不过由于我们主要关注于app当中界面部分的设计,所以在多数时候可以只聚焦在画布的一小部分上。
参考着Mike Alger关于VR视野舒适区域的早期研究,我们可以从整个画布当中割离出一块区域专门用于呈现界面相关的元素。我们选定的区域占据整个画布的1/9,位于正中,尺寸为1200x600.
归纳下来,以像素为单位:
-
360°视图:3600x1800
-
界面视图:1200x600
测试
我们使用两块独立的画布来进行测试,其中一块(1200x600)用于承载界面视图部分,使我们得以更好的聚焦于界面设计流程,而另一块(3600x1800)则专门用于呈现环境的部分。为了验证界面区域的尺寸是否合理,我们必须通过实际的VR设备进行测试体验。