关灯
工作站之家 首页 首席设计师 查看内容
0

VR应用程序设计:如何设计VR用户界面?

摘要: 迈出成为VR的UX或UI设计师的第一步可能有点难,在这篇文章中,我将分享设计VR应用程序的过程,希望对于你今后的VR设计有帮助。首先,你不需要成为VR的专家,你只需要灵活地将你的技能运用到新的领域。作为未来VR设计 ...

迈出成为VR的UX或UI设计师的第一步可能有点难,在这篇文章中,我将分享设计VR应用程序的过程,希望对于你今后的VR设计有帮助。

首先,你不需要成为VR的专家,你只需要灵活地将你的技能运用到新的领域。作为未来VR设计师大军中的一员,我们可以加速VR的发展,释放VR的潜能。

VR应用程序的种类

站在设计师的角度来说,VR应用程序由两种组件组成:环境和操作界面。

当你戴上VR头盔后,想象自己进入一个虚拟世界——比如一个虚拟星球,或想象坐在过山车的看到的景色。

操作界面是用户与环境互动的一系列元素,用于浏览环境和操作体验。根据这两个组件的复杂性,所有VR应用程序都可以沿着2个轴进行定位。

位于左上角的象限是模拟器,如模拟过山车的体验。这些模拟器具有预先定制的环境,但还没有操作界面。这种体验就像你被绑在过山车上观光一样。

它相反的象限是已经开发好操作界面的应用程序,但基本上没有制定好的环境。三星的Gear VR主屏就是一个例子。

设计虚拟环境(如场地和景观)需要熟练使用3D建模工具,这对于许多设计师来说有一定难度。但UX和UI设计师仍有机会运用他们的技能来设计VR的用户界面(简称VR UI)。

我们做的第一个完整的VR UI设计是“经济学人”的应用程序,这是与VR工作室Visualize合作开发的。我们做了设计,Visualize创建了内容,开发了应用程序。

下一节中我们将它作为一个示例,借此我们将说明设计VR应用程序的方法,然后再深入到VR界面设计的本质。你可以从Oculus网站下载Gear VR的Economist应用程序。

VR UI设计流程

虽然大多数设计师熟悉了移动应用程序设计的工作流程,VR界面设计流程尚未定义。当我们接到第一个VR应用程序设计项目时,我们做的第一件事就是设计一个流程。

传统工作流程,新领域

当我们第一次使用三星的Gear VR时,我们注意到它与传统的手机应用程序的相似之处。基于界面的VR应用程序实际上是根据与传统的应用程序相似的基本动态运行的:用户与他们浏览页面的用户界面进行交互。

鉴于与传统应用程序的相似之处,同时,移动应用程序工作流程是设计人员花费了大量时间打磨,并且这个工作流程经过了反复测试,所以它也可用于制作VR UI。

在介绍如何设计VR界面之前,让我们回顾一下传统移动应用程序的设计流程。

1.  线框图

首先,我们将进行快速迭代,定义交互和总体布局。

2.  视觉设计

在这个阶段,所有的功能和交互已确定下来。在这个阶段品牌指南应用于线框图,并且出一个精美的界面。

3.  架构蓝图

在这个阶段,我们将不同屏幕设计组织成工作流,在不同屏幕间添加链接,以此描述每个屏幕之间的交互。我们称把这个过程称为应用程序的架构蓝图,被用作项目开发人员的主要参考。

现在,我们如何将这个工作流程应用于VR中呢?

设置

画布的尺寸

最简单的问题可能是最具挑战性的。面对着360°的画布有时候无从下手。事实证明,UX和UI设计师只需要专注于总体空间中的某一部分。

我们花了好几个星期试图找出什么尺寸的画布大小对于VR是最合适的。当你在做移动应用程序时,画布大小由设备的尺寸决定:iPhone 6为1334×750像素,Android为1280×720像素。

如果想把移动应用程序工作流程应用于VR UI,首先你必须找出一个合适的画布大小。

下图360°的环境平铺的样子。这种表示法被称为等角投影。在3D虚拟环境中,这些投影围绕着一个球体,以模仿现实世界。

投影的全宽度表示横向360°和垂直180°。我们可以用它来定义画布的像素大小:3600×1800。

这么大尺寸下的设计是一个挑战。但由于我们主要关注VR应用程序的界面方面,我们可以这个画布中的一部分开始操作。

基于Mike Alger对舒适观看区域的早期研究,我们可以单独隔离出一部分来显示界面。

这个隔离出来的区域代表着360°环境中的九分之一。它位于方形图像的中心,尺寸为1200×600像素。

我们来总结一下:

  • “ 360°视图 ”:3600×1800像素
  • “ UI视图 ”:1200×600像素


12下一页

晕倒

感动

大哭

惊呆

口水
本文作者
2019-4-2 12:21
  • 0
    粉丝
  • 101
    阅读
  • 0
    回复

关注迪恩网络

扫描关注,了解最新资讯

联系人:高经理
电话:15562103797
EMAIL:125422921@qq.com
地址:威海市创新创业大厦2702
热门评论
排行榜

关注我们:微信订阅号

官方微信

服务热线:

010-58414718

电子邮件:iws@iworkstation.com.cn

地址:北京

Copyright   ©2007-2018  工作站之家Powered by© iworkstation.com.cn ( 京ICP备08005157号|人工智能