對于許多設計師來說，虛擬現(xiàn)實(VR)是一個全新且陌生的領域。過去幾年中，我們目睹了虛擬現(xiàn)實硬件和軟件的爆炸式增長。從體驗性上看，虛擬現(xiàn)實既有小而簡單的也有專業(yè)復雜的，整體體驗差異很大。

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

VR應用程序里有什么？

一般來說，從設計者的角度來看，VR應用程序由兩種類型的組件組成：環(huán)境和交互元素。

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

交互元素：界面上影響用戶交互和操控體驗的元素合集。

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

在左上象限中的VR應用有類似模擬器的東西，例如過山車的VR應用，這種應用具有完全成形的環(huán)境，但根本沒有交互。你只是被鎖在了車里。

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

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

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

我們在之后文章中將此應用作為一個工作示例，現(xiàn)在我們將介紹設計VR應用程序的方法，然后再介紹設計VR界面的細節(jié)。您可以從Oculus網(wǎng)站下載Gear VR的Economist應用程序。

VR UI設計的第一步-回顧傳統(tǒng)流程

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

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

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

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

在如何設計VR界面之前，讓我們回過頭來看看傳統(tǒng)移動應用的設計過程。

1.線框

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

2.視覺設計

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

3.設計文檔

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

現(xiàn)在，我們如何將此工作流程應用于虛擬現(xiàn)實的設計當中呢？

開始VR UI設計

一. 畫布的尺寸

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

我們花了幾周時間試圖弄清楚什么樣的畫布尺寸對適用于VR設計。當您使用移動應用程序時，畫布大小取決于設備的大?。篿Phone 6為1334×750像素，Android大約1280×720像素。

要將移動應用程序工作流應用于VR UI，首先必須確定合適的畫布大小。

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

整個投影的水平寬度是360度，垂直180度。我們可以用它來定義畫布的像素大?。?strong>3600×1800。

使用這么大的尺寸可能是一個挑戰(zhàn)。但因為我們主要對VR應用程序的界面設計感興趣，所以我們可以專注于這個畫布的一部分。

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

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

讓我們總結一下：

“ 360度視圖 ”：3600×1800像素

“ UI視圖 ”：1200×600像素

二. 測試原型

“UI視圖”畫布有助于將我們的注意力集中在我們正在制作的界面上，并使設計流程變得更加容易。

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

使用Avocode，您可以輕松直觀地比較設計

三. 設計工具

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

sketch?

我們將使用Sketch來設計我們的界面和用戶流程。如果您沒有，可以下載試用版。Sketch是我們首選的界面設計軟件，但如果您使用Photoshop或其他任何軟件更舒服，也沒問題。

GoPro VR Player

GoPro VR Player是一款360度內容查看器。它由GoPro提供，是免費的。我們將使用它來預覽我們的設計。

Oculus Rift

Oculus Rift連接到GoPro VR播放器，這將使我們能夠測試我們的設計。

四. VR界面設計流程

在本節(jié)中，我們將介紹如何設計VR界面。我們將一起設計一個簡單的界面，最多花費5分鐘時間。

下載源文件（百度網(wǎng)盤地址? 密碼: 0sza） 其中包含預設的UI元素和背景圖像。如果你想使用自己的設計文件，那也是可以的。

1.設置“360度視圖”

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

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

2.設置畫板

如上所述，“UI view”是“360 view”的裁剪版本，我們僅關注VR界面。

我們創(chuàng)建一個新畫板：1200×600像素。然后，復制畫板到“360 view”中，并將其放在畫板的中間。不要刪除“360 view”畫板，我們同時保留著兩個畫板，以后會用到它們。

3.設計界面

我們將在“UI View”畫布上設計我們的界面。我們會盡量簡單一些，首先在視圖上添加一些圖塊。您可以使用tile.png文件將其拖到UI視圖的中間。

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

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

4.合并畫板

現(xiàn)在來看看有趣的東西。確?！癠I view”畫板位于左側圖層列表的“360view”畫板上方。

將“UI view”畫板拖動到“360 view”畫板的中間。將“360 View”畫板導出為PNG; “UI view”將位于其上方。

5.在VR中測試它

打開GoPro VR Player，并將剛剛導出的“360 View”PNG拖到窗口中。使用鼠標拖動圖像以預覽360度環(huán)境。

我們完成了！是不是很簡單？

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

五. VR設計中需要注意的因素

低分辨率

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

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

文本可讀性

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

六. 收尾工作

設計文檔

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

動效設計

設計一個漂亮的UI是一回事，但讓他動起來又是另外一回事了。我們決定以二維視角來處理它。

基于我們的Sketch文件，我們使用Adobe After Effects和Principle為界面設計動畫。雖然輸出的不是真實的3D體驗，但它足以指導開發(fā)團隊了，且能幫助我們的協(xié)作者在流程的早期階段了解我們的愿景。

你剛剛設計了第一個VR UI。真棒！

我們知道你在想什么，“這很酷，但真實的VR應用程序會復雜的多?！笔堑模斎皇?。但重點在于我們可以在多大程度上將我們當前的UX和UI的經(jīng)驗應用于這種新媒介？

VR UI可以走多遠？

新的交互體驗

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

想象一下，你正在為一家豪華旅行社制作應用程序。您希望以最生動的方式將用戶轉移到潛在的度假目的地。因此，您邀請用戶佩戴耳機并在時髦的切爾西辦公室開始體驗。

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

這確實很酷，但也有一些缺點。為了達到完美的效果，你需要一個更先進的帶手持控制器的 VR 頭盔。不過，像這樣的應用程序要比傳統(tǒng)的應用程序花費更多的精力來開發(fā)。

革命萬歲

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

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

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

隨著VR頭盔變得越來越普及，將會有越來越多的公司將VR融入他們與用戶的互動當中。

從我們的角度看，相比于手機、平板，VR用戶界面本質上是更直觀高效的，并且更接近用戶，隨著科技和市場的發(fā)展，VR將會帶來更大的價值。

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

翻譯：公眾號 GSDS