VR UI设计案例学习
最近,我在一个安卓VR app项目中负责界面的设计开发工作。对我而言,这是一个全新且未涉足过的领域,我感到无比兴奋。我希望将自己在这个过程中学到的经验分享给大家,同时也通过这种方式对自己的设计方法和解决方案进行总结。
本文将聚焦于整个设计流程中的以下几个阶段:
- 探索与研究
- 技术需求与局限
- 脚本、信息架构、功能与内容
- 草图
- 界面原型
- GUI设计
实战方法
故事板在VR设计中的运用
故事板(storyboard)作为一种高效快捷的沟通方式,在影视、游戏和网页设计等领域十分常见,常用于快速展示空间位置、镜头组、运动、互动关系等方面的设计概念。在传统设计中,我们习惯通过故事板的边框来界定场景范围。然而,在VR世界里,场景本身可能没有明确的边界,无法用有限的矩形完整呈现,这时该如何处理呢?
实际上,我们需要换个角度思考。传统方式是在故事板中定义目标对象与场景边界(或界面元素与屏幕边界)之间的相对位置关系;而在无边界的VR世界中,我们要定义的是目标对象与用户之间的相对位置关系。从某种意义上说,这是真正“以用户为中心”的设计思路,但对于习惯传统方式的设计师来说,一开始可能会感到陌生。
便捷实用的POV纸质原型
和许多人一样,我在实际体验VR后,被其蕴含的各种可能性和巨大潜力所吸引。最近,我终于有机会和团队一起构建VR世界。
在面向全新的信息媒介进行设计时,必然会遇到各种独特的挑战,当然也伴随着学习与探索的机遇。例如,我在构思主场景(即用户戴上头显并加载我们的app后看到的第一个场景)时,遇到了一些在设计2D界面时未曾碰到的问题。
挑战在于,我所熟知的概念原型制作方法,没有一种既能清晰呈现用户及互动元素在虚拟环境中的位置关系,又便于团队沟通协作。经过探索,我找到了一种简单高效的实践方式,本文将汇总相关的实战经验。
Unity与Cardboard app基础实践(1)
本部分将介绍如何使用Unity与Google VR SDK制作最简单的VR demo app,并部署到实际设备中,通过Cardboard进行体验。本期甚至无需自己制作任何东西,只需将SDK中自带的demo项目放进iPhone即可。如果不进行实际操作也没关系,毕竟涉及Xcode、Unity的使用,单纯了解一些“流程”方面的常识也是一种收获。
本期的英文原文是Google官方的一篇文档,内容较为枯燥,几乎没有配图。因此,我进行了一定程度的编译,并使用自己操作时的截图进行演示。
Unity与Cardboard app基础实践(2)
本部分将通过Unity构建一些简单的3D环境,然后打包成app供Cardboard使用。与上期相比,本文增加了一些更具体的内容,包括从Unity商店下载环境资源、在项目中使用Google VR Unity SDK提供的组件及第三方脚本等,实战性更强。同样,作为设计师,即使不进行实际操作,了解一些“流程”方面的常识也是有收获的。
此外,由于原文成文时间较早,之后Unity相关界面和Google提供的SDK使用方式都有变化,第三方脚本代码也需要手动变更,所以我进行了较大程度的编译,并将几乎所有配图替换为自己实际操作时的截图。
Unity与Cardboard app基础实践(3)
“Unity与Cardboard app基础实践”话题此前已发布两期,均为译文。第三期由我自己撰写,主要基于两方面考虑:一是目前能看到的Cardboard实战文章或视频教程大多基于旧版SDK,而非Daydream发布后更新的大一统版本的“Google VR”SDK,时效性不足,翻译时需要对代码和配图等进行大量修改;二是我希望将之前学到的知识点整合到一个完整的小范例中进行实践,并分享这个流程。
接下来,我们要做的是借用一些免费的Unity资源搭建3D场景,在场景中放置一两个无实际意义的3D对象,使用Google提供的SDK组件模拟VR视野。当视线聚焦在3D对象上时,VR准星会发生形变,同时3D对象会改变外观以暗示互动性;通过鼠标模拟Cardboard按钮点击事件,还可以使3D对象产生位移。如果有兴趣,可以将其打包成app放到iPhone中,通过Cardboard以真实VR的方式进行体验。
具体的实践要点如下:
- 向Unity项目中导入Google VR Unity SDK。
- 在Unity Asset Store中浏览并下载免费资源包。
- 调用Google VR相关组件,构建VR模式。
- 向场景(Scene)中添加交互对象。
- 编写代码,制定凝视交互的规则。
- 构建事件系统及触发规则。
- 通过Xcode将VR app部署到iPhone中。