高手经验!Facebook的360全景VR应用设计总结

侯雯佩:FB设计团队设计的一款Gear VR (三星VR 设备)平台的全景应用过程总结,其中包含一些很有价值的VR实战经验与设计原则。

文章目录[隐藏]

高手经验!Facebook的360全景VR应用设计总结

侯雯佩:FB设计团队设计的一款Gear VR(三星VR设备)平台的全景应用过程总结,其中包含一些很有价值的VR实战经验与设计原则。

FB的Immersive设计团队致力于提升人们身临其境的体验。我们相信脱离了传统的“容器”来讲述和体验故事可以让人们与情景和彼此更深入的联结。

我们已经在各个平台搭建了360度全景照片与视频服务,目前在FB上已经有超过2500万张360全景照片和100万个全景视频。尽管有如此多的全景内容,然而用户还是很容易在feed流中错过这些内容。

Facebook 360介绍

过去的几个月,我一直为下一步进行设计:给予三星Gear VR平台的Facebook 360应用——使全景照片和视频更容易被发现。这是FB第一个为Gear VR做的媒体应用,一个通过VR浏览360全景照片和视频的平台。

高手经验!Facebook的360全景VR应用设计总结

应用包含四个主要功能:

  • 探索:汇集FB上最火的360全景内容,来自专业的媒体公司、组织和个人创作者。
  • 关注:来自好友和自己订阅的360全景内容。
  • 保存:在移动端或PC端保存的360全景内容,这些内容被下载下来,以便在更合适的时间供用户浏览。
  • 时间线:自己分享的全景照片和视频,以一种全新的方式来展现。

我们聚焦在为用户打造一种与FB的使用保持一致模式的VR体验。每周我们会邀请不同使用背景的人来测试、验证我们的假设。

在设计应用时,很明显,在VR环境中的全景内容的使用和FB平台有很大的不同。人们会在一天中频繁的浏览FB的照片和视频,然而VR却是一个典型的单次浏览时间更久的场景:用户更容易 在VR中沉浸式的体验,忘却时间。

另外,我们了解到,尽管用户很享受浏览全景内容,但是移动手机与之交互并不是很方便,尤其是在公共场合。因此,我们提供了保存功能,以便用户可以在FB的360全景应用中可以浏览到用户保存的相关内容。使用户可以把在信息流中发现的好的全景内容保存下来,在之后方便的时候进行浏览。

当用户在FB 360全景应用中,我们期望帮助他们发现优秀的全景内容,所以我们提供了探索信息流,汇集了FB中最棒的全景照片和视频。人们可以在这里发现好的内容创作者,并关注他们。

以下是我们在设计FB全景应用的过程中,聚焦的5个关键点:

  • 被动沉浸式体验
  • 支持多种交互方式
  • 用Z轴深度来强化层级感
  • 针对误操作问题的优化
  • 坚持用实际设备进行测试

1. 被动沉浸式体验

通过用户测试,我们发现大多数Gear VR的用户的使用场景不是站立着,而是坐在沙发上或是创行,因此与头盔触摸板进行交互的方式很容易使人疲惫。这个发现对我们在设计导航和交互时有很大的启发。

例如,很多应用会要求用户频繁的在列表与单个内容之间频繁切换跳转。而我们为了规避这个问题,做了一个决策:自动的让用户在当前照片、视频和下一个之间直接浏览切换,无需回到列表。这样可以展示一种无缝的、像是叙述故事的幻灯片一样的体验。

对于列表,人们可以进入任何一个故事,进入一个幻灯片,如果看到任何感兴趣的部分,可以简单的点击或长按任意位置,查看详情信息。

2. 支持多种交互方式

我们尽可能的会为目标提供多种交互方式,这样就可以提供给用户多种选择,让他们选择自己觉得合适的方式来完成目标。

例如,浏览内容可以简单的通过目光左右滑动,也可以点击一个视觉元素,或是通过触摸板滑动来完成。

3. 用Z轴深度来强化层级感

通常情况下,我们会按照从左到右、从上到下的顺序来布局信息,但在VR环境下,中心点的受关注度高于其他区域的元素,并且在空间中靠近用户的元素的受关注度高于更远一些的元素。所以我们会引入Z轴深度来区分元素层级。

高手经验!Facebook的360全景VR应用设计总结

例如,我们发现当浏览内容时,提供深度层次,会呈现一种在窗子里像外面看的感受。这样会比较符合用户的心智模型,也让VR环境中的交互更优化。

高手经验!Facebook的360全景VR应用设计总结

我们设计了一种这样的故事卡片交互:让用户表现出想要与之交互的意图,卡片会向前移动。故事卡片距离用户6米,但是当用户凝视它时,响应的动画会出现的更近。当点击触发时,卡片动画会更近的呈现,并展现出一个顺滑的过渡效果。

我们发现这样的方式可以让用户更明确的知道自己所处的位置,并帮助他们更容易的在应用的不同界面中穿梭。

4. 针对误操作问题的优化

我们花了很大精力设计基于凝视的交互体验,使其使用起来比较舒服,以尽量少的动用到触控板。

在上面的例子中,当接近触发UI元素时,会有光晕效果呈现,这样可以容许用户在移动头盔的过程中可以无需那么的精确。这样的小细节可以使基于凝视的交互更容易一些,也减少了完成目标的难度。

5. 坚持用实际设备进行测试

我们很幸运的在开发应用的过程中一直让不同背景的用户参与到用户研究中来,每个周五我们都会邀请测试者,验证心智模型、舒适区、信息架构和其他的交互形式,包括没有使用过VR的新手用户,以及比较熟悉VR的专家用户。

我们发现进行原型测试是开发VR产品不可或缺的一部分:在2D环境中显而易见的东西,一旦戴上VR头盔后会变得异常复杂。在开发这个应用的过程中,我们积累了快速验证低保证原型的能力,频繁的在头盔中测试。

更多来自FB VR设计团队的相关总结和资源,可浏览链接:facebook.design/vr

欢迎关注译者的微信公众号:爱新觉罗米

高手经验!Facebook的360全景VR应用设计总结

VR设计好文合集」

  1. 谷歌设计师出品的VR设计入门指南
  2. VR设计指南之基础概念与设计工具
  3. 一名UX设计师的VR设计初体验
  4. 设计师该怎样从3个方面学习VR设计?
  5. 设计师进入VR领域会遇到哪些状况?(附解决方法)
  6. 关于谷歌的VR新平台,设计师应该知道的9件事
  7. 站在VR的大门前!主流VR平台交互特性浅析
  8. 从VR UI设计案例中学到的六个经验
  9. 浅聊故事板在VR设计中的运用(附模版下载)
  10. VR新工具之便捷实用的POV纸质原型
  11. 谷歌VR APP实战!UNITY与CARDBOARD APP基础实践(一)
  12. 谷歌VR APP实战!UNITY与CARDBOARD APP基础实践(二)
  13. 谷歌VR APP实战!UNITY与CARDBOARD APP基础实践(三)
  14. VR丨有哪些靠谱的VR开发工具 —— 3D建模篇
  15. FACEBOOK 实习生总结的这5个VR设计方法,帮你少走弯路!
  16. 实战教程来咯!超实用的VR界面设计实践指南

高手经验!Facebook的360全景VR应用设计总结

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

原创文章,作者:震天下,如若转载,请注明出处:https://www.iamue.com/34158/

(0)
震天下震天下
上一篇 2017-08-21 14:45
下一篇 2017-08-25

相关推荐

  • 如何利用动效提升用户体验

    我们不再是设计静态的屏幕,用户将会从我们的设计中看到实际的内容。

    2017-05-16
  • 设计师要懂心理学の视而不见

    著名的“数传球视频”,先做个小测试:你能数出来,白队一共传了几次球吗? 这个视频是“无意视盲”和“变化视盲”典型的例子,揭示一个现象:用户经常对重大变化视而不见。 眼动跟踪技术可以跟踪记录人眼观察的方向,确…

    交互设计 2014-11-20
  • 通过导航加强用户体验的3个原则

    文章介绍了导航设计中的3个原则,将以下原则付诸实践,或许会使用户体验大大Max!

    2017-05-06
  • 在用户体验中询问用户的4个问题(译文)

    该客户的体验是一个思考的人从我们产品的认知度如何去成为一个真正有用的抽象用户,但抽象并非最终有意义。要真正改进您的产品,您需要与您的用户交谈。无论是面对面的,应用内的还是通过电子邮件发送的调查,都需要花时间与用户签到并保持对他们最重要的事情。这种双向反馈也是您可以用来帮助人们通过漏斗最有效的工具之一,并最终帮助他们坚持成为您产品的惯用用户。让我们看看如何从战略上使用问题从用户那里获得正确的信息 - 这种信息将帮助您采取行动。如何提出从收...

    2018-02-26
  • 华景招聘用户体验分析师啦!

    作为华景员工,除了能体验旅游之外,还能体验华景食堂的凉皮儿和拉面,包子和油条,腊牛肉和酱猪肘,狮子头和卤肉饭,肉夹馍和艇仔粥,老婆饼和豆沙酥,酸辣汤和叉烧饭,泰式河粉和肉酱意面,干煸四季豆和蒜蓉蒸茄子……华景集团招聘1. 用户体验部    用户体验分析师岗位职责:*负责产品的用户研究,分析用户的使用习惯、情感和体验需求*负责原型/产品用户体验评估工作,参与产品的交互界面的设计,分析影响产品用户体验的因素*定期开展用户测试,观察用户使用产...

    2018-05-04
  • 中国App设计真好!—— 一个美国人到中国当产品经理的心得

    导读:应用软件层出不穷,各个国家的人为自己生活的便利设计出各款的应用。然而,同样的应用,是否会因为中西方文化的差异,或者是生活方式的不同,导致相同应用的设计有所不同吗?是的,有的!Dan Grover 现在是腾…

    2015-02-10
  • 交互设计的3大要素:用户、目标、行为

    交互的三要素:用户、目标、行为 讲个故事,小鹏是个销售员,下午出去拜访客户,完事后发现已经六点多了,非常饿,小鹏想回家自己做饭吃,但是实在是太饿了,回家又要做好久的地铁,还不如就在附近找家小饭馆吃了呢…

    2016-05-08
  • 和几位牛逼的设计师聊了聊“理想雇主”这件事,还有些别的故事...

    互联网领域的设计师们更像是一群“走钢丝的人”:游走在逻辑和审美之间,游走在说服和被说服之间,游走在PM、开发和大BOSS之间,试图最终达到各方的平衡和实现最有效的解决方案。

    2016-06-20
  • 产品经理神器 Axure 安装、激活和汉化教程

    摘要:Axure 是产品经理必会的一个工具,本文详细讲解 Axure 的下载、安装、激活和汉化等流程,方便大家学习 Axure 。作为一个合格的产品经理,几乎没有人不会使用 Axure 的,事实上,熟练使用 Axure 也成为了一个产品经理的基本功。为方便新手产品经理部署 Axure 环境,方便学习和使用,下面我来详细说明涉及部署 Axure 软件的各个步骤。下载关于 Axure 软件的下载,这里不多说,建议大家去官方网站进行下载,不要...

    2018-04-25
  • 设计师100问:问天问地问自己【UXRen译#179】

    作者:Jon Moore  |  翻译:hanbb,校审:宝珠 副标题:聪明的设计需要问对问题   一个设计师的工作不仅仅是调整像素和完善曲线。如果你问我在Innovatemap 的日常工作中和我在UX Power Tools的项目中学到些什么,那…

    交互专题 2017-10-11