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

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

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

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

圖1-1

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

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

1. 為了可靠性而保證顯示在視角的中心：當(dāng)有重要的信息需要演示的時(shí)候，UI設(shè)計(jì)師需要考慮用戶的關(guān)注點(diǎn)在什么位置，并且要預(yù)估用戶接下來的行為，從而保證重要的信息始終在用戶視角的中心。
2. 描繪邊角輪廓來吸引用戶的注意：比如在攀巖游戲中，在用戶的手腕周圍描邊，用顏色來表示目前攀巖的狀態(tài)和可行程度。
3. 在VR的用戶界面中，語音提示或者聲音往往比其它東西要重要得多。

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

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

圖1-2

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

圖1-3

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

圖1-4

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

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

圖1-5

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

圖1-6

現(xiàn)在再讓我們來談?wù)劜藛危琕R中的菜單和傳統(tǒng)菜單一樣，主要是提供了項(xiàng)目相關(guān)的信息。所以并不需要對(duì)VR的菜單做過多的改變。但是正如前面所說，過多的菜單有時(shí)候會(huì)給用戶帶來負(fù)面效果，所以多用場(chǎng)景中的一些物體的改變，來和用戶進(jìn)行交互，如文章開頭提到的水杯就是一個(gè)例子。

再設(shè)計(jì)VR的菜單的時(shí)候，請(qǐng)牢記以下幾點(diǎn)：

1. 全局的信息如滾動(dòng)條等往往沒有太大的效果，因?yàn)橛脩艨偸歉P(guān)注VR場(chǎng)景內(nèi)的內(nèi)容。
2. 用好一些過渡效果是關(guān)鍵。

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

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

• 好的UI可以不是“真正的UI”。
• 場(chǎng)景中的信息因?yàn)樯疃?，遮擋，立體感等原因很難做到一致性。
• 菜單如果運(yùn)用得足夠好往往會(huì)帶來意想不到的效果。

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

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

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

圖2-1

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

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

圖2-2

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

簡(jiǎn)而言之，這種方法達(dá)到的效果是在像素的級(jí)別將文字邊緣重新描繪，使得字體看上去更加清晰，如下圖2-3所示，左邊輸入的是一個(gè)模糊的字體，我們?cè)诔绦蛑惺褂迷摷夹g(shù)重新繪制一下文本，使它成為右邊的文字從而變得清晰。這種方法的問題在于文字可能看上去很圓潤，而且需要很多工作量。

圖2-3

第三種方法是直接在場(chǎng)景呈現(xiàn)文本網(wǎng)絡(luò)（text mesh rendering）, 也就是說我們直接在場(chǎng)景中將文本以3D模型的形式的形式顯示出來。這也有些問題，文本模型因?yàn)榻５拿鏀?shù)的限制可能會(huì)看上去有棱角和鋸齒。但從長遠(yuǎn)看可能是一個(gè)很好的解決方法，因?yàn)樗刮淖值姆直媛蕰?huì)獨(dú)立于整個(gè)場(chǎng)景。

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

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

圖2-4

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

三、設(shè)計(jì)流程

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

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

• 從UV布局開始：創(chuàng)造并組合最基本的貼圖、圖片、文本部件。
• 在3DsMax中建模和做動(dòng)畫。
• 將模型和動(dòng)畫鏈在一起。
• 在游戲引擎內(nèi)建立邏輯流程圖。
• 調(diào)試直到達(dá)到理想效果。

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

作者：布格小虎

原文地址：http://www.leiphone.com/news/201607/plWaEn9rv9Ozcxi8.html

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@雷鋒網(wǎng)，作者@布格小虎