大牛吐血分享！虛擬世界的設計，我們才探索了不到 1%……

編者按：本文轉載自轉載自微信公眾號 VR 價值論（vr-value），轉載時已獲得作者授權。

如果你正在為 VR UI 交互中的沉浸感發愁；如果你正為找不到合適的 VR UI 思路頭疼；恭喜你，你找到了一篇最新的實操分享。

本文您將了解到：

VR UI 和傳統 UI 實戰中的區別在哪？
VR UI 如何破局 3D 眩暈？
VR UI 有哪些新的思路啟發？
如何將 VR UI 的設計融于真實場景？
3D 漂浮立體圖標如何實現？

必須說，今天的干貨絕對在別處難得一見。這是兩位資深技術人員在價值君的軟磨硬泡中，才答應分享的純實操經驗。

其中提到的技術，并非無人敢碰的頂尖技術，但其新的思路，在目前的 VR UI 交互領域，還沒有太多人能領悟到，誰能搶先學到，誰就能立馬派上用場，解決當下難題。

不過，大牛也感嘆道，虛擬世界的設計，人們還懂得太少太少，這片星辰大海，目前的探索連 1% 都不到……

由于內容的專業門檻度，本文適合的人群為傳統 UI 從業人員、剛步入 VR 領域的 UI 新手。如果你的朋友正在從事此類工作，也請推薦給他，這篇干貨一定會對他的思路有新的啟發。

本文分為三部分：

第一部分為綜述：VR UI 所面臨的挑戰；
第二部分實操分享：如何將 VR UI 的設計融于真實場景？
第三部分為實操分享：3D 漂浮立體圖標如何實現？

本期由 51VR 兩位資深制作人對 VR 價值論進行獨家分享： 如何用新思路打開 VR UI 的大門？

撰文：Kuma、Clark，編輯：VR 價值論

第一篇：VR UI 所面臨的挑戰是什么？

VR UI 真是個不好伺候的活兒！

由最初的概念到如今漸漸地普及，它不再是一個單純的科幻構想，它的發展帶來了許多不同思路，引起各種新鮮的話題，全新的體驗方式不僅是對使用者，更是對開發者提供了無限可能。

在這篇文章，我將提到的是一個在軟件發展歷史上非常悠久，但也因 VR 時代的到來擴展出了全新面貌的詞匯—-UI。

UI 將藉由 VR，獲得全新闡釋

UI 全稱 User Interface，即是通常理解的用戶界面。這點，所有接觸過電腦，手機的人都不會陌生。

比較有意思的是，在最初的 VR 內容發展中，UI 一度被認為是會嚴重影響沉浸式體驗的存在，或者是說強烈的沉浸式體驗會讓人在虛擬世界里感受到更加接近真實的世界，因此 UI 的存在會 “不必要”。

但隨著不斷深入地開發，VR 內容也漸漸由單純漫游和展示，開始發展為需要在場景中更多互動，并在體驗過程中傳達給體驗者，在這時，就需要更多的信息載體，而 UI，也開始被賦予了新的內容。

光從設計的概念上來說，我們會發現和其他硬件平臺相比，雖然都是傳達著訊息，指引著交互，但已大為不同。

“都是視角惹的禍”

我們通常玩一款第一人稱的 FPS 視頻游戲，大多數的情況，透過屏幕看到的視角，可能視角寬度覆蓋的范圍也就 45 度 – 60 度不等。

在現實中，你的正偏側面如果有什么東西，你會很快地意識到，但在多數透過屏幕的第一人稱中，那就是你的視線盲點了。

在視覺上，VR 不是把一個屏幕直接糊在眼前，而是直接覆蓋了更廣的視角，不同的設備從 100 度甚至到 120 度，這點，可謂是提供了一個真正意義上的第一人稱。

在屏幕上，幾乎所有第一人稱武器射擊本質都是朝向屏幕上一個固定的準心，而這個準心，是和你的視線始終綁定，你往什么地方看，這個準心包括你的武器也就隨之而動。

在 VR 中，雖然也有游戲將武器的準心和視線綁定在一起，但這不再是一個近乎唯一的瞄準方案了，脫離準心，瞄準和射擊不再是通過一個固定的位子，而是靈活擁有了更多角度操作的可能。

想想屏幕上的射擊游戲如果有雙槍，這兩把槍往往射擊方向都是一樣的，但在 VR 中，你可以讓他們朝向不同方向。

VR 游戲《直到黎明: 血戮》中，可以操作兩把武器朝不同方向射擊，這在其他 VR 游戲中也是可以實現的。

在視覺上擁有了更廣的視角讓你在體驗時更像是進入了這個場景。

除此之外，在互動操作上，雖然很難說現在已經有了很多成熟的方案，但可以看的到，在這一塊，VR 本身也具有了許多的可能。

例如當戴上 HTCVive 后，你左右手同時也會拿上兩個手柄，這兩個手柄在場景中就宛如你的兩只手，本身也可以映射成不同的物體，提供多種交互操作。

而你在現實中的移動也會投射到場景中，雖然在現在，如果有著較大的場景，或有大量的移動，還是需要通過手柄進行操作，因為現實中的體驗間往往不會和場景是一樣的大小和布局。

在 VR 中，你擁有著更為廣闊的視角，或者說，更接近真實的情況

疲勞的難題怎么破？

不同的體驗方式自然對于 UI 來說，也帶來了不同的設計思路，一些曾經的游戲如今也額外推出了 VR 版本，而在為 VR 量身打造的過程中，相比于以往的版本就會做出許多不同的變動。

不久之前，在橫濱國際平和會議場舉辦的日本最大電腦娛樂開發者會議 “CEDEC 2016” 上，Capcom 技術研究開發部的高原和啟就有分享《生化危機 7》VR 版本和原版的諸多不同，他提到了一個許多 VR 開發者都在思考的問題，那就是如何更好的來應對 VR 疲勞的問題。

我們都知道 3D 眩暈癥，當感受熒幕中運動出現不適當頻率時，神經中樞會出現一種保護性反應，阻止人體進一步去接受這些不穩定訊息。

在此時，人就會覺得頭暈惡心，但這因個體差異往往會不同，就有點像暈車一樣，不同的人敏感程度不同。

VR 疲勞，本質就是一個 3D 眩暈癥的升級版，沉浸式的體驗會加強體驗者的訊息接受廣度，所以需要開發者更慎重的來處理各個環節，如果一個游戲暢玩兩分鐘眩暈兩小時，這個游戲恐怕很快就沒人玩了。

《生化危機 7》VR 版本，首先降低了角色移動以及互動操作的速率，調整了武器在手上的位子，在 UI 上也是幾乎推翻重制。

例如獲得道具后顯示物品信息，包括菜單界面，不再和以往貼在屏幕上一樣了，而是改成了整個場景中懸浮，原因在于：

固定包括近距離處顯示的 UI 會讓人眼睛感覺不舒服，其實想想我們自己看書，除了近視等情況，舒適的閱讀還是會讓書籍和自己眼睛保持一定距離，而且，肯定不會是你眼睛看到哪書就自己跟過來了。

《生化危機 7》VR 版中，即便操作的方式還是通過手柄，但界面呈現已經和原本大有不同

還有視線固定，在現在看來不是一個 VR UI 良好的處理方式，需要利用環境，不再用平面，而是用真正立體的思路去思考整個設計。

VR 飛行射擊游戲《EVE: 瓦爾基里》，包括《使命召喚: 無限戰爭》即將推出的 VR 飛行射擊擴展內容中，都將 UI 圍繞著整個坐艙形成 HUD，在你直視前方的時候，能看自己血量和準心，當你往左右看，還會看到其他信息。

在 VR 中，移動視角不再需要某一個按鍵，你帶著頭盔的時候，視角變化就如同你在現實中一般。

《使命召喚：無限戰爭》VR 版中，圍繞著飛行坐艙射擊的 UI

不再同于之前的 UI 設計，主體是從一個屏幕去考慮，那本質上是平面化的思維，相對來說，VR 的 UI 不再會是單純存在一些 2D 面上的信息展示元素，需要從一個更廣更立體的角度去思考和設計，融入虛擬環境元素，也會因為環境不同的變化帶來不同的設計可能。

不管是設計方式還是風格定義，VR UI 會有著更多可能。

一個帶著全新體驗的事物對于開發者來說，也需要用全新的思維去思考如何更好地去創造這些體驗。

絕對全新的思維模式

如同本身是個全新事物一樣，VR UI 并不像移動端網頁端 UI 那樣有著非常多的成熟范例，在如今 VR UI 的相關工作中，更需要的是探索和嘗試，你很難找到一個頭頭是道的教程來教你整個設計流程和體系。

我們團隊在開始做 UI 時，最初的設計思路還是視頻游戲中那樣，在實現上也是如此。

在 UE4 中，我們以普通游戲 UI 的實現方式，將整個界面貼合在攝像機上，但我們很快就發現，在 VR 中，這個貼合在 “眼睛” 上的界面，不僅僅出現了不清晰的問題，也沒有帶來足夠好的體驗。

后來在字體上，我們也遇見了例如大篇幅字體在 VR 閱讀時并不友好，包括移動和變化字體也存在影響閱讀的情況，這些或許是引擎功能問題，也或許是需要更好的設計方案來解決。

但不管問題是什么，解決的過程和結果都是團隊開發成長的關鍵，需要探索，不斷尋找更好的思路。

VR UI 擁有更多設計可能，那些在電影中曾經看到的炫酷立體 HUD，很有可能在不久后就會在一些 VR 產品中出現

如今，VR 的發展也在由最初各種噱頭吸引眼球到逐漸成熟，形形色色的 VR 內容將在未來不斷推陳出新，VR 所涉及的領域已不再單是游戲，房產，建筑，醫療，教育等等，而是有著更多的可能。

作為一名設計師需要做的，概括著來說就是不斷用新思維模式去解決新問題。

虛擬世界 UI 的設計，我們懂得太少，連 1% 都不到，未知還太多……

第二篇：UE4 中實體 UI 繪制方案

動機

在 VR 中使用傳統 3D UI，可能會降低整個體驗的沉浸感。而利用一個現實世界中的實體，諸如 LCD、CRT 顯示器、大型的公共屏幕、儀表盤等來顯示 UI 與玩家交互，則會增加整個虛擬世界的可信度。

利用本方案，可以在任意的 Mesh 表面繪制 UI 信息（諸如彎曲的 CRT 表面），也可以在游戲中真實地呈現日常生活中各種 “屏幕”，帶來流暢的交互體驗。

實現

利用 Slate 編輯器來制作 UI Widget。

將 Widget 繪制到 Render Texture。

在 Content 中創建 RenderTarget Asset

利用 FWidgetRenderer::DrawWindow 將 Widget 繪制到 RenderTarget

創建 Material 使用 Render Texture。

將 Material 賦予 Mesh，來完成 UI 在模型上的呈現。

展望

在把 RenderTexture 應用到 Mesh 材質上可以實現很多材質效果，諸如 CRT 擾動，UI 模糊，也可以充分利用 PBR 渲染管線，將 UI 融入到真實物理世界中，接受光照、產生正確反射和高光。

可以建立一個 RenderTexture，將多個 UI 繪制上去，在目標 Mesh 上利用 UV 的 Layout 來決定顯示哪個 UI，可以降低 Drawcall，增加較多 UI 性能。

新手提示

當有比較多的零碎 UI 時，會有一定的性能影響。

當一個物體有很多 Submesh 時要正確管理 Mesh 的材質順序，保持工作流高效。

第三篇：在 UE4 中制作漂浮立體圖標

構思

在 VR 場景中，因視角和互動方式的革新，UI 樣式可能性大大增加了，許多 UI 元素現在可以考慮以更加立體的形式來體現，以至于讓這些元素能夠更自然地附加在場景中。

現在我們的主題是一個具有文化屬性的符號，它的用途是用作一個綜合性文化建筑的示意圖標，我的構思是一個豎琴，稍有立體，藍色伴隨淺淺的透明，在場景中輕輕漂浮著。

我們可以先粗略繪制一張草圖來表達自己的大概思路。接下來，我們首先會用到 Photoshop 來完成樣條線，再到 3ds MAX 中做成模型，最后導入到 UE4 引擎中，賦予材質以及在藍圖中設置動畫。

如對這些軟件有基本操作和功能了解，知道基礎的動畫曲線，便可以最好地理解教程。

在 PS 中繪制路徑

在 PS 中，我們首先利用鋼筆工具勾勒出整個圖標外形，為了達到更好的觀察效果方便調試，對鋼筆工具設置為直接勾勒出來即是形狀圖層。

勾畫好之后，選中形狀圖層（如有多個圖層，建議合并），導出成 AI 路徑。

導入 3ds MAX

將剛才 AI 文件導入到 3ds MAX 中，這時候之前繪制好的路徑會成為 3ds MAX 樣條線，我們可以調整一下插值中的步速，以讓整個線條更加平滑，但不宜調整過大。可能在我們這個單獨的教程中，可以無視這個問題，但如果是要去做一個完整的項目，這無疑會影響優化。

接下來我們把整個樣條線轉換成可編輯多邊形，并擠出，這里我擠出的數值是 0.5，具體多少，可以由自己把控。

擠出之后，模型背面會有鏤空的地方，這時候不要直接選中所有邊進行封口，封口無法自動有效封住這種有多個鏤空的形狀，這時候最好的辦法是先對一些關鍵的邊進行橋接，然后再封口。

當整個模型完成之后，我們就可以導出了，將這個模型導出為 FBX 文件，命名因為之后需要導入引擎的緣故，建議使用英文（或拼音），這里，我的命名是 model.fbx。

導入 UE4

打開 UE4，將之前的 FBX 文件導入進來，這里可以選擇 Import（導入），也可以直接將文件拖入進來，接下來我們右鍵新建一個 Blueprint Class（藍圖類），Pick Parent Class（選擇父類）為 Actor，命名為 model_BP。再新建一個 Material（材質），命名為 model_mat（命名沒有硬性要求，但盡量要用英文）。