問題
在進(jìn)行VR界面設(shè)計(jì)的時(shí)候，我們可能會(huì)遇到以下問題：
問題一：界面無邊界，缺失參考系。
體驗(yàn)過VR的朋友都知道，在VR里面是沒有邊界的。APP界面的邊界是手機(jī)屏幕，Web的邊界是電腦屏幕，但是在VR中，這塊屏幕就突然消失了，這一約束的消失，使得界面設(shè)計(jì)有更多的可能性，同時(shí)也給設(shè)計(jì)師提出了新的挑戰(zhàn)。界面的布局因約束的消失而失去了參考系，其形狀、位置（X,Y,Z軸）、大小等等都需要設(shè)計(jì)者自己定義。假如一開始定義得不好，整個(gè)設(shè)計(jì)很可能要重頭開始。比如：設(shè)計(jì)好的菜單（在Unity中編輯），在場(chǎng)景中看不出它有什么問題，但切換為VR模式時(shí)，各種問題就出來了：不是太大就是太小看不清，要么就是需要頭部轉(zhuǎn)動(dòng)來瀏覽，要么就是重點(diǎn)、層次不明顯。總之，需要多次調(diào)試才達(dá)到預(yù)想的效果。
問題二：沒有針對(duì)VR設(shè)計(jì)的工具，在平面上的設(shè)計(jì)稿與在VR中的最終效果出入很大。
無論是App還是Web，界面的設(shè)計(jì)稿跟產(chǎn)品開發(fā)出來后的樣子基本是一樣的。但在VR開發(fā)中，設(shè)計(jì)稿往往不能勾勒出產(chǎn)品最終的樣子，只能提供一種大致的想象。就好比在工業(yè)設(shè)計(jì)中，手繪設(shè)計(jì)圖和最終產(chǎn)品是千差萬別的，然而在工業(yè)設(shè)計(jì)領(lǐng)域已經(jīng)有很多三維設(shè)計(jì)軟件，使得效果圖已經(jīng)可以非常清楚地勾勒出產(chǎn)品的模樣。而目前還沒存在一款針對(duì)VR設(shè)計(jì)的軟件，在設(shè)計(jì)界面的時(shí)候，設(shè)計(jì)者只有兩條路可以走：要么是先用平面設(shè)計(jì)的軟件如PS，將界面以及界面與虛擬場(chǎng)景的關(guān)系設(shè)計(jì)出來，交給工程師將它開發(fā)出來；要么是在游戲開發(fā)引擎上直接開始設(shè)計(jì)。前者的問題是，設(shè)計(jì)稿是平面的，UI開發(fā)是三維立體的，這需要工程師和設(shè)計(jì)師不停地溝通和修改。后者的問題即是，需要耗費(fèi)大量的時(shí)間和精力，好比直接使用HTML和CSS等編程語言將網(wǎng)頁設(shè)計(jì)出來一樣。
針對(duì)以上兩個(gè)問題，筆者結(jié)合了自己的經(jīng)驗(yàn)和所查閱的資料，制作出了一個(gè)VR界面布局的框架。通過此框架，設(shè)計(jì)者可以根據(jù)視覺重點(diǎn)合理布局界面，同時(shí)能夠很好地與開發(fā)對(duì)接，迅速地將界面開發(fā)出來。下面將詳細(xì)地介紹此框架的原理和使用案例。
相關(guān)概念解析
先介紹一些比較重要的概念。筆者認(rèn)為，這些概念每個(gè)VR設(shè)計(jì)師或開發(fā)者都應(yīng)該熟知。
FOV與PPD
FOV（Field of View），視場(chǎng)角。在VR中FOV就是代表了人眼所能看到的范圍。如圖1，角a是水平方向的視場(chǎng)角，角b為垂直方向的視場(chǎng)角。通常VR設(shè)備中，視場(chǎng)角都是指水平方向的視場(chǎng)角。人眼水平方向的視場(chǎng)角大概為120°，而市場(chǎng)上的VR設(shè)備視場(chǎng)角都在90°~110°左右。這也是我們?cè)谑褂肰R設(shè)備，感受到眼睛兩邊有黑影的原因。
PPD（Pixel per Degree），像素每度，是指每度所包含的像素。當(dāng)PPD>=60時(shí)，我們看屏幕才不會(huì)感到有顆粒感。而目前市面上的VR設(shè)備的PPD都不超過13，這也是我們覺得VR設(shè)備的顯示是“渣像素”的原因。
知道這兩個(gè)概念，對(duì)我們有什么幫助呢？以O(shè)culus DK2為例，其單眼分辨率為960px*1080px，F(xiàn)OV為100°，所以其PPD=960/100=9.6。反過來，我們可以通過PPD來計(jì)算垂直方向上人眼所看到的像素總數(shù)：9.6（PPD）*55°（人眼保持不動(dòng)時(shí)垂直方向的視場(chǎng)角）=528px，遠(yuǎn)遠(yuǎn)小于屏幕的1080px。也就是說，屏幕上邊緣和下邊緣的區(qū)域基本是視覺盲區(qū)，如果不轉(zhuǎn)動(dòng)眼睛基本不會(huì)看見。假如我們?cè)O(shè)計(jì)的界面位于這種區(qū)域，基本就掉坑里了，到測(cè)試的時(shí)候才發(fā)現(xiàn)什么都看不到（圖2）
界面的空間參考系
前文已經(jīng)提及，VR界面失去了物理屏幕作為坐標(biāo)參考系，在設(shè)計(jì)時(shí)需要新定義一個(gè)參考系。將界面放置在適當(dāng)?shù)膮⒖枷抵袑?duì)于可用性和舒適性非常重要。下面將更詳細(xì)地討論它們，如圖3。
以頭部作為參考系（Head Reference Frame）：即界面跟隨用戶的頭部運(yùn)動(dòng)。
適合用于注視導(dǎo)向的選擇
將現(xiàn)有的桌面HUD移植到VR需要非常小心謹(jǐn)慎，因?yàn)檫@樣做通常是行不通的
以軀干作為參考系（Torso Reference Frame）：界面隨著身體旋轉(zhuǎn)和平移。
針對(duì)于與身體相關(guān)的工具很適合：用戶可以利用身體感受感知它。
信息顯示和工具像一個(gè)隨身攜帶的功能腰帶，只需要往下看就可以查看信息和抓取工具
信息顯示通常更適合用于軀干參考系，而不是頭部參考系
以虛擬世界作為參考系（Vritual World Reference Frame）
有利于玩家對(duì)地理位置和方向的思考、大范圍導(dǎo)航和建立對(duì)虛擬世界的認(rèn)知地圖
人的視場(chǎng)角
前文已經(jīng)提及，人眼水平方向的視場(chǎng)角大概為120°，但這僅僅是人眼和頭靜止不動(dòng)的時(shí)候。正常情況下，我們會(huì)通過轉(zhuǎn)動(dòng)頭部和眼睛來觀察事物，因此我們的視野范圍遠(yuǎn)不止120°。
下圖4所描述的是當(dāng)人頭保持不動(dòng)時(shí)的視野范圍。在水平方向上，眼睛靜止時(shí)視場(chǎng)角為約120°，轉(zhuǎn)動(dòng)時(shí)視場(chǎng)角為約200°，最佳視場(chǎng)角為60°；垂直方向上，眼睛靜止的視場(chǎng)角為55°（往上25°、往下30°），轉(zhuǎn)動(dòng)時(shí)為120°（往上50°、往下70°）、最佳視場(chǎng)角為30°。
下圖5所描述的是人頭在舒適范圍內(nèi)的偏轉(zhuǎn)角。水平方向上，人頭最舒適的偏轉(zhuǎn)角為一側(cè)30°，當(dāng)偏轉(zhuǎn)角大于55°時(shí)就會(huì)造成不適。同樣，垂直方向上最佳偏轉(zhuǎn)角為32°（往上20°、往下12°），最大為100°（往上60°、往下40°）。
有了這些數(shù)據(jù)我們就可以算出人頭轉(zhuǎn)動(dòng)時(shí)的視野范圍：比如在水平方向上，轉(zhuǎn)動(dòng)頭部時(shí)的最佳視場(chǎng)角=30°+30°+120°=180°，如此類推。
框架的推導(dǎo)
我們已經(jīng)知道最佳視場(chǎng)角和最大視場(chǎng)角這些數(shù)據(jù)，但怎么將角度數(shù)據(jù)轉(zhuǎn)化為平面數(shù)據(jù)，從而能在平面上進(jìn)行設(shè)計(jì)呢？其實(shí)上文已經(jīng)提及過，即：像素總數(shù)=FOV*PPD。如果設(shè)備的PPD為9.6，那么60°的最佳視場(chǎng)角就對(duì)應(yīng)著576px寬的畫布（60*9.6=576）。詳情參見下表：a、b分別是水平方向和垂直方向的視場(chǎng)角，W、H分別是所對(duì)應(yīng)的畫布的寬度和高度。
一、當(dāng)人頭保持不動(dòng)時(shí)，只轉(zhuǎn)動(dòng)眼睛觀察時(shí)，有以下數(shù)據(jù)。以O(shè)culus DK2為例：
得出以下畫布（圖6）：
此畫板就是界面布局的框架，其針對(duì)的是以頭部為參考系的界面。
黑線框表示的是設(shè)備屏幕的大?。▎窝郏?/b>
紅色虛線框是人眼所能看見的區(qū)域。
灰色區(qū)域是理論上人眼所能夠看到的區(qū)域，但實(shí)際上人眼只看到紅框區(qū)域內(nèi)的，紅框外所看到的都是漆黑一片。注視這區(qū)域可能會(huì)造成眼部不適，而且不適合閱讀，所以高頻且重要的界面元素不建議放在這。
淺藍(lán)區(qū)域是人眼在舒適轉(zhuǎn)動(dòng)范圍內(nèi)所看到的區(qū)域，或者是在眼睛不動(dòng)的情況下所看到的區(qū)域。這部分區(qū)域適合放置界面元素，既不會(huì)造成眼部不適，也不會(huì)遮擋到場(chǎng)景，干擾用戶執(zhí)行主任務(wù)。
深藍(lán)區(qū)域是人眼最舒適狀態(tài)下所看到的區(qū)域。當(dāng)用戶的主任務(wù)是界面操作時(shí)，可以將重要的界面或者高頻操作的界面元素放置著區(qū)域。但如果用戶的主任務(wù)不是界面操作時(shí)，界面元素就應(yīng)該斟酌地放在此區(qū)域，因?yàn)橛锌赡軙?huì)造成對(duì)主任務(wù)的干擾。
二、當(dāng)人的眼睛保持不動(dòng)，轉(zhuǎn)動(dòng)頭部進(jìn)行觀察時(shí)：
得出以下畫布（圖7）：
深藍(lán)色為頭部靜止時(shí)的可視區(qū)域；淺藍(lán)色為頭部在最舒適轉(zhuǎn)動(dòng)范圍內(nèi)的可視區(qū)域；灰色為頭部最大轉(zhuǎn)動(dòng)時(shí)的可視區(qū)域。然而，人觀察事物的時(shí)候往往是頭部和眼睛同時(shí)轉(zhuǎn)動(dòng)的，所以轉(zhuǎn)動(dòng)頭部時(shí)的視野范圍應(yīng)該將前兩者疊加起來，得出下圖8：
黑色線框是指第一屏的顯示區(qū)域。
紅色虛線框是指第一屏的可視區(qū)域。
灰度越深的區(qū)域越靠近視覺中心，越容易被用戶發(fā)現(xiàn)，舒適度也越高。
紅框意外的區(qū)域都屬于探索區(qū)域，需要用戶轉(zhuǎn)動(dòng)頭部才能發(fā)現(xiàn)?；叶仍降吞剿鞯某杀揪驮礁?，舒適度也越低。
而此框架對(duì)應(yīng)在三維環(huán)境中是長(zhǎng)這樣子的，圖9。
此框架適合于以虛擬世界作為參考系的界面，通過此框架設(shè)計(jì)者就可以有依據(jù)地布局界面的結(jié)構(gòu)、順序和輕重，事半功倍。
框架的使用
說了半天，終于把框架介紹完了。那么這一框架如何使用呢？它又怎么能與三維UI開發(fā)連接起來呢？筆者將結(jié)合自身經(jīng)驗(yàn)，將使用框架前和使用框架后的流程對(duì)比來說明：
值得一提的是，人站立時(shí)的自然視線是往下約10°，坐著時(shí)的自然視線為往下15°~50°。如果有必要，可以斟酌地將使用這一修正量。
最后，感謝能閱讀到最后朋友，希望以上內(nèi)容對(duì)你有幫助。
