我最近入手了 VR 設備,體驗大大超出預期,難怪老羅覺得 VR 是下一代硬件平臺,我覺得還真的有可能。在 VR 中有很多新奇的交互體驗,視覺沖擊感強,所以我對 VR 設計具體怎么做,充滿好奇。不管你將來做不做 VR 設計,其實都應該了解一下,作為設計的廣度,拓展下知識面也是必要的,萬一哪天就要做了呢?就像多年前的 UI 設計一樣,所以這篇文章值得點贊收藏。

之前也有寫過 VR 相關文章,結合起來看效果會更好。同樣超干貨,值得一讀。

VR設計怎么做?寫給零基礎新手的實戰案例演示

VR 應用具有非常直觀的 UI 界面,與可穿戴設備、手機、平板、PC 上的應用類似,使得大眾能夠使用 VR。想出新穎的交互會比較有趣,但它卻增加了用戶的學習曲線。

類似于 2D 界面,VR 設計師會用大小、對比和顏色設計出界面層次結構。在 VR 里,大小取決于用戶和內容之間的距離,因此了解內容的大小和適當的觀看距離至關重要。

比如,知道要設計多大的字體是很棘手的,但幸運的是,在現實世界中有很多先例。在為 VR 設計內容時,對印刷設計(廣告牌、海報、書籍)也需要類似的思考,對 VR 設計有借鑒意義。

考慮下你現在是如何與一個觸摸屏進行互動。我們必須慢慢去學習理解許多模式,比如滑動、捏縮放,長按出現更多選項。這些在做 VR 設計時也必須要去考慮好。

我相信隨著越來越多的設計師進入 VR 領域,將會有更多的想法來創建和打造新的 UI 模式,從而幫助行業向前發展。

一、視野

視野,或任何給定時間可觀察環境的范圍,是設計 VR 界面時非常重要的一個方面。更寬的視野,用戶在體驗過程中的沉浸感就更強。有 2 種類型的 FOV 共同作用形成人類視覺。

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

VR設計怎么做?寫給零基礎新手的實戰案例演示

VR設計怎么做?寫給零基礎新手的實戰案例演示

VR設計怎么做?寫給零基礎新手的實戰案例演示

二、新建 Figma 文件

1. 畫板

當做 VR 設計時,我使用的畫板尺寸為 3600x1800(360 度),然后我繪制出完美的 FOV 區域來集中主要設計。

2. 消失點

在透視理論中有一個消失點的概念,這個概念在 VR 設計中很有用,因為它能幫助設計師在設計軟件中創建一個便于感知深度和距離的參考。

我總結了一種在我的設計中創建消失點的方法,通過在一個圓內以 10-15 度的角度畫分隔線。之后,我將線條引入畫板,并拉伸線條,直到它在框架內。

完成后,將以連續間隔的直線放到畫板中。(彩云注:這個方法也很適合用到畫透視線中)

VR設計怎么做?寫給零基礎新手的實戰案例演示

VR設計怎么做?寫給零基礎新手的實戰案例演示

VR設計怎么做?寫給零基礎新手的實戰案例演示

3. 選擇主題并豐富背景

一旦消失點畫好了,主要的參考線已經變明朗了,接下來就取決于你想如何在環境中發揮創造力。

大多數時候,我使用漸變來創建天空和陸地等效果,然后添加了氣泡、結構或使用形狀的建筑物,這為環境添加了很多細節,使其感覺更 3D 逼真。

4. 設計 UI

到這一步的時候,你可以基于產品目標開始設計 UI 了。在設計 VR 時,對比是最重要的,因此,盡量減少文本和背景周圍的顏色。

通常,背景一般是半透明,在 UI 設計中一個白色背景最好適配深色環境,而對于深色背景最好適配白色環境。按鈕通常包括兩種形式,主要按鈕和次要按鈕,顏色保持簡單同樣是最好的。

5. 布局

與桌面和手機的傳統 UI 設計不同,在 VR 或者 AR 中,嵌套導航保持在同一環境中,而界面框架利用了環境中可用的巨大空間。

只有當有新的游戲場景可供探索時,環境才會發生變化。其他時候,也可以實現彈出窗口,新層疊加在舊 UI 之上。

VR設計怎么做?寫給零基礎新手的實戰案例演示

6. 使用 XR 工具創建曲面 UI

僅用 Figma 就可以了,設計工具這塊原來就足夠了,有一種快速簡單的方法來設計原型 3D,VR,AR 界面。

有一個插件叫 3D UI Generator,能夠自動縮放和調整任何圖形,畫板以創建 3D 界面和環境。它支持旋轉、斜切、縮放、遠近、FOV、曲面程度和等距視圖。在 Figma 上可以安裝 3D for XR:?https://www.figma.com/community/plugin/1043890631255427270/3D-for-XR

VR設計怎么做?寫給零基礎新手的實戰案例演示

7. 聲音用戶體驗

雖然在使用網頁或 APP 時,聲音往往很煩人,但它是 VR 開發不可或缺的一部分。考慮通感現象,其中一種感覺的刺激導致另一種感覺自動觸發。

例如,你聞到一些東西,就會產生味覺錯覺。這也適用于聲音。由于 VR 中仍然缺乏觸覺反饋,因此當用戶觸摸物體時,聲音是提供反饋的一種很好的方式。

3D 聲音(又稱 Holophonic 聲音)仍處于起步階段,但將對我們體驗 VR 的方式產生變革。我們都習慣于立體聲,它提供來自兩個聲道(左/右)的聲音,但全音可以讓我們分辨聲音是來自上方、下方還是后方。

想想當你在外面聽到飛機的聲音,你憑直覺向上看,對嗎?在 VR 中擁有這種聲音體驗將使用戶真正身臨其境。

三、總結

這是 VR 設計最基本的底層原理。這幾篇 VR 相關文章一起看完,總算讓 VR 中的設計不再神秘了。

元宇宙是未來發展一大趨勢,不少人都想上這趟車,VR 設計就是最靠近這一趨勢的領域之一,VR 設計師這個崗位在將來會越來越緊缺。

更多VR好文:

歡迎關注作者的微信公眾號:「彩云譯設計」

VR設計怎么做?寫給零基礎新手的實戰案例演示

收藏 24
點贊 35

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。