實踐指導(dǎo)性的內(nèi)容對于剛開始了解的人來說很有幫助，作者想要將傳統(tǒng)的UI或UX的設(shè)計流程和方法論應(yīng)用到VR設(shè)計這個觀點值得關(guān)注，同時作者也發(fā)表了一些對于以后的VR從業(yè)者、公司和未來領(lǐng)域的發(fā)展觀點。

虛擬領(lǐng)域?qū)τ谠S多設(shè)計師而言是一個未知領(lǐng)域。在過去的幾年里，我們見證了VR（虛擬現(xiàn)實，virtual reality）硬件和應(yīng)用的繁榮。VR體驗從平凡變得令人驚奇，體驗的復(fù)雜度和效用都產(chǎn)生了巨大的變化。

對于一個UI或者UX設(shè)計師，踏入VR的第一步是令人怯步的。我們知道，因為我們也經(jīng)歷過這個階段。但是不要害怕！在這篇文章里，我們將分享一個設(shè)計VR apps的過程，希望你們能通過這個開始你們自己的VR設(shè)計之路。你無需成為VR領(lǐng)域中的專家，你只需要愿意將你的技能運用到一個全新的領(lǐng)域。最終當(dāng)所有群體都一同為之努力時，我們將加速VR的發(fā)展，更快的發(fā)揮出它所有的潛能。

（這里是一部分延展閱讀的文章鏈接，懶得翻譯啦。）

有哪些類型的VR Apps

從一個設(shè)計師的角度而言，VR app是主要有兩種類型的元素構(gòu)成：環(huán)境（envionments）和界面（interfaces）。

你可以把環(huán)境想象成當(dāng)你帶上VR裝置時進(jìn)入的世界——可能是你發(fā)現(xiàn)自己正處于的某個虛擬星球，或者也可能是當(dāng)你乘坐過山車時的某個視角。

界面則是一套元素，能讓用戶與之交互駕馭特定的環(huán)境或者操控他們的體驗。所有的VR apps都可以根據(jù)這兩個因素的復(fù)雜程度，沿著兩個軸安置。

在左上方的象限里是一些類似模擬器的產(chǎn)品，好比上面提到的過山車體驗。它們擁有完全成形的環(huán)境，但是完全沒有界面。你可以簡單的封鎖在里面尋開心。

在相反的象限里是形成了界面但是只有一點甚至沒有的環(huán)境。三星Gear VR 主頁屏幕就是一個很好的例子。

設(shè)計類似的場所和風(fēng)景畫的環(huán)境需要熟練掌握3D建模工具，這些元素對許多設(shè)計師來說有些鞭長莫及。

然而，對ux或者ui設(shè)計師有一些絕佳的機(jī)會去應(yīng)用它們的專業(yè)技能去為了VR（或者簡單的說就是VR UIs）設(shè)計用戶界面。

我們做的第一個完整VR UI設(shè)計就是為了經(jīng)濟(jì)學(xué)人（The Economist）設(shè)計了一個app，同VR產(chǎn)品工作室Visualise合作建立的。我們完成了設(shè)計的部分，而Visualise工作室創(chuàng)造了具體內(nèi)容并開發(fā)了這個app。

在進(jìn)入為VR設(shè)計界面的本質(zhì)前，我們在下一個部分將會使用這個作為一個工作案例，展示一種設(shè)計VR apps的方法。

你可以從Oculus網(wǎng)站下載經(jīng)濟(jì)學(xué)人app（for Gear VR）。

VR UI設(shè)計的過程

當(dāng)大部分的設(shè)計師們在思考它們設(shè)計移動端apps的工作流程的時，設(shè)計VR界面的過程仍有待定義。所以當(dāng)?shù)谝粋€VR app設(shè)計項目敲門時，我們邏輯上的第一個步驟是設(shè)計過程。

將傳統(tǒng)的工作流程應(yīng)用到新的領(lǐng)域

當(dāng)我們第一次試玩三星Gear VR時，我們留意到了與傳統(tǒng)的移動端apps的相似之處。VR apps產(chǎn)品界面決定于和傳統(tǒng)apps一樣的基本變化：用戶同界面發(fā)生交互，幫助用戶瀏覽頁面。我們在這里先簡要提一下，但是請先將這個觀點保存在你的腦海里。

鑒于和傳統(tǒng)apps的相似性，設(shè)計師們花費了數(shù)十年提煉的，通過長期廣泛的應(yīng)用而被證明有效的移動端app工作流程是不會被浪費的，而且可以運用來設(shè)計VR UIs。你遠(yuǎn)比你想象中的更加接近VR apps設(shè)計。

在描述如何設(shè)計VR界面前，讓我們先后退一步，并瀏覽一次傳統(tǒng)移動端app的設(shè)計流程。

1.線框圖（WIREFRAMES）

首先，我們通過快速迭代，定義交互和基本布局。

2.視覺設(shè)計（VISUAL DESIGN）

在這個階段，能夠使用一些特征和互動。品牌準(zhǔn)則被運用在線框圖，一個美觀的界面成功建立。

3.藍(lán)圖（BLUEPRINT）

在這里，我們將所有界面組織成為流程圖，畫出界面之間的聯(lián)系并且描述每一個界面的交互細(xì)節(jié)。我們可以稱這個為app的藍(lán)圖，它將為項目工作的開發(fā)者的重要參考。

現(xiàn)在，我們要如何將這個工作流程運用到VR呢？

準(zhǔn)備

畫布大小

最簡單的問題可以是最有挑戰(zhàn)的。面對著360度的畫布，設(shè)計師可能會發(fā)現(xiàn)從哪里開始是一件非常困難的事情。原來ux和ui設(shè)計師只需要專注在所有空間里的一個確定的部分。

我們花費了數(shù)十周試圖去思考什么樣的畫布大小對VR而言是能講得通的。當(dāng)你為一個移動app工作時，畫布大小是由于設(shè)備大小決定的，iPhone6使用1334 x 750 pixels的畫布大小，而安卓大致上使用1280 x 720 pixels的畫布大小。

為了將移動端app工作流程應(yīng)用到VR UIs，首先你需要去思考多大的畫布大小是有意義的。

下面是一個360度的環(huán)境平面狀態(tài)看起來的樣子。這種表現(xiàn)被叫做等距柱狀投影圖（Equirectangular Projection）。在3D虛擬環(huán)境中，這些投影圖被包裹成一個球體來描述真實世界。

投影的全部寬度水平為360度，垂直水平為180度。我們可以通過這個定義畫布的像素大?。?600 x 1800 pixels。

在一個如此巨大的尺寸上工作可以說是一個挑戰(zhàn)。但是因為我們首要會對VR apps的界面面貌感興趣，我們可以把精力專注在畫布中的某個細(xì)節(jié)上。

在Mike Alger對舒適的觀賞區(qū)早期研究的基礎(chǔ)上，我們可以分離出讓界面有意思的部分。

感興趣的區(qū)域位于360度環(huán)境的九分之一。它的位置就在等量的圖像的中心，是1200×600像素大小。

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

“360視圖“: 3600 × 1800 pixels

“UI視圖“: 1200 × 600 pixels

測試

使用兩個畫布一個屏幕的原因就是測試。“UI視圖”畫布可以幫助我們專注于我們正在制作的界面，并且使設(shè)計流程更加容易。

然而，“360視圖”用于在虛擬現(xiàn)實環(huán)境中預(yù)覽界面。要想獲得真正的比例感，通過VR設(shè)置測試接口是必不可少的。

使用Avocode，可以直觀地比較設(shè)計的修改。

工具

在我們開始演練之前，這里有一些我們需要的工具：（每個工具的詳細(xì)介紹就不在這里翻譯了。）

• sketch
• GoPro VR Player
• Oculus Rift

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

在本節(jié)中，我們通過運行一個關(guān)于如何設(shè)計一個VR界面的簡短教程。我們將一起設(shè)計一個簡單的界面，這最多只需要五分鐘的時間。

下載預(yù)設(shè)包，其中包含預(yù)先設(shè)置好大小的UI元素和背景圖像。如果你想使用你自己的設(shè)置，那就試試吧，這不會是個問題的。

1.建立“360視圖”

先做重要的事。創(chuàng)建一個360度視圖的畫布。在sketch中打開一個新的文檔，創(chuàng)建artboard（大小為3600 x 1800 pixels）。

導(dǎo)入名為background.jpg的文件，將它放置在畫布的中心。如果你使用自己的等量背景圖，確保背景圖的比例是2:1，并調(diào)整其大小為3600×1800 pixels。

2.建立Artboard

如上所述，“UI視圖”是一個裁剪版本的“360視圖”，只專注于虛擬現(xiàn)實界面。

緊隨前一個創(chuàng)建一個新的Artboard：1200×600像素。然后，復(fù)制我們剛加入到“360視圖”的背景圖，并且放置在新的畫板中心。不要調(diào)整大??！我們在這里需要一個背景圖的裁剪版本。

3.設(shè)計界面

我們將在“UI視圖”畫布上設(shè)計界面?？紤]到這個練習(xí)，我們將事情簡單化，并添加一排titles。如果你想要偷懶，只需要從預(yù)設(shè)文件包里把名為tile.png的文件拖到UI視圖的中間。

復(fù)制它，并在一行上排列3個title。

將kickpush-logo.png從預(yù)設(shè)包里拖拉放置到title上合適的位置。

看起來不錯，對嗎？

4.合并Artboards并輸出

現(xiàn)在有趣的工作來了。確?！癠I視圖”的Artboard在“360視圖”的Artboard左邊的圖層列表。

將“UI視圖”的Artboard拖到“360視圖”的Artboard的中間。將“360視圖”的Artboard作為PNG輸出，“UI視圖”將會在“360視圖”的上面。

5.在VR中測試

打開GoPro VR Player將你剛才輸出的“360視圖”的PNG文件拖到窗口中。通過鼠標(biāo)去拖拉圖像以預(yù)覽360度環(huán)境。

這就完成了，比你想象中一定程度的更簡單，對嗎？

如果你擁有設(shè)置好Oculus Rift（一款為電子游戲設(shè)計的頭戴式顯示器）的機(jī)器，然后GoPro VR Player應(yīng)該能檢測并且讓你能夠使用VR設(shè)備去預(yù)覽圖像。根據(jù)你的配置，你可以用過MacOS系統(tǒng)設(shè)置的顯示器隨便“胡鬧玩弄”了。

技術(shù)層面的考慮

低分辨率

VR頭盔的分辨率相當(dāng)差。嗯，這并不完全正確：它和你手機(jī)的分辨率差不多。然而，考慮到這個設(shè)備離你的眼睛只有5厘米，這個顯示器看起來沒有那么差。

如果要得到一個清晰的虛擬現(xiàn)實體驗，我們每只眼睛需要一個8K的顯示器。這會是一個15360×7680 pixel的顯示器。我們目前離這個目標(biāo)還很遠(yuǎn)，但我們終究會實現(xiàn)。

文本的可讀性

因為顯示器的分辨率，所有你制作的精美“脆弱”UI元素將會看起來更像素化。這意味著，首先，文本將難以閱讀，其次，將會在直線出現(xiàn)高水平的混疊。請盡量試圖避免使用大塊文本和高精細(xì)的UI元素。

最后的修正

藍(lán)圖

還記得我們移動應(yīng)用程序設(shè)計過程中的藍(lán)圖嗎？我們已經(jīng)將這種做法應(yīng)用到VR界面。使用UI視圖，我們把流程映射和組織成為一個可理解的藍(lán)圖，對于開發(fā)者去了解我們設(shè)計的app的整體架構(gòu)是理想的。

動作設(shè)計（MOTION DESIGN）

設(shè)計一個美麗的UI是一件事，但是展示如何使它富有生機(jī)活力就是另一件事了。曾經(jīng)有一次，我們決定用一種二維透視的方法去著手處理。

使用Sketch設(shè)計，我們通過Adobe After Effects賦予界面生命。雖然結(jié)果不是一個3D的經(jīng)驗，但是被用來作為發(fā)展團(tuán)隊的指導(dǎo)方針，并幫助我們的客戶了解我們在這個過程早期階段的愿景。

你剛剛設(shè)計了第一個虛擬現(xiàn)實界面。檢查一下！為戰(zhàn)利品開心吧。

我們知道你在想什么，雖然你可能覺得“這很酷，但VR app遠(yuǎn)遠(yuǎn)比這個更加復(fù)雜”。但問題是，我們可以將我們目前UI和UX的實踐應(yīng)用到這種新的媒體到什么程度？

VR UIs能走多遠(yuǎn)？

INTER-YOUR-FACES

一些VR經(jīng)驗很大程度上依賴于虛擬環(huán)境，以至于對用戶而言，安置一個傳統(tǒng)方式的界面可能不是最佳的控制app的方式。在這種情況下，您可能希望用戶直接與環(huán)境本身進(jìn)行交互。

想象一下你正在為一個豪華旅行社制作一個app。你想盡可能的用最生動的方式把潛在的度假勝地傳送給用戶。所以你邀請用戶戴上頭盔，并且開始在你的時髦的切爾西辦公室進(jìn)行體驗。

想要要從辦公室過渡到一些遙遠(yuǎn)的地方，用戶需要選擇他們想去的地方。他們可以拿起一本旅行雜志，翻閱它，直到他們登上某個吸引人的頁面?；蛘呖赡茉谧雷由霞狭撕芏嘤腥さ膶ο?，取決于用戶挑選哪一個對象，將用戶吸引到不同的地方。

這肯定很酷，但也會有一些缺點。為了得到充分的效果，你需要一個更先進(jìn)的擁有手持控制器的VR頭盔。此外，對比在傳統(tǒng)app界面里一系列被很好展示了的選擇，像這樣的app需要相當(dāng)多的努力去開發(fā)。

現(xiàn)實是這些身臨其境的體驗對于大多數(shù)公司在商業(yè)上是不可行的。除非你擁有大量幾乎沒有限制的資源，比如Valve和Google，創(chuàng)造一個像上面描述的體驗可能會太昂貴，太冒險而且太費時。

這種體驗對炫耀在媒體或者技術(shù)的前沿是聰明的，但是想要通過這個新的媒介帶領(lǐng)你的產(chǎn)品進(jìn)入市場就不是那么明智了。可訪問使用的能力才是重點。

通常情況下，當(dāng)一個新的格式出現(xiàn)的時候，它會被早期使用者（世界上的創(chuàng)造者和創(chuàng)新者）推到極限。隨著時間的推移，同時伴隨足夠的學(xué)習(xí)和投資，它逐漸變得能更廣泛被潛在用戶使用。

隨著VR頭盔變得越來越普遍，公司們將開始尋找機(jī)會整合VR融入到他們與客戶接觸的方式中。

從我們的角度來看，具備直觀UIs的VR apps意味著，UIs更接近人們已習(xí)慣于用他們的服飾、手機(jī)、平板電腦和電腦，對于大多數(shù)公司這會讓VR成為一個可承受并且值得的投資，并追求這個投資。

是時候上船（開始VR設(shè)計）了

我們希望我們通過這篇文章已經(jīng)使VR空間有點不太可怕了，并且希望能啟發(fā)你開始設(shè)計自己的VR項目。

有人說，如果你想快速旅行，那么獨自去。但如果你想旅行得更遠(yuǎn)，那么就和同伴一起出發(fā)。而我們想遠(yuǎn)行。在Kickpush，我們認(rèn)為每個公司總有一天會有一個虛擬現(xiàn)實的應(yīng)用程序，就像現(xiàn)在每個公司都有一個移動網(wǎng)站（或者是應(yīng)該有，天知道這都是2017了）。

所以，我們正在建設(shè)一個飛船，通過世界各地的設(shè)計師們共同努力，大膽的進(jìn)入一個之前沒有設(shè)計師到達(dá)過的領(lǐng)域。越早為公司有意義的實現(xiàn)VR apps，整個生態(tài)系統(tǒng)就會越快繁榮。

數(shù)字產(chǎn)品的設(shè)計師下一個挑戰(zhàn)是更復(fù)雜的應(yīng)用和處理其他通過控制器輸入的數(shù)據(jù)類型。要著手解決這個問題，我們需要強(qiáng)大的原型工具，能夠讓我們快速和輕松的創(chuàng)建和測試設(shè)計。我們將寫一篇后續(xù)文章，關(guān)注一些早期嘗試這樣做，和一些正在開發(fā)中的新工具。

譯者：xElaine

來源：http://www.jianshu.com/p/1ec59e878f9b

本文由 @xElaine? 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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