為何要從0開始學(xué)好VR設(shè)計?
對許多設(shè)計師來說,VR是一個未知領(lǐng)域。近年來,我們目睹了VR相關(guān)硬件和軟件的蓬勃發(fā)展。VR的體驗從不盡人意到令人驚奇,他們的復(fù)雜性和功能性都有了很大的變化。
作為UI或UX設(shè)計師,邁向VR的第一步是艱難的。我知道,因為我們也是這樣過來的,所以無需畏懼!在這篇文章,我將分享VR界面的設(shè)計流程,希望可以借此為你開啟VR設(shè)計的大門。你無需成為專家,只要將自己的設(shè)計技能運用在這片新的領(lǐng)域就好。
目前都有哪些類型的虛擬現(xiàn)實應(yīng)用(VR App)?
一般來說,從設(shè)計師的角度來看,VR App由兩類控件組成:環(huán)境和界面。
- 環(huán)境:可以理解為你帶上VR頭盔后所進入的世界——可能是一個虛擬的星際世界,也可能是你坐過山車看到的風(fēng)景。
- 界面:是用戶交互元素的集合,通過它來在環(huán)境中導(dǎo)航,并控制自己的體驗。所有的VR App都可以根據(jù)這兩個維度的復(fù)雜程度來定義。
集中在二象限(環(huán)境復(fù)雜、界面簡單)的app多為模擬器類,比如上文提到的過山車體驗,在滑行時你會一直處于這種環(huán)境。
與其相對的四象限有豐富的界面和簡單的環(huán)境,三星的Gear VR主屏幕就是一個很好的例子。
設(shè)計地面、風(fēng)景等虛擬環(huán)境需要設(shè)計師熟練運用3D模型工具,將元素繪制得生動逼真。對于許多UI和UX設(shè)計師來說有些困難,而VR界面設(shè)計則是他們更好的選擇,可以運用自身技能。
我們最早的VR界面是為“The Economist”設(shè)計的,與VR產(chǎn)品工作室Visualise一同合作。我們做設(shè)計,Visualise進行研發(fā)。
在介紹VR界面設(shè)計的具體細(xì)節(jié)之前,我們先以“The Economist”為例,來闡述VR app的設(shè)計方法。你可以通過Oculus網(wǎng)站先下載一下“The Economist”。
VR UI設(shè)計過程
雖然大多數(shù)設(shè)計師對移動端界面設(shè)計流程可能已經(jīng)了如指掌了,但是對VR界面的設(shè)計流程卻不甚了解。當(dāng)我們接到設(shè)計VR界面的項目時,我們做的第一步就是設(shè)計一套工作流程。
換湯不換藥(新領(lǐng)域,舊流程)
第一次使用三星的Gear VR時,我們發(fā)現(xiàn)這和傳統(tǒng)的移動端app是相似的。他們有相同的工作原理:用戶通過與界面交互來瀏覽頁面。這點很重要,雖然這里只是簡單提了一下,但需要牢記在心。
既然VR與傳統(tǒng)app界面相似,那么設(shè)計師們花費數(shù)年時間學(xué)習(xí)并掌握的傳統(tǒng)UI經(jīng)驗不會浪費,同樣可以復(fù)用于VR領(lǐng)域。事實上,你比你想象的更擅長VR app設(shè)計!
在講解VR界面設(shè)計流程之前,讓我們先回顧一下傳統(tǒng)移動界面的設(shè)計流程。
第一步:線框圖
首先,通過快速多次迭代來定義交互方式和總體布局。
第二步:視覺設(shè)計
在這個階段,設(shè)計風(fēng)格和交互方式已經(jīng)確立。將品牌風(fēng)格與線框圖相結(jié)合,經(jīng)過精心設(shè)計得到漂亮的界面。
第三步:流程圖
為了表明頁面之間的交互流程,我們會用線把頁面連接起來,并將其稱之為流程圖。流程圖將作為程序員在開發(fā)過程中的主要參考。
那么,我們?nèi)绾螌鹘y(tǒng)的設(shè)計流程應(yīng)用于VR設(shè)計中呢?
初始設(shè)置
畫布大小
最簡單的問題可能是最具挑戰(zhàn)性的。面對360度的畫布,用戶很難知道從哪里開始交互。事實上,UX和UI設(shè)計師只需要關(guān)注空間中的某一部分即可。
我們花了幾周時間來弄清楚VR設(shè)計所需的畫布尺寸。在設(shè)計移動端app時,畫布尺寸是由設(shè)備大小決定的:比如iPhone6的尺寸為1334×750像素,Android為1280×720像素。
要想將移動端app設(shè)計流程應(yīng)用于VR,首先必須確定一個行之有效的畫布大小。
下圖看起來像是一個360度的環(huán)境被展開成了平面,這種表現(xiàn)形式被稱為等邊投影。在三維虛擬環(huán)境中,這些投影會包裹在一個球體周圍,來模擬真實世界。
水平360度和垂直180度代表了投影的全寬。我們可以以此來定義畫布的大?。?600×1800像素。
這么大的畫布很難顧全,由于我們主要是為了繪制VR界面,我們可以將注意力只集中在畫布的一部分上?;?Mike Alger早期對視覺舒適區(qū)域的研究,我們可以把有用的界面分離出來。用戶感興趣的區(qū)域集中在360度環(huán)境面積的九分之一,它位于等矩形圖像的中心,大小為1200×600像素。
得出結(jié)論:
- “360視角”畫布: 3600 × 1800像素
- “UI視角”畫布: 1200 × 600像素
測試
在一塊屏幕上使用兩種視角的畫布是為了測試。“UI視角“的畫布可以使我們的注意力集中在設(shè)計本身,制作流程圖也會更便捷。同時,“360視角“畫布用于預(yù)覽VR界面,為了獲得真實的比例感,使用VR頭盔測試界面是很有必要的。
工具
在正式演練之前,先了解下所需的工具:
- sketch:我們將使用sketch來設(shè)計界面和交互流程。如果沒有,可以下載試用版。sketch是首選的界面設(shè)計軟件,不過如果你更習(xí)慣于使用photoshop或其他任何軟件,也是可以的。
- GoPro VR播放器:它是一個360度界面查看器,由Gopro提供,免費??梢杂脕眍A(yù)覽設(shè)計并測試。
- Oculus Rift(譯者按:是一款頭戴VR顯示器,價格在399美元左右):將Oculus Rift連接到GoPro播放器來進行測試。
實操演練
在本節(jié),我們將花費最多五分鐘時間,來練習(xí)下VR界面設(shè)計流程。
下載素材包(https://www.dropbox.com/s/i73fot0fevv436c/Kickpush_VRDemo_Assets.zip?dl=0),里面有調(diào)整好的UI元素和背景圖。如果你想用自己的素材,也是可以的。
1. 設(shè)置“360視角”畫布
首先,創(chuàng)建一個360度視角的畫布。打開sketch,創(chuàng)建新文件,并創(chuàng)建一個3600×1800像素的畫布。導(dǎo)入名為background.jpg的文件,并將其放置在畫布的中間。如果想用自己的素材,請確保背景圖像的比例為2:1,并將其調(diào)整為3600×1800像素。
2. 設(shè)置“UI視角”畫布
如上文所述,“UI視角”的畫布只選取“360視角”的一部分,并且只專注于VR界面設(shè)計。因此,我們在360旁邊建立新的1200×600像素的畫布。然后,將360視角的背景復(fù)制到新畫布,注意,要放置在新畫布的正中間,并且不要調(diào)整大小。我們要保留背景的裁剪版本。
3. 設(shè)計界面
我們將在“UI視角“畫布上設(shè)計我們的界面。為了使練習(xí)更加清晰直觀,我們添加了一行卡片。如果你想偷懶,也可以從素材包里直接把名為tile.png的文件拖到畫布中央。在同一行復(fù)制三個tile文件,然后把kickpush-logo.png文件拖出來放在tile上方。
4. 合并兩個畫布并且導(dǎo)出
將”UI視角”的畫布置于“360”畫布的中間,注意“UI”的圖層要在“360”之上。導(dǎo)出“360”畫布的png格式。
5. 用VR設(shè)備測試效果
把剛剛導(dǎo)出的png拖進GoPro VR播放器的窗口,用鼠標(biāo)拖動圖像來預(yù)覽。做到這一步我們就全部完成了!很簡單吧!如果你電腦上有設(shè)置Oculus Rift,那么GoPro VR播放器會監(jiān)測到它,并且允許你用VR設(shè)備來預(yù)覽圖像。根據(jù)你電腦的配置,你可以在MacOS中處理顯示設(shè)置。
技術(shù)因素
1. 低分辨率
有人說VR頭盔的分辨率很差,這不是完全正確的:它相當(dāng)于你手機的分辨率。只是由于設(shè)備距離你的眼睛有5厘米遠(yuǎn),顯示器看起來就不那么清晰了。
為了獲得清晰的VR體驗,我們每只眼睛需要顯示8K分辨率,這相當(dāng)于一個15360×7680像素的顯示器。目前的技術(shù)還做不到,但是相信最終一定會實現(xiàn)的。
2. 文本可讀性
受分辨率所限,所有漂亮、清晰的用戶界面看起來都是像素化的。這意味著文本將很難閱讀,并且一條直線上的元素會出現(xiàn)混疊。設(shè)計過程中要盡量避免使用大文本塊和過分細(xì)節(jié)化的UI元素。
收尾工作
1. 流程圖
在移動端界面中常用的流程圖,也可以應(yīng)用于VR界面。將“UI視角”界面連接成流程圖,這對于開發(fā)人員理解我們設(shè)計的總體架構(gòu)是非常有用的。
2. 動效設(shè)計
制作漂亮的界面是一回事,展示界面如何操作是另一回事。讓我們再一次用二維視角來展示。用sketch設(shè)計好界面后,用AE或principle來展示動效。雖然得到的并不是3D體驗,但它可以用來作為開發(fā)團隊的指導(dǎo)方向,并且可以使客戶在項目早期理解我們的想法。
你可能會覺得:“二維動效雖然很酷,但是VR會比這個復(fù)雜的多。”是的,確實是這樣。但問題是我們能多大程度上將我們當(dāng)前的UI/UX設(shè)計應(yīng)用在這個新的媒介上呢?
VR UI設(shè)計可以走多遠(yuǎn)呢?
1. 虛擬與現(xiàn)實的距離
一些VR體驗嚴(yán)重依賴于虛擬環(huán)境,這時傳統(tǒng)的置于頂部的操作界面并不是用戶使用VR的最佳方式。在這種情況下,我們希望用戶直接與環(huán)境本身進行交互。
想象一下,你正在為一個高檔旅行社開發(fā)一款應(yīng)用。你希望用最生動的方式將用戶引流至各個潛在的度假目的地。因此,你邀請用戶戴上頭盔,在你寬敞的辦公室開始體驗。要從你的辦公室切換到風(fēng)景區(qū),用戶需要先選擇他們想去的地方。他們可能會拿起一本旅游雜志,快速瀏覽,直到被某一頁面吸引。也可能在你的辦公桌上有一些有趣的東西,選擇不同的東西可以把用戶帶到不同的地方。
顯然這種操作很酷炫,但也有一些缺點。要達(dá)到完整的效果,需要一個更先進的VR頭盔和手柄。另外,相比以前移動端界面已經(jīng)設(shè)置好了可以選擇的選項,這樣的操作需要耗費更多的開發(fā)資源。
2. 商業(yè)與創(chuàng)新的平衡
事實上,對大多數(shù)公司來說,這些身臨其境的體驗在商業(yè)上并不可行,除非擁有像Valve和Google那樣幾乎無限的資源,否則開發(fā)出如上文描述的體驗對他們而言太昂貴、太冒險,也太耗時。這種體驗可以生動的表現(xiàn)出你處于媒體和技術(shù)的前沿,但是要想將你的產(chǎn)品市場化卻并不容易。畢竟,可操作性是很重要的。
通常,當(dāng)一種新的形式出現(xiàn),先行者們(這個世界的創(chuàng)造者和創(chuàng)新者)會將它推向極致。隨著時間推移,經(jīng)過更深入的學(xué)習(xí),以及更多資金投入,才會被用戶廣泛接受。隨著VR穿戴設(shè)備的普及,更多的企業(yè)會發(fā)現(xiàn)商機,將VR融入他們與消費者的互動之中。
目前來看,VR應(yīng)用程序使用的界面都很直觀,與人們習(xí)以為常的可穿戴設(shè)備、手機、平板和電腦等的應(yīng)用程序基本無異,這使得VR成為大多數(shù)公司可負(fù)擔(dān)和值得投資的項目。
是時候搭上VR設(shè)計的火箭了!
希望這篇文章可以使VR看起來不那么可怕,并激勵你開始自己的VR設(shè)計。
常言道:獨行者步疾,結(jié)伴者行遠(yuǎn),而我們希望與你一起并肩遠(yuǎn)行。在Kickpush,我們認(rèn)為每個公司最終都會有自己的VR app,就像如今每個公司都有自己的移動端網(wǎng)站一樣。所以我們制造了這艘關(guān)于VR的“火箭”,希望世界各地的設(shè)計師可以共同努力,大膽地去探索未知的領(lǐng)域。VR app越早實現(xiàn)商業(yè)價值,當(dāng)下的生態(tài)系統(tǒng)就越早進化。
作為電子產(chǎn)品的設(shè)計師,我們的下一個挑戰(zhàn)是設(shè)計更加復(fù)雜的應(yīng)用,以及通過手柄進行更多類型的輸入。為了解決這些問題,我們需要更高效率的原型工具,來快速輕松地創(chuàng)建及測試設(shè)計。我們團隊會持續(xù)跟進類似的早期嘗試及新工具的開發(fā)進展,并且寫在后續(xù)文章里。
原文:https://www.smashingmagazine.com/2017/02/getting-started-with-vr-interface-design
作者:Sam Applebee and Alex Deruette
本文由 @田帥通 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!