VR界面設計的整個工作流程是怎樣的？

OFweek VR網訊 世界中的UI（In-world UI）又叫做抬頭顯示界面（HUD）, 相信每個遊戲玩家或者接觸過3D場景的人或多或少都比較熟悉。它是整個場景中的體驗的一部分，也是用戶情感的一部分。當然不恰當的UI往往也會打破用戶美好的體驗情感，所以這也是為什麼很多UI人士都呼籲更少的UI往往會帶來更好的效果。所以我們如何在VR里體現用戶界面信息呢？

一個較好的例子如下圖：我們可以把左邊這個傳統的注有標籤信息的杯子轉變成右邊這個更直觀的體現當前容量的杯子。這樣就不需要額外的顯示該杯子的剩餘容量（圖中標籤所示：還可以喝6小口），而用杯子當前所呈現的剩餘容量所佔總容量的比例，來直觀的告訴用戶大概杯中還有多少飲料供用戶享用。

圖1-1

但反對者們往往會抗議道：「這種表示方式有時候太過微妙了，有的時候我們可能必須要一個大大的紅色按鈕來提醒用戶」，那麼我們應該如何創建VR的UI呢？下面讓我們來談一談我們可以從傳統的3D用戶界面中得到的啟發

我們首先要做的是吸引用戶的注意，為此我們引入3個設計原則：

1，為了可靠性而保證顯示在視角的中心：當有重要的信息需要演示的時候，UI設計師需要考慮用戶的關注點在什麼位置，並且要預估用戶接下來的行為，從而保重重要的信息始終在用戶視角的中心。

2，描繪邊角輪廓來吸引用戶的注意：比如在攀岩遊戲中，在用戶的手腕周圍描邊，用顏色來表示目前攀岩的狀態和可行程度。

3，在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用戶界面的啟示聊了很多，總結的來說可以歸為以下幾點：

1. 好的UI可以不是」真正的UI」。

2. 場景中的信息因為深度，遮擋，立體感等原因很難做到一致性。

3. 菜單如果運用得足夠好往往會帶來意想不到的效果。

那麼現在讓我們來上一點幹活，進入第二部分以後，讓我們來聊一聊一些技術細節。

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所示，左邊輸入的是一個模糊的字體，我們在程序中使用該技術重新繪製一下文本，使它成為右邊的文字從而變得清晰。這種方法的問題在於文字可能看上去很圓潤，而且需要很多工作量。

圖2-3

第三種方法是直接在場景呈現文本網路（text mesh rendering）, 也就是說我們直接在場景中將文本以3D模型的形式的形式顯示出來。這也有些問題，文本模型因為建模的面數的限制可能會看上去有稜角和鋸齒。但從長遠看可能是一個很好的解決方法，因為它使文字的解析度會獨立於整個場景。

以上三種是目前常用的VR場景中文字呈現的方式，我們設計的時候可以根據具體的場景選擇合適的方法。

3. 懸停檢測（Hover detection）:懸停檢測在VR的場景中，通常體現在我們如何展示用戶當前的視角聚焦在哪個菜單上。通常我們會用光線投射的方式（ray-casting）。 這裡我們再介紹另一個微妙的方式。比如「角度對比」如下圖2-4， 被選擇物體會呈現一個不同的角度來提示用戶。

圖2-4

4. 抗鋸齒技術：抗鋸齒對於菜單元素尤其重要，因為過多的鋸齒會轉移用戶的注意力。而現在市面上常見的后加工技術對於VR菜單的抗鋸齒效果處理得都不算好，所以需要我們設計師在一開始就留意和處理好鋸齒問題。

三． 設計流程：

最後，在該講座中，Riho給我們分享了他作為VR UI設計師的設計流程。首先他會畫大量的草圖，接著他會用手和聲音預先模擬一下各個UI元素如何動畫。最後他把草圖結合動畫應用到場景之中。

現在再讓我們來看一下專業的VR用戶界面的生成流程是怎樣的。

1. 從UV布局開始：創造並組合最基本的貼圖，圖片，文本部件。

2. 在3DsMax中建模和做動畫。

3. 將模型和動畫鏈在一起。

4. 在遊戲引擎內建立邏輯流程圖。

5. 調試直到達到理想效果。

結來說，VR很棒！但是設計VR的用戶界面會有許多細節與傳統的用戶界面不同，對於我們每一位VR設計師來說，我們可能會遇到很多問題。希望本文提到的內容和技術細節可以幫助每一位VR設計師更好的解決遇到的困惑。