2020-4-11 資深UI設(shè)計(jì)者
本系列文章旨在由淺入深、由理論到實(shí)踐系統(tǒng)地介紹了本團(tuán)隊(duì)在近幾年的設(shè)計(jì)工作中的一些經(jīng)驗(yàn)總結(jié)和重點(diǎn)思考。本系列面向廣大設(shè)計(jì)師,不論你目前在做什么領(lǐng)域/哪個(gè)端的設(shè)計(jì),都可以了解到 VR 端和其他端的異同。希望給正在看文章的你帶來(lái)收獲。
團(tuán)隊(duì)介紹:愛(ài)奇藝 XRD——愛(ài)奇藝 VR/AR/XR 設(shè)計(jì)團(tuán)隊(duì),目前主要負(fù)責(zé)愛(ài)奇藝 VR app 的設(shè)計(jì)工作(包括各個(gè) VR 設(shè)備端和手機(jī)端)。
傳統(tǒng)的數(shù)字終端(手機(jī)、電腦、pad 等),用戶界面存在于二維的物理屏幕里,也就是在一個(gè)平面里。而屏幕和界面通常都是長(zhǎng)方形的。
在 VR 中,有空間感的不僅僅是虛擬場(chǎng)景,用戶界面也是布局在三維空間里的。「屏幕邊界」的概念被打破了,設(shè)計(jì)師的畫板不再是各類手機(jī)不同尺寸的屏幕,而是一個(gè)「無(wú)限的」空間。界面本身也可以是三維的、打破傳統(tǒng)的,不再必須是一個(gè)個(gè)的長(zhǎng)方形。
真正的 z 軸
這不同于在 2D 屏幕終端上,元素只擁有(x、y)坐標(biāo)點(diǎn)的屬性,而并沒(méi)有一個(gè) z 軸的概念。Z 軸,也就是深度概念,是通過(guò)設(shè)計(jì)師利用陰影、動(dòng)效等視覺(jué)效果,「模擬」出來(lái)的前后關(guān)系。
在 VR 中看到的內(nèi)容物(包括 UI 界面、場(chǎng)景、模型、視頻資源等)有真實(shí)概念的前后關(guān)系,每個(gè)物件擺在一個(gè)具體的(x、y、z)坐標(biāo)點(diǎn)上。物件擁有絕對(duì)位置,物件和物件之間有相對(duì)位置,物件和 camera(指用戶觀測(cè)點(diǎn))之間有一個(gè)具體的距離。
角度和曲面
除了 z 軸坐標(biāo),因?yàn)?VR 界面存在在空間里,所以還擁有一個(gè)屬性就是角度,這包含了在(x、y、z)三個(gè)軸上旋轉(zhuǎn)的角度。每一個(gè)物件也可以不再是一個(gè)平面,而是曲面的、三維的。
角度和位置共同決定了,當(dāng)用戶看向某個(gè)物件時(shí),這個(gè)物件的樣子。
「有多大?」
一個(gè)物件在 VR 中「有多大」很難簡(jiǎn)單描述清楚。在傳統(tǒng)端只需標(biāo)注某個(gè) UI 元素的「大小」「間距」,描述單位是像素。而在設(shè)計(jì) VR 時(shí)。需要從多個(gè)維度定義一個(gè)元素:「大小」「(x、y、z)位置」「(x、y、z)角度」。同時(shí),「有多大」還跟用戶觀測(cè)點(diǎn)的位置息息相關(guān)。
在介紹下文理論之前,讓我們先認(rèn)識(shí)兩個(gè)常見(jiàn)的 VR 術(shù)語(yǔ):
FOV:Field of View,視場(chǎng)角
視場(chǎng)角的大小決定了光學(xué)儀器的視野范圍。在 VR 中,視場(chǎng)角是 VR 硬件設(shè)備的一個(gè)屬性,設(shè)備 FOV 是一個(gè)固定值。
在我們團(tuán)隊(duì)日常工作用語(yǔ)中,通常也用來(lái)指代用戶的視角范圍、界面元素的角度范圍(如,「某面板水平 FOV 是 60°」)
DOF:Degree of Freedom,自由度
物體在空間內(nèi)具有 6 個(gè)自由度,即沿 x、y、z 三個(gè)直角坐標(biāo)軸方向的移動(dòng)自由度和繞這三個(gè)坐標(biāo)軸的轉(zhuǎn)動(dòng)自由度 。
雖然說(shuō) VR 是一個(gè) 360° 全景三維空間,但對(duì)于目前大多數(shù) VR 的使用場(chǎng)景來(lái)說(shuō),可供設(shè)計(jì)師創(chuàng)作的區(qū)域其實(shí)已被大大縮小了。
目前國(guó)內(nèi)市面常見(jiàn)的可移動(dòng)的 VR 設(shè)備(非主機(jī)類),如小米 VR 一體機(jī)、Pico 小怪獸系列、奇遇 VR、新上市的華為 VR Glass,標(biāo)配均為 VR 頭顯配合3DOF手柄的硬件模式。對(duì)應(yīng)此類 VR 硬件模式,常見(jiàn)的用戶使用場(chǎng)景為:「坐在椅子上+偶爾頭轉(zhuǎn)+身體不動(dòng)」,好比「坐在沙發(fā)上看電視」。即使用戶使用一個(gè) 6DOF 的 VR 硬件,支持空間定位可以在房間里走動(dòng),但對(duì)于愛(ài)奇藝 VR 這類觀影類 app 來(lái)說(shuō),「坐在沙發(fā)上看電視」仍是主要的使用場(chǎng)景。
因此, 主要的操作界面還是需要放在「頭部固定情況下的可見(jiàn)范圍內(nèi) 」。這樣用戶無(wú)需費(fèi)勁轉(zhuǎn)頭,就可以看到主要內(nèi)容、操作主要界面。
那么,什么是「頭部固定情況下的可見(jiàn)范圍 」呢?我們需要先學(xué)習(xí)一些人機(jī)工程學(xué),來(lái)了解一些人眼 在不同情況下的可視范圍。
(此圖的中心點(diǎn) 為用戶觀測(cè)點(diǎn)。)可以看出,
頭部固定的情況下,雙眼能看到的最大范圍約為 124°。但還要考慮到一個(gè)限制,目前 VR 硬件設(shè)備的 FOV 并未達(dá)到這個(gè)值,通常在 90°~100°。而其中,能看清晰的范圍只有眼前中心處的 60°。這相差的范圍可以理解為「余光」,在人眼中成像是不清晰的,但仍在視野范圍里。——這個(gè)范圍極大程度上決定了每一個(gè) UI 面板(包括其中的圖片、文字等)適合占據(jù)的空間,也決定了 VR 中視頻播放窗的最小和最大值。
頭部轉(zhuǎn)動(dòng)但身體不動(dòng)的情況下,脖子舒適轉(zhuǎn)動(dòng)能看到的范圍約有 154°,脖子轉(zhuǎn)動(dòng)到能看到的范圍約有 204°。一些次要內(nèi)容可以放在這個(gè)區(qū)域,用戶需要轉(zhuǎn)動(dòng)頭部才能看到,但也不用太費(fèi)力。
偏后方的區(qū)域范圍,必須移動(dòng)身體才能看到,因此只能放一些「沒(méi)看見(jiàn)也沒(méi)關(guān)系」的內(nèi)容。比如環(huán)境、彩蛋等。
在放松狀態(tài)下,頭部與眼睛的夾角約為 105°。也就是說(shuō),當(dāng)頭部豎直向前時(shí),眼睛會(huì)自然看向水平線下 15° 的位置。頭部固定僅眼球轉(zhuǎn)動(dòng)時(shí)的最佳視野是(上)25° 和(下)30°。應(yīng)將操作界面和主要觀看內(nèi)容放在此范圍內(nèi)。
垂直方向最大視野范圍是(上)50° 和(下)70°。這個(gè)范圍也是超過(guò)了 VR 硬件設(shè)備的 FOV。
另外,點(diǎn)頭比抬頭舒適。現(xiàn)實(shí)世界中,我們通常都是低頭狀態(tài)比抬頭多,比如玩手機(jī)、看書或看筆記本電腦時(shí)。所以在 VR 中,比起偏上方區(qū)域,應(yīng)考慮更多利用起偏下方的區(qū)域。
(見(jiàn)本章圖1)
0.5m 之內(nèi)的物件,雙眼很難對(duì)焦,因此不要出現(xiàn)任何物體。(這個(gè)值對(duì)于全景 3D 視頻的拍攝 意義較大,應(yīng)該盡量規(guī)避離鏡頭過(guò)近的物體出現(xiàn))
有立體感的范圍在 0.5m~10m,這里應(yīng)該放置主要內(nèi)容,尤其是可操作的內(nèi)容。
10m~20m 之間,人眼仍能感覺(jué)出立體感,但有限。此范圍仍適合放置可以體現(xiàn)沉浸感的 3D 場(chǎng)景/模型。
超過(guò) 20m 的距離,人眼很難看出立體感了,物體和物體的前后關(guān)系不再明顯。因此適合放置「僅僅作為背景」存在的內(nèi)容,也就是環(huán)境。(值得注意的是,因?yàn)榉凑哺兄怀隽Ⅲw感,所以此范圍的環(huán)境可以處理為全景球(即一個(gè)球面),來(lái)代替 3D 模型,這大大降低了功效。)
在現(xiàn)實(shí)世界中,每個(gè)信息媒介都有一個(gè)預(yù)設(shè)好的觀測(cè)距離。例如,握在手中的手機(jī),距人眼大約 20cm。放在桌面上的電腦主機(jī)顯示屏,距人眼大約60cm??蛷d墻上的電視,距人眼大約 5m。在馬路另一頭的廣告牌,距人眼可達(dá)幾十米。
內(nèi)容在預(yù)設(shè)好的觀測(cè)距離上,對(duì)應(yīng)預(yù)設(shè)好的大小。例如,手機(jī)上的正文文字只有幾毫米大,而廣告牌上的文字需要好幾米大。
而在我們(觀測(cè)者)看來(lái),這些文字都閱讀舒適。甚至其實(shí)看起來(lái)是「一樣大」的。
這是因?yàn)樗鼈儞碛型瑯拥囊暯恰灰晫?duì)象兩端點(diǎn)到眼球中心的兩條視線間的夾角。具體舉例來(lái)說(shuō),在 1m 處看一個(gè) 10cm 的物體,和 在 2m 處看一個(gè)20cm 的物體,在 3m 處看一個(gè) 30cm 的物體,這 3 個(gè)物體「看起來(lái)是一樣大的」,他們具有相同的視角。但我們?nèi)匀磺宄刂獣哉l(shuí)近誰(shuí)遠(yuǎn),是因?yàn)檠劬?duì)焦在不同的距離上,也就是視距不一樣。
在 VR 中,不能再像移動(dòng)端那樣用「像素」來(lái)度量一個(gè)物件的大小,而是通過(guò)「視角」。而視角是由物件的「大小」、「位置」、「旋轉(zhuǎn)角度」共同決定的。在「用戶觀測(cè)點(diǎn)不動(dòng)」的使用場(chǎng)景下,「位置」實(shí)際上就是與觀測(cè)點(diǎn)的「視距」。
界面的「旋轉(zhuǎn)角度」應(yīng)遵守一個(gè)原則——一個(gè)便于觀看和操作的界面,應(yīng)該盡量垂直于視線、面向用戶觀測(cè)點(diǎn)。也就是說(shuō),當(dāng)你確定好一個(gè)界面的「位置」后,就自然會(huì)有一個(gè)對(duì)其來(lái)說(shuō)的「最佳旋轉(zhuǎn)角度」。
在 VR 中,一個(gè)物件的視角由其「大小」和「視距」兩個(gè)變量影響。當(dāng)確定了「最佳視角」、「最小可閱讀視角」時(shí),這就決定了「需要在不同距離上放置的信息內(nèi)容,各自應(yīng)該放多大」。
有了理論基礎(chǔ)后,接下來(lái)就是不斷實(shí)踐。
首先需要讀者了解的是,我們團(tuán)隊(duì)設(shè)計(jì)的對(duì)象是愛(ài)奇藝 VR app——是在 VR 設(shè)備上的愛(ài)奇藝,是愛(ài)奇藝的第四個(gè)端。不僅包含愛(ài)奇藝全網(wǎng) 2D 內(nèi)容,還擁有海量 VR 全景視頻、3D 大片。選片和觀影相關(guān)功能齊全。在體驗(yàn)上主要打造有沉浸感的 VR 影院觀影,并突出 VR 特色內(nèi)容。
本文章針對(duì)于 VR 一體機(jī)內(nèi)的愛(ài)奇藝 VR app 設(shè)計(jì)展開(kāi)討論,但我們同時(shí)也支持手機(jī)端 app,若感興趣可以在各大應(yīng)用商店搜索下載。
我們學(xué)習(xí)的大量二手資料,給開(kāi)展實(shí)際工作創(chuàng)造了基礎(chǔ)。然而最終設(shè)計(jì)效果其實(shí)是在反復(fù)驗(yàn)證、試錯(cuò)后決定的。
當(dāng)根據(jù)理論資料開(kāi)始做實(shí)踐,卻發(fā)現(xiàn)實(shí)際效果差強(qiáng)人意時(shí),我們的建議是——注重實(shí)踐。原因之一是,目前 VR 界從技術(shù)到產(chǎn)品設(shè)計(jì)仍舊處在實(shí)驗(yàn)性階段,遠(yuǎn)未達(dá)到移動(dòng)端設(shè)計(jì)規(guī)范的成熟性,國(guó)內(nèi)外的相關(guān)理論經(jīng)驗(yàn)總結(jié),都還沒(méi)有絕對(duì)定論的程度。Oculus 的設(shè)計(jì)指南中,都是建議「實(shí)驗(yàn),實(shí)驗(yàn),再實(shí)驗(yàn)」。之二是,能搜集到的二手資料,不完全是建立在「人帶著 VR 設(shè)備手握手柄」這種使用場(chǎng)景上,所以導(dǎo)致實(shí)際結(jié)果「不是那么回事」。
基于「坐著不動(dòng)+頭部轉(zhuǎn)動(dòng)」的使用場(chǎng)景,和「自然視角偏下」、「低頭比抬頭舒適」的理論。
我們采取「從正視角出發(fā),向左、右、下延伸」的布局思路。正視角放置當(dāng)前界面的核心內(nèi)容,左右兩側(cè)放置輔助信息內(nèi)容;在必要時(shí),可加入下部模塊。此類模塊化布局適用于所有界面,只是具體的面板尺寸、旋轉(zhuǎn)角度可以有所不同。根據(jù)每個(gè)界面需要承載的內(nèi)容,因地制宜地合理規(guī)劃。
圖為我們使用的幾種常見(jiàn) UI 布局。
基于人眼水平和垂直方向的視野范圍的理論,同時(shí)參考主要適配的硬件設(shè)備屬性(目前 VR 設(shè)備的 FOV 都小于人眼的視野范圍),即:
——我們決定了愛(ài)奇藝 VR 中主要界面的 FOV。
選片主界面 FOV (左-中-右 布局)
△ 「實(shí)際截圖」愛(ài)奇藝 VR 選片主界面
水平方向上:
垂直方向上:
影廳播控頁(yè)面 FOV(左-下-右布局)
在愛(ài)奇藝 VR 中,觀看非全景的 2D/3D 視頻,用戶會(huì)置身于一個(gè)電影院影廳場(chǎng)景中。視頻畫面會(huì)出現(xiàn)在影廳屏幕上。
影廳播控頁(yè)面(操控臺(tái)頁(yè)) 指播放視頻時(shí)(包括影廳場(chǎng)景影片和全景影片)的操作界面。
△ 「實(shí)際截圖」愛(ài)奇藝 VR 影廳播控頁(yè)面
影廳播控頁(yè)面采用「左-下-右」布局。包括 3 個(gè)功能區(qū)塊:相關(guān)推薦(左)、操控臺(tái)播控(下)、詳情 & 選集(右)。該頁(yè)面在視頻屏幕(或全景視頻)的前方,靠單擊觸摸板來(lái)呼出和關(guān)閉。
這 3 個(gè)面板的邊界均在正視角「頭部固定時(shí)可見(jiàn) FOV」之內(nèi),也就是保證了,當(dāng)用戶注視影片本身并呼出該面板時(shí),能看到所有面板。而用戶僅需輕微轉(zhuǎn)動(dòng)頭部,就可看到完整的面板。
視頻播放窗的最大/最小值
視頻播放窗 即「影廳屏幕」,被我們?cè)O(shè)定了屏幕大小可調(diào)的功能,以此來(lái)適應(yīng)不同用戶的觀影習(xí)慣。屏幕大小可在指定范圍內(nèi)平滑調(diào)整。
屏幕最小值(50°):完整的屏幕范圍都在「頭部固定情況下清晰 FOV」。
屏幕最大值(76°):屏幕范圍在「頭部固定情況下可見(jiàn) FOV」,即「充滿視野」。此狀態(tài)的觀感類似 IMAX 影廳。
垂直方向上:距水平線偏上而不是偏下。這里其實(shí)和理論值發(fā)生了沖突。理論資料中,人眼最舒適的對(duì)焦點(diǎn)在「水平線向下 15°」。在老版本中,我們?cè)?jīng)將主 UI 和視頻屏幕都按理論值擺在了偏下方,但實(shí)際效果并未令人感到舒適,反倒明顯感知到「內(nèi)容都偏下了」。這就是上文所說(shuō),「當(dāng)理論導(dǎo)致實(shí)踐差強(qiáng)人意」時(shí),我們選擇了不斷實(shí)驗(yàn),以實(shí)際效果為準(zhǔn)。另外,本場(chǎng)景下方有影廳座椅等實(shí)際模型,并且還有操控臺(tái)播控的 UI。綜上,影廳屏幕被放在了水平偏上的位置。
根據(jù)前文理論提到的,z 軸距離的合適范圍(0.5m~20m)比起水平和垂直 FOV 來(lái)說(shuō),數(shù)值范圍要大得多,也就是說(shuō)可試驗(yàn)的范圍很大。因此在界面距離這一點(diǎn)上,我們進(jìn)行了大量反復(fù)的實(shí)踐——最終決定了當(dāng)前版本中各級(jí)頁(yè)面的深度層級(jí)和具體數(shù)值,如下圖:
跟隨式提示:
阻斷式提示:
輔助操作界面:
減少眼球調(diào)焦,縮小距離差
值得注意的是,在我們的老版本中,不同層級(jí)的界面曾經(jīng)被擺放的距離差距很大。如,toast 在 1.75m,主 UI 在 3m,而視頻屏幕在 12m。之所以改動(dòng)至上圖數(shù)值,主要是為了達(dá)到「在看向不同層級(jí)界面時(shí),盡量減少眼球調(diào)焦的程度」的目的。
眼球在看向不同距離上的內(nèi)容時(shí),需要對(duì)焦到不同的平面,距離差距越大,眼球需要調(diào)整得越大。如果頻率高的話,容易導(dǎo)致(一部分)人的眼球疲勞。
Z軸上的獲焦效果
VR 獨(dú)有的「z 軸」,不僅允許了界面可以被放在不同距離上,還支持了利用 z 軸上的位移和旋轉(zhuǎn) 來(lái)表達(dá)獲焦效果??丶猾@焦時(shí),只需要在 z 軸上輕微的位移或輕微的角度旋轉(zhuǎn),便可體現(xiàn)出與眾不同的有趣效果。
文章來(lái)源:優(yōu)設(shè) 作者:愛(ài)奇藝XRD
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com