VR UI设计案例学习

最近，在一个安卓VR app项目当中负责界面的设计开发工作。对我个人来说，这是一片从未涉足过的全新领域，因此感到无比兴奋，并希望将自己一路上所学到的经验分享给各位，同时也想通过这种形式对自己的一些设计方法和解决方案进行总结。

本文话题聚焦在整个设计流程当中的以下几个阶段：

• 探索与研究

• 技术需求与局限

• 脚本、信息架构、功能与内容

• 草图

• 界面原型

• GUI设计

实战方法

故事板在VR设计中的运用

作为一种高效快捷的沟通方式，故事板(storyboard)在影视、游戏和网页设计等领域当中十分常见，通常用于快速展示空间位置、镜头组、运动、互动关系等方面的设计概念。一直以来，我们都习惯于通过故事板的边框来界定场景范围；不过如果场景本身没有所谓的边界，无法通过有限的矩形来完整呈现，我们又该如何呢？

实际上，我们只需换个角度来看问题 - 过去的方式是在故事板当中定义目标对象与场景边界之间(或界面元素与屏幕边界之间)的相对位置关系；而对于没有边界的VR世界来说，我们需要定义的则是目标对象与用户之间的相对位置关系。某种意义上讲，这是名副其实的“以用户为中心”的设计思路，只是对于习惯了传统方式的设计师们来说，一开始可能会感到有些陌生。

便捷实用的POV纸质原型

和很多人一样，我(英文原文作者)在实际体验过VR之后，便开始为其中所蕴含的各种可能性及巨大的潜力而着迷。最近一段时间，我也终于有机会和团队一起去动手构建VR世界了。

面向全新的信息媒介进行设计，期间势必遇到各种独特的挑战；当然，相应的学习与探索的机遇同样并存。譬如我在刚刚开始构思主场景的时候便发现了一些从前在设计2D界面时未曾遇到过的麻烦。所谓主场景，也就是用户戴上头显并加载了我们的app之后看到的第一个场景。

挑战在于，我所熟知的概念原型制作方法当中，没有哪种既能清晰的呈现出用户及互动元素在虚拟环境中的位置关系，同时又非常便于团队之间进行沟通和协作。经过一番探索，我找到了一种非常简单高效的实践方式，而本文便是相关的实战经验汇总。

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当中。