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像素。
總結：
為了更好測試，在同一個屏幕上使用兩種視圖。“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 生態圈就能越早建成。
作為數字產品設計者，下一個挑戰將是更為復雜的應用以及控制器操控的種種問題。切入點應是能夠快速簡便地創建和測試設計的原型構建工具。盡情期待后續文章，了解這方便的早期進展以及相關的開發新工具。
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
