本系列文章旨在由淺入深、由理論到實踐系統地介紹了本團隊在近幾年的設計工作中的一些經驗總結和重點思考。本系列面向廣大設計師，不論你目前在做什麼領域/哪個端的設計，都可以了解到 VR 端和其他端的異同。希望給正在看文章的你帶來收穫。

團隊介紹：愛奇藝 XRD——愛奇藝 VR/AR/XR 設計團隊，目前主要負責愛奇藝 VR app 的設計工作（包括各個 VR 設備端和手機端）。

初步認識：空間里的界面

1. VR與其他端的區別

傳統的数字終端（手機、電腦、pad 等），用戶界面存在於二維的物理屏幕里，也就是在一個平面里。而屏幕和界面通常都是長方形的。

在 VR 中，有空間感的不僅僅是虛擬場景，用戶界面也是布局在三維空間里的。「屏幕邊界」的概念被打破了，設計師的畫板不再是各類手機不同尺寸的屏幕，而是一個「無限的」空間。界面本身也可以是三維的、打破傳統的，不再必須是一個個的長方形。

真正的 z 軸

這不同於在 2D 屏幕終端上，元素只擁有（x、y）坐標點的屬性，而並沒有一個 z 軸的概念。Z 軸，也就是深度概念，是通過設計師利用陰影、動效等視覺效果，「模擬」出來的前後關係。

在 VR 中看到的內容物（包括 UI 界面、場景、模型、視頻資源等）有真實概念的前後關係，每個物件擺在一個具體的（x、y、z）坐標點上。物件擁有絕對位置，物件和物件之間有相對位置，物件和 camera（指用戶觀測點）之間有一個具體的距離。

角度和曲面

除了 z 軸坐標，因為 VR 界面存在在空間里，所以還擁有一個屬性就是角度，這包含了在（x、y、z）三個軸上旋轉的角度。每一個物件也可以不再是一個平面，而是曲面的、三維的。

角度和位置共同決定了，當用戶看向某個物件時，這個物件的樣子。

「有多大？」

一個物件在 VR 中「有多大」很難簡單描述清楚。在傳統端只需標註某個 UI 元素的「大小」「間距」，描述單位是像素。而在設計 VR 時。需要從多個維度定義一個元素：「大小」「（x、y、z）位置」「（x、y、z）角度」。同時，「有多大」還跟用戶觀測點的位置息息相關。

2. VR基本術語認知

在介紹下文理論之前，讓我們先認識兩個常見的 VR 術語：

FOV：Field of View，視場角

視場角的大小決定了光學儀器的視野範圍。在 VR 中，視場角是 VR 硬件設備的一個屬性，設備 FOV 是一個固定值。

在我們團隊日常工作用語中，通常也用來指代用戶的視角範圍、界面元素的角度範圍（如，「某面板水平 FOV 是 60°」）

DOF：Degree of Freedom，自由度

物體在空間內具有 6 個自由度，即沿 x、y、z 三個直角坐標軸方向的移動自由度和繞這三個坐標軸的轉動自由度 。

• 3DOF 的手柄/頭顯：只有繞 x、y、z 軸的 3 個轉動自由度，沒有移動自由度，共 3 個自由度。通俗地說，3DOF 手柄可以檢測到手柄在手中轉動，但檢測不到手柄拿在右手還是左手。
• 6DOF 的手柄/頭顯：同時有繞 x、y、z 軸的 3 個轉動自由度，和三個軸方向的 3 個移動自由度，共 6 個自由度。通俗的說，是完全模擬真實物理世界的，可以看的手柄的實際位置和轉動方向。

理論：人眼的視野與視角

雖然說 VR 是一個 360° 全景三維空間，但對於目前大多數 VR 的使用場景來說，可供設計師創作的區域其實已被大大縮小了。

目前國內市面常見的可移動的 VR 設備（非主機類），如小米 VR 一體機、Pico 小怪獸系列、奇遇 VR、新上市的華為 VR Glass，標配均為 VR 頭顯配合3DOF手柄的硬件模式。對應此類 VR 硬件模式，常見的用戶使用場景為：「坐在椅子上+偶爾頭轉+身體不動」，好比「坐在沙发上看電視」。即使用戶使用一個 6DOF 的 VR 硬件，支持空間定位可以在房間里走動，但對於愛奇藝 VR 這類觀影類 app 來說，「坐在沙发上看電視」仍是主要的使用場景。

因此， 主要的操作界面還是需要放在「頭部固定情況下的可見範圍內 」。這樣用戶無需費勁轉頭，就可以看到主要內容、操作主要界面。

那麼，什麼是「頭部固定情況下的可見範圍 」呢？我們需要先學習一些人機工程學，來了解一些人眼 在不同情況下的可視範圍。

1. 水平視野（x軸）

（此圖的中心點 為用戶觀測點。）可以看出，

頭部固定的情況下，雙眼能看到的最大範圍約為 124°。但還要考慮到一個限制，目前 VR 硬件設備的 FOV 並未達到這個值，通常在 90°~100°。而其中，能看清晰的範圍只有眼前中心處的 60°。這相差的範圍可以理解為「餘光」，在人眼中成像是不清晰的，但仍在視野範圍里。——這個範圍極大程度上決定了每一個 UI 面板（包括其中的圖片、文字等）適合佔據的空間，也決定了 VR 中視頻播放窗的最小和最大值。

頭部轉動但身體不動的情況下，脖子舒適轉動能看到的範圍約有 154°，脖子轉動到最大程度能看到的範圍約有 204°。一些次要內容可以放在這個區域，用戶需要轉動頭部才能看到，但也不用太費力。

偏後方的區域範圍，必須移動身體才能看到，因此只能放一些「沒看見也沒關係」的內容。比如環境、彩蛋等。

2. 垂直視野（y軸）

在放鬆狀態下，頭部與眼睛的夾角約為 105°。也就是說，當頭部豎直向前時，眼睛會自然看向水平線下 15° 的位置。頭部固定僅眼球轉動時的最佳視野是（上）25° 和（下）30°。應將操作界面和主要觀看內容放在此範圍內。

垂直方向最大視野範圍是（上）50° 和（下）70°。這個範圍也是超過了 VR 硬件設備的 FOV。

另外，點頭比抬頭舒適。現實世界中，我們通常都是低頭狀態比抬頭多，比如玩手機、看書或看筆記本電腦時。所以在 VR 中，比起偏上方區域，應考慮更多利用起偏下方的區域。

3. 深度感知（z軸）

（見本章圖1）

0.5m 之內的物件，雙眼很難對焦，因此不要出現任何物體。（這個值對於全景 3D 視頻的拍攝 意義較大，應該盡量規避離鏡頭過近的物體出現）

有立體感的範圍在 0.5m~10m，這裏應該放置主要內容，尤其是可操作的內容。

10m~20m 之間，人眼仍能感覺出立體感，但有限。此範圍仍適合放置可以體現沉浸感的 3D 場景/模型。

超過 20m 的距離，人眼很難看出立體感了，物體和物體的前後關係不再明顯。因此適合放置「僅僅作為背景」存在的內容，也就是環境。（值得注意的是，因為反正也感知不出立體感，所以此範圍的環境可以處理為全景球（即一個球面），來代替 3D 模型，這大大降低了功效。）

4. 視角和視距

在現實世界中，每個信息媒介都有一個預設好的觀測距離。例如，握在手中的手機，距人眼大約 20cm。放在桌面上的電腦主機显示屏，距人眼大約60cm。客廳牆上的電視，距人眼大約 5m。在馬路另一頭的廣告牌，距人眼可達幾十米。

內容在預設好的觀測距離上，對應預設好的大小。例如，手機上的正文文字只有幾毫米大，而廣告牌上的文字需要好幾米大。

而在我們（觀測者）看來，這些文字都閱讀舒適。甚至其實看起來是「一樣大」的。

這是因為它們擁有同樣的視角——被視對象兩端點到眼球中心的兩條視線間的夾角。具體舉例來說，在 1m 處看一個 10cm 的物體，和 在 2m 處看一個20cm 的物體，在 3m 處看一個 30cm 的物體，這 3 個物體「看起來是一樣大的」，他們具有相同的視角。但我們仍然清楚地知曉誰近誰遠，是因為眼睛對焦在不同的距離上，也就是視距不一樣。

在 VR 中，不能再像移動端那樣用「像素」來度量一個物件的大小，而是通過「視角」。而視角是由物件的「大小」、「位置」、「旋轉角度」共同決定的。在「用戶觀測點不動」的使用場景下，「位置」實際上就是與觀測點的「視距」。

界面的「旋轉角度」應遵守一個原則——一個便於觀看和操作的界面，應該盡量垂直於視線、面向用戶觀測點。也就是說，當你確定好一個界面的「位置」后，就自然會有一個對其來說的「最佳旋轉角度」。

在 VR 中，一個物件的視角由其「大小」和「視距」兩個變量影響。當確定了「最佳視角」、「最小可閱讀視角」時，這就決定了「需要在不同距離上放置的信息內容，各自應該放多大」。

實踐：愛奇藝VR app 的假面布局

有了理論基礎后，接下來就是不斷實踐。

首先需要讀者了解的是，我們團隊設計的對象是愛奇藝 VR app——是在 VR 設備上的愛奇藝，是愛奇藝的第四個端。不僅包含愛奇藝全網 2D 內容，還擁有海量 VR 全景視頻、3D 大片。選片和觀影相關功能齊全。在體驗上主要打造有沉浸感的 VR 影院觀影，並突出 VR 特色內容。

本文章針對於 VR 一體機內的愛奇藝 VR app 設計展開討論，但我們同時也支持手機端 app，若感興趣可以在各大應用商店搜索下載。

我們學習的大量二手資料，給開展實際工作創造了基礎。然而最終設計效果其實是在反覆驗證、試錯后決定的。

當根據理論資料開始做實踐，卻發現實際效果差強人意時，我們的建議是——注重實踐。原因之一是，目前 VR 界從技術到產品設計仍舊處在實驗性階段，遠未達到移動端設計規範的成熟性，國內外的相關理論經驗總結，都還沒有絕對定論的程度。Oculus 的設計指南中，都是建議「實驗，實驗，再實驗」。之二是，能搜集到的二手資料，不完全是建立在「人帶着 VR 設備手握手柄」這種使用場景上，所以導致實際結果「不是那麼回事」。

1. 模塊化界面布局

基於「坐着不動+頭部轉動」的使用場景，和「自然視角偏下」、「低頭比抬頭舒適」的理論。

我們採取「從正視角出發，向左、右、下延伸」的布局思路。正視角放置當前界面的核心內容，左右兩側放置輔助信息內容；在必要時，可加入下部模塊。此類模塊化布局適用於所有界面，只是具體的面板尺寸、旋轉角度可以有所不同。根據每個界面需要承載的內容，因地制宜地合理規劃。

圖為我們使用的幾種常見 UI 布局。

2. 界面的FOV

基於人眼水平和垂直方向的視野範圍的理論，同時參考主要適配的硬件設備屬性（目前 VR 設備的 FOV 都小於人眼的視野範圍），即：

• 小米 VR 一體機：FOV≈90°（實際）
• Pico 小怪獸 2：FOV=101°（官方數據）
• 華為 VR Glass：FOV=90°（官方數據）

——我們決定了愛奇藝 VR 中主要界面的 FOV。

選片主界面 FOV （左-中-右 布局）

△ 「實際截圖」愛奇藝 VR 選片主界面

水平方向上：

• 中部面板：兩邊邊界在「頭部固定時清晰 FOV」內。
• 兩側面板：近中心的邊界均出現在「頭部固定時可見 FOV」內，即在默認可見的視角範圍內。兩邊邊界在「頭部輕微轉動時清晰 FOV」內，即用戶只需輕微左右轉動頭部便可查看全部內容。

垂直方向上：

• 面板在「頭部固定時清晰 FOV」內。用戶無需上下轉頭。
• 該頁面可左右滑動，用戶可以只關注中部的面板。

影廳播控頁面 FOV（左-下-右布局）

在愛奇藝 VR 中，觀看非全景的 2D/3D 視頻，用戶會置身於一個電影院影廳場景中。視頻畫面會出現在影廳屏幕上。

影廳播控頁面（操控台頁） 指播放視頻時（包括影廳場景影片和全景影片）的操作界面。

△ 「實際截圖」愛奇藝 VR 影廳播控頁面

影廳播控頁面採用「左-下-右」布局。包括 3 個功能區塊：相關推薦（左）、操控台播控（下）、詳情 & 選集（右）。該頁面在視頻屏幕（或全景視頻）的前方，靠單擊觸摸板來呼出和關閉。

這 3 個面板的邊界均在正視角「頭部固定時可見 FOV」之內，也就是保證了，當用戶注視影片本身並呼出該面板時，能看到所有面板。而用戶僅需輕微轉動頭部，就可看到完整的面板。

視頻播放窗的最大/最小值

視頻播放窗 即「影廳屏幕」，被我們設定了屏幕大小可調的功能，以此來適應不同用戶的觀影習慣。屏幕大小可在指定範圍內平滑調整。

屏幕最小值（50°）：完整的屏幕範圍都在「頭部固定情況下清晰 FOV」。

屏幕最大值（76°）：屏幕範圍在「頭部固定情況下可見 FOV」，即「充滿視野」。此狀態的觀感類似 IMAX 影廳。

垂直方向上：距水平線偏上而不是偏下。這裏其實和理論值發生了衝突。理論資料中，人眼最舒適的對焦點在「水平線向下 15°」。在老版本中，我們曾經將主 UI 和視頻屏幕都按理論值擺在了偏下方，但實際效果並未令人感到舒適，反倒明顯感知到「內容都偏下了」。這就是上文所說，「當理論導致實踐差強人意」時，我們選擇了不斷實驗，以實際效果為準。另外，本場景下方有影廳座椅等實際模型，並且還有操控台播控的 UI。綜上，影廳屏幕被放在了水平偏上的位置。

3. 深度距離與層級（z軸）

根據前文理論提到的，z 軸距離的合適範圍（0.5m~20m）比起水平和垂直 FOV 來說，數值範圍要大得多，也就是說可試驗的範圍很大。因此在界面距離這一點上，我們進行了大量反覆的實踐——最終決定了當前版本中各級頁面的深度層級和具體數值，如下圖：

跟隨式提示：

• 適合於臨時性的提示內容，幾秒后自動消失。如 toast。
• 與 camera（用戶觀測點）鎖定，跟隨 camera 移動。不可交互。
• 保證讓用戶注意到，又不至於遮擋視線。

阻斷式提示：

• 適用於必須讓用戶看到且用戶必須對其處理的提示。如彈窗。
• 正視角區域固定显示，不跟隨 camera 移動。有按鈕可以交互。
• 需要在其它操作界面之前。

輔助操作界面：

• 適用於重操作的界面，而非重展示的界面。如播控按鈕組、鍵盤，而非視頻列表。
• 通常在平視視線偏下的位置。（模擬「在手邊」的位置）

減少眼球調焦，縮小距離差

值得注意的是，在我們的老版本中，不同層級的界面曾經被擺放的距離差距很大。如，toast 在 1.75m，主 UI 在 3m，而視頻屏幕在 12m。之所以改動至上圖數值，主要是為了達到「在看向不同層級界面時，盡量減少眼球調焦的程度」的目的。

眼球在看向不同距離上的內容時，需要對焦到不同的平面，距離差距越大，眼球需要調整得越大。如果頻率高的話，容易導致（一部分）人的眼球疲勞。

Z軸上的獲焦效果

VR 獨有的「z 軸」，不僅允許了界面可以被放在不同距離上，還支持了利用 z 軸上的位移和旋轉 來表達獲焦效果。控件被獲焦時，只需要在 z 軸上輕微的位移或輕微的角度旋轉，便可體現出與眾不同的有趣效果。

拓展閱讀：

閱讀文章 >>

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5登錄_愛奇藝 VR 設計實戰案例：空間布局篇