设计Facebook Spaces(Part 4)——创建VR UI

设计Facebook Spaces(Part 4)——创建VR UI

这篇文章是关于Facebook Spaces设计系列文章的最后一章。
作者介绍：Christophe Tauziet之前在Parse & Apple工作过的Facebook Spaces首席设计师分享！

一种新型的界面

对于我们的设计团队来说，最大的挑战之一是设计空间的用户界面。与传统的web、桌面或移动设计不同，我们可以依赖已有的UI元素和交互模式，这些模式是人们多年来学习的，其中大多数模式还没有被VR所发明。
我们的界面设计的一个重要目标是确保UI在这里是为对话服务的，而不是妨碍它。虽然我们可以拥有充分利用空间的界面，并在专注于执行某项动作时隔离人们。但我们寻找的是界面和交互，这些界面和交互可以帮助人们实现自己的目标，同时还能与朋友们还是在空间中，继续他们的对话。我们想让UI感觉短暂而有用，而不是中断。
为了帮助人们区分“真实的”对象和用户界面，我们早期采用了一种面向用户界面的全息视觉语言。这不仅使我们能够直观地将交互元素从其他环境中分离出来，它还使我们能够更加灵活地使用物理和临时的UI，因为人们已经有了一个全息图是轻量级并且短暂的概念。
在我们构建 Facebook Spaces的过程中，我们提出了一些值得提及的界面和交互。他们中的一些人并没有取得成功，不得不被抛弃，而有些人则表现得更好。在接下来的几段中，我将分享一些我们探索过的概念，以解决我们的一些问题和我们所做的学习。

虚拟桌

在我们早期，我们建造了一个人们可以自由地在一个空间里漫游的原型。我们针对移动问题尝试了不同类型的空间。我们很快发现这一方案的最大问题之一:很难与人进行对话。当人们能够自由地四处走动时，人们往往会迷失方向，并没有真正地相互交流。
在另一个实验中，我们建立了一个工具，人们可以一起创作音乐。在第一次迭代中，人们会站在一边，看着一个巨大的键盘式乐器。虽然真的很有趣，很好玩，但人们从来没有真正地看着对方说话。
快速观察一下我们在现实世界中是如何运作的，当与人们交谈时，我们会指出我们缺少的基本元素:一个虚拟的桌子，用来锚定谈话并建立一个社会结构。
在2016年F8大会上，我们的第一张桌子是一个长方形的托盘，人们会站在那里，在那里他们可以捡起/落下的东西。我们还使用不同的尺寸和配置(正方形、长方形、大、小、坚固、透明等)。对我们来说最好的解决方案是一个圆形的全息桌，可以舒服地坐着4个人。

主菜单

VR手表

我们开发的第一个界面是我们的主导航UI。我们的第一个原型是一个虚拟的手表，它可以连接到你的虚拟手，并包含我们APP的顶级菜单。虽然很容易发现和很酷，但我们知道要瞄准移动状态时手的按钮是很困难的。这对手臂也是相当累人的，因为它需要人们大幅度地抬起肘部来让界面可读和可读。这表明，手表用于有限的交互(例如通知)是很好的，比如显示短信提示信息，但对于复杂的界面，比如主导航系统，却感觉不那么好。

VR工具带

加在你的身体上，工具带感觉非常私人。当你看到它的时候，它会让你用一只手做出选择或者抓住物体，这感觉很好。但是在使用了几天之后，我们意识到脖子上有多不舒服，反复盯着工具条看。对于使用该应用的用户来说，使用这款应用时，他们的腿会一直打到他们的腿，这也很有挑战性。

VR好友

VR好友的想法是提供一个单一的对象，你可以四处移动，把它放在你想要的地方。点击这个对象就可以在它周围打开一个圆形菜单，让你可以访问它的子菜单。
这种方法的好处是多方面的:你可以用一只手操纵UI，它被固定在世界上，让你可以精确地掌握你的时间。你也可以在空间中选择它的位置，当你在一边画画的时候，你可以带着它。移动它很有趣，也很有趣，尤其是当子菜单打开时，它们被放在一个弹簧上，并且以一种有趣的、有弹性的方式置于后面。
但缺点也同样多:
“圆形菜单”的意思是，你必须多次在空中挥舞你的手，才能击中不同的子菜单，选中你想要的。这就造成了你手臂上的疲劳，而且效率很低。
打开一个2D界面意味着你要么转身面对它，要么打开一个我们无法保证你舒适感的奇怪的位置。
你可以移动它的事实也意味着你可以很容易地把它放错地方并且不得不去寻找它。
当你经常改变它的位置和方向时，很难建立一个关于如何使用UI的空间模型/肌肉记忆（条件反射）。

VR停靠栏

在过去的探索和其他一些研究中，我们设计了第一个版本的VR停靠栏:一个三维界面，它可以在你面前的桌子上固定，让你可以轻松快速地访问你的内容，而不用移动太多。
这个解决方案和工具条一样有好处，而不需要让你看得太多。最主要的问题是可伸缩性和占用空间的空间大小。浮动的球体也妨碍了您与桌上物体的交互方式。

VR面板

VR面板的想法是将一个交互的表面与一个外环和一个内环结合在一起，以此来构成信息结构。内环也可以作为一个区域，如选择工具或媒体用来传送三维物体。
与第一个VR停靠栏类似，这次探索的主要缺点是在桌上使用的空间大小，我们考虑通过在桌边缘附近添加一个打开/关闭按钮来解决这个问题。另一个问题是，在这个界面中，你选中的任何UI的来源都是不同的，这对于这个概念来说是不容易的。

VR停靠栏2.0

我们提供的解决方案是第一个停靠栏和一个面板的结合:一个带有2D界面的 三维停靠栏，可以在你面前展示一个UI或对象，当你不需要它的时候可以被关闭到桌子上。
这个解决方案有以下几个原因:
人们似乎马上就知道如何与之互动。与平板电脑的相似之处是人们可以用手指触摸它来做出选择的信号。
投影仪的比喻很好地传达了UI的起源，如何打开它们，或者如何在它们之间切换。
在你面前的最小占用面积给你一种可控制的感觉，而你的感觉并没有感觉。

展示中心

另一个我们需要解决的问题是如何让人们向房间里的其他人展示媒体内容。从我们的第一个原型中，我们知道把一个选定的媒体变成一个三维的物体感觉是好的。手里拿着一张照片或一个360圆球，感觉是真实的，把它递给一个朋友，感觉自然而愉悦。
但我们也需要一种方式，让人们展示媒体，让房间里的每个人都能舒服地看到它。我们早期的互动是让你把一个360圆球贴在你的脸上来激活。虽然很令人高兴，但它并不容易被发现，我们看到一些人在头几次尝试用控制器撞到他们的头盔上。我们还觉得有必要展示2D照片或视频，让每个人都能轻松地观看。
我们调用了显示中心的解决方案:在桌子中央的一个圆形区域，当你把一个媒体放入其中并自动开始显示媒体时，它就会激活。360度的照片或视频突然变成了环境，而2D媒体则开始在大屏幕上放映。
一旦投射，人们就可以用他们的停靠栏来控制他们的媒体。他们也可以结束投影，要么停靠栏，要么从展示中心拿走媒体。

手腕UI

另一个挑战是找到一种与空间中特定对象交互的方法。在几个概念之后，我们创建了手腕UI，它是一个在你的手腕内侧出现的上下文界面，当你持有一个对象，并显示你可以为那个特定对象使用动作按钮。这相当于在桌面电脑上右键单击。
这个界面非常好用，因为它很容易被发现，并且易于理解和使用。它最大的挑战是让它在视觉上感觉很好，让你的手臂上有一个UI。在这个例子中，全息图的比喻非常有用，因为在你的前臂上看到一个全息图比一个固定在你看不见的前臂上的固有物体要好得多。

VR手表2.0

我们的第一款VR手表原型是一款主要的导航系统，我们了解到虚拟手表的概念应该保持在快速、简单的交互中，以防止你在空中长时间保持手臂的状态。我们还了解到，翻转手腕来获取信息是一种快速而神奇的感觉。
有了这些经验，我们重新定义了我们的手表界面，作为一个通知中心。当一个朋友在Messenger上发送消息，试图给他们打电话或发送邀请加入他们的空间时，他们的控制器会振动，声音从他们的手表中发出，引起他们的注意。通过手腕的翻转，这个人可以阅读通知并迅速采取行动。

一个进化系统

通过这些不同的界面，人们可以在空间中找到他们的朋友，访问他们的内容和工具，向人们展示他们的媒体，并与外界保持联系。它们只是我们解决这些问题的第一次尝试，并且大多数最终都将被更有力的解决方案所取代。

未来的旅程

打造Facebook Spaces的第一个版本是我职业生涯中最具挑战性、最有趣和最有意义的时刻。我得到了一个机会，去解决一个既疯狂又充满激情的团队，这个团队充满了才华横溢、充满激情的人。为虚拟现实而设计既可怕又令人兴奋，因为你不能依赖多年来不断完善的技能，必须走出舒适区去获得新的东西。而设计VR社交体验是一种额外的挑战，因为存在感和沉浸感非常强烈，机会和挑战也很多。
但对于所有的东西，无论是对于Facebook Spaces，还是VR，这只是漫长旅程的第一步，我很感激能成为其中的一部分。
我要感谢Facebook Spaces团队的每一个人，感谢他们为实现这一目标所做出的巨大贡献。特别是,我想感谢 Mike Booth让我从事这个疯狂的冒险,Charlie Sutton/Mike Schroepfer对他们的信任和支持,Brad Dickason和Alicia Berry帮助我们越过终点线,和整个身临其境的设计团队,帮助建立这样的经历:Katya Kostyukova、Gabriel Valdivia、Cliff Warren、Stephanie Engle、Richard Emms和Brian Perone。
虚拟现实设计如果你感兴趣,你可以找到更多的学习资源(http://facebook.design/vr)。*