Skip to main content
ARShow
ARShow
 首页 » AR资讯

HTC Vive UI Guideline

2016年08月20日 16:37:2212980

在过去,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中的效果: 

![screenshot1](/assets/htc_vive_ui_guideline/1.png) 

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

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

### 浸入式体验 

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


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

评论列表暂无评论
发表评论