实战教程!从VR UI设计案例中学到的六个经验

原文地址:medium

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

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

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

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

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

草图

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

界面原型

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

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

使用Boxshot完成3D空间效果

3D Max/Unity 3D

Unity 3D中的处理过程

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

GUI设计

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,646评论 4 366
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,979评论 1 301
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,391评论 0 250
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,356评论 0 215
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,740评论 3 293
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,836评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,022评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,764评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,487评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,728评论 2 252
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,200评论 1 263
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,548评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,217评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,134评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,921评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,919评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,766评论 2 274

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,585评论 25 707
  • 2015年12月 的 HTC VIVE 开发者峰会上,Valve 公司首席游戏设计师 Chet Faliszek、...
    小stone阅读 3,405评论 0 10
  • 在迷离的眼神中 藏不住黑色的洞 很深…很深… 在茫茫的人海中 填不满心中的空 很浅…很浅… 在一天的日落中 释放了...
    Zing13阅读 152评论 2 4
  • 情书再不朽,也都磨成了沙漏。 上一章 文|莹莹 下课后,苏清浅站起身,把那封情书放在上衣的口袋里,她转着黑色的眼珠...
    莹莹in阅读 653评论 18 19
  • 现在是晚上8:32,我躺在出租屋的床上。没有枕头(没钱买),后背垫着毛衣靠在硬邦邦的床头上写点东西。 床是双人的,...
    青木729阅读 225评论 2 1