當(dāng)前位置：首頁(yè) >人工智能 >如何從0開(kāi)始學(xué)好VR設(shè)計(jì)?

如何從0開(kāi)始學(xué)好VR設(shè)計(jì)?

發(fā)布時(shí)間：2024-05-28 17:04:32 瀏覽量：141次

許多設(shè)計(jì)師對(duì)VR領(lǐng)域充滿(mǎn)好奇與挑戰(zhàn)。近年來(lái)，隨著VR相關(guān)硬件和軟件的不斷發(fā)展，VR體驗(yàn)變得越來(lái)越驚艷和復(fù)雜。作為UI或UX設(shè)計(jì)師，踏入VR設(shè)計(jì)的道路可能有些困難，但不用害怕！本文將分享VR界面設(shè)計(jì)的流程，幫助你打開(kāi)學(xué)習(xí)VR設(shè)計(jì)的大門(mén)。

不同類(lèi)型的虛擬現(xiàn)實(shí)應(yīng)用

對(duì)設(shè)計(jì)師來(lái)說(shuō)，VR App主要由環(huán)境和界面兩類(lèi)控件組成。環(huán)境是你穿戴VR頭盔后所看到的世界，而界面則是用戶(hù)交互元素的整合，用于導(dǎo)航和控制體驗(yàn)。

集中在環(huán)境復(fù)雜、界面簡(jiǎn)單的app多為模擬器類(lèi)應(yīng)用，如過(guò)山車(chē)體驗(yàn)；而相反的四象限呈現(xiàn)豐富的界面和簡(jiǎn)單的環(huán)境，如三星的Gear VR主屏幕。

設(shè)計(jì)虛擬環(huán)境需要熟練使用3D模型工具，將元素繪制得生動(dòng)逼真。對(duì)許多UI和UX設(shè)計(jì)師而言可能有些挑戰(zhàn)，但VR界面設(shè)計(jì)則為他們提供了更好的機(jī)會(huì)，可以充分利用自身設(shè)計(jì)技能。

我們最早的VR界面設(shè)計(jì)是為“The Economist”設(shè)計(jì)的，與VR產(chǎn)品工作室Visualise合作。我們負(fù)責(zé)設(shè)計(jì)，Visualise負(fù)責(zé)研發(fā)。

VR界面設(shè)計(jì)流程

盡管大多數(shù)設(shè)計(jì)師對(duì)移動(dòng)端界面設(shè)計(jì)流程了如指掌，但對(duì)于VR界面設(shè)計(jì)流程卻有所不同。接到VR界面設(shè)計(jì)項(xiàng)目時(shí)，第一步是建立一套設(shè)計(jì)工作流程。

保持一致性，順應(yīng)變遷

首次使用三星的Gear VR時(shí)，我們發(fā)現(xiàn)與傳統(tǒng)移動(dòng)端app相似。它們共享相同的工作原理：用戶(hù)通過(guò)與界面交互來(lái)瀏覽信息。這一點(diǎn)至關(guān)重要，盡管只是簡(jiǎn)單提及，但值得牢記。

既然VR和傳統(tǒng)app界面相似，那么設(shè)計(jì)師們多年來(lái)學(xué)習(xí)和掌握的傳統(tǒng)UI經(jīng)驗(yàn)并不會(huì)白費(fèi)，同樣適用于VR領(lǐng)域。實(shí)際上，你比想象中更擅長(zhǎng)VR app設(shè)計(jì)！

在說(shuō)明VR界面設(shè)計(jì)流程之前，先回顧傳統(tǒng)移動(dòng)界面設(shè)計(jì)流程。

第一步：線(xiàn)框圖

通過(guò)快速的多次迭代定義交互方式和整體布局。

第二步：視覺(jué)設(shè)計(jì)

在確定設(shè)計(jì)風(fēng)格和交互方式后，結(jié)合品牌風(fēng)格和線(xiàn)框圖進(jìn)行精心設(shè)計(jì)，形成漂亮的界面。

第三步：流程圖

為展示頁(yè)面間的交互流程，使用線(xiàn)條連接頁(yè)面，稱(chēng)之為流程圖。流程圖將成為開(kāi)發(fā)過(guò)程中程序員的重要參考。

如何將傳統(tǒng)設(shè)計(jì)流程成功運(yùn)用于VR設(shè)計(jì)中呢？

始于設(shè)置

畫(huà)布大小

面對(duì)360度的畫(huà)布，用戶(hù)難以確定從何處開(kāi)始交互。設(shè)計(jì)師只需關(guān)注畫(huà)布中的某一部分，而非全部區(qū)域。

經(jīng)過(guò)數(shù)周的努力，我們確定了適合VR設(shè)計(jì)的畫(huà)布尺寸。和設(shè)計(jì)移動(dòng)端app不同，畫(huà)布尺寸由設(shè)備決定。針對(duì)VR設(shè)計(jì)，我們定義了3600×1800像素的“360視角”畫(huà)布，以及1200×600像素的“UI視角”畫(huà)布。

測(cè)試

使用兩種視角的畫(huà)布進(jìn)行測(cè)試。在“UI視角”畫(huà)布上集中設(shè)計(jì)，制作流程圖更便捷。同時(shí)，使用“360視角”畫(huà)布預(yù)覽VR界面，通過(guò)VR頭盔測(cè)試界面效果是非常必要的。

實(shí)踐操作

通過(guò)簡(jiǎn)單實(shí)踐，快速熟悉VR界面設(shè)計(jì)流程。

1. 設(shè)置“360視角”畫(huà)布

創(chuàng)建一個(gè)360度視角的畫(huà)布，導(dǎo)入背景圖并放置在中間。確保背景圖比例為2:1，大小為3600×1800像素。

2. 設(shè)置“UI視角”畫(huà)布

在新建的1200×600像素畫(huà)布中添加“UI視角”元素，專(zhuān)注于VR界面設(shè)計(jì)。將360視角背景復(fù)制到UI畫(huà)布中央，保持原尺寸。

3. 設(shè)計(jì)界面

在“UI視角”畫(huà)布上設(shè)計(jì)界面，可以通過(guò)素材包提供的元素加速設(shè)計(jì)過(guò)程。

4. 合并畫(huà)布導(dǎo)出

將“UI視角”畫(huà)布置于“360”畫(huà)布中，并導(dǎo)出png文件。

5. 用VR設(shè)備測(cè)試

使用GoPro VR播放器預(yù)覽設(shè)計(jì)效果，并根據(jù)需要測(cè)試與Oculus Rift的兼容性。

技術(shù)考慮

1. 低分辨率

在VR頭盔的近距離顯示下，屏幕分辨率看起來(lái)像素化，這會(huì)影響文本可讀性。設(shè)計(jì)中要避免使用過(guò)大文本塊和過(guò)于細(xì)節(jié)化的UI元素。

2. 文本可讀性

受分辨率限制，漂亮清晰的用戶(hù)界面看起來(lái)像素化，使得文本難以閱讀。設(shè)計(jì)時(shí)應(yīng)盡量避免大塊文本和細(xì)節(jié)化UI元素。

總結(jié)

流程圖

將“UI視角”界面連接為流程圖，便于開(kāi)發(fā)團(tuán)隊(duì)理解設(shè)計(jì)總體架構(gòu)。

動(dòng)效設(shè)計(jì)

除了制作漂亮界面，展示操作方式也很關(guān)鍵。使用AE或principle展示動(dòng)效指導(dǎo)開(kāi)發(fā)團(tuán)隊(duì)，并讓客戶(hù)更好理解設(shè)計(jì)理念。

通過(guò)此文，希望VR設(shè)計(jì)對(duì)你而言不再遙不可及，激勵(lì)你踏上VR設(shè)計(jì)之路?，F(xiàn)在就開(kāi)始，探索未知領(lǐng)域！

如果對(duì)數(shù)字藝術(shù)領(lǐng)域感興趣，快來(lái)了解我們的相關(guān)課程，掌握最新技能：點(diǎn)擊咨詢(xún)

上一篇北師大未來(lái)設(shè)計(jì)學(xué)院在第六屆中國(guó)教博會(huì)發(fā)布五項(xiàng)PBL大挑戰(zhàn)項(xiàng)目

下一篇蕪湖室內(nèi)設(shè)計(jì)培訓(xùn)|室內(nèi)設(shè)計(jì)學(xué)哪些啊

亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

如何從0開(kāi)始學(xué)好VR設(shè)計(jì)?

不同類(lèi)型的虛擬現(xiàn)實(shí)應(yīng)用

VR界面設(shè)計(jì)流程