本篇文章將對Apple Vision Pro的空間設計進行拆解，作者以五大空間設計原則為基礎對此產品進行分析，能給產品設計的伙伴們提供一些參考幫助，希望能對你有所啟發。

AR設計，是基于已有設計基礎的一次設計升維，在短短20分鐘的官方視頻中，給出了五個基本空間設計原則：熟悉感、以人為中心、空間維度、沉浸感、真實可信。

用一句話概括，就是基于原來沉淀的設計基礎理論，加上新維度后的升級和應用。

用一個詞概括，就是“深度”。也是我在自己的書和之前文章里所給出的AUI關鍵性區別之一。而在對Vision Pro空間設計基本原則的學習中，也加深了我對深度這一增加的維度，對整個界面設計所造成的影響有了更深的理解。

以下文字，按照我的收獲，拆解了這些基本原則，希望對你有所幫助。

官方視頻學習地址：https://developer.apple.com/videos/play/wwdc2023/10072/

一、熟悉感

熟悉感的兩點：窗口和點距。而其中很大一部分的筆墨，又給了窗口。

窗口的設計，沿用了我們在電腦的運用上逐漸形成的習慣和認知。

所以，官方設計原則中的多窗口、窗口的大小、窗口的擺放和關閉都傳承了屏幕界面的思維。

1. 多窗口

AR解決了屏幕大小的限制，真正做到了想大就大。（想起了我2年多以前給UXPA錄的課，有提到這點）

有一些更多的是：

• 盡量讓一個應用在一個窗口里。
• 允許一個應用多窗口。

看似有點矛盾，不過如果基于對注意力的考慮就不難理解了。

一個應用在一個窗口節省了注意力。一個應用多個窗口，也是節省注意力。因為，窗口不重要，重要的是里面的內容。

在允許一個應用多窗口這點里，提到的平級窗口、次級窗口、操作欄單獨放置，都是為了聚焦內容本身，從而節省用戶注意力。

2. 窗口的大小

窗口大小需要根據應用內容來設置，這是官方給出的指導，也是Mac或PC上的設計延續。

3. 窗口的擺放

移動、關閉和大小調整。

窗口的移動和關閉稍有點學習成本，不同于MAC上原有的，鼠標按住頂部欄就可以拖動，這里的拖動和關閉入口是放在下面，通過眼動觸發。

大小調整更隱蔽，需要眼睛注視到角落才會出現提示性的UI，不過對于已經習慣Mac或PC上操作的用戶來說，還是比較容易想到的。

在環境中但又能區別。

蘋果使用了玻璃質感的界面材質來保證窗口與真實環境的區別性，又用光線保證了它在環境中的融合感。

對于通用性的系統設計來說，玻璃質感是一種很好的選擇，如果是特定的應用，倒是也可以嘗試不一樣的風格。

對光線的運用，則是AR界面設計里新的知識點。

雖然設計原則這一節并沒有過多的說明，但結合宣傳視頻所見，要達到這樣的效果需要設計和研發共同的精雕細琢，細微之處見真章，很佩服他們在表現光線運用上所付出的投入。

值得注意的是，多窗口這種設計雖然看起來更易用，但并不是所有AR設備都可以使用的方法，必須要配備3DOF或6DOF的眼鏡設備才行。

另外，窗口設計也是之前被吐槽的部分，因為熟悉感帶來的另一面就是不夠具有突破性，整個界面看起來依然是平面化的。所以，我還是那句話，適合的才是最好的。

二、以人為中心

Vision Pro 設計原則的第二點，以人為中心，主要講了三個方面：FOV、人機工學和運動。

1. FOV

FOV，是視場角（Field of View）的意思，在《AR界面設計》里我也有介紹。

基礎原則里提供了兩點設計原則：

• 將最主要的內容放在顯示區域中心。
• 使用寬屏的界面以適配人的視場角。

這兩點不難理解。

• 第一點是人的注意力很窄小，而且集中在人視野的中心。你可以試試把手臂伸直，人的注意力相對于所有輸入信息的比例，就等同于此時手的大拇指指甲蓋大小。
• 第二點是人的視場角，左右可以達230度，上下120度，是一個寬屏。當然，目前的AR設備的顯示區域也都是寬屏的。

這里面有個典型的設計問題，由于目前AR設備的顯示區域都遠遠小于人的可視范圍，在虛像顯示范圍有限的情況下，實際用戶看到的界面和你設想的界面是略有差別的。

以視頻里的圖舉個例。如果設備顯示FOV不夠大，虛擬界面會被切掉一些。

被切掉一部分的虛擬界面示意

如何讓用戶感知不到實際的顯示區域是有邊界的呢？這里面有蠻多可以嘗試和探索的地方，是很有意思的設計點，提供2點憑借供參考：

• 第一個憑借是對用戶注意力的應用。
• 第二個憑借是無邊框產生的無界感知。

2. 人機工學

Vision Pro 基本設計原則的第二點中的人機工學，里面介紹的內容可以用另一個詞來講：用戶位姿。

用戶位姿，是指界面的設置，基于用戶的位置和姿態而設定。

里面給出了4個準則，簡單歸納如下：

• 設置界面的默認距離。
• 把界面擺放在用戶手臂范圍外以鼓勵用戶操作。
• 界面的角度和距離應該隨著用戶的個性姿態有變化。
• 當用戶頭動的時候，內容最好錨定不動。

1）默認設置距離

由應用的場景定位決定，一般系統級的界面會比我們看電腦時的電腦屏幕遠，如果是主打觀影類的會更遠一些，如Xreal為4M/6M，微軟的Hololens是2m的默認距離。

2）交互距離

對于需要交互的界面，自然點來說應該在手臂伸長的范圍內。不過，這是在手可以直接操作界面（例如手直接點擊虛擬的按鍵觸發響應）的情況下來說的。

Apple的手勢交互更類似于隔空交互，在手勢可以識別的范圍內，用戶特定的手勢可以對界面上的內容進行交互操作。

3）動態位姿

以用戶的實時或個性位姿來設置界面相對最佳的位置。例如高一點的用戶，界面會高一些，躺著的用戶，界面朝向為斜下方等。

如果設備支持6DOF，可以定義的更精細一點，例如用戶可以稍微走近或離遠一點看虛擬界面內的文字，界面本身不會發生移動。

但如果用戶決定換一個地方閱讀，例如從床上到沙發上，用戶移動的距離超出一個設定值，虛擬界面跟隨移動到新地點，再重新校準和用戶的相對距離和朝向。

4）用戶頭動，內容錨定

在用戶頭動的時候將內容固定在原地，可以給用戶更多自由。這似乎和上一點又是相反的。

可以理解為，在用戶的注意力被環境中別的吸引時，讓內容不搶用戶視野的鏡頭。

例如觀看網頁時，被房間里小狗小貓的聲音吸引，用戶可以轉頭看到視野下方的它們，而不用被跟隨的界面阻礙。再例如，用戶不自覺的動動頭部放松時，不會影響虛擬界面的擺放。

3. 運動

Vision Pro推薦靜態體驗，即在用戶靜止不動的情況去設計AR應用。

在我自己的經驗中，用戶行走過程下的AR界面設計，需要考慮的設計點以及遇到的技術難點都比靜態時要增加許多，所以如果可能，盡量考慮讓用戶在不動的情況下完成應用所需要傳達的體驗內容。

三、空間維度

空間維度，是基本原則中占用篇幅中最多的一點，英文詞是“dimensional”，中文意思是“有尺寸的”、“有維度的”。

在數學和物理學中，維度是描述空間或物體特征的一個量，通常用長度、寬度和高度等尺寸來表示。因此，“dimensional” 這個詞可以用來表示一個物體或概念具有多個尺寸或特征，或者需要考慮多個方面才能完整描述。

這個很有意思，說明可以讓我們產生空間感的方面有很多，導致設計也可以從很多方向切入，當然，這也同樣帶來了設計的難度。

在官方介紹里，這部分分了三個方面：

• 空間
• 深度
• 尺寸

1. 空間

空間，是利用空間的優勢去設計界面。

第一是不需要嚴格被真實空間的物理特性限制，比如界面窗口可以和物理世界交叉，比如界面大小可以擴大到影院屏幕大小，超出真實物理空間的容納范圍。

這里不得不感嘆下蘋果的細節處理，這種移動過程中交叉部分的透明度降低，停止后完全顯示的設計，在我們的產品里可能完全排不上優先級……

第二是可以創造一個全新的空間，這里提到Vision Pro設定的一個模式：full space（全空間），與之相對的另一個模式是share space（共享空間）。

2. 深度

深度，一個新的吸引注意力和表達層級感的設計維度。

對于深度的利用，從Vision Pro的基本原則里可以總結為五個方面：距離、層級、光影線索、微距感、厚度。

• 距離：就直覺來說，放在遠處的虛像可以設計的比較大，并且適合做一些遠距離交互的操作設定。放在近處的虛像可以設計的比較小，并且適合做一些直接操作的設定，另外也方便用戶360度環繞觀察它。
• 層級：主內容前面小的操作欄，通過深度表達了層級。

• 光影線索：通過光線和陰影來突出內容和明晰虛像的空間位置，讓虛像更加融合在空間內。

• 微距感：聚焦的時候可以使用距離來突出激活態。

• 厚度：不是任何內容都需要厚度。也可以從另一個角度解釋，模型的投入畢竟比平面UI更多，所以如果都能達到目的，使用平面素材也是一種很好的方案。

3. 尺寸

尺寸：虛擬內容的尺寸，是一個新的設計方式。

不同的尺寸會帶給人不同的感覺。小的虛像會讓人感覺更輕盈和私人，大的虛像可以提供更加沉浸的感覺。某些內容，適合以它在物理世界的真實尺寸顯示。

空間、深度、尺寸，是空間維度設計的三個切入點。但如果只能記下一個，我推薦深度，因為不管是空間還是尺寸，都是因為深度，才帶來了與原有屏幕界面不一樣的設計維度，名為空間的設計維度。

四、沉浸感

AR內容要帶來沉浸感，將用戶完全吸引在虛擬的空間內，更多的做法是像VR一樣，讓虛擬內容盡可能的包圍用戶，占據TA的全部視野，盡可能的完全忽視掉現實空間。

對于沉浸感，Vision Pro給出了三個要點：

• 空間光譜
• 關鍵提示
• 舒適感

1. 空間光譜

空間光譜，是對AR界面是一種空間界面設計的進一步應用，它可以展現在眼前，也可以包圍，更可以包裹。

這就是空間畫布和我們之前畫布最大的一個區別，其畫布形狀可以在三維空間產生各種變化。

這里，也介紹了Vision Pro里共享空間（Share space）和全局空間（Full space）的兩個概念，在全局空間，我們不僅可以創造出全新的空間，也可以結合現有空間來締造。

這里也有一個小提示，可以用調光（diming），也就是我們在屏幕界面設計中常用的蒙層來聚焦內容，引導用戶的注意力。

如果能利用現實空間來達到沉浸式體驗也是不錯的做法，例如結合實際空間的AR游戲。

2. 關鍵提示

關鍵提示，是在AR界面設計時一些設計建議，一共4點：

1）引導用戶的注意力

現實+虛擬，帶來不同的體驗的同時必然會增加注意力的損耗，好的設計能夠讓用戶的注意力關注在需要關注的地方。Vision Pro 提供了4個可以引導用戶注意力的設計角度：聲音、材質、色彩、漸變的動效

2）謹慎思考和現實的融合

Vision Pro提供了環境的線索，虛擬的內容可以和真實的環境進行融合，但這樣的融合要自然且有意義。

• 第一，在新環境和當前環境的切換上，需要有過渡。
• 第二，我再增加一點：虛擬內容要和真實的環境有邏輯關聯。

3）生動體驗

塑造生動體驗，Vision Pro提供三個建議：微動畫、聲音、少即是多。

1. 微動畫：這也不是什么新鮮的設計手法了，現有的屏幕界面設計有很多可以借鑒的地方。
2. 用聲音塑造氛圍：對于投入產出比來說，我覺得是一個非常劃算的設計點。但也會遇到一些問題，比如硬件終端本身的支持（Vision Pro大概不用擔心），嘈雜環境下的低體驗度。
3. 少即是多?？梢杂煤苄〉脑O置來提供更大的體驗，比如官方案例中，使用微小的光照反射在地板上，而不必大面積渲染來營造出電影院的真實效果。少即是多這個設計原則并不是新鮮事情，但AR界面中，需要有很多新的運用。

3. 舒適感

舒適感，是和控制感一起被提到的。

面對新的界面，讓用戶感到整個系統界面在自己的控制下，是創造使用舒適感的一個基本要求。

三個設計建議：

1. 畫面切換，無論是虛到實，還是實到虛，漸近漸出。
2. 避免大的，快速的動畫。容易造成眩暈。
3. 清晰的功能可視化和必要的指引。

五、真實可信

真實可信，是指充分利用設備的能力，使用空間性創造直觀、引人入勝和豐富的體驗。將想法聚焦成一個主題，從一個方面切入，用一個應用的空間來創造出一個主題。

如何切入？

1）找一個關鍵的動作

這個關鍵動作，只可能在空間上成立，Vision Pro的例子是相冊，單張照片可以按照畫面里真實的比例呈現，以及全景模式的展現，都是空間界面才能帶來的體驗。

2）聚焦一個角度

要么是幫助用戶完成任務，要么是喚起用戶感情，要么……在這個基礎上利用空間來設計界面，聚焦一個主要的提升點，讓已有的內容展現出新的活力。

真實可信這點講述的內容很少，因為大部分需要基于實際應用和情況來思考，這是一個新的畫布上，有待后續的AR設計師填補的部分。

六、總結

• Vision Pro五大基本設計原則：熟悉感、以人為中心、空間維度、沉浸感、真實可信。
• 熟悉感：對已有內容的再應用。
• 以人為中心、空間維度、沉浸感：是空間設計的重點。增加一個維度后，帶來了設計的升級和體驗的升級。
• 真實可信：理論簡單，需要基于實際應用和情況，從實踐中來體會。