HTC Vive开发笔记之UI Guideline

本文转自HTC官方论坛，原址https://www.htcvive.com/cn/forum/chat.php?mod=viewthread&tid=1641&extra=page=1。

在过去，3D程序多数是游戏，非游戏的应用一般设计成2D程序。而在VR中几乎所有程序都是3D的（左右眼需要看到的不一样画面），所以开发VR程序和开发3D游戏很像，也可以使用Unity, Unreal等引擎。而VR开发的独特之处在于UI设计，如果还用之前的方案，用户使用的时候可能会觉得非常困惑甚至头晕。这篇文章会给大家介绍设计VR中UI的一些常用做法。

## HUD?

### 什么是HUD

HUD (head-up display)是非VR游戏中最常见的UI类型。它的用处是实时显示状态和提供按钮、输入框等控件。比如在游戏中显示生命值、弹药数、分数、小地图，以及技能按钮、菜单按钮等，都会用到HUD。

### 为什么不能在VR中使用HUD

HUD的实现方式是在游戏画面之上覆盖一层专用的HUD画面（overlay）。它有两个特点：

1. HUD画面是离摄像机镜头最近的物体，其他物体都会被HUD挡住 
    
    2. HUD在屏幕中位置是不变的，且很多组件在屏幕的边缘 
    
而这两点在VR中都是很难被接受的。首先，如果距离太近，会让用户的眼睛无法聚焦。其次，VR中的屏幕不是矩形的，边缘一般比较模糊，所以把UI放在边缘会看不清楚；而且如果位置还是固定的，不受视野控制，那就更不自然了 ———— 用户会因为看不清楚而本能地转头去看，而即使转头，它的位置还是在边缘。

### 用什么替代HUD

答案是立体UI。也就是说UI不再集中于一个平面。比如用户在观察一件展品时，展品的上方漂浮着一段文字描述（也可以是图片、视频），这种UI和虚拟世界中物体联系很紧密，用户能很直观地感受到它在描述哪件物品；还有种做法是在不遮挡视野的地方显示信息。比如在远方的天空放置一个平板，用户一抬头就能从上面看到当前场景的信息以及得分情况。这种UI适合展示不需要经常查看的信息。

如果要显示和场景中物体无关而且需要经常查看的UI，就需要用到Vive手柄了。举几个例子，Tilt Brush中右手是画笔，而左手是调色板（一共有4个功能不同的面板，比如调色、更换画笔和场景、存储照片等等，通过旋转左手可以看到不同的面板）；Raw Data中手枪上有个数字显示剩余弹药（漂浮的3D文字）；在Budget Cuts中，点击菜单键后手柄上会出现一个物体栏（物品栏中会出现现有物品的模型，可以用另一只手把它们拿出来）。注意，这些UI元素的形状也是立体的，它们有的是3D文字，有的是模型。

## 与场景互动

### Vive手柄介绍

除了视野和位置的控制是由头盔完成，Vive的主要输入方式是通过手柄。手柄在输入方面一是提供手的定位和定向，使得玩家的双手的位置、手柄的方向、手心的朝向都可以体现在VR中；二是提供了这几个按键：

1. 扳机键 (trigger)：最重要的按键，相当于键盘上的回车键。一般单击用于确认选择、开枪；按住不动用来拖拽、给气球打气，持续地开枪等等。

2. 侧键 (grip): 用得频率较少，可以用来实现紧握，比如紧握一根树枝。也可以用来激活物品或者触发事件。

3. 菜单键 (application menu)：最好用来弹出菜单。比如程序或者游戏的设置菜单、物品栏。

4. 触摸板 (touchpad)： 最灵活的按键。硬件上它支持的功能有两个：获得触摸点的坐标以及响应按键消息。这个键很重要，因为：

a. 相比其他的按键，它不但能知道用户何时按下了按键，还能知道手指在什么位置按下的（通过一个二维坐标，x,y的取值范围都是[-1, 1]） 
    
    b. 即使不按下这个键，也能获得触摸点坐标，因此可以用于做简单的手势识别（比如上划、右划） 
    
    c. 这个键用拇指按很轻松。

在现有的应用中，触摸板被用来换子弹、选择技能、更换工具、调节音量、瞬移（teleport）。

5. 系统键 (system button): 这个键是用来开启手柄电源以及呼叫系统菜单的，设计程序时一般情况下不要用到它。

### 选择物体

1. 激光选择。从手柄（或者其他自定义的手的模型）处射出一道激光，被激光指到的物体放大并高亮，然后按trigger键确认选择。举个例子，按下菜单键后在用户现在的视野正前方产生一个设置窗口，手柄此时射出一道绿色激光，被激光射中的控件会放大并高亮，此时按trigger，效果就像是用鼠标点击了一下此处（适用于按钮、进度条、文本框等控件）。

2. 触碰选择。如果物体距离用户比较近，也可以使用触碰选择，当手柄接触到某个物体后，让这个物体高亮，等待用户按trigger键确认。

## VR应用的UI

VR中工具类的应用可以用到平面UI。

### 平面UI示例

下图是Steam Dashboard在VR中的效果：

可以看到如同非VR的应用一样，SteamVR的主要UI都放在一个panel中。不同之处在于，这个panel现在搁置在一个3D世界里，有透视效果；另外输入方式改成了用手柄上射出的激光去指。

之所以用平面UI，是因为这种方式早已经被人们所习惯，而且已经积累了很多经验。另外一个好处是它能在小面积内放下大量同类型的UI元素，比较适合做视频列表、游戏列表、主菜单之类的界面。

### 浸入式体验

在开始浸入式的体验之后（比如切入到一个纯3D的场景、游戏、或者全景视频），就不能把平面UI放在用户的视野正前方了。这时可以参考上面"用什么替代HUD"一节所讲到的立体UI。还有一个方法是当用户按下某个键时弹出一个平面菜单，这需要适当的引导————可以在应用开始时告诉用户怎么操作；也可以加上文字解释，让用户看向自己的手的时候，会发现手柄的按键旁边都有一行小字解释这个键的作用。

> 在Vive Cinema中，应用开始时是一个平面的视频列表，用户可以选择播放哪个视频、用什么方式播放（平面、360度还是180度？是否是立体视频？），选择完视频后，UI都会隐藏起来，开始浸入式播放。这个时候如果按菜单键，会在视野正前方生成一个平面的窗口，在上面可以调整进度，或者选择退出视频。