如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

對(duì)于許多設(shè)計(jì)師來(lái)說(shuō)，虛擬現(xiàn)實(shí)（VR）是一個(gè)全新且陌生的領(lǐng)域。過(guò)去幾年中，我們目睹了虛擬現(xiàn)實(shí)硬件和軟件的爆炸式增長(zhǎng)。從體驗(yàn)性上看，虛擬現(xiàn)實(shí)既有小而簡(jiǎn)單的也有專(zhuān)業(yè)復(fù)雜的，整體體驗(yàn)差異很大。

作為 UX 或 UI 設(shè)計(jì)師，初次接觸 VR 可能會(huì)有所畏懼，但不要害怕，在本文中，我們將分享一個(gè)設(shè)計(jì) VR 應(yīng)用程序的完整過(guò)程，我們希望您可以通過(guò)這個(gè)案例來(lái)開(kāi)始自己的 VR 設(shè)計(jì)之旅。你不需要成為 VR 的專(zhuān)家；你只需要將你之前的設(shè)計(jì)技能應(yīng)用到一個(gè)新領(lǐng)域。最終，經(jīng)過(guò)大家的共同努力，我們定可以加速 VR 的發(fā)展以發(fā)揮它的全部潛力。

一、VR應(yīng)用程序里有什么？

一般來(lái)說(shuō)，從設(shè)計(jì)者的角度來(lái)看，VR 應(yīng)用程序由兩種類(lèi)型的組件組成：環(huán)境和交互元素。

環(huán)境：您可以將環(huán)境視為您戴上 VR 頭盔時(shí)所進(jìn)入的整個(gè)世界 ， 比如你身處的虛擬星系或者駕駛過(guò)山車(chē)飛馳的樂(lè)園。

交互元素：界面上影響用戶(hù)交互和操控體驗(yàn)的元素合集。

根據(jù)這兩個(gè)組件的復(fù)雜性，所有 VR 應(yīng)用程序都可以沿兩個(gè)軸定位。

在左上象限中的 VR 應(yīng)用有類(lèi)似模擬器的東西，例如過(guò)山車(chē)的 VR 應(yīng)用，這種應(yīng)用具有完全成形的環(huán)境，但根本沒(méi)有交互。你只是被鎖在了車(chē)?yán)铩?

在右下角的象限中，應(yīng)用程序具有一個(gè)更好的界面，但比較少或沒(méi)有3D環(huán)境。三星的 Gear VR 主屏就是一個(gè)很好的例子。

設(shè)計(jì)場(chǎng)所和景觀(guān)等虛擬環(huán)境需要熟練使用3D建模工具，許多設(shè)計(jì)師平時(shí)無(wú)法接觸到這些元素。但是，UX 和 UI 設(shè)計(jì)人員有很大的機(jī)會(huì)將他們已有的技能應(yīng)用于設(shè)計(jì)虛擬現(xiàn)實(shí)的用戶(hù)界面。

我們所做的第一個(gè)完整 VR 的 UI 設(shè)計(jì)是 The Economist 的應(yīng)用程序，與 VR 制作工作室 Visualize 合作。我們做設(shè)計(jì)，Visualize 創(chuàng)建內(nèi)容并開(kāi)發(fā)應(yīng)用程序。

我們?cè)谥笪恼轮袑⒋藨?yīng)用作為一個(gè)工作示例，現(xiàn)在我們將介紹設(shè)計(jì) VR 應(yīng)用程序的方法，然后再介紹設(shè)計(jì) VR 界面的細(xì)節(jié)。您可以從 Oculus 網(wǎng)站下載Gear VR 的 Economist 應(yīng)用程序。

二、VR UI設(shè)計(jì)的第一步-回顧傳統(tǒng)流程

盡管大多數(shù)設(shè)計(jì)師已經(jīng)熟悉了設(shè)計(jì)移動(dòng)應(yīng)用程序的工作流程，但還不太清楚設(shè)計(jì) VR 界面的流程。當(dāng)面對(duì)第一個(gè)VR應(yīng)用程序設(shè)計(jì)項(xiàng)目時(shí)，我們首先要做的是合乎邏輯。

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

當(dāng)我們第一次使用三星的 Gear VR 時(shí)，我們注意到它與傳統(tǒng)移動(dòng)應(yīng)用有很多相似之處。VR 應(yīng)用程序與傳統(tǒng)應(yīng)用程序有著相同的工作流程：幫助用戶(hù)與界面進(jìn)行交互。

現(xiàn)在請(qǐng)記住。鑒于與傳統(tǒng)應(yīng)用的相似性，設(shè)計(jì)師花費(fèi)數(shù)年時(shí)間改進(jìn)的久經(jīng)考驗(yàn)的移動(dòng)應(yīng)用工作流程不會(huì)浪費(fèi)，這些流程仍然可用于制作 VR UI。這讓你比你想象的更接近 VR！

在如何設(shè)計(jì) VR 界面之前，讓我們回過(guò)頭來(lái)看看傳統(tǒng)移動(dòng)應(yīng)用的設(shè)計(jì)過(guò)程。

1. 線(xiàn)框

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

2. 視覺(jué)設(shè)計(jì)

在此階段，功能和交互已經(jīng)完成。我們把視覺(jué)規(guī)范與設(shè)計(jì)應(yīng)用于線(xiàn)框圖，并制作出漂亮的界面。

3. 設(shè)計(jì)文檔

在這里，我們將屏幕組織成流程，繪制屏幕之間的鏈接并描述每個(gè)屏幕的交互。我們將此稱(chēng)為應(yīng)用程序的設(shè)計(jì)文檔，它將被用作開(kāi)發(fā)人員的主要參考。

現(xiàn)在，我們?nèi)绾螌⒋斯ぷ髁鞒虘?yīng)用于虛擬現(xiàn)實(shí)的設(shè)計(jì)當(dāng)中呢？

三、開(kāi)始VR UI設(shè)計(jì)

1. 畫(huà)布的尺寸

最簡(jiǎn)單的問(wèn)題可能也是最具挑戰(zhàn)性的。面對(duì)360度的畫(huà)布，人們可能很難知道從哪里開(kāi)始。事實(shí)證明，UX 和 UI 設(shè)計(jì)者只需要關(guān)注整個(gè)空間的某個(gè)部分即可。

我們花了幾周時(shí)間試圖弄清楚什么樣的畫(huà)布尺寸適用于 VR 設(shè)計(jì)。當(dāng)您使用移動(dòng)應(yīng)用程序時(shí)，畫(huà)布大小取決于設(shè)備的大?。篿Phone 6為1334×750像素，Android大約1280×720像素。

要將移動(dòng)應(yīng)用程序工作流應(yīng)用于 VR UI，首先必須確定合適的畫(huà)布大小。

以下是扁平化時(shí)360度環(huán)境的樣子。這種視圖叫做等角矩形投影。在3D虛擬環(huán)境中，這些投影圍繞球體纏繞，以模仿現(xiàn)實(shí)世界。

整個(gè)投影的水平寬度是360度，垂直180度。我們可以用它來(lái)定義畫(huà)布的像素大小：3600×1800。

使用這么大的尺寸可能是一個(gè)挑戰(zhàn)。但因?yàn)槲覀冎饕獙?duì) VR 應(yīng)用程序的界面設(shè)計(jì)感興趣，所以我們可以專(zhuān)注于這個(gè)畫(huà)布的一部分。

基于邁克·阿爾格（Mike Alger）對(duì)舒適觀(guān)察區(qū)域的早期研究，我們可以找出一個(gè)合適的部分來(lái)展示界面。

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

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

「 360度視圖 」：3600×1800像素

「 UI視圖 」：1200×600像素

四、測(cè)試原型

「UI視圖」畫(huà)布有助于將我們的注意力集中在我們正在制作的界面上，并使設(shè)計(jì)流程變得更加容易。

同時(shí)也必須使用「360度視圖」在 VR 環(huán)境中的預(yù)覽界面。此外為了獲得真實(shí)的比例感，使用 VR 頭盔測(cè)試界面也是必要的。

△ 使用Avocode，您可以輕松直觀(guān)地比較設(shè)計(jì)

五、設(shè)計(jì)工具

在開(kāi)始之前，我們需要以下工具：

1. sketch

我們將使用 Sketch 來(lái)設(shè)計(jì)我們的界面和用戶(hù)流程。如果您沒(méi)有，可以下載試用版。Sketch 是我們首選的界面設(shè)計(jì)軟件，但如果您使用 Photoshop 或其他任何軟件更舒服，也沒(méi)問(wèn)題。

2. GoPro VR Player

GoPro VR Player 是一款360度內(nèi)容查看器。它由 GoPro 提供，是免費(fèi)的。我們將使用它來(lái)預(yù)覽我們的設(shè)計(jì)。

3. Oculus Rift

Oculus Rift 連接到 GoPro VR 播放器，這將使我們能夠測(cè)試我們的設(shè)計(jì)。

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

在本節(jié)中，我們將介紹如何設(shè)計(jì) VR 界面。我們將一起設(shè)計(jì)一個(gè)簡(jiǎn)單的界面，最多花費(fèi)5分鐘時(shí)間。

下載源文件：https://pan.baidu.com/s/1WUUwNLlTJkG82Hxdofaqzg  密碼：09vt，其中包含預(yù)設(shè)的 UI 元素和背景圖像。如果你想使用自己的設(shè)計(jì)文件，那也是可以的。

1. 設(shè)置「360度視圖」

首先要做的事情，讓我們創(chuàng)建360度視圖的畫(huà)布。在 Sketch 中打開(kāi)一個(gè)新文檔，并創(chuàng)建一個(gè)畫(huà)板：3600×1800像素。

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

2. 設(shè)置畫(huà)板

如上所述，「UI view」是「360 view」的裁剪版本，我們僅關(guān)注 VR 界面。

我們創(chuàng)建一個(gè)新畫(huà)板：1200×600像素。然后，復(fù)制畫(huà)板到「360 view」中，并將其放在畫(huà)板的中間。不要?jiǎng)h除「360 view」畫(huà)板，我們同時(shí)保留著兩個(gè)畫(huà)板，以后會(huì)用到它們。

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

我們將在「UI View」畫(huà)布上設(shè)計(jì)我們的界面。我們會(huì)盡量簡(jiǎn)單一些，首先在視圖上添加一些圖塊。您可以使用 tile.png 文件將其拖到 UI 視圖的中間。

復(fù)制它，并創(chuàng)建一行三個(gè)圖塊。

使用 kickpush-logo.png 文件，并將其放在圖塊上方。

4. 合并畫(huà)板

現(xiàn)在來(lái)看看有趣的東西。確?！窾I view」畫(huà)板位于左側(cè)圖層列表的「360view」畫(huà)板上方。

將「UI view」畫(huà)板拖動(dòng)到「360 view」畫(huà)板的中間。將「360 View」畫(huà)板導(dǎo)出為 PNG；「UI view」將位于其上方。

5. 在VR中測(cè)試它

打開(kāi) GoPro VR Player，并將剛剛導(dǎo)出的「360 View」PNG 拖到窗口中。使用鼠標(biāo)拖動(dòng)圖像以預(yù)覽360度環(huán)境。

我們完成了！是不是很簡(jiǎn)單？

如果您的機(jī)器上安裝了 Oculus Rift，則 GoPro VR 播放器應(yīng)該可以檢測(cè)到它并允許您使用 VR 設(shè)備預(yù)覽圖像。根據(jù)您的配置，您可能需要在 MacOS 中做一些顯示設(shè)置。

七、VR設(shè)計(jì)中需要注意的因素

1. 低分辨率

VR 頭盔的分辨率非常糟糕？這不完全正確，其實(shí)它相當(dāng)于手機(jī)的分辨率。但是，考慮到設(shè)備距離您的眼睛5厘米，顯示器看起來(lái)并不清晰。

為了獲得清晰的 VR 體驗(yàn)，我們需要一個(gè)8K的顯示屏，這是一個(gè)15,360×7680像素的顯示屏。相信這種設(shè)備早晚會(huì)普及。

2. 文本可讀性

由于顯示器的分辨率較低，會(huì)導(dǎo)致所有精美的 UI 元素都會(huì)看起來(lái)像素化。這意味著，首先，文字難以閱讀，其次，直線(xiàn)部分會(huì)出現(xiàn)鋸齒。所以盡量避免使用大段文字和特別復(fù)雜的 UI 元素。

八、收尾工作

1. 設(shè)計(jì)文檔

還記得我們的移動(dòng)應(yīng)用中的流程圖嗎？我們現(xiàn)在將這種做法也應(yīng)用到 VR 界面。用我們已經(jīng)做好的界面組織成一個(gè)易于理解的流程圖，這非常有益于開(kāi)發(fā)人員理解我們?cè)O(shè)計(jì)的應(yīng)用程序的整體架構(gòu)。

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

設(shè)計(jì)一個(gè)漂亮的 UI 是一回事，但讓他動(dòng)起來(lái)又是另外一回事了。我們決定以二維視角來(lái)處理它。

基于我們的 Sketch 文件，我們使用 Adobe After Effects 和 Principle 為界面設(shè)計(jì)動(dòng)畫(huà)。雖然輸出的不是真實(shí)的3D體驗(yàn)，但它足以指導(dǎo)開(kāi)發(fā)團(tuán)隊(duì)了，且能幫助我們的協(xié)作者在流程的早期階段了解我們的愿景。

△ 你剛剛設(shè)計(jì)了第一個(gè) VR UI。真棒！

我們知道你在想什么，「這很酷，但真實(shí)的 VR 應(yīng)用程序會(huì)復(fù)雜的多?！故堑模?dāng)然是。但重點(diǎn)在于我們可以在多大程度上將我們當(dāng)前的 UX 和 UI 的經(jīng)驗(yàn)應(yīng)用于這種新媒介？

九、VR UI可以走多遠(yuǎn)？

1. 新的交互體驗(yàn)

一些 VR 體驗(yàn)非常依賴(lài)虛擬環(huán)境，然而傳統(tǒng)界面的確已經(jīng)不是用戶(hù)控制應(yīng)用程序的最佳方式了。在這種情況下，您可能希望用戶(hù)直接與環(huán)境本身進(jìn)行交互。

想象一下，你正在為一家豪華旅行社制作應(yīng)用程序。您希望以最生動(dòng)的方式將用戶(hù)轉(zhuǎn)移到潛在的度假目的地。因此，您邀請(qǐng)用戶(hù)佩戴耳機(jī)并在時(shí)髦的切爾西辦公室開(kāi)始體驗(yàn)。

要從辦公室轉(zhuǎn)移至目的地，用戶(hù)需要選擇他們想去的地方。他們可以拿起一本旅行雜志，輕輕松松瀏覽它們，直到它們被某一頁(yè)吸引?；蛘?，桌面上可能會(huì)有一系列有趣的物品，根據(jù)用戶(hù)選擇的不同，將用戶(hù)帶到不同的位置。

這確實(shí)很酷，但也有一些缺點(diǎn)。為了達(dá)到完美的效果，你需要一個(gè)更先進(jìn)的帶手持控制器的 VR 頭盔。不過(guò)，像這樣的應(yīng)用程序要比傳統(tǒng)的應(yīng)用程序花費(fèi)更多的精力來(lái)開(kāi)發(fā)。

2. 革命萬(wàn)歲

現(xiàn)實(shí)情況是，對(duì)于大多數(shù)公司而言，這些沉浸式的體驗(yàn)在商業(yè)上還不可行。除非您擁有幾乎無(wú)限的資源，例如 Valve 和 Google，否則創(chuàng)建類(lèi)似于上述體驗(yàn)的產(chǎn)品可能成本太高，風(fēng)險(xiǎn)太大且過(guò)于耗時(shí)。

這種體驗(yàn)非常出色，可以帶你到媒體和技術(shù)的最前沿，但通過(guò)新媒體將產(chǎn)品推向市場(chǎng)并不太好。

通常，當(dāng)一種新形式出現(xiàn)時(shí)，它會(huì)是一個(gè)小眾產(chǎn)品。隨著時(shí)間的推移，成本的下降，有足夠的人去學(xué)習(xí)和市場(chǎng)的資本注入，它就會(huì)成為應(yīng)用廣泛的產(chǎn)品。

隨著 VR 頭盔變得越來(lái)越普及，將會(huì)有越來(lái)越多的公司將 VR 融入他們與用戶(hù)的互動(dòng)當(dāng)中。

從我們的角度看，相比于手機(jī)、平板，VR 用戶(hù)界面本質(zhì)上是更直觀(guān)的，并且更接近用戶(hù)，隨著科技和市場(chǎng)的發(fā)展，VR 將會(huì)帶來(lái)更大的價(jià)值。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。