從 0 到 1 的 VR 界面設計之路

原文： Getting Started With VR Interface Design

作者： Sam Applebee & Alex Deruette，兩位作者聯合創立了倫敦設計工作室 Kickpush，致力於縮小傳統 UX/UI 設計和虛擬現實鴻溝。

譯者：張新慧

審校：屠敏，CSDN 編輯，關注 VR/AR 等領域，尋求報道或投稿請發郵件[email protected]。同時運營「CSDN VR 開發群」，面向 VR/AR 專業開發者間做深入討論和交流，歡迎加微信 tm_forever_miss 申請入群（請備註姓名+公司+職位，以快速審核通過）

VR 領域是諸多設計者尚未征服的未知世界。近年來虛擬現實（VR）硬體和應用的爆炸式增長有目共睹，而 VR 體驗參差不齊，有平淡無奇的，也有震撼人心的，複雜性和實用性也各不相同。

VR 是讓 UX/UI 設計者望而卻步的存在，這麼說只因我們都是過來人。別怕，這篇文章將分享 VR 應用開發經驗，希望對諸位的實踐有參考價值。開發者無需成為 VR 專家，只要樂意將自己的技能運用到新領域就夠了。積流成河，相信個人開發者的力量最終能夠彙集一起，更早實現 VR 的巨大潛力。

從設計者的角度來看，VR 應用主要由兩大部分組成：環境和界面。環境是戴上 VR 頭盔后看到的世界，比如說一顆虛擬星球，一輛虛擬過山車等。

界面則是用戶用以導航環境，控制用戶體驗的一系列元素。凡是 VR 應用，都可放在以環境和界面為橫縱坐標的象限上，以「複雜度」來衡量。

落在第二象限（左上）內的 VR 應用以模擬器居多，擁有完整成熟的環境，但無控制界面，比如VR過山車，用戶從頭到尾是「鎖」在過山車的座椅上的，不進行任何操作。

第四象限（右下）代表控制界面複雜但無環境的應用，三星的Gear VR主屏屬於這一類。

設計虛擬環境/場景需要專業的 3D 建模工具，這是很多設計者沒有的；但為虛擬現實（VR UI）設計用戶界面是完全可行的。

我們的 VR 用戶界面處女作獻給了《經濟學人》雜誌，跟 Visualise 工作室合作。設計我們做，內容和應用開發他們來做。

文章下一節將以此為案例展開，先談及如何設計 VR 應用，再詳述 VR 界面設計的具體細節。如想體驗該界面，Oculus 網站可下載《經濟學人》的 Gear VR 版。

雖然絕大多數設計者已有了自己的一套移動應用設計流程，但 VR 界面設計仍是空白。接到第一個 VR 應用設計項目時，我們最先想到的是流程設計。

老流程，新領域

第一次體驗三星 Gear VR 時，我們發現它跟傳統移動應用很相似。簡單來說，界面型 VR 應用也是通過界面來進入不同頁面的。

考慮到這種相似性，移動應用開發流程用在 VR 界面設計上完全可以，數年的心血不會束之高閣的。VR 並沒想象的那樣遠在天邊。

為了更好描述 VR 界面設計，先過一遍傳統移動應用設計流程。

1. 線框

首先是決定交互和總體布局的快速迭代。

2. 視覺設計

這一階段的特性和交互體驗已大大提升。線框全部應用了《經濟學人》的品牌風格，漂亮的界面搞定了。

3. 設計圖

將屏幕列成流程圖，並將各自的聯繫和交互表示出來，就有了開發者作為主要參考的設計圖。

那麼如果把這個流程用於虛擬現實呢?

畫布尺寸

看似簡單的問題可能最難解決。立體畫布很難決定從哪入手。UX/UI設計者其實只需專註做好立體空間中的一部分即可。

我們花了數周才搞清 VR 的合理畫布尺寸。移動應用的畫布尺寸是由設備屏幕來決定的。比如 iPhone6 是 1334 × 750 像素，安卓大概是 1280 × 720 像素。

移動應用工作流程用於 VR 用戶界面的話，首先要知道 VR 畫布多大合適。

下圖是立體環境壓扁之後的樣子，即球面投影。3D 虛擬環境下，這些投影圍成一個球面來模模擬實的世界。

全寬投影是 360 度水平投影加 180 度縱向投影，可以此定義 VR 畫布尺寸應為 3600 × 1800 像素。

這麼大尺寸應付起來不容易，但 VR 應用的界面才是最重要的，所以只用在一部分畫布上下功夫就夠了。

基於 Mike Alger 對舒適可視範圍的早期研究，適合做界面的那一塊畫布應在球面投影的正中間，占立體環境的1/9，1200 × 600像素。

總結：

• 「立體視圖」：3600 × 1800像素

• 「UI視圖」：1200 × 600像素

測試

為了更好測試，在同一個屏幕上使用兩種視圖。「UI視圖」只專註於界面，讓流程設計更方便；而「立體視圖」是為了預覽 VR 環境下界面的效果，比對兩個視圖的比例，需要使用 VR 頭盔。

工具

在談流程之前，先介紹下會用到的工具：

我們用 Sketch 來設計界面及用戶流，也可以用 Sketch 試用版代替。界面設計軟體我們推薦 Sketch，但 Photoshop 或別的也可以。

GoPro VR Player 是 GoPro 的免費 360 度內容瀏覽工具，可以用來預覽並在特定情境下測試設計。

Oculus Rift 和 GoPro VR Player 一起使用，可以用 VR 頭盔在特定情境下測試。

首先簡短說一下如何設計 VR 界面，以一個簡單的作品為例，實踐起來最多花五分鐘。

下載資產壓縮包，裡面有固定大小的UI元素及背景圖片。想要用自己的資產也可以。

1. 創建「立體視圖」

首先創建360度的立體畫布。在Sketch中打開新文件，創建藝術畫板：3600 × 1800像素。

導入命名為 background.jpg 的文件，放在畫布中央。如果用自己的球面投影背景，比例應是 2:1，再將尺寸調整為 3600 × 1800 像素。

2. 創建藝術畫板

剛剛說過，「UI視圖」是「立體視圖」的剪切板，重心只在VR界面上。

在剛剛的藝術畫板旁邊再建一個1200 × 600像素的新畫板，然後將「立體視圖」的背景再複製到新畫板中心——注意保持原尺寸，我們想要保留裁剪版的背景。

3. 設計界面

我們在「UI視圖」上設計界面，介於這只是演示，所以只做簡易版，添加一行方塊。如果嫌麻煩，就把資產壓縮包里的tile.png文件拖到UI視圖的中心。

複製 tile.png，創建三個方塊排成一行。

再把裡面的 kickpush-logo.png 放在方塊上面。

看起來還不錯，是吧?

4. 合併藝術畫板並導出

這一部分就比較有趣了。左邊層列表裡的「UI視圖」要始終在「立體視圖」之上。

將「UI 視圖」拖到「立體視圖」的中央，以 PNG 格式導出「立體視圖」；「UI 視圖」會留在「立體視圖」上面。

5. 在 VR 中測試

打開 GoPro VR Player，把剛剛導出的「立體視圖」PNG 拖進窗口，預覽 360 度立體虛擬環境。

完成了！只要知道怎麼做就很簡單了，對吧？

如果裝有 Oculus Rift，GoPro VR Player 會自動檢測到，就能用 VR 設備來預覽圖像了。Mac 系統可能要調整顯示設置，才能達到理想的預覽效果。

低解析度

VR 頭盔的解析度很糟糕？不至於，其實跟手機差不多。但考慮到頭盔離眼睛有 5 厘米那麼遠，圖像很難做到絕對清晰，因為每隻眼需要 8K 的解析度，相當於 15,360 × 7680 像素。8K 至今還未實現，但總有一天會實現的。

文字可讀性

因為顯示解析度的關係，所有清晰的 UI 元素都會像素化，意思是：文字可讀性會降低，而且直線會有圖像混疊（鋸齒）。所以盡量避免使用大文本塊以及高度細節化的 UI 元素。

設計圖

還記得移動應用設計流程中的設計圖嗎？我們也用在了VR界面設計上——將UI視圖工作流組織好做成一目了然的設計圖，開發者更容易理解應用的總體架構。

動態設計

靜態的好看是一回事，給 UI 賦予生機是另外一回事。這個問題我們也決定從兩個方面來回答。

我們採用了 Sketch 設計，用 Adobe After Effects 和 Principle 為界面創建動畫效果。雖然出來的效果不是 3D，但可以給開發團隊以指導，並讓客戶在設計初期階段就了解我們的設計願景。

已經完成了你的 VR 界面處女作？不錯嘛！擊掌慶祝一下！

我們知道，你現在一定在想：VR 應用還可以更複雜的。對吧？的確是這樣，但問題是，我們現有的 UX/UI 實踐經驗能夠多大程度適應 VR 這一新媒介？

界面——更親密？更疏遠？

一些 VR 體驗太依賴虛擬環境，以至於上面一層傳統界面無法達到應用控制的最佳效果。這時候，你可能想要用戶繞過界面，直接跟環境互動。

想象一家高級旅行社請你開發應用，你想用 VR 來呈現旅行目的地最生動最美妙之處，於是請體驗者戴上頭盔，在倫敦切爾西的豪華辦公室里開始這段旅程。

首先邀請體驗者選擇目的地。他們的心之所向可能來自於某本旅遊雜誌上最奪人眼球的那一頁，或者是你辦公桌上來自世界各地新奇有趣的小玩意兒。

這樣的創意酷極了！但是想要達到全方位的效果，先進的 VR 頭盔以及手動控制器必不可少；比起傳統應用界面上看似光鮮亮麗的旅行選項，VR 應用更複雜，更廢精力。

革命萬歲！

現實是，這樣的浸入式體驗很難實現商業化。如果不是像 Valve 或 Google 那樣已坐擁巨大的虛擬資源，那麼做浸入式 VR 體驗成本太高，風險太大，太費時間了，對於媒體技術前沿者炫耀炫耀可以，但如果僅為宣傳產品或服務就不值當了。當新的技術出現，通常是第一批使用者——這個世界的創造者和革新者——激發出它最大潛力。擴大使用群體很重要，及時行動、認真學習和誠意投資，三者缺一不可。

隨著 VR 頭盔越來越普及，公司慢慢會開始尋找整合 VR 的機會，以提升顧客的參與感。

要我們來說，如果 VR 應用的界面能夠像可穿戴設備、手機、平板電腦、台式電腦的界面那樣不用費太多心思，那麼 VR 的成本會降低，也更值得公司去投資。

駛向新世界的巨輪

希望這篇文章縮小了讀者跟 VR 之間的距離，並且給有意從事 VR 設計的人一些啟發。

一句諺語說得好：要走得快，獨自上路；要走得遠，結伴而行。我們選擇後者。在 Kickpush，我們的願景是：終有一天，所有公司都會擁有自己的 VR 應用，就像現在他們都有移動網站一樣（都2017年了！）全世界的設計者都在共建一艘巨輪，駛向未知的新世界。當公司越早理解 VR 應用的價值，VR 生態圈就能越早建成。

作為數字產品設計者，下一個挑戰將是更為複雜的應用以及控制器操控的種種問題。切入點應是能夠快速簡便地創建和測試設計的優秀原型構建工具。盡情期待後續文章，了解這方便的早期進展以及相關的開發新工具。