編者按：近期 VR 和 AR 相關(guān)的公司頻繁地拿到高額的投資，足見 Vision Pro 整個(gè)行業(yè)的推動(dòng)效果。今天的這篇文章是系列文章的第一篇，如果要針對(duì) Vision Pro 進(jìn)行設(shè)計(jì)，需要知道的相關(guān)的 12 個(gè)關(guān)鍵的設(shè)計(jì)概念。文章來(lái)自設(shè)計(jì)師 Hajira 的搜集整理，以下為正文。

雖然蘋果的 Vision Pro 明年才會(huì)正式開賣，但是隨著開發(fā)與設(shè)計(jì)文檔的公開，持續(xù)的關(guān)注就沒(méi)有停過(guò)。整個(gè)領(lǐng)域正在蓬勃發(fā)展，對(duì)于多數(shù)設(shè)計(jì)師而言，Vision Pro 所涉及到的用戶體驗(yàn)和設(shè)計(jì)規(guī)則和以往有著根本性的區(qū)別，從基礎(chǔ)知識(shí)開始學(xué)習(xí)和理解個(gè)領(lǐng)域是非常合理的。

「空間設(shè)計(jì)指的是在 3D 的空間環(huán)境下進(jìn)行用戶界面和體驗(yàn)設(shè)計(jì)，提供更加身臨其境和直觀的方式與數(shù)字內(nèi)容交互。」

在開始學(xué)習(xí)規(guī)范之前，有必要先弄清楚涉及的 Vision Pro 的 12 個(gè)核心概念。

更多Vision Pro 干貨：

1、窗口（Windows）

• 窗口作為承載內(nèi)容的容器，可以顯示 2D 和 3D 的內(nèi)容。
• 窗口可以單獨(dú)存在也可以多窗口同時(shí)操作，并且窗口的比例可以做任意調(diào)整。

單窗口

多窗口

2、體塊（Volumes）

• 可以從任何角度隨意查看的 3D 內(nèi)容和對(duì)象就是體塊。比如在線購(gòu)買商品之前，可以在電商網(wǎng)站上直接多角度查看商品的細(xì)節(jié)，了解它的整體外觀。

• 對(duì)于體塊類的內(nèi)容和對(duì)象，并不會(huì)在它的周圍顯示窗口和框架。

3D 的體塊對(duì)象，可以放置在 2D 的窗口旁邊

3、配飾（Ornaments）

• 配飾是一個(gè)用來(lái)承載和窗口相關(guān)的操作控件和信息的
• 配飾可以是工具欄、選項(xiàng)卡欄，也可以是視頻播放組件這與的控件載體。比如，當(dāng)視頻在窗口中播放的時(shí)候，控制播放的暫停、快進(jìn)、后退等按鈕，可以放置在配飾控件當(dāng)中。

4、工具欄（Tool Bars）

• Vision Pro 中所提供的工具欄一般都是水平放置的，它們通常被放置于配飾控件當(dāng)中，在三維空間當(dāng)中，它們通常在Z軸方向上（垂直于窗口）更加靠前的位置。
• 工具欄承載常用的按鈕控件，和當(dāng)前窗口相關(guān)。

5、標(biāo)簽欄（Tab Bars）

• 標(biāo)簽欄的選項(xiàng)卡都是垂直排列，浮動(dòng)在窗口靠前的位置
• 標(biāo)簽欄的主要功能是提供導(dǎo)航功能，方便用戶在應(yīng)用的不同功能之間快速跳轉(zhuǎn)切換。

6、側(cè)邊欄（Side Bars）

• 當(dāng)選中側(cè)邊欄的選項(xiàng)卡的時(shí)候，側(cè)邊欄會(huì)向前移動(dòng)，展開現(xiàn)實(shí)更多的附加的導(dǎo)航選項(xiàng)。
• 比如在上圖當(dāng)中，在側(cè)邊欄當(dāng)中選擇 Library 圖標(biāo)下的選項(xiàng)卡時(shí)，相應(yīng)的選項(xiàng)卡下屬的菜單會(huì)相應(yīng)展開。

7、菜單和彈出框

• 菜單和彈出框可以拓展到窗口之外
• 被選中的按鈕，按鈕的背景變?yōu)榘咨?，其中的圖標(biāo)變?yōu)楹谏@可以幫助用戶了解和彈出框關(guān)聯(lián)的是哪個(gè)按鈕，而菜單也無(wú)需使用箭頭標(biāo)識(shí)關(guān)聯(lián)圖標(biāo)的位置，更加優(yōu)雅。
• 作為平臺(tái)的通用規(guī)則，按鈕的背景要避免使用白色，除非當(dāng)它被選中的時(shí)候。

8、工作表（Sheets）

• 工作表是一個(gè)模態(tài)的懸停彈出表單窗口，它通常會(huì)向前懸浮于它的父窗口之前。當(dāng)用戶向界面請(qǐng)求特定的信息、交互的時(shí)候，工作表會(huì)彈出，呈現(xiàn)出相應(yīng)的詳細(xì)信息，或者承載簡(jiǎn)短的交互。比如當(dāng)用戶請(qǐng)求訂閱音樂(lè)服務(wù)的時(shí)候。

9、空間（Spaces）

• 共享空間：默認(rèn)的空間范疇，多個(gè)應(yīng)用的窗口可以并排存在，用戶可以將它們重新放置在任何自己喜歡的位置。
• 全空間：為了獲得更加身臨其境的體驗(yàn)，用戶可以將單個(gè)窗口擴(kuò)展到全空間，占據(jù)整個(gè)空間范疇，其他的 APP 會(huì)隱藏，只有被選中的這個(gè)程序會(huì)呈現(xiàn)。此外，在全空間還支持更強(qiáng)的沉浸式體驗(yàn)，比如打開一個(gè)全新虛擬世界的門戶進(jìn)入其中，沉浸于完全不同的場(chǎng)景中。

10、沉浸光譜（Immersion Spectrum）

• 窗口（可以位于共享空間和全空間）
• 全境視圖（全空間）
• 環(huán)境（全空間）

APP 在 Vision Pro 內(nèi)可以的呈現(xiàn)是動(dòng)態(tài)的，并且可以絲滑地在不同的沉浸狀態(tài)之間流暢地轉(zhuǎn)換，而這也成就了光譜式的沉浸狀態(tài)切換。不同的 APP 可以以窗口的形式，在共享空間內(nèi)共存。如果它需要更多的空間，那么它可以隱藏其他 APP，它可以獨(dú)占盡可能多的空間。默認(rèn)情況下，窗口會(huì)在共享空間模式下打開，這是沉浸度最低的狀態(tài)，用戶也可以輕松控制沉浸的程度。

在下面的范例當(dāng)中，Keynote 在共享空間中以窗口模式打開，當(dāng)需要播放幻燈片時(shí)，它會(huì)切換到全空間模式，并且默認(rèn)情況下，會(huì)調(diào)低環(huán)境光，讓目光盡可能集中在幻燈片內(nèi)容上。

調(diào)光是一種增加內(nèi)容和環(huán)境對(duì)比度的有效技巧，無(wú)需將用戶帶出環(huán)境即可創(chuàng)造出更高的沉浸度。

在排練演講的時(shí)候，周圍可以形成一個(gè)舞臺(tái)環(huán)境，讓人沉浸在這樣的環(huán)境中。像這樣的沉浸式的體驗(yàn)需要更大的空間，這個(gè)時(shí)候唯有 Keynote 位于畫面當(dāng)中，而其他的 APP 則被隱藏起來(lái)了。

下面顯示的案例則是照片庫(kù)，當(dāng)你瀏覽器照片的時(shí)候，周圍的環(huán)境會(huì)變暗，以這種聚焦而栩栩如生的方式瀏覽回憶是非常神奇的。當(dāng)查看全景照片的時(shí)候，它會(huì)以全空間的模式展開，讓人身臨其境感知到拍攝時(shí)的場(chǎng)景。

11、通透（Passthrough）

• 通透功能讓用戶在佩戴 Vision Pro 的時(shí)候，能夠通過(guò)設(shè)備外部的攝像頭，實(shí)時(shí)看到周圍的物理環(huán)境。
• 轉(zhuǎn)動(dòng)數(shù)字表冠能夠調(diào)整通透的程度，改變周圍環(huán)境可見的范疇大小，從而控制整體的沉浸感。

• 增加通透度，能夠讓真實(shí)環(huán)境的可見程度標(biāo)高，減少通透度，能夠帶來(lái)更強(qiáng)的沉浸感。

12、過(guò)渡和微妙的動(dòng)畫

• 設(shè)計(jì)平滑、可預(yù)測(cè)的過(guò)渡，可以增加不同體驗(yàn)狀態(tài)之間的連續(xù)性。
• 與現(xiàn)實(shí)世界有效地融合：當(dāng)用戶準(zhǔn)備進(jìn)入一個(gè)全新的沉浸空間場(chǎng)景的時(shí)候，周圍的物理環(huán)境逐漸淡出，請(qǐng)確保 APP 使用柔和微妙的邊緣動(dòng)畫，避免使用突兀的過(guò)渡，讓用戶盡量專注于內(nèi)容本身。
• 最鼓舞人心的經(jīng)歷能夠讓人感覺(jué)充滿活力，而微妙的動(dòng)畫則能夠給整個(gè)場(chǎng)景注入活力。

還有很多東西值得探索。下一篇文章，將會(huì)詳細(xì)探索用戶使用手和眼睛在空間中的交互。