VR设计｜虚拟现实中如何设计3D用户界面？

人人都是产品经理 • 8年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

VR很棒！但是设计VR的用户界面会有许多细节与传统的用户界面不同，对于我们每一位VR设计师来说，我们可能会遇到很多问题。希望本文提到的内容和技术细节可以帮助每一位VR设计师更好的解决遇到的困惑。

一、如何在VR里体现用户界面信息？

世界中的UI（In-world UI）又叫做抬头显示界面（Head Up Display）, 相信每个游戏玩家或者接触过3D场景的人或多或少都比较熟悉。它是整个场景中的体验的一部分，也是用户情感的一部分。当然不恰当的UI往往会打破用户美好的情感体验，所以这也是为什么很多UI人士都呼吁更少的UI往往会带来更好的效果。所以我们如何在VR里体现用户界面信息呢？

一个较好的例子如下图：我们可以把左边这个传统的注有标签信息的杯子转变成右边这个更直观的体现当前容量的杯子。这样就不需要额外显示该杯子的剩余容量（图中标签所示：还可以喝6小口），而用杯子当前所呈现的剩余容量所占总容量的比例，来直观的告诉用户大概杯中还有多少饮料供用户享用。

图1-1

但反对者们往往会抗议道：“这种表示方式有时候太过微妙了，有的时候我们可能必须要一个大大的红色按钮来提醒用户”，那么我们应该如何创建VR的UI呢？下面让我们来谈一谈我们可以从传统的3D用户界面中得到的启发。

我们首先要做的是吸引用户的注意 ，为此我们引入3个设计原则：

为了可靠性而保证显示在视角的中心：当有重要的信息需要演示的时候，UI设计师需要考虑用户的关注点在什么位置，并且要预估用户接下来的行为，从而保证重要的信息始终在用户视角的中心。
描绘边角轮廓来吸引用户的注意：比如在攀岩游戏中，在用户的手腕周围描边，用颜色来表示目前攀岩的状态和可行程度。
在VR的用户界面中，语音提示或者声音往往比其它东西要重要得多。

其次我们要注意深度的使用 ，层次感往往能给用户带来很好的用户界面反馈。

现在让我们谈谈标记一个目标，在传统的设计中有很多方法可以做到，比如缩放目标来保持尺寸的一致性，也可以直接面对用户，或者始终把目标置于所有场景的最上层，就像下图二所示的那样，但这些都有一个问题：没有那么强的3D感。

图1-2

同时在VR中也会带来一些问题，比如用户不应该在3D场景中看到被遮挡的界面元素。同时也会对场景的深度信息（depth confusion）产生困惑，如下图显示的情景却失了深度信息就使得VR不那么立体了。

图1-3

其实解决方式也很简单，那就是提供深度信息，如下图（图1-4）所显示的那样：

图1-4

此外，在传统界面常见的扁平化设计如果过多的出现在VR中可能会带来一些问题，原因是这同样隐藏了深度信息。但有时候我们并不想全部用光，阴影和距离来显示UI，那么应该怎么办呢？

一个很好的解决方案是使用基于距离的着色器（Depth-Based Shader），如下图1-5左半部分所示，距离越近的物体越亮。

图1-5

此外，我们还可以使用菲尼尔效应（Fresnel effect）来显示不透明的物体。如下图1-6所示，来减少用户对于距离的困惑。

图1-6

现在再让我们来谈谈菜单，VR中的菜单和传统菜单一样，主要是提供了项目相关的信息。所以并不需要对VR的菜单做过多的改变。但是正如前面所说，过多的菜单有时候会给用户带来负面效果，所以多用场景中的一些物体的改变，来和用户进行交互，如文章开头提到的水杯就是一个例子。

再设计VR的菜单的时候，请牢记以下几点：

全局的信息如滚动条等往往没有太大的效果，因为用户总是更关注VR场景内的内容。
用好一些过渡效果是关键。

如果在大家设计的VR场景中，使用了手柄等控制器，如何指导用户操作就变得很重要。首先应该向用户显示手柄中的每个按键作用，这里我们全局的显示手柄中按键的布局位置，而不是单纯的告诉用户A,B,C键是干什么用的。此外，我们应该给用户一个全面的操作演示和介绍，使用户不至于晕头转向。还有一个很有意思的现象，在设计按键的时候，有些设计师喜欢用松开Release这个动作来表示完成了按键，然而这个设计有时候可能会带来一些麻烦，因为体验VR的用户总是希望更快的得到反馈。

以上对于传统用户界面对于VR用户界面的启示聊了很多，总结的来说可以归为以下几点：

好的UI可以不是“真正的UI”。
场景中的信息因为深度，遮挡，立体感等原因很难做到一致性。
菜单如果运用得足够好往往会带来意想不到的效果。

二、技术细节

那么现在让我们来上一点干货，进入第二部分以后，让我们来聊一聊一些技术细节。

1、Alpha排序（Alpha Sorting）： VR中的用户界面往往是Alpha混合的（Alpha Blending）, 比如我们之前提到的，通过一些透明的方式来显示过渡效果。现在一个通俗的做法是把这些透明的UI元素排序，但这可能会有些问题，比如下图2-1所示：

图2-1

我们本意是希望，红色的物体在蓝色面板之上，但由于蓝色的平面离我们的人眼更近，反而造成了红色物体被遮挡到蓝色面板的后面。对于这个问题该如何解决呢？

第一个解决方案是使用“顺序无关的透明”（Order-independent Transparency）,比如给我们希望在上面的物体加一个偏差值，如下图所示，使它显示在上面。

图2-2

2、文字呈现（Text Rendering）： 这里我们介绍三种方法。第一种方法是将文字渲染到贴图上，再把该贴图贴到一个模型上。这种当文字的尺寸很小时，为了可以放到看清，我们需要需要一个高分辨率的材质。第二种方法是有向距离场技术（Signed distance fields），相关技术细节由于演讲者并没有说明，所以这里也不做过多的论述。

简而言之，这种方法达到的效果是在像素的级别将文字边缘重新描绘，使得字体看上去更加清晰，如下图2-3所示，左边输入的是一个模糊的字体，我们在程序中使用该技术重新绘制一下文本，使它成为右边的文字从而变得清晰。这种方法的问题在于文字可能看上去很圆润，而且需要很多工作量。