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

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

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

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

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

更多Vision Pro 設(shè)計干貨：

一、熟悉感

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

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

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

1. 多窗口

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

有一些更多的是：

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

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

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

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

2. 窗口的大小

窗口大小需要根據(jù)應用內(nèi)容來設(shè)置，這是官方給出的指導，也是 Mac 或 PC 上的設(shè)計延續(xù)。

3. 窗口的擺放

移動、關(guān)閉和大小調(diào)整

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

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

4. 在環(huán)境中但又能區(qū)別

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

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

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

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

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

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

二、以人為中心

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

1. FOV

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

基礎(chǔ)原則里提供了兩點設(shè)計原則

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

這兩點不難理解。

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

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

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

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

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

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

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

第二個憑借是無邊框產(chǎn)生的無界感知。

2. 人機工學

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

用戶位姿，是指界面的設(shè)置，基于用戶的位置和姿態(tài)而設(shè)定。

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

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

第一點：默認設(shè)置距離

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

第二點：交互距離

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

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

第三點：動態(tài)位姿

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

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

第四點：用戶頭動，內(nèi)容錨定

在用戶頭動的時候?qū)?nèi)容固定在原地，可以給用戶更多自由。這似乎和上一點又是相反的。

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

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

3. 運動

Vision Pro 推薦靜態(tài)體驗，即在用戶靜止不動的情況去設(shè)計 AR 應用。

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

三、空間維度

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

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

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

在官方介紹里，這部分分了三個方面：空間、深度、尺寸。

1. 空間

空間，是利用空間的優(yōu)勢去設(shè)計界面。

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

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

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

2. 深度

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

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

距離：就直覺來說，放在遠處的虛像可以設(shè)計的比較大，并且適合做一些遠距離交互的操作設(shè)定。放在近處的虛像可以設(shè)計的比較小，并且適合做一些直接操作的設(shè)定，另外也方便用戶 360 度環(huán)繞觀察它。

層級：主內(nèi)容前面小的操作欄，通過深度表達了層級

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

微距感：聚焦的時候可以使用距離來突出激活態(tài)。

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

3. 尺寸

尺寸：虛擬內(nèi)容的尺寸，是一個新的設(shè)計方式。

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

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

四、沉浸感

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

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

1. 空間光譜
2. 關(guān)鍵提示
3. 舒適感

1. 空間光譜

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

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

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

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

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

2. 關(guān)鍵提示

關(guān)鍵提示，是在 AR 界面設(shè)計時一些設(shè)計建議，一共 4 點。

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

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

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

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

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

3. 舒適感

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

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

三個設(shè)計建議

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

五、真實可信

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

如何切入？

第一，找一個關(guān)鍵的動作。

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

第二，聚焦一個角度。

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

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

總結(jié)一下：

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

歡迎關(guān)注作者微信公眾號：「林間有影落」