如何入门VR界面设计(2)

来源:网络   作者:热心网友   发布时间:2017-04-27    浏览次数:340

3. 行动方案

这里,我们已经把界面组织成了一个流程图,画出了界面之间的跳转链接,并为每个界面描述了交互行为。我们叫这个为解决方案,它会被开发人员作为主要参考。

b46058f81c96a8012049efc81c4d.jpg

那我们现在如何把这个流程应用到虚拟世界里呢?


设置Canvas尺寸


最简单的问题可能是最有挑战性的。面对360度的canvas,你会有些不知从何开始。其实UX和UI设计师只需专注在整个空间的某个特定部分就好了。

我们花了好几周尝试计算出什么尺寸的canvas对于VR来说更合理。当你设计移动app时,canvas的尺寸是由设计的尺寸决定的,比如iPhone 6的1334 × 750像素和安卓的1280 × 720像素。

为了把这个移动app流程应用到VR UI上,你首先要计算出合理的canvas尺寸。

“设计师花很多年定义的移动app工作流程能被用于设计VR界面。”

下面是一个360的环境被扁平化的样子。这个演示被叫做正方形投影。在3D虚拟环境,这些投影被包裹在一个球形领域来模拟真实世界。

afa558f81cbfa8012049efd2a30b.jpg

整个投影的全屏宽度代表着水平方向上360度和垂直方向上180度。我们使用这个定义canvas的像素尺寸:3600 × 1800。

767958f81ccda8012049ef23995f.jpg

用这么大的尺寸是一个挑战。但是,因为我们主要是对VR app界面设计感兴趣,我们可以把精力集中在canvas这个部分。

基于Mike Alger对舒适的可视区域的早期研究,我们可以分离出一个部分让界面呈现得更合理。

这个区域代表着360度环境的九分之一。它正好在球面投影图片的中心区域,尺寸是1200 × 600像素。

eeff58f81cf2a8012049ef48719c.jpg

我们来总结一下:

“360视图“: 3600 × 1800 像素

“UI视图“: 1200 × 600 像素

79e658f81d02a8012049ef6ec1ee.jpg


测试


为一个界面使用2个canvas的理由是为了测试。“UI视图”的canvas帮助让我们专注在我们正在设计的界面上,让设计流程变得更加简单。

与此同时,“360视图”被用于预览VR环境里的界面。为了获得比例上的真实感受,用VR设备测试界面是很有必要的。

723c58f81dbda8012049ef5c0d78.jpg


工具


在开始演示之前,介绍一些我们需要的工具:

Sketch我们会使用Sketch设计界面和用户流程。如果你没有,你可以下载一个试用版。Sketch是我们更偏爱的用户界面设计软件。

GoPro VR PlayerGoPro VR播放器是一个360度内容可视器。是由GoPro提供的,而且免费。我们使用它来预览和测试我们的设计。

Oculus Rift把Oculus Rift嵌入GoPro VR播放器里能让我们基于场景测试设计效果。


123共3页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:ui干货

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/5934.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通