【译文】VR UI设计案例学习

最近,我在一个安卓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视频服务;视频内容本身会按照类别与标签进行组织。

1474861329-7615-01-case-study-vr-ui-design

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

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

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

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

1474861340-2634-02-case-study-vr-ui-design

1474861366-5862-03-case-study-vr-ui-design

草图

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

1474861343-3845-04-case-study-vr-ui-design

1474861364-5523-05-case-study-vr-ui-design

界面原型

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

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

1474861362-6999-08-case-study-vr-ui-design

1474861394-3675-09-case-study-vr-ui-design

使用Boxshot完成3D空间效果

1474861396-5857-10-case-study-vr-ui-design

3D Max/Unity 3D

1474861413-5983-11-case-study-vr-ui-design

Unity 3D中的处理过程

1474861424-9845-12-case-study-vr-ui-design

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

GUI设计

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

1474861468-5447-13-case-study-vr-ui-design

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

本文来自Be For Web
译者信息: C7210 - 交互设计师、猫奴、吉他手、鼓手、老狗,现就职于腾讯ISUX(上海)

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/17897/

(0)
TinadminTinadmin
上一篇 2016-09-24 13:56
下一篇 2016-09-26 15:55

相关推荐

  • 谷歌开发了那么多应用,为何只有这款VR应用被惊呼“逆天”?

    文/孙实 来源/VR次元 这两天,很多人的朋友圈都被“谷歌逆天绘图软件”的文章刷屏,实际上是谷歌推了出一款基于HTC Vive头盔的VR绘画应用Tilt Brush。 虽然这仅仅是一款VR应用,但光看视频就能让人觉得血脉偾张。 揭…

    2016-05-09
  • VR对设计领域会有什么影响,设计师在VR方面能学习什么?

    VR来了,5年后你可能在虚拟世界里做设计 6年前,你我手里拿的还是诺基亚,乔帮主还没发布iPhone4,微信仅被少数人使用,过年时还发短信拜年。是的,世界时时刻刻都在变化。 <img src="https://pic4.zhim…

    2016-04-19
  • 谷歌产品设计师的VR设计入门指南

    本文包括初识VR、相关知识及设计工具三方面,非常实践化的入门经验文章。现实中也许看不到任何实践机会,但事情就是这样,好像在跑步机上,你即便在努力跑着,也未必会向前,但如果原地踏步,就一定会被甩下来。 好…

    2016-04-27
  • Daydream产品设计案例 - YouTube VR

    每年这个季节都盼着来自北方的冷空气能早些把这个城市吹干、吹冷。这世上,又湿又温暖的地方未必都是好地方。 随着Daydream头显和Pixel手机的发布上市,Google官方的各路VR app也陆续上线。我个人还没有机会、没有…

    2016-12-08
  • 从二维界面到虚拟现实 VR (总)

    我是Google的一名产品设计师。2012年,我当时就职的一家名为Sparrow的法国创业公司被Google收购。从那时起,我就一直在Gmail团队效力,并全程参与了旗舰产品Inbox by Gmail的设计工作。 这些年下来,始终置身于移动…

    VR 2016-05-03
  • Microsoft将向合作伙伴开放 Windows Holographic,官方放出的宣传片

    Microsoft将向合作伙伴开放 Windows Holographic,以下为官方放出的宣传片,巨硬爸爸一出手果然不同凡响。 【微软向合作伙伴开放 Windows Holographic,打造混合现实新时代】魔术师妙手生花,孙悟空腾云日行万里,…

    2016-06-03
  • AR这块蛋糕比VR大3倍,需等5年才“出炉”?

    4月24日晚,2016年汉诺威工业博览会拉开帷幕。博览会上展示的百余项工业4.0的实际应用中,德国总理默克尔、美国总统奥巴马体验了一把VR(虚拟现实)眼镜。随着VR消费级产品的不断问世,2016年可以说是“VR元年”,但…

    2016-04-26
  • HoloLens 确炫酷狂拽屌炸天!另外,这不是VR!

    6月2日凌晨,有“互联网女皇”之称的Mary Meeker今天在美国Code大会上发布了2016年的互联网趋势报告。 (关注“艾欧交互设计”微信号:AioUED,回复“2016”可获取报告中英文版PDF下载链接) 作者:朱宏 链接:https://zh…

    2016-06-02
  • 吕宇翔:VR内容的创新与突破(附PPT)

     以下内容为清华大学新媒体传播研究中心吕宇翔博士在活动中所作的题为“VR内容的创新与突破”的演讲。

    2016-08-31
  • Raconteur:2016年全球VR营销报告,VR交互可以了解一下(全文)

    编者按:专门为《泰晤士报》等英国权威媒体提供市场调研服务的机构Raconteur发布一份万字报告,以多家公司为例,详细解读电影、房地产、旅游、零售、服装等多个行业的从业人员应该如何顺应VR时代。 参与报告英文原…

    2016-05-24