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

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

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

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

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

官方視頻學(xué)習(xí)地址：https://developer.apple.com/videos/play/wwdc2023/10072/

一、熟悉感

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

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

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

1. 多窗口

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

有一些更多的是：

• 盡量讓一個應(yīng)用在一個窗口里。
• 允許一個應(yīng)用多窗口。

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

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

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

2. 窗口的大小

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

3. 窗口的擺放

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

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

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

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

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

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

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

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

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

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

二、以人為中心

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

1. FOV

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

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

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

這兩點不難理解。

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

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

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

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

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

• 第一個憑借是對用戶注意力的應(yīng)用。
• 第二個憑借是無邊框產(chǎn)生的無界感知。

2. 人機工學(xué)

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

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

里面給出了4個準(zhǔn)則，簡單歸納如下：

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

1）默認設(shè)置距離

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

2）交互距離

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

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

3）動態(tài)位姿

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

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

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

4）用戶頭動，內(nèi)容錨定

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

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

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

3. 運動

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

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

三、空間維度

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

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

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

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

• 空間
• 深度
• 尺寸

1. 空間

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

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

這里不得不感嘆下蘋果的細節(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給出了三個要點：

• 空間光譜
• 關(guān)鍵提示
• 舒適感

1. 空間光譜

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

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

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

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

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

2. 關(guān)鍵提示

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

1）引導(dǎo)用戶的注意力

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

2）謹(jǐn)慎思考和現(xiàn)實的融合

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

• 第一，在新環(huán)境和當(dāng)前環(huán)境的切換上，需要有過渡。
• 第二，我再增加一點：虛擬內(nèi)容要和真實的環(huán)境有邏輯關(guān)聯(lián)。

3）生動體驗

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

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

3. 舒適感

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

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

三個設(shè)計建議：

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

五、真實可信

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

如何切入？

1）找一個關(guān)鍵的動作

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

2）聚焦一個角度

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

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

六、總結(jié)

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