3. 行动方案
这里,我们已经把界面组织成了一个流程图,画出了界面之间的跳转链接,并为每个界面描述了交互行为。我们叫这个为解决方案,它会被开发人员作为主要参考。
那我们现在如何把这个流程应用到虚拟世界里呢?
设置Canvas尺寸
最简单的问题可能是最有挑战性的。面对360度的canvas,你会有些不知从何开始。其实UX和UI设计师只需专注在整个空间的某个特定部分就好了。
我们花了好几周尝试计算出什么尺寸的canvas对于VR来说更合理。当你设计移动app时,canvas的尺寸是由设计的尺寸决定的,比如iPhone 6的1334 × 750像素和安卓的1280 × 720像素。
为了把这个移动app流程应用到VR UI上,你首先要计算出合理的canvas尺寸。
“设计师花很多年定义的移动app工作流程能被用于设计VR界面。”
下面是一个360的环境被扁平化的样子。这个演示被叫做正方形投影。在3D虚拟环境,这些投影被包裹在一个球形领域来模拟真实世界。
整个投影的全屏宽度代表着水平方向上360度和垂直方向上180度。我们使用这个定义canvas的像素尺寸:3600 × 1800。
用这么大的尺寸是一个挑战。但是,因为我们主要是对VR app界面设计感兴趣,我们可以把精力集中在canvas这个部分。
基于Mike Alger对舒适的可视区域的早期研究,我们可以分离出一个部分让界面呈现得更合理。
这个区域代表着360度环境的九分之一。它正好在球面投影图片的中心区域,尺寸是1200 × 600像素。
我们来总结一下:
“360视图“: 3600 × 1800 像素
“UI视图“: 1200 × 600 像素
测试
为一个界面使用2个canvas的理由是为了测试。“UI视图”的canvas帮助让我们专注在我们正在设计的界面上,让设计流程变得更加简单。
与此同时,“360视图”被用于预览VR环境里的界面。为了获得比例上的真实感受,用VR设备测试界面是很有必要的。
工具
在开始演示之前,介绍一些我们需要的工具:
Sketch我们会使用Sketch设计界面和用户流程。如果你没有,你可以下载一个试用版。Sketch是我们更偏爱的用户界面设计软件。
GoPro VR PlayerGoPro VR播放器是一个360度内容可视器。是由GoPro提供的,而且免费。我们使用它来预览和测试我们的设计。
Oculus Rift把Oculus Rift嵌入GoPro VR播放器里能让我们基于场景测试设计效果。