在本文中，我們將詳細的分享VR app在設(shè)計方面的具體流程，包括相應的工具及方法，希望各位讀過之后能夠掌握到足夠的知識去運用到自己的VR項目設(shè)計當中。

歡迎關(guān)注譯者@C7210?（高級交互設(shè)計師、貓奴、吉他手、鼓手、老狗，現(xiàn)就職于騰訊ISUX）的微信公眾號：Beforweb

這兒有他的訪談：《優(yōu)設(shè)訪談！騰訊高級交互設(shè)計師C7210的十年設(shè)計路》

下面進入譯文。

對于很多設(shè)計師而言，VR仍是一片未知領(lǐng)域。在過去的幾年當中，我們見證了VR硬件設(shè)備與軟件產(chǎn)品的爆發(fā)式增長。站在體驗的角度來看，從枯燥無聊到精彩絕倫，不同類型的VR平臺與軟件形式所帶給我們的也不一而同，其中的復雜度與使用效率方面的差異也相當明顯。

作為傳統(tǒng)UX設(shè)計師，踏入全新領(lǐng)域的第一步是最為困難的。我們知道，因為我們經(jīng)歷過。別擔心，在本文中，我們將詳細的分享VR app在設(shè)計方面的具體流程，包括相應的工具及方法，希望各位讀過之后能夠掌握到足夠的知識去運用到自己的VR項目設(shè)計當中。要實現(xiàn)這一目標，你不必成為什么專家，但學習熱情以及將能力運用到新領(lǐng)域當中的渴望則是必需的。希望我們最終能夠通過更多的分享與交流來最大程度的推進VR的發(fā)展速度。

VR app的類型

從設(shè)計的角度講，VR app大致由“環(huán)境”與“界面”這兩部分所組成。

你可以將“環(huán)境”理解為戴上VR頭顯之后所進入的那個世界，譬如你所身處的那個虛擬行星表面，或是正在帶你飛馳的過山車。

“界面”指用戶為了游歷環(huán)境或控制流程體驗而必須與之進行互動的一系列虛擬對象。

所有的VR app都可以根據(jù)這兩個組成部分的復雜度差異而被劃分到四個象限當中：

左上方象限當中最具代表性的就是模擬器類產(chǎn)品，例如前面提到的提供過山車體驗的VR app。這類產(chǎn)品通常會構(gòu)造出完整的虛擬環(huán)境，但不提供任何界面，用戶只能全程被動體驗。

相對應的，歸屬于右下方象限中的產(chǎn)品通常會提供完善的界面交互體系，但在環(huán)境構(gòu)建方面的筆墨通常較淡，甚至不提供環(huán)境。三星Gear VR的首屏就是一個典型的例子。

虛擬環(huán)境的設(shè)計工作需要純熟的3D建模能力，這使得我們這些2D界面領(lǐng)域的交互或視覺設(shè)計師望而卻步。但另一方面，VR產(chǎn)品當中的界面設(shè)計部分卻是我們施展能力的大好舞臺。

我們的工作室設(shè)計的第一款全界面式的VR產(chǎn)品是為《經(jīng)濟學人》雜志打造的app。我們負責設(shè)計，合作方Visualise工作室負責開發(fā)實現(xiàn)與內(nèi)容創(chuàng)作。

在本文中，我們將以這款app的設(shè)計流程作為案例，首先對VR app的整體設(shè)計方式進行了解，然后重點聚焦于界面設(shè)計方面。 你也可以到Oculus的官網(wǎng)下載用于Gear VR的《經(jīng)濟學人雜志》VR app。

傳統(tǒng)界面設(shè)計流程

我們多數(shù)人對于移動app的設(shè)計流程早已輕車熟路，然而VR界面的設(shè)計工作流程仍然沒有所謂的標準定義。我們在著手啟動第一個VR app項目時，首先做的就是對設(shè)計流程進行定義。

傳統(tǒng)流程，新領(lǐng)域

我們第一次體驗Gear VR時便注意到其中的界面設(shè)計與傳統(tǒng)移動app有著相似之處，譬如在交互流程方面，用戶都是通過與界面元素的互動來實現(xiàn)頁面間的跳轉(zhuǎn)。當然這個例子太過籠統(tǒng)，目前只要記得這個結(jié)論便好。因此我們多年以來所熟悉的那套“嘗試、驗證、迭代”的產(chǎn)品設(shè)計思維依然可以派上用場，我們這些“傳統(tǒng)”設(shè)計師距離VR設(shè)計其實并沒那么遠的樣子。

既然如此，我們不妨在正式進入VR界面設(shè)計話題之前，先來簡單的梳理一下傳統(tǒng)移動app的設(shè)計流程。

1. 線框稿

我們首先會通過線框稿的快速迭代來定義交互流程與界面布局。

2. 視覺稿

在這個階段，功能與交互方式應該已經(jīng)得到明確的定義，設(shè)計師需要將視覺設(shè)計語言以及品牌規(guī)范運用到線框稿當中，雕琢出最終的視覺稿。

3. 流程圖

我們還需要通過界面組織起功能流程，將界面稿串聯(lián)起來，添加必要的邏輯走向和描述，形成一份流程圖，主要目的是幫助開發(fā)人員理解產(chǎn)品的功能邏輯。

那么，我們應該怎樣將這套流程運用到VR設(shè)計當中呢？

設(shè)計文檔配置

畫布尺寸

有時，最基礎(chǔ)的問題反而會最具挑戰(zhàn)性。當你面對著360°的畫布時，往往不知應該從何入手，畢竟我們多年來一直習慣于面對那些尺寸固定的2D界面窗口。

我們花費了幾個星期的時間去摸索怎樣的畫布規(guī)格最適于承載VR空間。當你設(shè)計移動app時，畫布規(guī)格通常由設(shè)備尺寸所決定，譬如750x1334對應著iPhone的基礎(chǔ)尺寸，而720x1280則適于Android平臺。同理，在試著將傳統(tǒng)設(shè)計流程融入到VR產(chǎn)品的過程中，我們也需要找到最便于呈現(xiàn)虛擬3D空間全貌的畫布尺寸。

下圖便是360° VR環(huán)境以2D形式呈現(xiàn)出的樣子。這種形式叫做“圓柱投影”（Equirectangular Projection）。在3D虛擬環(huán)境中，這樣的投影圖形會被包圍在球形空間當中，模擬出真實世界的樣子。

投影圖片的寬度代表著3D世界當中360°的橫向視野，高度代表著180°的縱向視野。基于此，以像素為單位，我們將畫布的尺寸設(shè)定為3600x1800.

在如此巨大的畫布上工作還是有些挑戰(zhàn)性的。不過由于我們主要關(guān)注于app當中界面部分的設(shè)計，所以在多數(shù)時候可以只聚焦在畫布的一小部分上。

參考著Mike Alger?關(guān)于VR視野舒適區(qū)域的早期研究，我們可以從整個畫布當中割離出一塊區(qū)域?qū)ｉT用于呈現(xiàn)界面相關(guān)的元素。我們選定的區(qū)域占據(jù)整個畫布的1/9，位于正中，尺寸為1200x600.

歸納下來，以像素為單位：

• 360°視圖：3600x1800
• 界面視圖：1200x600

測試

我們使用兩塊獨立的畫布來進行測試，其中一塊（1200x600）用于承載界面視圖部分，使我們得以更好的聚焦于界面設(shè)計流程，而另一塊（3600x1800）則專門用于呈現(xiàn)環(huán)境的部分。為了驗證界面區(qū)域的尺寸是否合理，我們必須通過實際的VR設(shè)備進行測試體驗。

使用Avocado，你可以很輕松的通過可視化的方式直接比較不同版本的設(shè)計方案。

工具

在講解實際設(shè)計流程之前，我們先來了解一下需要用到的工具：

• Sketch：我們?nèi)匀皇褂肧ketch來設(shè)計界面并制作流程圖。如果你還沒用過Sketch，不妨到官網(wǎng)下載一份試用版；如果你更習慣于Photoshop一類的工具，也無妨，事情可以照做。
• GoPro VR Player：一款來自GoPro的360°內(nèi)容播放器，免費。我們通過它在實際VR設(shè)備環(huán)境中預覽設(shè)計方案。
• Oculus Rift：搭配GoPro VR Player進行實境測試。

VR界面設(shè)計流程

接下來我們將進入VR界面的實際設(shè)計流程，一起完成一個簡單的案例；實際操作時間加在一起也不會超過五分鐘的樣子。

你可以下載案例素材包，其中包含了所有將會用到的UI元素圖形及環(huán)境背景圖片。當然，使用自己的素材也完全沒問題。

1.創(chuàng)建360°視圖

首先，我們要創(chuàng)建用來呈現(xiàn)360°環(huán)境背景的畫布。在Sketch當中新建文檔，添加一個畫板（Artboard），尺寸為3600x1800像素。

將素材包中的background.jpg拖入Sketch，置于畫板正中。如果你在使用自己的素材圖片，也要確保2:1的寬高比，并將尺寸設(shè)置為3600x1800.

2.創(chuàng)建界面視圖

正如前面所說，我們的界面區(qū)域?qū)嶋H上是從360°視圖當中割離出來的一部分，使我們可以更好的聚焦于界面部分的設(shè)計。

添加一個新畫板，尺寸為1200x600，然后將“360°視圖”畫板當中的背景圖片復制到新畫板中，置于正中，不要進行任何縮放，我們需要的就是這樣一塊局部區(qū)域。

3.設(shè)計界面

接下來要實際進行界面的設(shè)計了。我們會盡量保持練習的簡單易行，通過瓷片的形式展示界面選項。如果懶得制作自己的素材，你可以直接從剛剛下載的文件當中找到tile.png，并拖到畫布正中，然后復制兩份，并排放置。

從素材包中找到kickpush-logo.png，拖到畫布中，放置在中間瓷片的上方。

看上去還不壞？

4.合并畫板并導出文件

接下來的工作很有趣。在左側(cè)的畫板與圖層列表當中，確保界面視圖畫板位于360°視圖畫板的上方，然后在畫布當中將界面視圖畫板與360°視圖畫板層疊起來，橫向與縱向均保持居中。

選中360°視圖畫板，導出PNG格式的文件。在最終的實際圖片當中，界面視圖區(qū)域與背景整體是無縫銜接的。

5.在實際設(shè)備當中測試

打開GoPro VR播放器，將剛剛導出的PNG文件拖進播放窗口。使用鼠標拖拽窗口中的圖片，便能以360°的方式預覽整個環(huán)境樣式。

實際設(shè)計流程到這里實際上已經(jīng)結(jié)束了。比想象當中的簡單很多？

如果你有Oculus Rift，GoPro VR播放器應該可以檢測到，接下來你就能通過實際設(shè)備瀏覽我們制作的VR環(huán)境及界面了。如果你使用Mac，那么可能需要在系統(tǒng)當中進行一些設(shè)置才能實現(xiàn)預覽。

技術(shù)缺陷

低分辨率

目前VR頭顯的分辨率還很不理想。當然，對于移動VR來說，具體規(guī)格還取決于手機本身。無論怎樣，考慮到屏幕與眼睛的實際距離通常不會超過5厘米，顯示效果還是很難用清晰二字形容。

要確保最理想的效果，對應每只眼睛的分辨率都需要超過8K，換算成像素就是15360x7680。現(xiàn)實當中的技術(shù)水平距離這樣的標準還很遠，但并非遠不可及，未來總會得以實現(xiàn)。

文本可讀性

受到顯示設(shè)備分辨率的局限，你所設(shè)計的漂亮界面在實際當中會有明顯的像素感，這也意味著文本內(nèi)容將變得更加難讀，鋸齒的情況會比較嚴重。因此，在目前階段，要盡量為VR界面中的文字使用較大的字號，同時盡可能提升其他界面元素的清晰度。

完善設(shè)計流程

流程圖

還記得前面提到的移動app界面流程圖嗎？我們同樣可以將其運用到VR界面設(shè)計當中。按照功能流程將界面組織成邏輯清晰的流程圖，開發(fā)人員將很容易理解產(chǎn)品的整體架構(gòu)。

動效設(shè)計

完成了漂亮的靜態(tài)界面設(shè)計，接下來的問題是怎樣將動態(tài)交互效果呈現(xiàn)出來。我們同樣從兩個維度入手來解決這個問題。

基于Sketch當中的界面設(shè)計，我們通過Adobe After Effects與Principle來配合實現(xiàn)動效的展示。雖然最終輸出的并非3D形式，但仍然可以很有效的幫助開發(fā)團隊理解設(shè)計意圖，或是向客戶展示前期的設(shè)計愿景。

你可能會想：“看上去不錯，可是VR當中的實際情況會比這種2D呈現(xiàn)形式復雜很多”，確實是這樣，不過這種實踐方式的關(guān)鍵在于我們可以將已掌握的設(shè)計能力擴展到新領(lǐng)域當中進行嘗試。

環(huán)境互動還是界面互動？

有些VR體驗會在很大程度上依賴于人與虛擬環(huán)境之間的互動，對于這類產(chǎn)品來說，傳統(tǒng)形式的界面會顯得有些蹩腳，你需要更多考慮環(huán)境本身的交互特性。

設(shè)想你正在為一家高檔旅行代理商設(shè)計一款VR app，你希望通過最為生動有趣的方式將用戶“傳送”到他們可能感興趣的目的地。虛擬旅程的起點可以位于一個類似豪華辦公室的場所，用戶在其中翻看著漂亮的虛擬旅行雜志，或是擺弄著桌上各式各樣的旅行紀念品，通過類似這樣的“實體”互動來完成信息選擇。

這種方式想象起來會很酷，但在實際當中會遇到一些問題。要獲得最理想的體驗，你需要最高端的VR及PC設(shè)備的支持，并需要搭配手柄一類的控制器來實現(xiàn)環(huán)境互動。此外，這樣的app在設(shè)計與開發(fā)成本方面都需要很較高的投入。

新媒介的漸進式普及

在現(xiàn)實當中，不是所有的公司都能承受高額成本去打造如此高度沉浸化的體驗。除非你們像Valve或Google那樣擁有幾乎無限的資源，否則聚焦在這類高端VR體驗的產(chǎn)品思路有著太高的風險性。打造這樣的產(chǎn)品可能有助于展示你們在科技前沿的技術(shù)水平，但無益于將產(chǎn)品真正推向大眾市場。

通常，當一種新媒介問世時，那些早期實踐者會一次次將其潛力推至極限；經(jīng)過足夠久的學習與嘗試，新技術(shù)最終會被越來越多的人所接受。隨著VR設(shè)備的逐漸普及，越來越多的公司開始探尋將VR技術(shù)與目標消費需求進行整合的機遇。

從我們的角度看，通過傳統(tǒng)界面形式進行操作互動的VR產(chǎn)品 - 所謂“傳統(tǒng)”，也就是多數(shù)消費者在手機、平板、桌面電腦及可穿戴設(shè)備當中早已熟悉的設(shè)計范式 - 將能得到更大范圍的普及，同時也是那些在新領(lǐng)域當中有所需求的公司最值得投資推廣的產(chǎn)品。

是時候起步了

我們希望能夠通過本文給到各位設(shè)計師一些啟發(fā)，并幫助大家打消掉一些對于新事物的恐懼，去試著上手VR設(shè)計。

人們常說，獨自旅行才能走的更快。但要想走的更遠，結(jié)伴同行才是上策。我們想走的更遠，而不是一味的快。我們相信每家公司最終都會推出自己的VR app，就像如今幾乎每家公司都有自己的移動版網(wǎng)站一樣。

于是我們創(chuàng)建了Kichpush工作室，希望能夠?qū)⒏嘣O(shè)計師聯(lián)合起來，大膽的去做從前不敢做的事。VR產(chǎn)品越快普及到消費市場，舊有生態(tài)體系的深層變革才會越早到來。

作為數(shù)字產(chǎn)品設(shè)計師，我們接下來的挑戰(zhàn)就是打造更為復雜的VR產(chǎn)品，并處理好各類輸入設(shè)備的互動關(guān)系。要實現(xiàn)這樣的目標，我們需要更高效、更可靠的原型工具，幫助我們更快的創(chuàng)建和驗證設(shè)計方案。無論是嘗試新方法，還是開發(fā)相關(guān)工具，我們都會繼續(xù)努力下去，同時也希望將來能與各位分享更多這方面的經(jīng)驗。

「作者的VR設(shè)計好文合集」

1. 谷歌設(shè)計師出品的VR設(shè)計入門指南
2. VR設(shè)計指南之基礎(chǔ)概念與設(shè)計工具
3. 一名UX設(shè)計師的VR設(shè)計初體驗
4. 設(shè)計師該怎樣從3個方面學習VR設(shè)計？
5. 設(shè)計師進入VR領(lǐng)域會遇到哪些狀況？（附解決方法）
6. 關(guān)于谷歌的VR新平臺，設(shè)計師應該知道的9件事
7. 站在VR的大門前！主流VR平臺交互特性淺析
8. 從VR UI設(shè)計案例中學到的六個經(jīng)驗
9. 淺聊故事板在VR設(shè)計中的運用（附模版下載）
10. VR新工具之便捷實用的POV紙質(zhì)原型
11. 谷歌VR APP實戰(zhàn)！UNITY與CARDBOARD APP基礎(chǔ)實踐（一）
12. 谷歌VR APP實戰(zhàn)！UNITY與CARDBOARD APP基礎(chǔ)實踐（二）
13. 谷歌VR APP實戰(zhàn)！UNITY與CARDBOARD APP基礎(chǔ)實踐（三）
14. VR丨有哪些靠譜的VR開發(fā)工具 —— 3D建模篇
15. FACEBOOK 實習生總結(jié)的這5個VR設(shè)計方法，幫你少走彎路！

原文地址：beforweb.com

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量190萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com