先交代一下背景，我是 UX 設(shè)計(jì)師，接觸到 VR 的設(shè)計(jì)是因?yàn)楣居幸粋€(gè)實(shí)驗(yàn)性的 VR 項(xiàng)目（做完就撤掉了），人員只有我和另一個(gè)Unity 工程師，他之前只負(fù)責(zé)程序?qū)崿F(xiàn)沒有做過 VR 的界面，我之前也沒有先關(guān)經(jīng)驗(yàn)，VR 的界面部分是我倆一起在沒有指導(dǎo)的情況下探索性完成的。所以這個(gè)流程不一定是標(biāo)準(zhǔn)流程，僅供參考~
我們當(dāng)時(shí)是做的 3D 建模（不是拍攝的實(shí)景）不可走動(dòng)場景（固定在一個(gè)點(diǎn)上），建模部分是外包的，我們需要完成在 3D 的場景里加上可交互界面。

一、概念

VR 本質(zhì)上還是一個(gè)顯示設(shè)備，設(shè)備不一樣交互方式會(huì)略不同，由于它是 3D 的，所以顯示上也會(huì)有不同，和 2D 的界面設(shè)計(jì)相比就是基礎(chǔ)規(guī)范不同。
跟 2D 的界面設(shè)計(jì)一樣，我們要先確定做什么、有什么用，有哪些界面、界面里分別是什么元素、交互方式、不同狀態(tài)的樣式等等。

不同之處在于 3D 的界面設(shè)計(jì)中會(huì)有更多的屬性：

1. 有縱深

元素離你的距離。離太遠(yuǎn)了看不清，離太近了能顯示的內(nèi)容就變少了且生理上不舒服啊。遠(yuǎn)近還會(huì)影響元素的大小，設(shè)計(jì)的時(shí)候還要考慮到距離的問題。

Unity 中的尺寸是按米算的，一個(gè)格子1米（這個(gè)跟 C4D 一樣，不等同于物理尺寸），開始正式設(shè)計(jì)前在 Unity 中繪制一個(gè)矩形，做為界面顯示位置與大小的參考，然后截圖（帶網(wǎng)格）。
把截圖拖到 sketch 中，綜合設(shè)計(jì)稿的尺寸、截圖的網(wǎng)格大小，確定一個(gè)比例，如 50px 占一個(gè)網(wǎng)格，那設(shè)計(jì)稿中一個(gè) 10px 大的按鈕在 Unity 中就是 0.2m 。
當(dāng)然這個(gè)方法是我自個(gè)兒琢磨的（捂臉~）。

2. 視角有高低

小朋友的視角低，只能看到大人們的腿，高個(gè)兒們視角高，走在人群中看到的都是頭頂，那我們?cè)谧?VR 的時(shí)候就會(huì)放一個(gè)表示視角的攝像機(jī)，這個(gè)攝像機(jī)的高度看到的視角高低。

我們這個(gè)項(xiàng)目是固定在一個(gè)點(diǎn)的，攝像機(jī)高度也是固定的。喊幾個(gè)不同身高的人帶著 VR 眼鏡試試會(huì)不會(huì)覺得別扭，別扭就調(diào)下攝像機(jī)高度，找個(gè)折中大家都不覺得別扭的高度。這個(gè)步驟直接開發(fā)小伙兒調(diào)就行了。

3. 分辨率低

VR 設(shè)備的分辨率目前比手機(jī)屏要低很多（目前），所以實(shí)際上可設(shè)計(jì)的面積比手機(jī)屏要小，字和按鈕的占比就不能太小，得大（大概是心里覺得 “臥槽這么大還能看么” 那么大）。

4. 視線中心區(qū)域

我們?nèi)说难劬δJ(rèn)正視前方，眼睛平視正前方最容易看清，左右水平的這一圈可以轉(zhuǎn)頭轉(zhuǎn)身，天花板和地面得抬頭跟低頭，看得很累，這跟平時(shí)看手機(jī)電腦從左上往右下閱讀方式不一樣，所以界面是從正中向右延展，

5. 交互

我們使用的 VR 設(shè)備是手柄操作，交互方式比較簡單，畫面中會(huì)顯示一個(gè)表示視線焦點(diǎn)的小光點(diǎn)，這個(gè)小光點(diǎn)可以通過眼鏡移動(dòng)也可以通過手柄移動(dòng)：

• 操作：瞄準(zhǔn)，然后點(diǎn)擊手柄或長時(shí)間注視（懸停）點(diǎn)擊目標(biāo)
  （可用來表示已懸停的屬性變化：顏色、光線投射、深度變化、角度變化等）
• 提示：在場景中標(biāo)記出可交互的元素（發(fā)著光或者別的像游戲里那樣，可以使用聲音提示）。

二、準(zhǔn)備

安裝一些設(shè)計(jì) VR 時(shí)用到的軟件和插件：

• PS變形濾鏡插件 Flaming Pear Flexify 2，用于生成全景圖；
• GoPro VR Player 用來預(yù)覽全景圖；
• 制作 VR 應(yīng)用的軟件 Unity。

【一張圖表達(dá)下轉(zhuǎn)換過程】
GoPro VR Player 預(yù)覽需要把界面以及背景做成等柱狀投影圖，所以需要通過 Flaming Pear Flexify 2 來生成，是在不了解 VR 的設(shè)計(jì)規(guī)范時(shí)用來輔助檢查設(shè)計(jì)稿的效果用的，相當(dāng)于稿子檢查。
這個(gè)方法從 《VR原型的快速制作 - 大植子Daz_Qu》 看來的，建議看下原文。

三、設(shè)計(jì)

到 GoPro VR Player 預(yù)覽這個(gè)步驟都跟大植子文章里差不多，但我們這個(gè)還得弄到 VR 眼鏡，后面會(huì)多了 Unity 建模和 VR 眼鏡檢查兩個(gè)步驟，也是反復(fù)調(diào)整的過程。

1. 網(wǎng)格

方形的網(wǎng)格不等于場景的墻面大小，只是以我們看到的視角劃分為六大面，每一塊表示一個(gè)視角，默認(rèn)進(jìn)入時(shí)看到的面定義為正面。
回憶在電影院看電影時(shí)座位離屏幕太近的感受，界面占比太大會(huì)有壓迫感，四角的內(nèi)容會(huì)由于透視角度問題變形，中間粉色的那一條就是視線看著比較輕松的大致范圍。

• 制作360度全景圖，檢查效果

四、建模開發(fā)

跟開發(fā)小伙兒確定好交互方式，需要哪些頁面？怎么跳轉(zhuǎn)？開發(fā)小伙兒會(huì)把帶有不同頁面的 Unity 包給我，里面有大概需要的元素（各種塊、文字、按鈕等）

五、調(diào)試

大小遠(yuǎn)近