元宇宙時(shí)代,VR設(shè)計(jì)要怎么做?
作為一種較為新穎的交互方式,VR交互與常規(guī)應(yīng)用交互有所不同,而相應(yīng)的UI設(shè)計(jì)人員也需要尋找更恰當(dāng)?shù)脑O(shè)計(jì)策略,以適應(yīng)設(shè)備的發(fā)展與普及。那么在當(dāng)下,VR交互設(shè)計(jì)應(yīng)該怎么做?本篇文章里,作者便做了一定總結(jié),一起來(lái)看。
我最近入手了VR設(shè)備,體驗(yàn)大大超出預(yù)期,難怪老羅覺(jué)得VR是下一代硬件平臺(tái),我覺(jué)得還真的有可能。在VR中有很多新奇的交互體驗(yàn),視覺(jué)沖擊感強(qiáng),所以我對(duì)VR設(shè)計(jì)具體怎么做,充滿好奇,不知道你有沒(méi)有興趣?
不管你將來(lái)做不做VR設(shè)計(jì),其實(shí)都應(yīng)該了解一下,作為設(shè)計(jì)的廣度,拓展下知識(shí)面也是必要的,萬(wàn)一哪天就要做了呢?就像多年前的UI設(shè)計(jì)一樣,所以這篇文章值得點(diǎn)贊收藏。
之前也有寫(xiě)過(guò)兩篇VR相關(guān)文章,結(jié)合起來(lái)看效果會(huì)更好。下面2篇,同樣超干貨,值得一讀。
- 《國(guó)外大佬手把手教你從0開(kāi)始學(xué)好VR設(shè)計(jì)》
- 《想了解VR設(shè)計(jì)?看完這篇就夠了!》
VR應(yīng)用具有非常直觀的UI界面,與可穿戴設(shè)備、手機(jī)、平板、PC上的應(yīng)用類似,使得大眾能夠使用VR。想出新穎的交互會(huì)比較有趣,但它卻增加了用戶的學(xué)習(xí)曲線。
類似于2D界面,VR設(shè)計(jì)師會(huì)用大小、對(duì)比和顏色設(shè)計(jì)出界面層次結(jié)構(gòu)。在VR里,大小取決于用戶和內(nèi)容之間的距離,因此了解內(nèi)容的大小和適當(dāng)?shù)挠^看距離至關(guān)重要。
比如,知道要設(shè)計(jì)多大的字體是很棘手的,但幸運(yùn)的是,在現(xiàn)實(shí)世界中有很多先例。在為VR設(shè)計(jì)內(nèi)容時(shí),對(duì)印刷設(shè)計(jì)(廣告牌、海報(bào)、書(shū)籍)也需要類似的思考,對(duì)VR設(shè)計(jì)有借鑒意義。
考慮下你現(xiàn)在是如何與一個(gè)觸摸屏進(jìn)行互動(dòng)。我們必須慢慢去學(xué)習(xí)理解許多模式,比如滑動(dòng)、捏縮放,長(zhǎng)按出現(xiàn)更多選項(xiàng)。這些在做VR設(shè)計(jì)時(shí)也必須要去考慮好。
我相信隨著越來(lái)越多的設(shè)計(jì)師進(jìn)入VR領(lǐng)域,將會(huì)有更多的想法來(lái)創(chuàng)建和打造新的UI模式,從而幫助行業(yè)向前發(fā)展。
一、視野
視野,或任何給定時(shí)間可觀察環(huán)境的范圍,是設(shè)計(jì)VR界面時(shí)非常重要的一個(gè)方面。更寬的視野,用戶在體驗(yàn)過(guò)程中的沉靜感就更強(qiáng)。有2種類型的FOV共同作用形成人類視覺(jué)。
單眼FOV描述的是我們一只眼睛的視野。對(duì)于一只健康的眼睛,單眼FOV的視野水平在170°-175°,包括從瞳孔到鼻子的角度。鼻前視野FOV通常為50°-65°,對(duì)于鼻子較大的人來(lái)說(shuō)較小,而從瞳孔到頭部一側(cè)的視野為顳FOV,其較寬,通常為100°-110°。
二、新建Figma文件
1. 畫(huà)板
當(dāng)做VR設(shè)計(jì)時(shí),我使用的畫(huà)板尺寸為3600×1800(360度),然后我繪制出完美的FOV區(qū)域來(lái)集中主要設(shè)計(jì)。
2. 消失點(diǎn)
在透視理論中有一個(gè)消失點(diǎn)的概念,這個(gè)概念在VR設(shè)計(jì)中很有用,因?yàn)樗軒椭O(shè)計(jì)師在設(shè)計(jì)軟件中創(chuàng)建一個(gè)便于感知深度和距離的參考。
我總結(jié)了一種在我的設(shè)計(jì)中創(chuàng)建消失點(diǎn)的方法,通過(guò)在一個(gè)圓內(nèi)以10-15度的角度畫(huà)分隔線。之后,我將線條引入畫(huà)板,并拉伸線條,直到它在框架內(nèi)。
完成后,將以連續(xù)間隔的直線放到畫(huà)板中。(彩云注:這個(gè)方法也很適合用到畫(huà)透視線中)
3. 選擇主題并豐富背景
一旦消失點(diǎn)畫(huà)好了,主要的參考線已經(jīng)變明朗了,接下來(lái)就取決于你想如何在環(huán)境中發(fā)揮創(chuàng)造力。
大多數(shù)時(shí)候,我使用漸變來(lái)創(chuàng)建天空和陸地等效果,然后添加了氣泡、結(jié)構(gòu)或使用形狀的建筑物,這為環(huán)境添加了很多細(xì)節(jié),使其感覺(jué)更3D逼真。
4. 設(shè)計(jì)UI
到這一步的時(shí)候,你可以基于產(chǎn)品目標(biāo)開(kāi)始設(shè)計(jì)UI了。在設(shè)計(jì)VR時(shí),對(duì)比是最重要的,因此,盡量減少文本和背景周?chē)念伾?/p>
通常,背景一般是半透明,在UI設(shè)計(jì)中一個(gè)白色背景最好適配深色環(huán)境,而對(duì)于深色背景最好適配白色環(huán)境。按鈕通常包括兩種形式,主要按鈕和次要按鈕,顏色保持簡(jiǎn)單同樣是最好的。
5. 布局
與桌面和手機(jī)的傳統(tǒng)UI設(shè)計(jì)不同,在VR或者AR中,嵌套導(dǎo)航保持在同一環(huán)境中,而界面框架利用了環(huán)境中可用的巨大空間。
只有當(dāng)有新的游戲場(chǎng)景可供探索時(shí),環(huán)境才會(huì)發(fā)生變化。其他時(shí)候,也可以實(shí)現(xiàn)彈出窗口,新層疊加在舊UI之上。
6. 使用XR工具創(chuàng)建曲面UI
僅用Figma就可以了,設(shè)計(jì)工具這塊原來(lái)就足夠了,有一種快速簡(jiǎn)單的方法來(lái)設(shè)計(jì)原型3D,VR,AR界面。
有一個(gè)插件叫3D UI Generator,能夠自動(dòng)縮放和調(diào)整任何圖形,畫(huà)板以創(chuàng)建3D界面和環(huán)境。它支持旋轉(zhuǎn)、斜切、縮放、遠(yuǎn)近、FOV、曲面程度和等距視圖。在Figma上可以安裝 3D for XR https://www.figma.com/community/plugin/1043890631255427270/3D-for-XR
7. 聲音用戶體驗(yàn)
雖然在使用網(wǎng)頁(yè)或APP時(shí),聲音往往很煩人,但它是VR開(kāi)發(fā)不可或缺的一部分??紤]通感現(xiàn)象,其中一種感覺(jué)的刺激導(dǎo)致另一種感覺(jué)自動(dòng)觸發(fā)。
例如,你聞到一些東西,就會(huì)產(chǎn)生味覺(jué)錯(cuò)覺(jué)。這也適用于聲音。由于VR中仍然缺乏觸覺(jué)反饋,因此當(dāng)用戶觸摸物體時(shí),聲音是提供反饋的一種很好的方式。
3D聲音(又稱Holophonic聲音)仍處于起步階段,但將對(duì)我們體驗(yàn)VR的方式產(chǎn)生變革。我們都習(xí)慣于立體聲,它提供來(lái)自兩個(gè)聲道(左/右)的聲音,但全音可以讓我們分辨聲音是來(lái)自上方、下方還是后方。
想想當(dāng)你在外面聽(tīng)到飛機(jī)的聲音,你憑直覺(jué)向上看,對(duì)嗎?在VR中擁有這種聲音體驗(yàn)將使用戶真正身臨其境。
三、總結(jié)
這是VR設(shè)計(jì)最基本的底層原理。這幾篇VR相關(guān)文章一起看完,總算讓VR中的設(shè)計(jì)不再神秘了。
元宇宙是未來(lái)發(fā)展一大趨勢(shì),不少人都想上這趟車(chē),VR設(shè)計(jì)就是最靠近這一趨勢(shì)的領(lǐng)域之一,VR設(shè)計(jì)師這個(gè)崗位在將來(lái)會(huì)越來(lái)越緊缺。
為我投票
我在參加人人都是產(chǎn)品經(jīng)理2022年度作者評(píng)選,希望喜歡我的文章的朋友都能來(lái)支持我一下~
點(diǎn)擊下方鏈接進(jìn)入我的個(gè)人參選頁(yè)面,點(diǎn)擊紅心即可為我投票。
每人每天最多可投35票,投票即可獲得抽獎(jiǎng)機(jī)會(huì),抽取書(shū)籍、人人都是產(chǎn)品經(jīng)理紀(jì)念周邊和起點(diǎn)課堂會(huì)員等好禮哦!
投票傳送門(mén):https://996.pm/MZ9B9
原文作者:Ozenua Oluwatobi John(本文翻譯已獲得作者的正式授權(quán))
原文:https://medium.com/@ozenuaoluwatobi/designing-for-vr-in-figma-15243b15738a
譯者:彩云Sky,公眾號(hào):彩云譯設(shè)計(jì);人人都是產(chǎn)品經(jīng)理專欄作家,騰訊高級(jí)視覺(jué)設(shè)計(jì)師。
本文由@彩云sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
- 目前還沒(méi)評(píng)論,等你發(fā)揮!