對于很多設(shè)計師來說，VR仍是個未知的領(lǐng)域。過去幾年里，VR的硬件和應(yīng)用程序出現(xiàn)了爆炸式增長。由于VR的復(fù)雜性和實用性不同，VR的體驗也大不相同。

邁出成為VR的UX或UI設(shè)計師的第一步可能有點難，在這篇文章中，我將分享設(shè)計VR應(yīng)用程序的過程，希望對于你今后的VR設(shè)計有幫助。

首先，你不需要成為VR的專家，你只需要靈活地將你的技能運用到新的領(lǐng)域。作為未來VR設(shè)計師大軍中的一員，我們可以加速VR的發(fā)展，釋放VR的潛能。

VR應(yīng)用程序的種類

站在設(shè)計師的角度來說，VR應(yīng)用程序由兩種組件組成：環(huán)境和操作界面。

當(dāng)你戴上VR頭盔后，想象自己進入一個虛擬世界——比如一個虛擬星球，或想象坐在過山車的看到的景色。

操作界面是用戶與環(huán)境互動的一系列元素，用于瀏覽環(huán)境和操作體驗。根據(jù)這兩個組件的復(fù)雜性，所有VR應(yīng)用程序都可以沿著2個軸進行定位。

位于左上角的象限是模擬器，如模擬過山車的體驗。這些模擬器具有預(yù)先定制的環(huán)境，但還沒有操作界面。這種體驗就像你被綁在過山車上觀光一樣。

它相反的象限是已經(jīng)開發(fā)好操作界面的應(yīng)用程序，但基本上沒有制定好的環(huán)境。三星的Gear VR主屏就是一個例子。

設(shè)計虛擬環(huán)境（如場地和景觀）需要熟練使用3D建模工具，這對于許多設(shè)計師來說有一定難度。但UX和UI設(shè)計師仍有機會運用他們的技能來設(shè)計VR的用戶界面（簡稱VR UI）。

我們做的第一個完整的VR UI設(shè)計是“經(jīng)濟學(xué)人”的應(yīng)用程序，這是與VR工作室Visualize合作開發(fā)的。我們做了設(shè)計，Visualize創(chuàng)建了內(nèi)容，開發(fā)了應(yīng)用程序。

下一節(jié)中我們將它作為一個示例，借此我們將說明設(shè)計VR應(yīng)用程序的方法，然后再深入到VR界面設(shè)計的本質(zhì)。你可以從Oculus網(wǎng)站下載Gear VR的Economist應(yīng)用程序。

VR UI設(shè)計流程

雖然大多數(shù)設(shè)計師熟悉了移動應(yīng)用程序設(shè)計的工作流程，VR界面設(shè)計流程尚未定義。當(dāng)我們接到第一個VR應(yīng)用程序設(shè)計項目時，我們做的第一件事就是設(shè)計一個流程。

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

當(dāng)我們第一次使用三星的Gear VR時，我們注意到它與傳統(tǒng)的手機應(yīng)用程序的相似之處?；诮缑娴腣R應(yīng)用程序?qū)嶋H上是根據(jù)與傳統(tǒng)的應(yīng)用程序相似的基本動態(tài)運行的：用戶與他們?yōu)g覽頁面的用戶界面進行交互。

鑒于與傳統(tǒng)應(yīng)用程序的相似之處，同時，移動應(yīng)用程序工作流程是設(shè)計人員花費了大量時間打磨，并且這個工作流程經(jīng)過了反復(fù)測試，所以它也可用于制作VR UI。

在介紹如何設(shè)計VR界面之前，讓我們回顧一下傳統(tǒng)移動應(yīng)用程序的設(shè)計流程。

1.? 線框圖

首先，我們將進行快速迭代，定義交互和總體布局。

2.? 視覺設(shè)計

在這個階段，所有的功能和交互已確定下來。在這個階段品牌指南應(yīng)用于線框圖，并且出一個精美的界面。

3.? 架構(gòu)藍圖

在這個階段，我們將不同屏幕設(shè)計組織成工作流，在不同屏幕間添加鏈接，以此描述每個屏幕之間的交互。我們稱把這個過程稱為應(yīng)用程序的架構(gòu)藍圖，被用作項目開發(fā)人員的主要參考。

現(xiàn)在，我們?nèi)绾螌⑦@個工作流程應(yīng)用于VR中呢？

設(shè)置

畫布的尺寸

最簡單的問題可能是最具挑戰(zhàn)性的。面對著360°的畫布有時候無從下手。事實證明，UX和UI設(shè)計師只需要專注于總體空間中的某一部分。

我們花了好幾個星期試圖找出什么尺寸的畫布大小對于VR是最合適的。當(dāng)你在做移動應(yīng)用程序時，畫布大小由設(shè)備的尺寸決定：iPhone 6為1334×750像素，Android為1280×720像素。

如果想把移動應(yīng)用程序工作流程應(yīng)用于VR UI，首先你必須找出一個合適的畫布大小。

下圖360°的環(huán)境平鋪的樣子。這種表示法被稱為等角投影。在3D虛擬環(huán)境中，這些投影圍繞著一個球體，以模仿現(xiàn)實世界。

投影的全寬度表示橫向360°和垂直180°。我們可以用它來定義畫布的像素大?。?600×1800。

這么大尺寸下的設(shè)計是一個挑戰(zhàn)。但由于我們主要關(guān)注VR應(yīng)用程序的界面方面，我們可以這個畫布中的一部分開始操作。

基于Mike Alger對舒適觀看區(qū)域的早期研究，我們可以單獨隔離出一部分來顯示界面。

這個隔離出來的區(qū)域代表著360°環(huán)境中的九分之一。它位于方形圖像的中心，尺寸為1200×600像素。

我們來總結(jié)一下：

• “ 360°視圖 ”：3600×1800像素
• “ UI視圖 ”：1200×600像素

測試

在一個屏幕上使用2個畫布的原因是為了測試。“UI視圖”畫布使我們專注于我們正在制作的界面，設(shè)計工作流時也更加容易。

同時，“360°視圖”可以用于在VR環(huán)境中預(yù)覽界面。為了獲得真正體驗時的比例，需要使用VR頭盔測試設(shè)計出來的界面。

工具

在測試開始之前，我們需要以下工具：

• Sketch

我們將使用Sketch來設(shè)計我們的界面和用戶流。如果你沒有Sketch，你可以先下載個試用版。Sketch是我們首選的界面設(shè)計軟件。

• GoPro VR Player

GoPro VR Player是一個360°的內(nèi)容查看器。它由GoPro提供的，免費使用。我們將使用它來預(yù)覽我們的設(shè)計，并在環(huán)境中進行測試。

• Oculus Rift

將Oculus Rift插入GoPro VR Player可以在環(huán)境中測試設(shè)計。

VR界面設(shè)計的過程

在本節(jié)中，我們將介紹一個如何設(shè)計VR界面的簡短教程。我們將一起設(shè)計一個簡單的VR界面，整個過程應(yīng)該控制在5分鐘。

可以先下載個資源包（ZIP文件）（下載鏈接: https://pan.baidu.com/s/1gfqXEgV 密碼: se6c），其中包含預(yù)定的UI元素和背景圖像。如果你想使用你自己的組件，這也不會是一個問題。

1.? 設(shè)置“360°視圖”

首先，創(chuàng)建一個可以代表360°視圖的畫布。在Sketch中打開一個新文檔，并創(chuàng)建一個畫板：3600×1800像素。

導(dǎo)入命名為background.jpg的文件，并將其放在畫布的中間。如果你使用的是自己的等角背景，請確保其比例為2：1，并將其大小調(diào)整為3600×1800像素。

2.? 設(shè)置畫板

如上所述，“UI視圖”是“360°視圖”的裁剪版本，僅限于VR界面。

在上一個畫板旁邊新建一個畫板：1200×600像素。然后將我們添加的背景復(fù)制到“360°視圖”，并將其放在我們新的畫板的中間。一定不要再調(diào)整大??！我們在這里保留一個裁剪版本的背景。

3.? 設(shè)計界面

我們將在“UI視圖”畫布上設(shè)計我們的界面。為了方便練習(xí)，我們只作了簡單的設(shè)計，在上面添加一排圖塊。如果你怕麻煩，只需要在資源包中找到名為tile.png的文件，并將其拖拽到UI視圖的中間。

復(fù)制它，并創(chuàng)建3個一排的圖塊。

從資源包中獲取kickpush-logo.png圖片，并將其放在圖塊上方。

4.? 合并畫板和導(dǎo)出

現(xiàn)在到了有趣的地方了。確保在左側(cè)圖層列表中“UI視圖”畫板位于“360°視圖”畫板之上。

將“UI視圖”畫板拖動到“360°視圖”畫板的中間。將“360°視圖”畫板導(dǎo)出為PNG; “UI視圖”將在其上。

5.? 在VR中測試

打開GoPro VR Player，并將剛剛導(dǎo)出的“360°視圖”的PNG拖到窗口。用鼠標(biāo)拖動圖像以預(yù)覽360°環(huán)境。

簡單的VR界面設(shè)計就完成了，其實還是不難的！

如果你的機器上安裝了Oculus Rift，那么GoPro VR Player會檢測到它，并允許你使用VR設(shè)備預(yù)覽圖像。根據(jù)你的配置，你可能需要在MacOS中去調(diào)整顯示設(shè)置。

技術(shù)考慮

低分辨率

VR頭盔的分辨率非常差。但也不完全如此：這相當(dāng)于你手機的分辨率。但是，考慮到這個設(shè)備距你的眼睛5厘米遠，顯示屏看起來就不清晰。

為了獲得清晰的VR體驗，我們每個眼睛需要一個8K的顯示。相當(dāng)于15,360×7680像素的顯示。雖然這個目標(biāo)離我們有點遠，但最終我們會實現(xiàn)。

文字可讀性

由于顯示器的分辨率，所有你覺得清晰的UI元素將看起來像素化。這就意味著，第一，文本閱讀起來費力，其次，直線上會出現(xiàn)高水平的混疊。盡量避免使用大塊文本和高度細致的UI元素。

收尾工作

構(gòu)架藍圖

我們之前提到的移動應(yīng)用設(shè)計流程中的構(gòu)架藍圖，我們已經(jīng)將這種做法運用到VR界面。在UI視圖中，我們將工作流映射和組織成一個可理解的構(gòu)架藍圖，以便開發(fā)人員理解我們設(shè)計的應(yīng)用程序的整體架構(gòu)。

運動設(shè)計

設(shè)計一個漂亮的UI是一回事。如何顯示它的動畫是另外一回事。我們再次用二維視角來處理動畫。

基于我們之前的Sketch設(shè)計，我們使用Adobe After Effects和Principle為界面創(chuàng)建動畫。雖然動畫效果還不是3D體驗，但它被用作開發(fā)團隊的指南，客戶也能在早期階段了解我們的視角。

我們知道你在想什么：“這是很酷，但VR應(yīng)用程序遠比這個復(fù)雜得多”。確實，VR更加復(fù)雜?，F(xiàn)在的問題是，我們可以在多大程度上將我們當(dāng)前的UX和UI操作應(yīng)用于這種新媒體？

VR UI可以走多遠？

一些VR體驗十分依賴虛擬環(huán)境中，這樣的話，傳統(tǒng)的界面出現(xiàn)可能不是用戶控制應(yīng)用程序的最佳方式。在這種情況下，你可能希望用戶能直接與環(huán)境本身進行交互。

想象一下，你正在為一家土豪旅行社制作一個應(yīng)用程序。你想以最靈動的方式使用戶置身于潛在的度假目的地。你只要給你用戶戴上VR頭盔，他們就可以在你的辦公室里開始一場華麗的旅行。

從辦公室轉(zhuǎn)換到一個遙遠的地方，用戶需要選擇他們想去哪兒。他們只要拿起一本旅行雜志快速翻閱，直到找到吸引他們的那頁?；蛘吣愕霓k公桌上有很多有趣的小東西，用戶選擇的不同東西會帶他們?nèi)ゲ煌牡胤健?/p>

這的確很酷，但仍有一些不足。為了得到滿意的效果，你需要一款帶有手柄遙控器的高級VR頭盔。此外，像這樣的應(yīng)用程序需要相當(dāng)大的精力來開發(fā)，遠比傳統(tǒng)的應(yīng)用程序界面中精心設(shè)計要難。

迎接變革！

現(xiàn)實情況是，這些沉浸式的體驗對于大多數(shù)公司來說并不具有商業(yè)上的可行性。除非你擁有無限的資源，像Valve和Google一樣，創(chuàng)建一個像上述這樣的VR體驗可能太貴了，太冒險，太耗時了。

這種體驗對于展示你處于媒體和技術(shù)的最前沿是不二之選，但不足以將你的產(chǎn)品推向新媒體市場?？蛇_性也很重要。

通常，新形式出現(xiàn)時，早期采用者會探索它的極限：如它的創(chuàng)造者和創(chuàng)新者。隨著時間的推移，通過不斷的學(xué)習(xí)和投資，許多潛在用戶也可以接觸到它。

隨著VR頭盔越來越普遍，企業(yè)不斷挖掘如何將VR融入到與客戶互動中。

從我們的角度來看，VR應(yīng)用程序具有直觀的用戶界面——即UI更接近于人們已經(jīng)習(xí)慣使用的可穿戴設(shè)備，如手機，平板電腦和計算機，這將使VR成為大多數(shù)公司的既經(jīng)濟實惠又有價值的投資。

迎接VR快速發(fā)展的春風(fēng)

我們認(rèn)為未來每個公司都會有一個VR應(yīng)用程序，就像每個公司現(xiàn)在都有一個移動網(wǎng)站。

所以，我們現(xiàn)在做的就像在建造一個升天的火箭，由全球設(shè)計師共同努力，大膽地嘗試新領(lǐng)域。如果公司越早發(fā)現(xiàn)到VR應(yīng)用程序的意義，整個VR生態(tài)系統(tǒng)就越早爆發(fā)。

譯者：oftodesign

原文作者：Alex Deruette和Sam Applebee

原文地址：https://www.invisionapp.com/blog/vr-interface-design/

本文由 @oftodesign 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。