我最近入手了 VR 設(shè)備，體驗(yàn)大大超出預(yù)期，難怪老羅覺得 VR 是下一代硬件平臺(tái)，我覺得還真的有可能。在 VR 中有很多新奇的交互體驗(yàn)，視覺沖擊感強(qiáng)，所以我對(duì) VR 設(shè)計(jì)具體怎么做，充滿好奇。不管你將來(lái)做不做 VR 設(shè)計(jì)，其實(shí)都應(yīng)該了解一下，作為設(shè)計(jì)的廣度，拓展下知識(shí)面也是必要的，萬(wàn)一哪天就要做了呢？就像多年前的 UI 設(shè)計(jì)一樣，所以這篇文章值得點(diǎn)贊收藏。

之前也有寫過 VR 相關(guān)文章，結(jié)合起來(lái)看效果會(huì)更好。同樣超干貨，值得一讀。

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)、書籍）也需要類似的思考，對(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)過程中的沉浸感就更強(qiáng)。有 2 種類型的 FOV 共同作用形成人類視覺。

單眼 FOV 描述的是我們一只眼睛的視野。對(duì)于一只健康的眼睛，單眼 FOV 的視野水平在 170°-175°，包括從瞳孔到鼻子的角度。鼻前視野 FOV 通常為 50°-65°，對(duì)于鼻子較大的人來(lái)說(shuō)較小，而從瞳孔到頭部一側(cè)的視野為顳 FOV，其較寬，通常為 100°-110°。

二、新建 Figma 文件

1. 畫板

當(dāng)做 VR 設(shè)計(jì)時(shí)，我使用的畫板尺寸為 3600x1800（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)的方法，通過在一個(gè)圓內(nèi)以 10-15 度的角度畫分隔線。之后，我將線條引入畫板，并拉伸線條，直到它在框架內(nèi)。

完成后，將以連續(xù)間隔的直線放到畫板中。（彩云注：這個(gè)方法也很適合用到畫透視線中）

3. 選擇主題并豐富背景

一旦消失點(diǎn)畫好了，主要的參考線已經(jīng)變明朗了，接下來(lái)就取決于你想如何在環(huán)境中發(fā)揮創(chuàng)造力。

大多數(shù)時(shí)候，我使用漸變來(lái)創(chuàng)建天空和陸地等效果，然后添加了氣泡、結(jié)構(gòu)或使用形狀的建筑物，這為環(huán)境添加了很多細(xì)節(jié)，使其感覺更 3D 逼真。

4. 設(shè)計(jì) UI

到這一步的時(shí)候，你可以基于產(chǎn)品目標(biāo)開始設(shè)計(jì) UI 了。在設(shè)計(jì) VR 時(shí)，對(duì)比是最重要的，因此，盡量減少文本和背景周圍的顏色。

通常，背景一般是半透明，在 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)整任何圖形，畫板以創(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 開發(fā)不可或缺的一部分?？紤]通感現(xiàn)象，其中一種感覺的刺激導(dǎo)致另一種感覺自動(dòng)觸發(fā)。

例如，你聞到一些東西，就會(huì)產(chǎn)生味覺錯(cuò)覺。這也適用于聲音。由于 VR 中仍然缺乏觸覺反饋，因此當(dāng)用戶觸摸物體時(shí)，聲音是提供反饋的一種很好的方式。

3D 聲音（又稱 Holophonic 聲音）仍處于起步階段，但將對(duì)我們體驗(yàn) VR 的方式產(chǎn)生變革。我們都習(xí)慣于立體聲，它提供來(lái)自兩個(gè)聲道（左/右）的聲音，但全音可以讓我們分辨聲音是來(lái)自上方、下方還是后方。

想想當(dāng)你在外面聽到飛機(jī)的聲音，你憑直覺向上看，對(duì)嗎？在 VR 中擁有這種聲音體驗(yàn)將使用戶真正身臨其境。

三、總結(jié)

這是 VR 設(shè)計(jì)最基本的底層原理。這幾篇 VR 相關(guān)文章一起看完，總算讓 VR 中的設(shè)計(jì)不再神秘了。

元宇宙是未來(lái)發(fā)展一大趨勢(shì)，不少人都想上這趟車，VR 設(shè)計(jì)就是最靠近這一趨勢(shì)的領(lǐng)域之一，VR 設(shè)計(jì)師這個(gè)崗位在將來(lái)會(huì)越來(lái)越緊缺。

更多VR好文：

歡迎關(guān)注作者的微信公眾號(hào)：「彩云譯設(shè)計(jì)」