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

相关推荐

  • 非设计专业的学生,如何系统的学习交互设计

    数十万互联网从业者的共同关注!作者:青溪Joanna微信公众号:qingxizhaji(青溪札记)作者投稿早读课发表,转载请联系作者。曾经我也是一名非设计专业的学生,作为自动化专业的硕士希望自学做交互设计,有很长一段…

    2017-08-02
  • 良好的用户体验不一定是品牌成功的关键

    一项针对品牌魅力的新研究表明,良好的用户体验不一定是成功的关键,因为品牌完整性受损可能会超越公众的看法。 这是对四个市场10,000名消费者的在线调查的结果。这项研究从认知、目的、诚信、慷慨,勇气和交付的六个维度检查了知名品牌。分析表明,与消费者的动态关系是短暂的受欢迎,还是长期的忠诚之间存在的真正区别。乐高式最具实力的品牌,一直让顾客感到满意。相反,FIFA被评为得分最低的品牌。另外,苹果在美国排在前十位,在英国排在第十六位。尽管其创...

    2018-02-26
  • Axure官方教程中文版第3课:组件与母版-木卫艾欧网原译

    https://www.iamue.com/wp-content/uploads/video/Axure.com-learn(3).MP4 新建一个文件 1、添加一个按钮并设置鼠标悬停交互样式 2、复制并对齐按钮 3、将按钮转化为母版 4、将母版应用于每一页 5、在母版中为每个…

    2015-01-25
  • 全面解读!人工智能如何改善五大用户体验?

    点击【阅读原文】,即将IPO独角兽,抓住上市前最后的机会!最近两年人工智能技术在金融、安全、交通、医疗、公共服务和制造业等领域逐渐落地,随着技术的成熟,人工智能将会在更多领域影响人类的生活。以人为本的人工智能设计会变得更加重要,本文会从安全性、效率、易用性、场景化、个性化五个方面阐述人工智能如何改善现有的产品和用户体验,这五个方面存在着各种联系并相互影响。安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨...

    2018-05-05
  • 浅聊四个主流的页面间跳转动效

    最近一直在做交互规范总结的工作,在不断梳理页面间跳转逻辑的同时,发现页面间的逻辑关系并不能和页面间跳转的动效很好的结合上。虽然只是零点几秒 的切换动效,却能在一定程度上影响用户对于页面间逻辑的认知。为了输出详细的规范,花了大量时间把玩现在公司线上的产品以及国内外优秀的APP,尤其是苹 果、谷歌自己开发的APP。(如果某些方面在设计规范中并没有给出答案,就在原生APP中找答案吧!)

    2017-05-29
  • 页面停留时间和网站停留时间详解

    摘要:一、页面停留时间与网站停留时间是如何计算出来的? 假设用户访问了网站的主页(Home)。分析工具将这个访问者标记为一个Visit,接着这个访问者又浏览了另外两个页面(Page2和Page3),然后他离开了你的网站…

    2014-12-16
  • 交互进阶指南:如何扫除交互设计路上的3大障碍?

    目前网上基本没有对做交互设计师的难点进行系统的归纳和总结。基于这个原因我总结交互设计师的三大障碍以及如何扫除交互设计师路上的3大障碍。

    2017-04-29
  • Axure做的APP原型,在手机上怎么预览

    自学Axure,在各大网站查询,终于从小白到学会做基本的交互,再到能在APP端预览自己做好的原型。下面就说一下Axure做的APP原型,在手机上怎么预览?(以苹果手机为例)1原型制作好之后,点击发布→“预览选项”→配置→移动设备,导入做好的图标。2点击发布,“发布到AxShare”。3复制链接,将该链接发送到手机上并使用Safari打开。4粘贴并前往,将原型界面打开。5点击底部工具栏。6选择“添加到主屏幕”。7编辑名称→点击添加。8然后...

    2018-03-18
  • 当戒指也走向智能化

    小编导语:这是这是一个不错的创新产品设计,特意推荐给大家看看哦。 这款叫做 Smarty Ring 的智能戒指使用了防过敏不锈钢材质,宽 13mm,厚度为 4mm,黑色给人一种酷炫高冷的感觉。 它不仅可以当手表使用,而且它…

    2015-04-11
  • 如何让头脑风暴更有效率

    头脑风暴法是广泛用于团队的一个产生想法和解决问题的方法。然而,许多头脑风暴活动是有不完美的,最终并不能帮助激发思想上的创新。众所周知,传统的头脑风暴,团体在一起,把想法一个接一个的表达出来,通常这是…

    2014-11-10