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

相关推荐

  • Hello UED!

    今天,UED.xyz正式上线,我们期待能尽快成长,以期能承担帮助国内交互设计师寻找灵感和创意的站点。 我们会专注交互设计,我们的域名是https://www.iamue.com和UED.xyz,请记住我们网站叫艾欧交互学堂。 如果有同学…

    交互设计 2014-09-02
  • 2017赶集招聘节项目总结:建一座招聘之城

    为了在“金三银四”抢占先机,向本站导流,最重要的,是为了向广大蓝领招聘群体营造有趣、可信的平台,输出赶集优秀的设计价值和体验,我们3个设计师进行了各个维度的配合。注:视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的有景深的视觉体验。作为近年网页设计的热点趋势,越来越多的网站应用了这项技术。

    2017-04-30
  • VUI语音交互设计:三步打造任务导向型对话场景

    语音交互的主要能力在于开放式domain的聊天型功能与任务导向的技能型功能。如果说快捷高效、轻松自然是语音交互的独特优势,那么任务导向型功能就是这些优势的完美落点,一个量好的语音交互产品,自然是技多不压身,能够cover的domain多越好,能够get的技能越强大越好。那么,作为语音产品设计人员,如何以短平快的方式设计一个任务导向型对话场景呢?当然,和传统交互设计工作一样,前期调研是很有必要的。你想设计的这个功能是否能满足产品目标、是否...

    2018-02-15
  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11
  • 借助动效取悦用户的7种方法

    沿着这7个思路,你可以正确地使用动效取悦用户。“在体验设计的过程中,为用户提供满足感已经是一种常态,而愉悦感则是我们所追求的目标。”“个性和情感是我们被一部分人吸引,而没有被另外一部分人吸引的原因。”人们会忘记你所说的话,忘记你所做的事,但是不会忘记你给他们所带来的感受。 —— Maya Angelou

    2017-05-03
  • 关于用户故事地图的7 种用法

    《用户故事地图》不仅仅是讲述什么是用户地图、怎么使用用户地图,也讲了很多团队协作的tips,并且给出了很多实例。我这里直接从这本书的其中一个角度——“怎么使用用户地图”为内容,然后结合一些自己的想法,来写这篇读书笔记。聚焦于成果,即产品发布后用户能使用和感知的东西,切分发布计划应该以成果为导向。  ——《用户故事地图》P56

    2017-04-30
  • 设计书单 | 设计师该如何运用交互设计来满足用户的轻松休闲需求

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放给的再多不如懂我后弦 - 下完这场雨对话全球20位杰出的交互设计师,他们亲自分享关于交互界面设计新趋势的独特观点,大量实用的经验之谈也毫无保留地一一奉上!《NEW TRENDS IN GUI GUI设计新风向》• 收录全球77位优秀交互设计师的GUI作品,多元化的灵感开发。• 全书从应用程序中最火的三大类别——“娱乐”、“社交”、“实用”,对作品内容进行精准整合。【第一章-聊天社...

    2018-02-25
  • 互动的未来不应只在手指上

    最近对未来交互设计发展的一个很流行的观点 — 用手指操作各种大大小小的触摸屏,下面还会有很多这种例子。这篇小文章并不涉及任何详细的“未来发展规划”, 我只是提供一些可供参考的点子。 在开始构想应该怎样同我们…

    2014-12-25
  • 蜕变.进化——百度云Android端7.0项目总结

    项目背景: 百度云面世之初是一款网盘类产品,以安全、稳定、易用、快速的体验著称,经历近两年时间的升级优化,百度云已不仅仅只是“网盘”了,在慢慢的朝着平台化的方向不断发展。 旧版的Android客户端随着每一次版…

    2015-03-18
  • UX小白 | 不谈它?算什么用户体验设计?

    这其实只是个引你进来的标题,我今天真正想说的事情其实是它——你在做一款产品的时候考虑过它的无障碍性(Accessibility)吗?无障碍性(Accessibility):在图形交互界面为基础的交互方式中,无障碍性也往往被称为可访问性。“无障碍性(accessibility)意味着产品设计应用时应考虑到,无论是因为年龄、事故或疾病而有认知、感官或者移动障碍的人,还是没有此类障碍的人,都应能够有效使用这个设计。”——《About Face...

    2018-01-31