如何設計VR使用者介面
對於很多設計師來說,VR仍是個未知的領域。過去幾年裡,VR的硬體和應用程式出現了爆炸式增長。由於VR的複雜性和實用性不同,VR的體驗也大不相同。
邁出成為VR的UX或UI設計師的第一步可能有點難,在這篇文章中,我將分享設計VR應用程式的過程,希望對於你今後的VR設計有幫助。
首先,你不需要成為VR的專家,你只需要靈活地將你的技能運用到新的領域。作為未來VR設計師大軍中的一員,我們可以加速VR的發展,釋放VR的潛能。
VR應用程式的種類
站在設計師的角度來說,VR應用程式由兩種元件組成:環境和操作介面。
當你戴上VR頭盔後,想象自己進入一個虛擬世界——比如一個虛擬星球,或想象坐在過山車的看到的景色。
操作介面是使用者與環境互動的一系列元素,用於瀏覽環境和操作體驗。根據這兩個元件的複雜性,所有VR應用程式都可以沿著2個軸進行定位。
位於左上角的象限是模擬器,如模擬過山車的體驗。這些模擬器具有預先定製的環境,但還沒有操作介面。這種體驗就像你被綁在過山車上觀光一樣。
它相反的象限是已經開發好操作介面的應用程式,但基本上沒有制定好的環境。三星的Gear VR主屏就是一個例子。
設計虛擬環境(如場地和景觀)需要熟練使用3D建模工具,這對於許多設計師來說有一定難度。但UX和UI設計師仍有機會運用他們的技能來設計VR的使用者介面(簡稱VR UI)。
我們做的第一個完整的VR UI設計是“經濟學人”的應用程式,這是與VR工作室Visualize合作開發的。我們做了設計,Visualize建立了內容,開發了應用程式。
下一節中我們將它作為一個示例,藉此我們將說明設計VR應用程式的方法,然後再深入到VR介面設計的本質。你可以從Oculus網站下載Gear VR的Economist應用程式。
VR UI設計流程
雖然大多數設計師
熟悉了
移動應用程式設計的工作流程,VR介面設計流程尚未定義。當我們接到第一個VR應用程式設計專案時,我們做的第一件事就是設計一個流程。
傳統工作流程,新領域
當我們第一次使用三星的Gear VR時,我們注意到它與傳統的手機應用程式的相似之處。基於介面的VR應用程式實際上是根據與傳統的應用程式相似的基本動態執行的:使用者與他們瀏覽頁面的使用者介面進行互動。
鑑於與傳統應用程式的相似之處,同時,移動應用程式工作流程是設計人員花費了大量時間打磨,並且這個工作流程經過了反覆測試,所以它也可用於製作VR UI。
在介紹如何設計VR介面之前,讓我們回顧一下傳統移動應用程式的設計流程。
1. 線框圖
首先,我們將進行快速迭代,定義互動和總體佈局。
2. 視覺設計
在這個階段,所有的功能和互動已確定下來。在這個階段品牌指南應用於線框圖,並且出一個精美的介面。
3. 架構藍圖
在這個階段,我們將不同螢幕設計組織成工作流,在不同螢幕間新增連結,以此描述每個螢幕之間的互動。我們稱把這個過程稱為應用程式的架構藍圖,被用作專案開發人員的主要參考。
現在,我們如何將這個工作流程應用於VR中呢?
設定
畫布的尺寸
最簡單的問題可能是最具挑戰性的。面對著360°的畫布有時候無從下手。事實證明,UX和UI設計師只需要專注於總體空間中的某一部分。
我們花了好幾個星期試圖找出什麼尺寸的畫布大小對於VR是最合適的。當你在做移動應用程式時,畫布大小由裝置的尺寸決定:iPhone 6為1334×750畫素,Android為1280×720畫素。
如果想把移動應用程式工作流程應用於VR UI,首先你必須找出一個合適的畫布大小。
下圖360°的環境平鋪的樣子。這種表示法被稱為等角投影。在3D虛擬環境中,這些投影圍繞著一個球體,以模仿現實世界。
投影的全寬度表示橫向360°和垂直180°。我們可以用它來定義畫布的畫素大小:3600×1800。
這麼大尺寸下的設計是一個挑戰。但由於我們主要關注VR應用程式的介面方面,我們可以這個畫布中的一部分開始操作。
基於Mike Alger對舒適觀看區域的早期研究,我們可以單獨隔離出一部分來顯示介面。
這個隔離出來的區域代表著360°環境中的九分之一。它位於方形影象的中心,尺寸為1200×600畫素。
我們來總結一下:
“ 360°檢視 ”
:3600×1800畫素
“ UI檢視 ”
:1200×600畫素
測試
在一個螢幕上使用2個畫布的原因是為了測試。“UI檢視”畫布使我們專注於我們正在製作的介面,設計工作流時也更加容易。
同時,“360°檢視”可以用於在VR環境中預覽介面。為了獲得真正體驗時的比例,需要使用VR頭盔測試設計出來的介面。
工具
在測試開始之前,我們需要以下工具:
Sketch
我們將使用Sketch來設計我們的介面和使用者流。如果你沒有Sketch,你可以先下載個試用版。Sketch是我們首選的介面設計軟體。
GoPro VR Player
GoPro VR Player是一個360°的內容檢視器。它由GoPro提供的,免費使用。我們將使用它來預覽我們的設計,並在環境中進行測試。
Oculus Rift
將Oculus Rift插入GoPro VR Player可以在環境中測試設計。
VR介面設計的過程
在本節中,我們將介紹一個如何設計VR介面的簡短教程。我們將一起設計一個簡單的VR介面,整個過程應該控制在5分鐘。
可以先下載個資源包(ZIP檔案)(下載連結:
https://
pan。baidu。com/s/1gfqXEg
V
密碼: se6c),其中包含預定的UI元素和背景影象。如果你想使用你自己的元件,這也不會是一個問題。
1. 設定“360°檢視”
首先,建立一個可以代表360°檢視的畫布。在Sketch中開啟一個新文件,並建立一個畫板:3600×1800畫素。
匯入命名為background。jpg的檔案,並將其放在畫布的中間。如果你使用的是自己的等角背景,請確保其比例為2:1,並將其大小調整為3600×1800畫素。
2. 設定畫板
如上所述,“UI檢視”是“360°檢視”的裁剪版本,僅限於VR介面。
在上一個畫板旁邊新建一個畫板:1200×600畫素。然後將我們新增的背景複製到“360°檢視”,並將其放在我們新的畫板的中間。一定不要再調整大小!我們在這裡保留一個裁剪版本的背景。
3. 設計介面
我們將在“UI檢視”畫布上設計我們的介面。為了方便練習,我們只作了簡單的設計,在上面新增一排圖塊。如果你怕麻煩,只需要在資源包中找到名為tile。png的檔案,並將其拖拽到UI檢視的中間。
複製它,並建立3個一排的圖塊。
從資源包中獲取kickpush-logo。png圖片,並將其放在圖塊上方。
4. 合併畫板和匯出
現在到了有趣的地方了。確保在左側圖層列表中“UI檢視”畫板位於“360°檢視”畫板之上。
將“UI檢視”畫板拖動到“360°檢視”畫板的中間。將“360°檢視”畫板匯出為PNG; “UI檢視”將在其上。
5. 在VR中測試
開啟GoPro VR Player,並將剛剛匯出的“360°檢視”的PNG拖到視窗。用滑鼠拖動影象以預覽360°環境。
簡單的VR介面設計就完成了,其實還是不難的!
如果你的機器上安裝了Oculus Rift,那麼GoPro VR Player會檢測到它,並允許你使用VR裝置預覽影象。根據你的配置,你可能需要在MacOS中去調整顯示設定。
技術考慮
低解析度
VR頭盔的解析度非常差。但也不完全如此:這相當於你手機的解析度。但是,考慮到這個裝置距你的眼睛5釐米遠,顯示屏看起來就不清晰。
為了獲得清晰的VR體驗,我們每個眼睛需要一個8K的顯示。相當於15,360×7680畫素的顯示。雖然這個目標離我們有點遠,但最終我們會實現。
文字可讀性
由於顯示器的解析度,所有你覺得清晰的UI元素將看起來畫素化。這就意味著,第一,文字閱讀起來費力,其次,直線上會出現高水平的混疊。儘量避免使用大塊文字和高度細緻的UI元素。
收尾工作
構架藍圖
我們之前提到的移動應用設計流程中的構架藍圖,我們已經將這種做法運用到VR介面。在UI檢視中,我們將工作流對映和組織成一個可理解的構架藍圖,以便開發人員理解我們設計的應用程式的整體架構。
運動設計
設計一個漂亮的UI是一回事。如何顯示它的動畫是另外一回事。我們再次用二維視角來處理動畫。
基於我們之前的Sketch設計,我們使用Adobe After Effects和Principle為介面建立動畫。雖然動畫效果還不是3D體驗,但它被用作開發團隊的指南,客戶也能在早期階段瞭解我們的視角。
我們知道你在想什麼:“這是很酷,但VR應用程式遠比這個複雜得多”。確實,VR更加複雜。現在的問題是,我們可以在多大程度上將我們當前的UX和UI操作應用於這種新媒體?
VR UI可以走多遠?
一些VR體驗十分依賴虛擬環境中,這樣的話,傳統的介面出現可能不是使用者控制應用程式的最佳方式。在這種情況下,你可能希望使用者能直接與環境本身進行互動。
想象一下,你正在為一家土豪旅行社製作一個應用程式。你想以最靈動的方式使使用者置身於潛在的度假目的地。你只要給你使用者戴上VR頭盔,他們就可以在你的辦公室裡開始一場華麗的旅行。
從辦公室轉換到一個遙遠的地方,使用者需要選擇他們想去哪兒。他們只要拿起一本旅行雜誌快速翻閱,直到找到吸引他們的那頁。或者你的辦公桌上有很多有趣的小東西,使用者選擇的不同東西會帶他們去不同的地方。
這的確很酷,但仍有一些不足。為了得到滿意的效果,你需要一款帶有手柄遙控器的高階VR頭盔。此外,像這樣的應用程式需要相當大的精力來開發,遠比傳統的應用程式介面中精心設計要難。
迎接變革!
現實情況是,這些沉浸式的體驗對於大多數公司來說並不具有商業上的可行性。除非你擁有無限的資源,像Valve和Google一樣,建立一個像上述這樣的VR體驗可能太貴了,太冒險,太耗時了。
這種體驗對於展示你處於媒體和技術的最前沿是不二之選,但不足以將你的產品推向新媒體市場。可達性也很重要。
通常,新形式出現時,早期採用者會探索它的極限:如它的創造者和創新者。隨著時間的推移,透過不斷的學習和投資,許多潛在使用者也可以接觸到它。
隨著VR頭盔越來越普遍,企業不斷挖掘如何將VR融入到與客戶互動中。
從我們的角度來看,VR應用程式具有直觀的使用者介面——即UI更接近於人們已經習慣使用的可穿戴裝置,如手機,平板電腦和計算機,這將使VR成為大多數公司的既經濟實惠又有價值的投資。
迎接VR快速發展的春風
我們認為未來每個公司都會有一個VR應用程式,就像每個公司現在都有一個移動網站。
所以,我們現在做的就像在建造一個昇天的火箭,由全球設計師共同努力,大膽地嘗試新領域。如果公司越早發現到VR應用程式的意義,整個VR生態系統就越早爆發。
作為數字產品設計師,我們的下一個挑戰是做出更復雜的應用程式,並透過遙控器處理其他型別的輸入。為了解決這個問題,我們需要強大的原型設計工具,可以讓我們快速,輕鬆地建立和測試設計。我們將撰寫一篇後續文章,介紹一些早期的嘗試,以及開發用的一些新工具。