一篇VR實踐指導文章。Smashing Magazine好久沒有這樣新一些的東西了。實踐指導性質的內容非常簡單易行，個人感覺需要重點關注的是將傳統UX設計流程及方法融入VR產品設計的思路，以及作者對于VR設計開發工作前景的觀點。新技術，新事物，大風刮去之后留下的一批實踐者所始終堅持的那些，才是真實的、有長期價值的東西。這是走心；集體意淫無非走腎而已。

下面進入譯文。

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

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

VR app的類型

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

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

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

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

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

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

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

我們的工作室設計的第一款全界面式的VR產品是為《經濟學人》雜志打造的app。我們負責設計，合作方Visualise工作室負責開發實現與內容創作。

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

傳統界面設計流程

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

傳統流程，新領域

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

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

1. 線框稿

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

2. 視覺稿

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

3. 流程圖

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

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

設計文檔配置

畫布尺寸

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

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

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

投影圖片的寬度代表著3D世界當中360°的橫向視野，高度代表著180°的縱向視野?；诖?，以像素為單位，我們將畫布的尺寸設定為3600×1800.

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

參考著Mike Alger關于VR視野舒適區域的早期研究，我們可以從整個畫布當中割離出一塊區域專門用于呈現界面相關的元素。我們選定的區域占據整個畫布的1/9，位于正中，尺寸為1200×600.

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

• 360°視圖：3600×1800
• 界面視圖：1200×600

測試

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

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

工具

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

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

VR界面設計流程

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

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

1. 創建360°視圖

首先，我們要創建用來呈現360°環境背景的畫布。在Sketch當中新建文檔，添加一個畫板（Artboard），尺寸為3600×1800像素。

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

2. 創建界面視圖

正如前面所說，我們的界面區域實際上是從360°視圖當中割離出來的一部分，使我們可以更好的聚焦于界面部分的設計。

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

3. 設計界面

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

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

看上去還不壞？

4. 合并畫板并導出文件

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

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

5. 在實際設備當中測試

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

實際設計流程到這里實際上已經結束了。比想象當中的簡單很多？

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

技術缺陷

低分辨率

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

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

文本可讀性

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

完善設計流程

流程圖

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

動效設計

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

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

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

環境互動還是界面互動？

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

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

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

新媒介的漸進式普及

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

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

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

是時候起步了

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

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

于是我們創建了Kichpush工作室，希望能夠將更多設計師聯合起來，大膽的去做從前不敢做的事。VR產品越快普及到消費市場，舊有生態體系的深層變革才會越早到來。

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

原文地址：https://www.smashingmagazine.com/2017/02/getting-started-with-vr-inter…

譯文地址：Be For Web

譯者：C7210，交互設計師、UX設計熱愛者、VR探索者、譯者、貓奴、吉他手、鼓手，現就職于騰訊上海