高手经验!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

相关推荐

  • 【笔记】Google设计师传授Whiteboarding新技能(附视频)

    公元2016年2月20日星期六,丙申猴年正月十三。正是广大交互设计师出门聚会交流的黄道吉日啊!紫气东来,应在中城WeWork Madision,此地必有祥瑞!小编掐指一算,原来是UXRen纽约第二期活动啊!(^o^)/~   笔记:JayJ…

    交互专题 2017-08-07
  • 铃木说马云的双11是错的

    铃木敏文:“判断项目是否可行,应该由用户立场出发,以用户视点深入考察是否符合需求。一旦决定开拓,就一定要坚持到底。”“海星有一种特殊的能力——再生。它的腕、体盘和管足受损或自切后,都能够重新生成一个新的海星。因此,它对环境的适应能力和生存能力都特别强。”铃木敏文:“冬天,北海道地区的店准备了大量空间贩卖冰淇淋。“
    当地生意人纷纷嘲笑说:“谁会大冬天里吃冰淇淋呀!”
    但是,铃木说:“家里暖气开得很足,如果能吃上冰淇淋,客人应该会很开心吧!”铃木敏文:“红豆糯米的美味之处在软糯口感,但在它刚被研发成型时,试吃过后并没有尝到糯糯的口感,于是找到研发告诉我制作红豆糯米的方法和普通米饭一样是用锅煮熟的,因而导致口感上有所差异。铃木训斥他说,红豆糯米本身应该以蒸笼蒸制,为什么不采用正确的方法呢? 原来,当时的 生产工厂并没有以蒸制大量糯米的工艺和设备,因此选择了和普通米饭相同的做法。 我要求他们改变制作方法,引进新设备,力争做出原汁原味的糯米饭团。开发团队对糯米的种类、 淘洗方法、浸泡时间、红豆的选择、煮法等所有的要素都重新研究,克服了好几个难关,终于让这一 产品 获得了极大的成功。”铃木敏文:“如今已最新的第六版的投资高达500亿日元,这些年IT的总投资金额已达到3000亿日元。商品库存数据、POS数据、缺货数据、报废数据,在第六版系统中,7-Eleven开始为各家加盟门店订货提供三项数据,以作为协助成立假设的参考,分别是立地数据、设施数据和长期数据。“立地数据”是指调查各门店周边(半径350米,徒步5分钟以内的)的家庭数;如果有商户的话,就调查其员工人数。“设施数据”主要了解自家门店周边是否有学校或医院之类的设施,这对于日常订货作业的假设设定都能提供一定的帮助。他们还根据过去的数据呈现出有关趋势及动向的数据,提供“长期数据”。”

    2017-05-02
  • 【干货】Axure产品原型在手机上运行的完整教程

      图1 模拟丁香园的高保真原型   在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌…

    2014-11-26
  • 全面提升用户体验,海尔卫玺首个智慧浴室体验店盛大开业!

    随着“智慧家庭”的概念不断深入人心。在智慧浴室空间领域,与以往用户单一追求产品的实用性相比,如今用户更倾向于将浴室打造成一个智能化、人性化的空间。基于用户对美好智慧生活的需求,海尔卫玺首个智慧浴室体验店于4月28日在上海盛大开业。开业地址:上海市浦东新区浦三路1515号同福易家丽6号楼2-108海尔卫浴专卖店卫玺智慧浴室体验店咨询热线:(021)50102530海尔卫玺智能马桶盖全系列闪耀亮相自上市以来,海尔卫玺智能马桶盖以高水准的品质...

    2018-05-04
  • 关于文档的价值

    作者:杨蓉(资深用研专家,现任极客网运营总监)   高歌在产品经理的培训中,提到了研究分析、产品定义和交互设计,展示了不同格式的文档,几个来自创业公司的童鞋提到了老板不鼓励用文档的问题。让我想起来几个去…

    交互专题 2017-08-07
  • 如何辨别一个Banner的好坏?(附案例)

    平时经常会有人问我“什么样才算是好的Banner ?”、“我这个Banner 有什么问题呢?”之类的问题,还有时候大家会分享一些作品但是我觉得并不是特别好,所以就觉得要不写一篇“如何判断一个Banner 的好坏”之类的文章吧,因为我们常说设计师要多看,但是多看的前提是要学会辨别一个东西的好坏,要多看好的而非不好的东西哈,要不然怎么提高审美提高眼界呢?

    2017-05-24
  • 一个应届的交互设计毕业生应该具备哪些能力?

    作者:马力 @ 可能性与大设计   ( 上图来自Elizabeth Bacon ) 首先说,很多专业的同学都可以做交互设计(还有视觉设计,产品设计等等),既包括设计相关专业,如工业设计、建筑设计、园林设计等,也包括完全和设…

    交互专题 2017-08-07
  • 零基础学习交互设计先从这些知识开始!

    @黄红艺Designer :交互设计三部曲终于写到最后了,今天聊聊交互设计的最后一个要素 —— 交互细节设计。本要素是在前两个要素指导下的设计实践,也是交互设计可视化与形象化的关键。相对于前两个要素的完整性和系统…

    2017-08-02
  • 干货推荐|关于无线C端产品的一些UX建议

    开始之前,先来看一下Eric WK.See-To的一项最新研究成果(Eric WK.See-To等人针对如何提升移动端视频的UX满意度做了以下研究)。

    2017-05-29
  • 三跨362分考取北邮交互设计,复习经验分享

    2018北京邮电大学交互设计- 连庆欣大家好,我是18年考上北邮艺术专硕的学姐,初试总分362分。回忆过去复习的日子,仿佛刚刚就在眼前。我本科是信息管理与信息系统专业,从一所二本学校三跨考研北邮艺术专硕。我是8月底9月初左右着手开始准备考研的,前后大约准备了4个多月。当时刚刚开始准备复习的时候,也思考了好一段时间,由于自己是跨考的,手绘能力实在太弱,找了好几个学校了解,都是比较偏重手绘能力的,直到我看到了北邮,找了它相关的真题,发现对手...

    2018-05-01