明年蘋果最新的 XR 產(chǎn)品 vision pro 就要開賣了，是否會(huì)引發(fā)一輪新的設(shè)計(jì)趨勢(shì)呢？在軟件設(shè)計(jì)領(lǐng)域，蘋果一直是引領(lǐng)趨勢(shì)的那個(gè)，所以我們必須準(zhǔn)備起來(lái)，別等火了再來(lái)學(xué)。

在早期移動(dòng)端設(shè)計(jì)，大家最需要學(xué)習(xí)，也是最難的部分可能就是各種適配了，那么在 XR 領(lǐng)域最開始的時(shí)候，可能會(huì)遇到同樣的問(wèn)題，甚至更復(fù)雜。我想新開一個(gè)系列，詳細(xì)講講這方面的知識(shí)。

在做 XR 項(xiàng)目設(shè)計(jì)的過(guò)程中，容易被里面各種技術(shù)名詞，單位搞混，所以有必要深入研究，徹底搞明白。這篇文章一定要收藏起來(lái)，方便將來(lái)用到。

從初次接觸 XR 到現(xiàn)在，我在工作中遇到的比較多的概念名詞大概有下面這些，我將逐一和大家講解。后續(xù)也會(huì)把各單位之間的換算關(guān)系，在實(shí)際項(xiàng)目中的運(yùn)用經(jīng)驗(yàn)做一次總結(jié)分享。

1. VR/AR/MR/XR/HMD
2. 物理尺寸/像素尺寸
3. DMM
4. 3DoF/6DoF
5. DPI/PPI/PPD
6. 分辨率/像素密度
7. FOV/視場(chǎng)角
8. 眼盒/甜蜜點(diǎn)
9. 色域
10. VST

一、VR/AR/MR/XR/HMD

這幾個(gè)算是比較常見(jiàn)的概念，但有些讀者朋友可能沒(méi)接觸相關(guān)領(lǐng)域，還分不清。所以，我想先把這幾個(gè)大的概念講清楚，可能大家會(huì)更容易理解一些。

1. VR

VR（ Virtual Reality ）指"虛擬現(xiàn)實(shí)"，通過(guò)佩戴 VR 頭顯進(jìn)入到虛擬世界當(dāng)中，達(dá)到一種沉浸式體驗(yàn)。這個(gè)概念最早是在上世紀(jì) 80 年代被提出。

有一個(gè)比較好區(qū)分的點(diǎn)是：一個(gè)應(yīng)用只要能支持用戶坐在原地使用，基本就適合 VR。因?yàn)檫@意味著用戶在使用過(guò)程中可以不依賴環(huán)境，可以不跟環(huán)境打交道，可以跟環(huán)境完全斷開聯(lián)系。

VR 是全虛擬的，在設(shè)計(jì)上一般強(qiáng)調(diào)的是沉浸感。

VR 領(lǐng)域的代表產(chǎn)品有：PICO 4, PICO Neo3 Quest 2, Quest Pro, Quest 3 Vision Pro

2. AR

AR（Augmented Reality）指"增強(qiáng)現(xiàn)實(shí)"，簡(jiǎn)單講就是通過(guò)手機(jī)、電腦等媒介，看到的虛擬場(chǎng)景與現(xiàn)實(shí)場(chǎng)景的疊加效果。我之前也做過(guò)這種 AR 效果的設(shè)計(jì)，可以看之前的文章《8 個(gè)步驟復(fù)盤爆款 QQ「AR 翅膀特效」的設(shè)計(jì)過(guò)程》，現(xiàn)在還是 QQ 小世界里的熱門道具。

最簡(jiǎn)單的理解，AR 只是在 VR 的基礎(chǔ)上，支持了透視，把虛擬環(huán)境換成現(xiàn)實(shí)環(huán)境。讓用戶在獨(dú)立使用應(yīng)用的同時(shí)，能保留對(duì)周邊環(huán)境的感知。從而能與身邊的人保持交流，能隨意移動(dòng)，能保留周邊環(huán)境的氛圍。

除了透視，還有更高級(jí)的能力，能支持應(yīng)用把虛擬內(nèi)容放置在特定位置。比如在空間錨點(diǎn)上綁定一個(gè) 3D 道具、在現(xiàn)實(shí)環(huán)境的特定對(duì)象旁邊顯示提示信息。

AR 領(lǐng)域的代表產(chǎn)品有：HoloLens、Magic Leap

3. MR

MR（ Mixed Reality ）指"混合現(xiàn)實(shí)"，就是將真實(shí)世界和虛擬世界進(jìn)行融合，來(lái)產(chǎn)生一個(gè)新的、實(shí)時(shí)的可視化環(huán)境。MR 設(shè)備就是基于 VR 的光學(xué)技術(shù)，在保留所有 VR 功能的基礎(chǔ)上，實(shí)現(xiàn)全功能的 AR。

MR 區(qū)別于 AR，不只是疊加在現(xiàn)實(shí)世界上，它還能與現(xiàn)實(shí)世界中的特定空間、事物互相作用。

看起來(lái) AR 和 MR 有點(diǎn)像，要如何區(qū)分 AR 和 MR？

主要有 2 個(gè)點(diǎn)：一個(gè)是虛擬物體的相對(duì)位置，是否隨設(shè)備的移動(dòng)而移動(dòng)。如果是，就是 AR 設(shè)備；如果不是，就是 MR 設(shè)備。

另一個(gè)是在理想狀態(tài)下，虛擬物體與真實(shí)物體是否能被區(qū)分。

AR 設(shè)備創(chuàng)造的虛擬物體，是可以明顯看出是虛擬的；而 MR 設(shè)備直接向視網(wǎng)膜投射整個(gè) 4 維光場(chǎng)，用戶看到的虛擬物體和真實(shí)物體幾乎是無(wú)法區(qū)分的。

MR 領(lǐng)域的代表產(chǎn)品有：PICO 4，Quest Pro, Quest 3 Vision Pro

4. XR

XR 泛指虛擬現(xiàn)實(shí)這個(gè)領(lǐng)域發(fā)展方向中出現(xiàn)的各種"R"結(jié)尾的概念和設(shè)備類型。

除了 VR/AR/MR，還有手機(jī) VR（Mobile VR）、手機(jī) AR（Mobile AR）、PC VR、有線 VR（Tethered VR）、一體機(jī) VR（Standalone VR）等等。

XR 相當(dāng)于_ Reality，其中的 X 有任意的意思。也可以認(rèn)為 XR 是 Extended Reality（擴(kuò)展顯示）的縮寫。

因?yàn)?XR 的本質(zhì)，就是把物理現(xiàn)實(shí)世界和數(shù)字虛擬世界連接融合在一起，實(shí)現(xiàn)物理現(xiàn)實(shí)和數(shù)字虛擬之間的互動(dòng)。

5. HMD

HMD（Head-Mounted DISPlay），最早有立體顯示功能、且支持姿態(tài)檢測(cè)的頭戴顯示器，中文簡(jiǎn)稱為頭顯，誕生于 1968 年。所以，咱們平時(shí)說(shuō)的各種頭顯設(shè)備，都可以叫 HMD。

二、物理尺寸/像素尺寸

1. 物理尺寸

在 XR 領(lǐng)域，物理尺寸表示在虛擬環(huán)境中的圖像或內(nèi)容的實(shí)際物理大小。計(jì)算單位一般是 mm，cm，m，inch（英寸）。其中，1 英寸=2.54 厘米。

2. 像素尺寸

這個(gè)做視覺(jué)的同學(xué)應(yīng)該都很熟悉了，它表示圖像寬或高的像素?cái)?shù)量。單位是 px。

這兩個(gè)單位本身不難，但在 XR 領(lǐng)域，經(jīng)常需要討論這 2 個(gè)單位運(yùn)用的場(chǎng)景，因?yàn)?XR 場(chǎng)景存在深度，在設(shè)計(jì)的時(shí)候需要考慮不同深度，界面 UI 要如何適配。后面會(huì)提到一個(gè) DMM 的單位就是為了解決適配問(wèn)題的。

三、DMM

DMM（distance-independent millimeter，也叫距離無(wú)關(guān)毫米）是由 Google Daydream 團(tuán)隊(duì)于 2017 年提出的概念單位。具體介紹可以參考 google 官方介紹 https://www.youtube.com/watch?v=ES9jArHRFHQ

這個(gè)概念的提出很好的解決了開發(fā)與設(shè)計(jì)如何對(duì) UI 達(dá)成統(tǒng)一的問(wèn)題，設(shè)計(jì)只需要做一套設(shè)計(jì)稿，便可做到在任何距離上看都能顯示同樣大小的界面。

有些人好奇，為什么在 XR 上會(huì)有適配的問(wèn)題。這是因?yàn)?XR UI 有深度變化。大家可以把 XR 里的界面想象成一塊屏幕，這個(gè)屏幕是可遠(yuǎn)可近的，由于近大遠(yuǎn)小的關(guān)系，如果想要看起來(lái)保持大小一致，那么就會(huì)要求 UI 做相應(yīng)的縮放。想想手機(jī)屏幕因?yàn)槌叽绮煌夹枰鲞m配，那這里的適配就顯得更加復(fù)雜。

基于 DMM 的定義，我們把在 1m 遠(yuǎn)距離下，觀看 1mm 長(zhǎng)度的物體，定義為 1dmm。所以，目距 2m 遠(yuǎn)的 2mm 長(zhǎng)度，也為 1dmm，3m 遠(yuǎn)的 3mm 長(zhǎng)度，也為 1dmm。

舉個(gè)例子，一個(gè)寬 400dmm, 高 480dmm 的物體，就表示在目距 1m 遠(yuǎn)，它的寬是 400mm，高是 480mm。當(dāng)把它移動(dòng)到目距 2m 的位置，為了大小看起來(lái)一樣，它的寬則需要變成 800mm，高變成 960mm。同理，在 3m 遠(yuǎn)時(shí)，寬高分別得變成 1200mm 和 1440mm。

這樣，當(dāng)我們?cè)O(shè)計(jì)了一個(gè) UI 元素，即使在 VR 中需要調(diào)整它的距離，也能快速知道如何縮放這個(gè) UI 元素。dmm 解決了 2D，3D 空間組件尺寸的換算問(wèn)題。
下圖是由 Pavel Tsenev 使用 DMM 做的 UI 案例，很好的詮釋了 DMM 的思想。

使用 DMM 的思想對(duì) VR、AR 應(yīng)用做 UI 上的設(shè)計(jì)，為開發(fā)者與設(shè)計(jì)師之間的協(xié)作和溝通帶來(lái)極大的方便，一次設(shè)計(jì)，一勞永逸，不需要考慮因距離不同而該如何重新設(shè)置 UI 大小的問(wèn)題，也不需要做其他的轉(zhuǎn)換，設(shè)計(jì)稿是多大，Unity 開發(fā)中對(duì)應(yīng)的畫布就設(shè)置多大，相當(dāng)舒服了。

四、3DoF/6DoF

"DoF"是自由度（degrees of freedom）的意思。一款 XR 設(shè)備支持多少個(gè)自由度，代表了它支持的姿態(tài)動(dòng)作類型，代表了它從現(xiàn)實(shí)環(huán)境中識(shí)別和重建這些自然交互動(dòng)作的能力。

1. 3DoF 就是 3 個(gè)自由度，就是使用者能自由轉(zhuǎn)動(dòng)。

設(shè)備能檢測(cè)到頭部在 3 個(gè)坐標(biāo)軸方向上的轉(zhuǎn)動(dòng)，帶來(lái)視野角度的變化。

這三個(gè)自由度分別是：

轉(zhuǎn)動(dòng)過(guò)程中，使用者在空間中的位置是保持不變的。

2. 6DoF 就是 6 個(gè)自由度，是在 3 個(gè)自由度的基礎(chǔ)上，增加了對(duì)自由平移的支持。

設(shè)備能感知到使用者的身體在三個(gè)坐標(biāo)軸方向上的平移，允許做出更多動(dòng)作，比如走動(dòng)和跳躍。

新增的三個(gè)自由度分別是：

使用者可以用自然方式在空間中移動(dòng)。

五、DPI/PPI/PPD

這幾個(gè)概念很容易搞混，我把它放在一起解釋

1. DPI

DPI （dots per inch）每英寸點(diǎn)數(shù)，是指物理打印機(jī)的分辨率值。

DPI 更多指的是打印物料方面的清晰度。比如書籍和雜志通常使用 150 DPI，報(bào)紙通常使用 85 DPI，沖洗照片用 200DPI，封面印刷用 300DPI。

2. PPI

圖像分辨率指圖像中存儲(chǔ)的信息量。這種分辨率有多種衡量方法，典型的是以每英寸的像素?cái)?shù)（PPI，pixel per inch）來(lái)衡量。圖像分辨率決定了圖像輸出的質(zhì)量，圖像分辨率和圖像尺寸(高寬)的值一起決定了文件的大小。

如果保持圖像尺寸不變，將圖像分辨率提高一倍，則其文件大小增大為原來(lái)的四倍。

計(jì)算公式為：

(X：長(zhǎng)度像素?cái)?shù)；Y：寬度像素?cái)?shù)；Z：屏幕尺寸即對(duì)角線長(zhǎng)度)

視網(wǎng)膜（Retina）屏幕是喬布斯"發(fā)明"的一個(gè)營(yíng)銷術(shù)語(yǔ)。蘋果這個(gè)術(shù)語(yǔ)用在 iphone 4 手機(jī)上，自此一直沿用，它將 960×640 的像素壓縮到一個(gè) 3.5 英寸的顯示屏內(nèi)。也就是說(shuō)，該屏幕的像素密度達(dá)到 326 像素/英寸（ppi），稱之為"視網(wǎng)膜屏幕"。

3. PPD

PPD (Pixels Per Degree) 角分辨率 ，也叫空間分辨率，指視場(chǎng)角中的平均每 1° 夾角內(nèi)填充的像素點(diǎn)的數(shù)量。

對(duì)于頭顯來(lái)說(shuō)，PPD 數(shù)值越大，就說(shuō)明對(duì)細(xì)節(jié)的顯示越精細(xì)，用戶對(duì)顯示畫面的感受就越清晰。

視野的單位區(qū)域可用平均 1°視場(chǎng)角 FOV 的區(qū)域來(lái)表示，而對(duì)于頭顯產(chǎn)品來(lái)說(shuō)平均 1°視場(chǎng)角 FOV 的區(qū)域即為以 PPD 為直徑的圓。通過(guò)圓的面積公式可以得出：平均 1°視場(chǎng)角 FOV 的區(qū)域的像素點(diǎn)數(shù)量與 PPD 的值的平方成正比。

所以 PPD 越大，人眼視野中單位區(qū)域的畫面內(nèi)填充的像素點(diǎn)的數(shù)量越多，用戶對(duì)顯示畫面的感受就越清晰。PPD 提高一倍，則代表著同一視野區(qū)域內(nèi)填充的像素點(diǎn)數(shù)量增加為原來(lái)的 4 倍。

計(jì)算公式：

PPD = 線段 ab ÷ FOV（線段 ab：?jiǎn)窝鄢上裢饨訄A的直徑像素點(diǎn)數(shù)量；FOV：視場(chǎng)角）

PPD 也不是越高越好，超過(guò) 45，人眼就比較難分辨出顆粒感，觀感上就已經(jīng)十分清晰了。

PPD 與成像距離無(wú)關(guān)，只與 FOV 和分辨率有關(guān)；

PPD 大于 60 度的顯示屏，才能稱之為視網(wǎng)膜屏（可根據(jù)視網(wǎng)膜 PPI 換算得出）。也就是說(shuō)，在視場(chǎng)角中的 1 度需要看到 60 個(gè)像素，才能分辨不出像素感，60 度才能達(dá)到"視網(wǎng)膜"級(jí)別的體驗(yàn)。

注意：ppi 和 dpi 經(jīng)常都會(huì)出現(xiàn)混用現(xiàn)象。從技術(shù)角度說(shuō)，"像素"只存在于電腦顯示領(lǐng)域，而"點(diǎn)"只出現(xiàn)于打印或印刷領(lǐng)域。這樣簡(jiǎn)化比較，就容易記住了。

六、分辨率/像素密度

分辨率講的是像素的總數(shù)，像素密度講的是密度，每英寸像素?cái)?shù)，也就是前面說(shuō)的 PPI。

1. 分辨率

顯示屏或成像的畫面被分成了多少個(gè)網(wǎng)格像素點(diǎn)，一般用長(zhǎng)度和寬度方向上的網(wǎng)格像素點(diǎn)數(shù)來(lái)表示分辨率。

比如 1080P 就是 1920*1080，即在長(zhǎng)度方向上畫面被分成了 1920 個(gè)網(wǎng)格像素點(diǎn)，寬度方向上的畫面被分成了 1080 個(gè)網(wǎng)格像素點(diǎn)。

那分辨率越高對(duì)于觀看者來(lái)說(shuō)，畫面就一定越清晰嗎，兩塊分辨率一樣的顯示屏，他們的顯示清晰度就一樣嗎？其實(shí)不一定，還得看相應(yīng)的像素密度 PPI，這個(gè)應(yīng)該不難理解。

所以決定顯示清晰度的不僅有分辨率，還有顯示的畫面尺寸大小。

2. 像素密度(PPI)

單位長(zhǎng)度內(nèi)的像素?cái)?shù)量除以單位長(zhǎng)度，單位為 PPI（Pixels Per Inch）。像素密度越高，說(shuō)明像素越密集，5PPI 表示每英寸有 5 個(gè)像素，500PPI 表示每英寸有 500 個(gè)像素，PPI 的數(shù)值高，圖片和影片的清晰度就更高。

關(guān)于像素密度，也就是 PPI，前面已經(jīng)講了比較多了，這里不再贅述。把這 2 個(gè)名詞放一起，目的是對(duì)比理解。

七、FOV/視場(chǎng)角

FOV，是 Field of View（視場(chǎng)角）的縮寫。

視場(chǎng)角越大，所能看到的區(qū)域就越多，VR 設(shè)備帶來(lái)的沉浸感越強(qiáng)。視場(chǎng)角小于 80° 的 VR 設(shè)備幾乎沒(méi)有沉浸感，只能作為類似望遠(yuǎn)鏡的觀影設(shè)備。通常在 VR 頭顯里講的視場(chǎng)角指的是水平視場(chǎng)角。

FOV（以對(duì)角線 FOV 為例）其實(shí)就是你的眼睛與觀看到的畫面的對(duì)角線所成的角度，這個(gè)角度越大，一定程度上，你能看到的畫面就越大，F(xiàn)OV 直接影響了成像畫面的大小。

八、眼盒/甜蜜點(diǎn)

甜蜜點(diǎn)（sweet spot），它并不是一個(gè) VR 專用的光學(xué)術(shù)語(yǔ)，而是一個(gè)被廣泛使用于各種場(chǎng)合的通用詞匯，表示性價(jià)比很高的部分。

甜蜜點(diǎn)在 VR 設(shè)備里，通常描述的其實(shí)是 PPD 的平坦度。VR 屏幕由于經(jīng)過(guò)了特定光學(xué)透鏡的原因，只有中心附近的一片區(qū)域是最清晰，外圍會(huì)變得模糊。這片最清晰區(qū)域的大小既 sweet point。甜蜜點(diǎn)越大你越不容易感到模糊，相反甜蜜點(diǎn)越小，你稍微動(dòng)作大一點(diǎn)就模糊了。

很多人會(huì)把 PPD 平坦度和眼盒的概念混淆在一起，但其實(shí)它們是完全不同的兩個(gè)東西。
眼盒描述的是瞳孔移動(dòng)之后，成像不會(huì)發(fā)生漸暈的空間。瞳孔在偏離眼盒之后，成像光線會(huì)被透鏡邊緣裁切，畫面會(huì)出現(xiàn)漸暈而變得模糊。但你只要保證瞳孔在眼盒之內(nèi)，那么理論上的虛像畫面就一定是清晰的。

而甜蜜點(diǎn)反映的是完美成像時(shí)的成像質(zhì)量，和瞳孔位置無(wú)關(guān)。哪怕你的瞳孔位于完美的位置，畫面沒(méi)有產(chǎn)生任何漸暈，但由甜蜜點(diǎn)引起的邊緣模糊也一定是模糊的。

甜蜜點(diǎn)反映的是在完美成像時(shí)的邊緣畫質(zhì)衰減，眼盒反映的是瞳孔允許移動(dòng)的空間。

九、色域

色域是對(duì)一種顏色進(jìn)行編碼的方法。通俗來(lái)說(shuō)，色域就是設(shè)備所能顯示的色彩范圍區(qū)域。色域越大，表示它能顯示的顏色越多。

在 XR 領(lǐng)域，色域是指能夠在設(shè)備上顯示的所有可能顏色的范圍。通俗易懂地說(shuō)，色域就是設(shè)備能夠呈現(xiàn)的顏色的種類和范圍。

在 XR 設(shè)備中，色域的概念很重要，因?yàn)樗苯雨P(guān)系到用戶在虛擬環(huán)境中看到的顏色的真實(shí)感和逼真感。高質(zhì)量的 XR 設(shè)備通常會(huì)支持更廣泛的色域，以提供更生動(dòng)、更逼真的虛擬體驗(yàn)。

十、VST

VST 是 Video see through(視頻透視)的縮寫。

讓用戶即使戴上設(shè)備也能清楚感知到設(shè)備之外的現(xiàn)實(shí)世界。通過(guò)相機(jī)采集周圍環(huán)境的實(shí)時(shí)視圖并通過(guò)屏幕進(jìn)行顯示，給人一種人眼能夠直接透過(guò)頭顯看到周圍真實(shí)世界的感覺(jué)，因此也被叫做透視功能。

See-Through 功能可以讓用戶在不摘除頭顯的情況下，實(shí)現(xiàn)與外部現(xiàn)實(shí)世界的行為交互，例如觸摸和打開控制器，甚至簽收快遞、收發(fā)短信等等，增強(qiáng)了 VR 頭顯體驗(yàn)的可持續(xù)性。

比如像蘋果的 vision pro，當(dāng)你帶上這個(gè)設(shè)備時(shí)，其實(shí)眼睛是被設(shè)備擋住的，你之所以能看到現(xiàn)實(shí)中的畫面，其實(shí)是攝像機(jī)實(shí)時(shí)拍攝現(xiàn)實(shí)中的畫面，然后再播放給你看。

總結(jié)

新趨勢(shì)正在快速形成，保持謙卑，保持學(xué)習(xí)。進(jìn)到一個(gè)新領(lǐng)域，對(duì)于它的所有名詞和概念先要有一個(gè)基本的認(rèn)知，然后才能快速建立知識(shí)體系，你才知道往哪方面學(xué)，這通常是我能快速學(xué)會(huì)某個(gè)領(lǐng)域知識(shí)的秘訣。這也是費(fèi)曼學(xué)習(xí)法的要點(diǎn)之一，希望你也能有所收獲。

后續(xù)我會(huì)進(jìn)一步分享有關(guān)這個(gè)領(lǐng)域的更多知識(shí)，包括設(shè)計(jì)流程，單位換算方法，設(shè)計(jì)經(jīng)驗(yàn)等等干貨，保持關(guān)注吧。

全文完，既然看到這里了，如果覺(jué)得有學(xué)到，隨手點(diǎn)個(gè)贊和"在看"吧。

參考文檔：

1. 設(shè)計(jì)中 PPI 和 DPI 有什么區(qū)別 https://www.sumaarts.com/share/1330.Html
2. 一文讀懂分辨率、DPI、FOV 和 PPDhttps://www.jianshu.com/p/be90dfc5d211
3. 界面適配，尺寸概念 https://juejin.cn/post/6844903845617729549
4. PICO developer https://developer-cn.pico-interactive.com/document/web/introduce-xr/
5. VR、AR、XR 設(shè)計(jì)中的圖像尺寸關(guān)系，尺寸換算 https://zhuanlan.zhihu.com/p/617095866
6. 使用 DMM(Distance-Independent Millimeter)思想設(shè)計(jì) VR&AR 中的 UIhttps://blog.csdn.net/weixin_42358083/article/details/127101447
7. 如何設(shè)計(jì) VR 界面 https://zhuanlan.zhihu.com/p/28455704
8. DMM https://www.ryanhinojosa.com/2018/01/08/device-independent/
9. 你真的理解 VR 的 FOV 嗎？ http://gonememe.com/archives/7436

作者：彩云譯設(shè)計(jì)