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

作為傳統(tǒng)UX設(shè)計(jì)師羽杰，踏入全新領(lǐng)域的第一步是最為困難的渡紫。我們知道，因?yàn)槲覀兘?jīng)歷過考赛。別擔(dān)心腻惠，在本文中，我們將詳細(xì)的分享VR app在設(shè)計(jì)方面的具體流程欲虚，包括相應(yīng)的工具及方法，希望各位讀過之后能夠掌握到足夠的知識(shí)去運(yùn)用到自己的VR項(xiàng)目設(shè)計(jì)當(dāng)中悔雹。要實(shí)現(xiàn)這一目標(biāo)复哆，你不必成為什么專家欣喧，但學(xué)習(xí)熱情以及將能力運(yùn)用到新領(lǐng)域當(dāng)中的渴望則是必需的梯找。希望我們最終能夠通過更多的分享與交流來最大程度的推進(jìn)VR的發(fā)展速度驯鳖。

VR app的類型

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

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

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

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

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

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

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

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

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

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

我們多數(shù)人對(duì)于移動(dòng)app的設(shè)計(jì)流程早已輕車熟路耸采，然而VR界面的設(shè)計(jì)工作流程仍然沒有所謂的標(biāo)準(zhǔn)定義。我們?cè)谥謫?dòng)第一個(gè)VR app項(xiàng)目時(shí)工育，首先做的就是對(duì)設(shè)計(jì)流程進(jìn)行定義虾宇。

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

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

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

1.線框稿

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

2.視覺稿

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

3.流程圖

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

那么又兵，我們應(yīng)該怎樣將這套流程運(yùn)用到VR設(shè)計(jì)當(dāng)中呢任柜？

設(shè)計(jì)文檔配置

畫布尺寸

有時(shí)，最基礎(chǔ)的問題反而會(huì)最具挑戰(zhàn)性沛厨。當(dāng)你面對(duì)著360°的畫布時(shí)宙地，往往不知應(yīng)該從何入手，畢竟我們多年來一直習(xí)慣于面對(duì)那些尺寸固定的2D界面窗口俄烁。

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

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

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

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

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

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

360°視圖：3600x1800

界面視圖：1200x600

測(cè)試

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

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

工具

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

Sketch：我們?nèi)匀皇褂肧ketch來設(shè)計(jì)界面并制作流程圖蜕企。如果你還沒用過Sketch咬荷，不妨到官網(wǎng)下載一份試用版；如果你更習(xí)慣于Photoshop一類的工具轻掩，也無妨幸乒，事情可以照做。

GoPro VR Player：一款來自GoPro的360°內(nèi)容播放器唇牧，免費(fèi)罕扎。我們通過它在實(shí)際VR設(shè)備環(huán)境中預(yù)覽設(shè)計(jì)方案。

Oculus Rift：搭配GoPro VR Player進(jìn)行實(shí)境測(cè)試丐重。

VR界面設(shè)計(jì)流程

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

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

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

首先，我們要?jiǎng)?chuàng)建用來呈現(xiàn)360°環(huán)境背景的畫布豫领。在Sketch當(dāng)中新建文檔抡柿，添加一個(gè)畫板（Artboard），尺寸為3600x1800像素氏堤。

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

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

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

添加一個(gè)新畫板虚循，尺寸為1200x600，然后將“360°視圖”畫板當(dāng)中的背景圖片復(fù)制到新畫板中样傍，置于正中横缔，不要進(jìn)行任何縮放，我們需要的就是這樣一塊局部區(qū)域衫哥。

3.設(shè)計(jì)界面

接下來要實(shí)際進(jìn)行界面的設(shè)計(jì)了茎刚。我們會(huì)盡量保持練習(xí)的簡單易行，通過瓷片的形式展示界面選項(xiàng)撤逢。如果懶得制作自己的素材膛锭，你可以直接從剛剛下載的文件當(dāng)中找到tile.png，并拖到畫布正中蚊荣，然后復(fù)制兩份初狰，并排放置。

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

看上去還不壞媳叨？

4.合并畫板并導(dǎo)出文件

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

選中360°視圖畫板扩然，導(dǎo)出PNG格式的文件艘儒。在最終的實(shí)際圖片當(dāng)中，界面視圖區(qū)域與背景整體是無縫銜接的夫偶。

5.在實(shí)際設(shè)備當(dāng)中測(cè)試

打開GoPro VR播放器界睁，將剛剛導(dǎo)出的PNG文件拖進(jìn)播放窗口。使用鼠標(biāo)拖拽窗口中的圖片兵拢，便能以360°的方式預(yù)覽整個(gè)環(huán)境樣式翻斟。

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

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

技術(shù)缺陷

低分辨率

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

要確保最理想的效果高镐，對(duì)應(yīng)每只眼睛的分辨率都需要超過8K溉旋，換算成像素就是15360x7680。現(xiàn)實(shí)當(dāng)中的技術(shù)水平距離這樣的標(biāo)準(zhǔn)還很遠(yuǎn)嫉髓，但并非遠(yuǎn)不可及低滩，未來總會(huì)得以實(shí)現(xiàn)。

文本可讀性

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

完善設(shè)計(jì)流程

流程圖

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

動(dòng)效設(shè)計(jì)

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

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

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

環(huán)境互動(dòng)還是界面互動(dòng)蛹锰？

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

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

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

新媒介的漸進(jìn)式普及

在現(xiàn)實(shí)當(dāng)中痘儡，不是所有的公司都能承受高額成本去打造如此高度沉浸化的體驗(yàn)辕万。除非你們像Valve或Google那樣擁有幾乎無限的資源，否則聚焦在這類高端VR體驗(yàn)的產(chǎn)品思路有著太高的風(fēng)險(xiǎn)性沉删。打造這樣的產(chǎn)品可能有助于展示你們?cè)诳萍记把氐募夹g(shù)水平渐尿，但無益于將產(chǎn)品真正推向大眾市場(chǎng)。

通常矾瑰，當(dāng)一種新媒介問世時(shí)砖茸，那些早期實(shí)踐者會(huì)一次次將其潛力推至極限；經(jīng)過足夠久的學(xué)習(xí)與嘗試殴穴，新技術(shù)最終會(huì)被越來越多的人所接受凉夯。隨著VR設(shè)備的逐漸普及，越來越多的公司開始探尋將VR技術(shù)與目標(biāo)消費(fèi)需求進(jìn)行整合的機(jī)遇采幌。

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

是時(shí)候起步了

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

人們常說顷扩，獨(dú)自旅行才能走的更快拐邪。但要想走的更遠(yuǎn)，結(jié)伴同行才是上策隘截。我們想走的更遠(yuǎn)扎阶，而不是一味的快。我們相信每家公司最終都會(huì)推出自己的VR app婶芭，就像如今幾乎每家公司都有自己的移動(dòng)版網(wǎng)站一樣东臀。

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

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

本文來自Be For Web