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

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

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

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

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

更多Vision Pro 設計干貨：

一、熟悉感

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

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

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

1. 多窗口

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

有一些更多的是：

1. 盡量讓一個應用在一個窗口里。
2. 允許一個應用多窗口

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

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

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

2. 窗口的大小

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

3. 窗口的擺放

移動、關閉和大小調整

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

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

4. 在環境中但又能區別

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

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

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

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

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

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

二、以人為中心

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

1. FOV

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

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

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

這兩點不難理解。

第一點是人的注意力很窄小，而且集中在人視野的中心。你可以試試把手臂伸直，人的注意力相對于所有輸入信息的比例，就等同于此時手的大拇指指甲蓋大小。

第二點是人的視場角，左右可以達 230 度，上下 120 度，是一個寬屏。當然，目前的 AR 設備的顯示區域也都是寬屏的。

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

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

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

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

第一個憑借是對用戶注意力的應用。

第二個憑借是無邊框產生的無界感知。

2. 人機工學

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

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

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

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

第一點：默認設置距離

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

第二點：交互距離

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

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

第三點：動態位姿

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

如果設備支持 6DOF，可以定義的更精細一點，例如用戶可以稍微走近或離遠一點看虛擬界面內的文字，界面本身不會發生移動。但如果用戶決定換一個地方閱讀，例如從床上到沙發上，用戶移動的距離超出一個設定值，虛擬界面跟隨移動到新地點，再重新校準和用戶的相對距離和朝向。

第四點：用戶頭動，內容錨定

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

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

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

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. 空間光譜
2. 關鍵提示
3. 舒適感

1. 空間光譜

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

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

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

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

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

2. 關鍵提示

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

1. 引導用戶的注意力：現實+虛擬，帶來不同的體驗的同時必然會增加注意力的損耗，好的設計能夠讓用戶的注意力關注在需要關注的地方。Vision Pro 提供了 4 個可以引導用戶注意力的設計角度：聲音、材質、色彩、漸變的動效
2. 謹慎思考和現實的融合：Vision Pro 提供了環境的線索，虛擬的內容可以和真實的環境進行融合，但這樣的融合要自然且有意義。第一，在新環境和當前環境的切換上，需要有過渡；第二，我再增加一點：虛擬內容要和真實的環境有邏輯關聯。

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

第一，微動畫：這也不是什么新鮮的設計手法了，現有的屏幕界面設計有很多可以借鑒的地方。

第二，用聲音塑造氛圍：對于投入產出比來說，我覺得是一個非常劃算的設計點。但也會遇到一些問題，比如硬件終端本身的支持（Vision Pro 大概不用擔心），嘈雜環境下的低體驗度。

第三，少即是多。可以用很小的設置來提供更大的體驗，比如官方案例中，使用微小的光照反射在地板上，而不必大面積渲染來營造出電影院的真實效果。少即是多這個設計原則并不是新鮮事情，但 AR 界面中，需要有很多新的運用。

3. 舒適感

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

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

三個設計建議

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

五、真實可信

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

如何切入？

第一，找一個關鍵的動作。

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

第二，聚焦一個角度。

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

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

總結一下：

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

歡迎關注作者微信公眾號：「林間有影落」