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都會隱藏起來，開始浸入式播放。這個時候若是按菜單鍵，會在視野正前方生成一個平面的窗口，在上面能夠調整進度，或者選擇退出視頻。