BeFor Web
为网而生 - 原创译文博客 - 关注移动、VR及互联网产品的用户体验设计

站在VR世界的大门前 - VR UI设计案例学习

站在VR世界的大门前 - VR UI设计案例学习

周日晚间将近10点。说起来也是不记得有多久没这样在家里做博客了。不是公司茶水间就是咖啡厅、餐厅一类;已有将近四个月的样子?难以想象。

说是“这样”,却也完全不同于从前的任何一样。彻头彻尾的单人空间,以极大的音量释放着Charlie Parker的萨克斯旋律,冰镇到恰好可以清心明目又不会导致牙疼的啤酒。写到这里突然打了个嗝;斑斑慵懒的窝在冰箱顶上睡着,每到夏天便食欲不振。

到了这般时候才准备更新博客,并且要更晚一些才会放到公众号上,实在抱歉,抱歉。因为一些家事、公事,周末两天的多数时间被占据,到了周日下午又突然想到“不如给自己放个假吧”而跑去看了《惊天魔盗团2》。与之前那次看美队时一样的跑到了UME,趁时间尚早,再次冲去“猫的天空之城”。在微博或朋友圈常来常往的朋友们约莫知道我这两个月来只是在不断的读村上春树的随笔、杂文、游记集子,而这一切都开始于那次去“猫空”随手买回来的一本《碎片:令人怀念的1980年代》(这篇念叨里有介绍,很推荐)。两个月间一共搜罗到22本这样的集子(不包括他的任何小说,仍会感到心力不足以去读小说,只是看这些小文便很开心),目前在读第7本 - 我将这一过程称为“村上接力”。

今天买到的是《生日故事集》,其实这本当中只有一篇出自村上春树;问题在于,书店里已经买不到任何我还没有的短篇集子了,而长篇小说又一概不愿买回来。怎样都要收一本回来才好,我是这样揣摩的,并也决定每逢去UME看电影便一定要去“猫空”买一本实体书回来;有时很喜欢凭空制造一些这样的“仪式”、“习惯”一类,或许只是为了不会忘却第一次发生时给自己带来的记忆与意义。

而关于电影本身,倒也没太多好说。我自己很喜欢,或许只是出于“从前看过1了所以可以看2的话便怎样会很幸福啊”而喜欢,和之前看《独立日:卷土重来》的感觉是类似的,会一边看一边觉得开心,心情也随着影像、音乐、音效而跌宕起伏;这就不坏。并不太明白在豆瓣上面打一星、二星,然后码上那么几十万字来表达这些片子有多么无聊多么肤浅多么没剧情多么耽误自己时间的人的心态,并不太明白 - 非要抱着品尝匠心料理的初衷去吃汉堡王,吃饱喝足却要抱怨“太快餐化了吧!” - 并不太明白如此甘愿作为“非目标用户”去消耗自己的时间、金钱甚至是心情的人的初衷,我着实不太明白。

电影结束后,回到一楼的馆子吃了一碗豚骨拉面,揣着书回家。不坏,着实不坏;这样敲字的时候又开始感到饥饿起来。

看了一眼时间,已经将近十点三十分。决定不再念叨有的没的了,将正文整理好一并更新上来,这周便结束掉。一篇实际VR项目过程中的设计流程总结,案例学习大法好。下面进入译文。

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

为了使内容结构更加清晰合理,并更具实战参考性,我参考了IDEO的设计思维理论、Toni Parisi所著的Learning Virtual Reality一书(以及更多VR相关书籍),还有来自UX Clan的The Weapon for Digital Product Jedi一文,并决定将本文话题聚焦在整个设计流程当中的以下几个阶段:

  • 探索与研究
  • 技术需求与局限
  • 脚本、信息架构、功能与内容
  • 草图
  • 界面原型
  • GUI设计

探索与研究

随着技术与应用理念的不断成熟,VR将有可能成为我们日常生活的重要组成部分,并在以下这些领域当中带来令人激动的全新体验模式:

视频游戏

最为典型的应用领域。当你和人们说起VR时,多数人立刻会想到游戏 - 深度的沉浸感,忘我的全身心参与其中 - 这些体验需求使开发者、游戏主机及周边设备厂商们望眼欲穿。可以肯定,如今多数的VR团队都渴望在这一领域当中分得一块蛋糕。

社交

在VR技术的推动下,用户自主创建并互通互动的虚拟世界同样可以成为极具真实感与自由度的全新社交舞台。诸如High Fidelity(由Second Life的创始人Philip Rosedale创建)、AltSpace VR以及旧金山湾区的一些创业公司已经开始在这个领域当中发力了。

教育

3D化的内容呈现方式一直都是互动式教学当中的重要手段。结合VR技术带来的沉浸感及虚拟交互体验,学习过程将充满实践性和趣味性,从而更加卓有成效。

生产力

目前,在某些领域当中,已经有一些研究者和小型公司开始探索如何将VR作为生产工具来代替传统的桌面设备了。可以试着设想一下在完全虚拟的办公环境当中自由操作虚拟工具、处理工作内容的情景。

观光

高质量的360°全景影像非常引人入胜,能够帮助用户简单快捷的实现观赏体验,足不出户,逛遍天下。

建筑与房产

这些行业当中的先行者已经开始试验VR技术的运用了,包括拍摄全景影像以及构建可交互的虚拟建筑空间等等。影像的形式适合于向客户呈现已有的产品,而虚拟空间则更加适用于在规划阶段演示复杂的设计方案。

现场直播

VR视频将成为音乐会、新闻现场及其他直播场景的重要传播形式。就在不久之前,Paul McCartney、Jack White等乐人已经通过这种形式来转播自己的现场表演了。

网页浏览

Mozilla已经开始向他们的浏览器(Firefox)当中添加VR支持能力,Google方面也是同样。除了技术方面的研究,Mozilla同时也在对VR当中的网页导航模式及页面展示方式进行探索。

更多专业应用

VR技术的巨大潜力还将体现在诸多领域,包括军事训练、医学培训与诊疗、工程、设计等等。

你可以在Within.in了解到更多更具体的VR应用案例。

技术需求与局限

我们的产品在总体形式上会像YouTube和Vimeo那样为用户提供VR视频服务;视频内容本身会按照类别与标签进行组织。

01-case-study-vr-ui-design.png

基于产品自身的目标及其输入、输出等方面的特性,我们在着手制作产品原型之前,首先对实现产品所需的技术,包括可能遇到的瓶颈和局限,以及有可能产生的潜在问题进行了充分的预研,使设计师在接下来制定设计决策的时候能够更加准确和高效。

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

这个阶段的目标包括梳理信息架构,制定交互脚本,对每个界面的功能与内容进行定义描述。所产出的文档可以为整个项目带来更加全局化的视野,使接下来的实际设计工作能够聚焦于最关键的信息,减少无用功,同时也能将更多的时间节省出来,用于对VR交互设计模式进行探索。

我通常使用Xmind来逐个模块的梳理产品信息架构,并配以简单的流程图来理解产品功能与内容的全景。

02-case-study-vr-ui-design.png

03-case-study-vr-ui-design.jpg

草图

即便是对于VR产品,在探索阶段通过纸笔来快速呈现和沟通想法依然是非常重要的设计方式。纸和笔不会像设计软件那样需要你将很多注意力聚焦在“工具”本身的使用上,不会局限你的思考,能帮你以最快的速度将想法落实下来,同时在多人沟通协作方面也具有相当高的实用价值。

04-case-study-vr-ui-design.jpg

界面原型

经过前面几个环节的探索,你应该已经对产品的整体架构,包括界面的数量及内容、布局等等有了比较清晰的认知,接下来便可以进入原型制作阶段了。原型的意义在于验证想法、获取反馈、通过迭代进一步验证想法,周而复始。

我通常使用Boxshot来快速制作虚拟环境的效果样式,通过Blender为VR界面元素建模,最终在Unity 3D当中完成原型制作。

08-case-study-vr-ui-design.png

09-case-study-vr-ui-design.png

使用Boxshot完成3D空间效果

10-case-study-vr-ui-design.jpg

3D Max/Unity 3D

11-case-study-vr-ui-design.png

Unity 3D中的处理过程

12-case-study-vr-ui-design.png

Unity 3D当中的分类菜单视图

GUI设计

接下来是实际的图形化UI设计阶段,用户最终要与其进行直接互动。这个阶段对于多数传统UI设计师来说应该是最为熟悉的,其中有三点要素需要特别关注,包括符合产品自身特质的情感化体验塑造、符合3D世界交互原则的设计语言运用,以及符合用户对于数字化界面既有认知的设计模式。这三者之间的良好平衡是塑造VR图形界面的关键所在。

13-case-study-vr-ui-design.png

我已将更多实际的mockup放到了Behance上,欢迎访问,也期待与各位进行交流。

彩蛋 from C7210

今天买来的《生日故事集》,并不急于拆封。

因为要把所有这些都读掉先:

本周便是这样;时间已晚,下周见,各位。

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - 交互设计师、UX热爱者、VR探索者、译者、猫奴、吉他手、鼓手,现就职于腾讯
发表评论