visionOS：理想的UI設計竟要考慮這么多細節

擁有對macOS、iPadOS、watchOS、iOS等系統的開發經驗，蘋果在XR操作系統設計上也具有先天優勢，相比于其他公司從頭開始構建XR系統界面，蘋果可直接借鑒已經過驗證的設計美學。

【資料圖】

與此同時，WWDC 2023上公布的一系列開發者教程來看，該公司在VST透視模式UI的設計上也有著深刻思考。這種混合現實形式背景基于周圍動態環境，而不是像VR那樣設定在可控的虛擬場景，因此在界面設計上需要重新考慮。另外再配上Vision Pro的眼球、手勢輸入功能，visionOS的視覺交互體驗相當獨特，對其他XR系統設計也許能帶來啟發。

以下是visionOS UI的一些特點：

01. 交互設計

在visionOS空間計算平臺中，你只需要注視一個按鈕，然后用手勢輕敲即可輸入，Vision Pro在頭顯底部配備攝像頭，因此你無需抬手臂也能實現手勢追蹤。另外，相比于此前VR系統使用的光標投射操控方式，注視點可以更自然的瞄準選項，并與微手勢快速配合。

Vision Pro并未配備原生手柄，但在輸入方式上依然有多種選擇，注視點是主要瞄準方式，無論UI距離用戶多遠，都可以毫不費力的根據注視點信息來瞄準任意部分。接著，可以使用微手勢確認選擇，或是用手直接和UI元素交互，除此之外還可以通過語音輸入，或是連接藍牙鍵盤、妙控板、游戲手柄。

為了確保注視點瞄準的準確性，蘋果不僅優化了Vision Pro頭顯的傳感器設計，在UI設計上也有諸多考慮，比如：

1）應用的主要內容應位于視野中心：即使空間計算有無限大的發揮空間，但用戶只能看到視野內的畫面，而且視野內也只有最中心的部分觀看體驗最舒適（下圖30度范圍內）；

2）應用的次要內容或操作機制可放在視野邊緣；

3）應用布局也要考慮肩頸舒適性；

4）人眼一次只能聚焦在一個深度，頻繁改變焦距會造成視覺疲勞，因此應該將交互內容保持在相同深度，確保用戶能不費力切換UI；

5）可使用細微的深度變化來傳達UI的層次結構；

6）適合注視點選定的最小區域至少60pt大小，開發者可以在這個范圍內設計圖標等元素（約44pt大小），并確保該元素與選定區邊緣的間距夠寬，從而讓注視點選定更加準確、快速；

7）UI可動態縮放（近小、遠大），如果開發者選擇固定UI比例，那么如果界面放在遠處，視覺看起來會更小，難以用眼球控制；

8）visionOS交互系統的設計初衷，是允許用戶在遠距離也能與UI舒適交互；也支持近距離直接輸入，比如在虛擬鍵盤上用手指打字；

9）使用懸停突出/高亮來代表注視點運動，為了對人眼快速移動做出及時反應，這種效果做的比較自然微妙；

10）注視點長時間懸停在一個位置，代表了用戶的興趣和意圖；

11）長時間注視一個位置，visionOS的界面會顯示額外的信息、功能，比如工具提示、展開標簽欄、觸發語音搜索等等，當注意力從UI上轉移時，UI會恢復干凈簡潔的界面；

12）在Vision Pro頭顯中，用眼神和語音即可操作；長時間注視甚至還可以取代手勢來確認輸入，意味著只用眼睛就能控制UI；

13）眼球+手勢定位是visionOS系統的主要交互方式，宣稱可提供準確、體驗感好的交互，并實現一些智能的組合動作，比如：在縮放圖像時，會優先從用戶注視點位置放大或縮小；或者，還可以用注視點來控制繪圖光標，實現更高效創作體驗；

14）Vision Pro頭顯的手勢交互設計與人們熟悉的手機觸屏操作接近，比如手指捏合的動作相當于在手機屏幕上點擊，而拖動捏合手勢則可以瀏覽界面，還可以用雙手來縮放；

15）手勢交互的邏輯與多點觸控手勢的邏輯類似，因此容易上手，用戶通過單手、雙手的捏合動作，就能實現單擊、雙擊、抓取、拖放、放大、旋轉等操作；

16）除了系統標準手勢外，開發者還可以自定義手勢；

17）虛擬鍵盤使用動態高亮效果來提示距離，引導手指瞄準按鍵；

18）由于長時間舉手臂容易引起疲勞，因此應適當使用近距離觸控手勢，僅在體驗的核心玩法中使用；避免多次重復手勢讓用戶感到疲勞，或是采用容易做錯的手勢；

19）在空間計算平臺，軟件應用不再局限于窗口中，而是可以占據用戶所在的物理空間，并對用戶的身體運動做出反應；

20）為了確保注視點輸入的準確性，visionOS界面主要采用一些邊緣圓潤的圖形，因為如果采用方形等邊緣鋒利的形狀，注視點可能會跑到外部，從而降低識別的精確度；此外圖形應避免采用粗輪廓，以避免將注意力吸引到圖形外部。

02. 空間UI設計

為了幫助開發者更快適應空間計算平臺，蘋果構建了一種比較熟悉的視覺語言，特點是和iOS等現有的平臺具有一致性，同時一些元素針對空間平臺進行了優化。

◎ 基礎和設計原則

1，App圖標

visionOS的App圖標采用了與iOS接近的風格，最大的區別是形狀從圓角矩形變成了圓形，這種設計變化的一大原因，是為了讓注視點瞄準的更準確。除此之外，visionOS的App標志是立體的，從側面能看到表面凸起，而且可與注視點動態交互，當你盯著一個標志時，標志會展開，并顯示高光和陰影來加深微妙的視覺層次。

簡單來講，visionOS的App標志為了呈現深度，通常由3個平面的圖層組成（1個背景層，2個表面層），目的是呈現雙目視差效果。此外，系統還會疊加一個“玻璃層”效果，來渲染深度、高光和陰影。

2，背景材質

值得注意的是，visionOS的應用標志并非直接疊加在物理透視背景上，而是固定在一個像毛玻璃質感的半透明界面上。蘋果指出，這種設計的好處是具有輕盈感、物理空間感，并可適應各種不同的使用場景，比如狹小的空間、夜間或明亮的日光下等等。此外，半透光特性意味著不會完全遮擋物理空間，而是可模擬環境光動態透過的效果。

為了讓用戶在空間體驗中也能很好的感知環境，蘋果不建議開發者使用純色的菜單背景。

3，文字排版

為了提升文字易讀性、和背景的對比度，visionOS的字體在iOS字體基礎上加粗、加重。盡管如此，即使將窗口放大，一些較小的說明性文字依然難以辨別，因此建議盡量為字體增重、加粗。

值得注意的是，蘋果還為visionOS推出了兩種全新的字體樣式，特點是基于較寬的編輯樣式布局。

4，Vibrancy活力模式

原理是突出文字的光和色彩（與背景的對比度），開啟后文字看起來更亮，可讀性更強。考慮到visionOS菜單的窗口背景隨周圍環境而改變外觀，文字的活力模式也會實時調節亮度，確保文字清晰可見。

不僅如此，活力模式有三種亮度，可展現不同字符之間的層次結構。

5，色彩

蘋果建議開發者將文字色彩設為系統默認的白色，因為蘋果已經針對白色文字的易讀性進行校準，可動態適應背景窗口的色調和對比度。

6，其他建議：

03. 視覺體驗設計

相比于2D界面，空間計算平臺有更多獨特的玩法，比如深度和360°視野。另外，開發者需要考慮人身體的局限性，否則可能影響XR應用體驗。換句話說，XR內容的設計決策對用戶的視覺舒適度有重大影響。

◎ 視覺深度線索

XR內容需要提供正確的視覺深度線索（與人眼實際對焦匹配）。怎么做？利用色彩、模糊、相對尺寸、輕柔的運動、背景、光影、遮擋、紋理密度等信號，在視覺上側面暗示目標所在的位置和深度。比如，在稀疏的場景中，將檸檬切片以綠色顯示，人腦會自動匹配現實生活中的檸檬，并根據檸檬的視覺尺寸，去分析它所在的深度。

值得注意的是，開發者應該避免重復圖案等具有誤導性的視覺線索，否則如果左右眼對焦在不同的物體上，感知焦距與物體的實際焦距可能不匹配，從而造成重影。

◎ 應用場景優化

針對不同的應用場景，XR內容的視覺參數需要通過優化來提升視覺舒適度，降低人眼壓力。比如在XR閱讀等需要長時間注視的應用中，電子書放置在一臂之外的距離為最佳。同時，還要賦予用戶調整界面深度/距離的能力。相比之下，短暫視覺效果或直接交互的內容（支持直接手勢輸入），則可以在靠近人眼的位置顯示。

另外，在顯示文字時應采用高對比度，而對于轉移注意力的虛擬信號，則可以設置為較低對比度、透明度，或加入模糊效果。XR界面從暗色切換到亮色時，也要確保放慢切換過程，允許人眼舒適的適應這種過渡。

圖像在空間中的位置也有講究，比如人眼向下、向左、向右看最舒適，而向上看、對角線掃視則需要更多眼部運動，開發者在設計XR應用時應該考慮這些特性，來提升視覺體驗。如果XR內容需要極端的眼球運動，建議設計為簡短的交互，或是盡量防止在視野中心，來減少眼球轉動。

為了讓人眼有間歇的時間，開發者應該在XR交互體驗中加入自然間歇。

在閱讀文本時，可通過放大文字、調整窗口大小和深度來強化文字視覺清晰度，避免讓用戶頻繁轉頭閱讀。

04. 運動感知設計

容易眩暈是很多人對XR的印象，由于人感官系統的特性和局限，在XR內容中移動可能會影響體驗的舒適性。蘋果指出，人的視覺系統負責接收光線、感知周圍的動態內容，包括人自身的運動。同時，內耳中的前庭系統也會感知人的動作。

在通常情況下，視覺信息和前庭系統感知的運動總是一致，但在視覺運動信息缺失，或與前庭信息沖突時，人會感到不適，引起頭暈或反胃。

在XR場景中，人的身體通常固定在一個位置，而視覺上來看，身體卻在虛擬控件中走動，而這顯然造成了運動感知沖突。為此，蘋果希望通過精心設計內容，來讓大腦認為XR場景為相對靜止，從而優化用戶舒適性。比如，將XR中移動的對象設置為半透明，并確保VST場景清晰可見，以此來確保人腦識別到身體的靜止狀態。

蘋果建議，開發者盡量不讓UI界面跟隨用戶頭部移動，如果一定要這樣設計，盡量縮小界面尺寸，放置在較遠的距離，或是采用延遲跟隨方式，緩慢的跟隨用戶頭部移動。

UI界面內的運動設計也需要注意，比如窗口內的地平線應與現實場景地平線對齊，內容移動的中心方向應該位于人眼視野內，并避免快速轉彎或純旋轉運動（可以利用快速淡出來渲染瞬時轉向）。

同時，為了優化視覺舒適性，XR運動元素應避免采用大規模物體，并使用低亮度對比度的純色紋理，降低人眼對運動的識別度。

總之，開發者課程很好的闡釋了visionOS的設計邏輯，從中我們能夠看到蘋果對AR、VR上設計思路。可以說，目前蘋果已經將第一方應用和服務大部分集成至visionOS。

相信更多開發者也在期待月底上線的visionOS SDK，無論是嘗試遷移iOS應用，或者全新為visionOS開發，屆時開發者們將會可以進行更完整的探索，畢竟親自上手才更有說服力。

參考：Apple

責任編輯：Rex_20