雷鋒網(wǎng)按：本文作者布格小虎，專注于VR內(nèi)容及技術(shù)，不定期分享VR前沿探討及技術(shù)開發(fā)內(nèi)容。

一、如何在VR里體現(xiàn)用戶界面信息？

世界中的UI（In-world UI）又叫做抬頭顯示界面（Head Up Display）, 相信每個游戲玩家或者接觸過3D場景的人或多或少都比較熟悉。它是整個場景中的體驗的一部分，也是用戶情感的一部分。當(dāng)然不恰當(dāng)?shù)腢I往往會打破用戶美好的情感體驗，所以這也是為什么很多UI人士都呼吁更少的UI往往會帶來更好的效果。所以我們?nèi)绾卧赩R里體現(xiàn)用戶界面信息呢？

一個較好的例子如下圖：我們可以把左邊這個傳統(tǒng)的注有標(biāo)簽信息的杯子轉(zhuǎn)變成右邊這個更直觀的體現(xiàn)當(dāng)前容量的杯子。這樣就不需要額外顯示該杯子的剩余容量（圖中標(biāo)簽所示：還可以喝6小口），而用杯子當(dāng)前所呈現(xiàn)的剩余容量所占總?cè)萘康谋壤瑏碇庇^的告訴用戶大概杯中還有多少飲料供用戶享用。

圖1-1

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

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

1、為了可靠性而保證顯示在視角的中心：當(dāng)有重要的信息需要演示的時候，UI設(shè)計師需要考慮用戶的關(guān)注點在什么位置，并且要預(yù)估用戶接下來的行為，從而保證重要的信息始終在用戶視角的中心。

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

3、在VR的用戶界面中，語音提示或者聲音往往比其它東西要重要得多。

其次我們要注意深度的使用，層次感往往能給用戶帶來很好的用戶界面反饋。

現(xiàn)在讓我們談?wù)剺?biāo)記一個目標(biāo)，在傳統(tǒng)的設(shè)計中有很多方法可以做到，比如縮放目標(biāo)來保持尺寸的一致性，也可以直接面對用戶，或者始終把目標(biāo)置于所有場景的最上層，就像下圖二所示的那樣，但這些都有一個問題：沒有那么強的3D感。

圖1-2

同時在VR中也會帶來一些問題，比如用戶不應(yīng)該在3D場景中看到被遮擋的界面元素。同時也會對場景的深度信息（depth confusion）產(chǎn)生困惑，如下圖顯示的情景卻失了深度信息就使得VR不那么立體了。

圖1-3

其實解決方式也很簡單，那就是提供深度信息，如下圖（圖1-4）所顯示的那樣：

圖1-4

此外，在傳統(tǒng)界面常見的扁平化設(shè)計如果過多的出現(xiàn)在VR中可能會帶來一些問題， 原因是這同樣隱藏了深度信息。但有時候我們并不想全部用光，陰影和距離來顯示UI，那么應(yīng)該怎么辦呢？

一個很好的解決方案是使用基于距離的著色器（Depth-Based Shader），如下圖1-5左半部分所示，距離越近的物體越亮。

圖1-5

此外，我們還可以使用菲尼爾效應(yīng)（Fresnel effect）來顯示不透明的物體。如下圖1-6所示，來減少用戶對于距離的困惑。

圖1-6

現(xiàn)在再讓我們來談?wù)劜藛危?span style="line-height: 1.8; font-size: 16px;">VR中的菜單和傳統(tǒng)菜單一樣，主要是提供了項目相關(guān)的信息。所以并不需要對VR的菜單做過多的改變。但是正如前面所說，過多的菜單有時候會給用戶帶來負面效果，所以多用場景中的一些物體的改變，來和用戶進行交互，如文章開頭提到的水杯就是一個例子。

再設(shè)計VR的菜單的時候，請牢記以下幾點：

1、全局的信息如滾動條等往往沒有太大的效果，因為用戶總是更關(guān)注VR場景內(nèi)的內(nèi)容。

2、用好一些過渡效果是關(guān)鍵。

如果在大家設(shè)計的VR場景中，使用了手柄等控制器，如何指導(dǎo)用戶操作就變得很重要。首先應(yīng)該向用戶顯示手柄中的每個按鍵作用，這里我們?nèi)值娘@示手柄中按鍵的布局位置，而不是單純的告訴用戶A,B,C鍵是干什么用的。此外，我們應(yīng)該給用戶一個全面的操作演示和介紹，使用戶不至于暈頭轉(zhuǎn)向。還有一個很有意思的現(xiàn)象，在設(shè)計按鍵的時候，有些設(shè)計師喜歡用松開Release這個動作來表示完成了按鍵，然而這個設(shè)計有時候可能會帶來一些麻煩，因為體驗VR的用戶總是希望更快的得到反饋 。

以上對于傳統(tǒng)用戶界面對于VR用戶界面的啟示聊了很多，總結(jié)的來說可以歸為以下幾點：

好的UI可以不是“真正的UI”。

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

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

二、技術(shù)細節(jié)

那么現(xiàn)在讓我們來上一點干貨，進入第二部分以后，讓我們來聊一聊一些技術(shù)細節(jié)。

1、Alpha排序（Alpha Sorting）：VR中的用戶界面往往是Alpha混合的（Alpha Blending）, 比如我們之前提到的，通過一些透明的方式來顯示過渡效果?，F(xiàn)在一個通俗的做法是把這些透明的UI元素排序，但這可能會有些問題，比如下圖2-1所示：

圖2-1

我們本意是希望，紅色的物體在藍色面板之上，但由于藍色的平面離我們的人眼更近，反而造成了紅色物體被遮擋到藍色面板的后面。對于這個問題該如何解決呢？

第一個解決方案是使用“順序無關(guān)的透明”（Order-independent Transparency）,比如給我們希望在上面的物體加一個偏差值，如下圖所示，使它顯示在上面。

圖2-2

2、文字呈現(xiàn)（Text Rendering）：這里我們介紹三種方法。第一種方法是將文字渲染到貼圖上，再把該貼圖貼到一個模型上。這種當(dāng)文字的尺寸很小時，為了可以放到看清，我們需要需要一個高分辨率的材質(zhì)。第二種方法是有向距離場技術(shù)（Signed distance fields），相關(guān)技術(shù)細節(jié)由于演講者并沒有說明，所以這里也不做過多的論述。

簡而言之，這種方法達到的效果是在像素的級別將文字邊緣重新描繪，使得字體看上去更加清晰，如下圖2-3所示，左邊輸入的是一個模糊的字體，我們在程序中使用該技術(shù)重新繪制一下文本，使它成為右邊的文字從而變得清晰。這種方法的問題在于文字可能看上去很圓潤，而且需要很多工作量。

圖2-3

第三種方法是直接在場景呈現(xiàn)文本網(wǎng)絡(luò)（text mesh rendering）, 也就是說我們直接在場景中將文本以3D模型的形式的形式顯示出來。這也有些問題，文本模型因為建模的面數(shù)的限制可能會看上去有棱角和鋸齒。但從長遠看可能是一個很好的解決方法，因為它使文字的分辨率會獨立于整個場景。

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

3、懸停檢測（Hover detection）：懸停檢測在VR的場景中，通常體現(xiàn)在我們?nèi)绾握故居脩舢?dāng)前的視角聚焦在哪個菜單上。通常我們會用光線投射的方式（ray-casting）。 這里我們再介紹另一個微妙的方式。比如“角度對比”如下圖2-4， 被選擇物體會呈現(xiàn)一個不同的角度來提示用戶。

圖2-4

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

三、設(shè)計流程

最后，Riho給我們分享了他作為VR UI設(shè)計師的設(shè)計流程。首先他會畫大量的草圖，接著他會用手和聲音預(yù)先模擬一下各個UI元素如何動畫。最后他把草圖結(jié)合動畫應(yīng)用到場景之中。

現(xiàn)在再讓我們來看一下專業(yè)的VR用戶界面的生成流程是怎樣的。

1、從UV布局開始：創(chuàng)造并組合最基本的貼圖、圖片、文本部件。

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

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

4、在游戲引擎內(nèi)建立邏輯流程圖。

5、調(diào)試直到達到理想效果。

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

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。