本篇文章将對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提供三個建議：微動畫、聲音、少即是多。
- 微動畫：這也不是什麼新鮮的設計手法了，現有的螢幕界面設計有很多可以借鑒的地方。
- 用聲音塑造氛圍：對于投入産出比來說，我覺得是一個非常劃算的設計點。但也會遇到一些問題，比如硬體終端本身的支援（Vision Pro大概不用擔心），嘈雜環境下的低體驗度。
- 少即是多。可以用很小的設定來提供更大的體驗，比如官方案例中，使用微小的光照反射在地闆上，而不必大面積渲染來營造出電影院的真實效果。少即是多這個設計原則并不是新鮮事情，但AR界面中，需要有很多新的運用。
3. 舒适感
舒适感，是和控制感一起被提到的。
面對新的界面，讓使用者感到整個系統界面在自己的控制下，是創造使用舒适感的一個基本要求。
三個設計建議：
- 畫面切換，無論是虛到實，還是實到虛，漸近漸出。
- 避免大的，快速的動畫。容易造成眩暈。
- 清晰的功能可視化和必要的指引。
五、真實可信
真實可信，是指充分利用裝置的能力，使用空間性創造直覺、引人入勝和豐富的體驗。将想法聚焦成一個主題，從一個方面切入，用一個應用的空間來創造出一個主題。
如何切入？
1）找一個關鍵的動作
這個關鍵動作，隻可能在空間上成立，Vision Pro的例子是相冊，單張照片可以按照畫面裡真實的比例呈現，以及全景模式的展現，都是空間界面才能帶來的體驗。
2）聚焦一個角度
要麼是幫助使用者完成任務，要麼是喚起使用者感情，要麼……在這個基礎上利用空間來設計界面，聚焦一個主要的提升點，讓已有的内容展現出新的活力。
真實可信這點講述的内容很少，因為大部分需要基于實際應用和情況來思考，這是一個新的畫布上，有待後續的AR設計師填補的部分。
六、總結
- Vision Pro五大基本設計原則：熟悉感、以人為中心、空間次元、沉浸感、真實可信。
- 熟悉感：對已有内容的再應用。
- 以人為中心、空間次元、沉浸感：是空間設計的重點。增加一個次元後，帶來了設計的更新和體驗的更新。
- 真實可信：理論簡單，需要基于實際應用和情況，從實踐中來體會。
專欄作家
林影落，微信公衆号：林間有影落，人人都是産品經理專欄作家。一枚會玩卡的使用者體驗設計師，《AR界面設計》作者，10年+UIUX設計經驗，專注于AR及智能化領域使用者體驗設計6年；設計&心理學教育背景，國家職業認證進階OH卡師/天賦挖掘教練。願意用我的一份努力，讓設計這個領域在智能化的未來更有價值，讓設計師這個職業更加值錢！
本文原創釋出于人人都是産品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協定
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。