Skip to main content
 首頁 » AR資訊

如何開啟VR作品UI設計之路?

2017年03月27日 08:24:39668940YIVIAN

 如何開啟VR作品UI設計之路? AR資訊 第1張

對許多設計師來說,虛擬現實是一個未知的領域。過去幾年來,虛擬現實硬件和應用出現了爆炸式增長。從普通到奇妙,VR體驗涉及的范圍很廣,其復雜性和實用性也大不相同。

作為一名UX或UI設計者,首次步入VR的世界或許會令人生畏。我們也曾經歷過,但無需害怕。在這篇文章中,映維網將會和大家分享設計VR應用的過程,希望這可以為你提供幫助,并幫助你開啟自己的VR設計之路。

你或許不需要成為VR的專家,只需把你的技能應用于新的領域。最終,作為一個社區,我們可以攜手加快VR的發展速度。

對UX和UI設計者來說,有一個巨大的機遇把他們的技能集應用在VR UI的設計上

1. VR應用的種類

從設計師的角度來說,VR應用程序基本上由兩種類型的組件組成:環境和接口。

當你戴上一臺VR頭顯時,你可以把周圍環境看作是一個新世界,一個虛擬星球。

界面是用戶與之交互的元素集,用于瀏覽環境并控制其體驗。根據這兩個組件的復雜性,所有VR應用程序都可以沿著這2條軸定位。

如何開啟VR作品UI設計之路? AR資訊 第2張

左上角的象限是諸如模擬器這樣的東西,如過山車體驗。這些體驗有完全成形的環境,但根本沒有接口。你只是單純地被鎖定。

如何開啟VR作品UI設計之路? AR資訊 第3張

與之相反的象限是具有開發接口,但存在很少或沒有環境元素的應用程序。三星Gear VR的主屏是一個很好的例子。

如何開啟VR作品UI設計之路? AR資訊 第4張

設計虛擬環境(如場所和景觀)需要熟練使用3D建模工具,而許多設計師都難以觸及這些元素。然而,對UX和UI設計者來說,有一個巨大的機遇把他們的技能集應用在設計虛擬現實的用戶界面上(簡稱VR UI)。

《經濟學人(The Economist)》的應用是我們設計的首款VR UI。這款應用是與VR工作室Visualise合作開發而成。我們負責設計,而Visualise則負責內容和應用開發。

如何開啟VR作品UI設計之路? AR資訊 第5張

我們以此作為下一個項目的參考例子。在設計VR應用程序之前,我們會先制定出一種設計VR應用接口的方法。你可以從Oculus官網上下載Gear VR版本的《The Economist VR》。

2. 傳統工作流程,新設計領域

雖然大多數設計者已經找出了設計移動應用程序的工作流程,但他們還沒有定義設計VR接口的過程。當我們接受一個VR應用程序設計項目時,邏輯上的第一步是制定工作流程。

在第一次使用三星Gear VR時,我們注意到這與傳統手機應用程序的相似之處。基于界面的VR應用程序的工作原理與傳統應用程序的基本機制類似:用戶與幫助他們瀏覽頁面的界面進行交互。我們對此進行了簡化,但請記住這一點。

鑒于與傳統應用程序的相似之處,設計者經過大量測試驗證的移動應用程序工作流程不會白白浪費掉,可以用于設計VR UI。

在介紹如何設計VR界面之前,讓我們先回顧一下運行傳統移動應用程序的設計過程。

2.1 線框

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

如何開啟VR作品UI設計之路? AR資訊 第6張

2.2 視覺設計

在這個階段,功能和交互已經確定。品牌的要求現已應用于線框,設計者也制作出一個漂亮的界面。

如何開啟VR作品UI設計之路? AR資訊 第7張

2.3 藍圖

在這里,我們將設計屏幕的組織,繪制屏幕之間的鏈接,并描述每個屏幕的交互。我們將此稱為應用程序的藍圖,它將被用作項目開發者的主要參考。

如何開啟VR作品UI設計之路? AR資訊 第8張

那么,我們該如何將這個工作流程應用在虛擬現實的設計中呢?

3. 設置

3.1 畫布大小

最簡單的問題可能最具挑戰性。面對360度的畫布,人們或許不知道知道該從哪里著手開始。事實證明,UX和UI設計師只需專注于空間的某一部分。

我們花了幾個星期進行測試,試圖找出最適合VR的畫布大小。當使用移動應用程序時,畫布大小由設備的尺寸決定:iPhone 6是1334×750像素,安卓多為1280×720像素。

要將移動應用程序的工作流程應用于VR UI,你首先必須找出一個有意義的畫布大小。

移動應用程序設計者已經花費了很長的時間來精進工作流程,而這可以用于設計VR UI。

以下是平展的360度環境。這被稱為等角投影。在3D虛擬環境中,這些投影圍繞著一個球體以模仿現實世界。

如何開啟VR作品UI設計之路? AR資訊 第9張

投影的全寬度橫向360度,垂直180度。我們可以用它來定義畫布的像素大小:3600×1800。

如何開啟VR作品UI設計之路? AR資訊 第10張

如此大的尺寸是一個挑戰。但是,由于我們主要關注VR應用程序的界面方面,因此我們可以專注于這個畫布的某一部分。

基于邁克·阿爾格(Mike Alger)對舒適觀看區域的早期研究,我們可以判斷適合呈現界面的部分。

我們感興趣的區域只是360度環境中的九分之一。它位于正方形圖像的中心,尺寸為1200×600像素。

如何開啟VR作品UI設計之路? AR資訊 第11張

我們來總結一下:

  • 360度視圖:3600×1800像素
  • UI視圖:1200×600像素

如何開啟VR作品UI設計之路? AR資訊 第12張

3.2 測試

在一個屏幕上使用2張畫布的原因是為了測試。 “UI視圖”畫布有助于我們專注于我們制作的界面,并使工作流程更容易設計。

與此同時,“360度視圖”可方便我們在VR環境中預覽界面。為了判斷真正的比例,我們需要使用VR頭顯測試接口。

如何開啟VR作品UI設計之路? AR資訊 第13張

3.3 工具

在開始之前,我們需要以下工具:

  • Sketch:我們將使用Sketch來設計我們的界面和使用流程。如果沒有,你可以下載試用版。Sketch是我們首選的界面設計軟件。
  • GoPro VR Player:GoPro VR Player是一個360度的內容查看器。它由GoPro提供,不收費。我們將使用它來預覽我們的設計,并在情景中進行測試。
  • Oculus Rift:將Oculus Rift連接至GoPro VR Player將使我們能夠在情景中測試設計。

4. VR界面設計的過程

本節將通過一個簡短的教程介紹如何設計VR接口。我們將一起設計一個簡單的界面,時間應該不會超過5分鐘。

如何開啟VR作品UI設計之路? AR資訊 第14張

首先下載asset包(ZIP文件),其中包括預定尺寸的UI元素和背景圖像。不過,使用自己的asset也沒有任何問題。

4.1設置“360度視圖”

首先,讓我們創建一個可以代表360度視圖的畫布。在Sketch中打開一個新文檔,然后創建一個畫板:3600×1800像素。

導入名為“background.jpg”的文件,并將其放在畫布的中央。如果你使用自己的等角背景,請確保其比例為2:1,并將其大小調整為3600×1800像素。

如何開啟VR作品UI設計之路? AR資訊 第15張

4.2設置畫板

如上所述,“UI視圖”是“360度視圖”的裁剪版本,僅專注于VR界面。

在旁邊創建一個新的畫板:1200×600像素。然后,復制剛添加到“360度視圖”的背景,并將其放在新畫板的中央。不要調整大小。我們要保留一個裁剪版本的背景。

如何開啟VR作品UI設計之路? AR資訊 第16張

4.3設計界面

我們將在“UI視圖”畫布上設計界面。在這個練習中,我們將奉行簡單原則,并添加一系列的tile。如果你懶得動,只需在asset包中抓住名為tile.png的文件,并將其拖動到“UI視圖”的中間即可。

復制,并創建3個tile。

從asset包中抓取kickpush-logo.png,并將其放在tile之上。

如何開啟VR作品UI設計之路? AR資訊 第17張

看上去很不錯,是吧?

4.4 合并畫板和導出

現在是好玩的東西,確保“UI視圖”畫板位于左側圖層列表中的“360度視圖”畫板之上。

將“UI視圖”畫板拖動到“360度視圖”畫板的中間。然后把“360度視圖”畫板導出為PNG,“UI視圖”就會在其之上。

如何開啟VR作品UI設計之路? AR資訊 第18張

4.5 在VR中測試

打開GoPro VR Player,并拖動剛剛導出到窗口的“360度視圖”PNG。用鼠標拖動圖像以預覽360度環境。

大功告成!相當簡單,不是嗎?

如果你的機器安裝了Oculus Rift,那么GoPro VR Player會自動檢測,并允許你使用VR設備預覽圖像。根據配置,你或許需要搗鼓MacOS中的顯示設置。

如何開啟VR作品UI設計之路? AR資訊 第19張

5. 技術考慮

5.1 低分辨率

VR頭顯的分辨率相當糟糕。這也不是完全正確:這相當于你手機的分辨率。但是,考慮到該設備與眼睛的距離只有5厘米,所以顯示器看起來相當不清晰。

要實現清晰銳利的VR體驗,單眼顯示分辨率至少需要達到8K,相當于15360×7680像素。我們離那還有很遠,但我們最終將可以實現。

5.2 文本可讀性

由于顯示器的分辨率,所有美麗的UI元素看起來都有點像素化。這意味著,首先,文本將難以閱讀;其次,直線上會出現高水平的鋸齒。所以,盡量避免使用大文本塊和高度詳細的UI元素。

5.3 藍圖

還記得移動應用設計流程中的藍圖嗎?我們將會相應地進行調整,以應用于VR界面設計。使用UI視圖,我們將流程整理成一個可理解的藍圖,適合開發者理解我們設計的整體應用架構。

如何開啟VR作品UI設計之路? AR資訊 第20張

希望這篇文章可以讓大家不再那么懼怕VR,并激勵你開啟自己的VR設計之路。

評論列表暫無評論
發表評論