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

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

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

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

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

一、VR/AR/MR/XR/HMD

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

1. VR

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

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

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

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

2. AR

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

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

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

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

3. MR

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

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

看起來 AR 和 MR 有點像，要如何區(qū)分 AR 和 MR？

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

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

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

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

4. XR

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

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

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

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

5. HMD

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

二、物理尺寸/像素尺寸

1. 物理尺寸

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

2. 像素尺寸

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

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

三、DMM

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

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

有些人好奇，為什么在 XR 上會有適配的問題。這是因為 XR UI 有深度變化。大家可以把 XR 里的界面想象成一塊屏幕，這個屏幕是可遠可近的，由于近大遠小的關(guān)系，如果想要看起來保持大小一致，那么就會要求 UI 做相應(yīng)的縮放。想想手機屏幕因為尺寸不同都需要做適配，那這里的適配就顯得更加復(fù)雜。

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

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

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

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

四、3DoF/6DoF

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

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

設(shè)備能檢測到頭部在 3 個坐標軸方向上的轉(zhuǎn)動，帶來視野角度的變化。

這三個自由度分別是：

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

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

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

新增的三個自由度分別是：

使用者可以用自然方式在空間中移動。

五、DPI/PPI/PPD

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

1. DPI

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

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

2. PPI

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

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

計算公式為：

(X：長度像素數(shù)；Y：寬度像素數(shù)；Z：屏幕尺寸即對角線長度)

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

3. PPD

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

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

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

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

計算公式：

PPD = 線段 ab ÷ FOV（線段 ab：單眼成像外接圓的直徑像素點數(shù)量；FOV：視場角）

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

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

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

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

六、分辨率/像素密度

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

1. 分辨率

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

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

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

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

2. 像素密度(PPI)

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

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

七、FOV/視場角

FOV，是 Field of View（視場角）的縮寫。

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

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

八、眼盒/甜蜜點

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

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

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

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

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

九、色域

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

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

在 XR 設(shè)備中，色域的概念很重要，因為它直接關(guān)系到用戶在虛擬環(huán)境中看到的顏色的真實感和逼真感。高質(zhì)量的 XR 設(shè)備通常會支持更廣泛的色域，以提供更生動、更逼真的虛擬體驗。

十、VST

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

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

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

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

總結(jié)

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

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

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

參考文檔：

1. 設(shè)計中 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è)計中的圖像尺寸關(guān)系，尺寸換算 https://zhuanlan.zhihu.com/p/617095866
6. 使用 DMM(Distance-Independent Millimeter)思想設(shè)計 VR&AR 中的 UIhttps://blog.csdn.net/weixin_42358083/article/details/127101447
7. 如何設(shè)計 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è)計