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

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

以下是visionOS UI的一些特點：

visionOS的界面設計元素保持了iOS部分設計風格，比如側邊欄、標簽選項、搜索欄等大家熟悉的元素；

菜單界面的尺寸（半透明窗口）可根據(jù)實際用途、顯示內容和所在空間調整大小，比其他VR平臺的固定尺寸界面更人性化。另外，還可以同時開啟不同尺寸的界面，提升多任務處理效率；

界面默認位于用戶視線高度和視野中心（考慮到用戶的實際身高和姿態(tài)）；

在Quest平臺，你可以點擊手柄上的Oculus鍵來重置菜單位置，盡管Vision Pro沒有官方手柄，但依然可以通過點擊頭顯機身的數(shù)字旋鈕來重定向；

為了幫助用戶準確的將AR窗口固定在特定的物理空間，visionOS在窗口移動時采用了微妙的變化，比如移動時窗口為半透明，允許用戶識別窗口背后的環(huán)境，固定后窗口又變回高飽和度圖像；

在AR觀影模式中，visionOS系統(tǒng)會自動調低VST透視的透明度，讓觀影體驗更沉浸、專注；

visionOS非常注重虛擬和現(xiàn)實的融合，比如會渲染窗口投射到周圍環(huán)境上的光以及地面陰影，看起來有實體感，就像是擺在空間中的屏幕。或者在顯示照片等內容時，將照片邊緣模糊化；

充分結合微弱的深度變化信息，來突出特定的界面元素，比如將需要用戶關注的界面放在更靠近用戶的位置，而其他界面則靠后一些。

01. 交互設計

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

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

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

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

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

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

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

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

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

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

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

注意細微的光影變化

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

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

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

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

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

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

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

16）除了系統(tǒng)標準手勢外，開發(fā)者還可以自定義手勢；

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

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

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

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

02. 空間UI設計

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

◎ 基礎和設計原則

1，App圖標

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

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

2，背景材質

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

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

3，文字排版

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

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

4，Vibrancy活力模式

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

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

5，色彩

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

6，其他建議：

考慮用戶頸部活動范圍，大多數(shù)人更習慣于左右轉頭，而不是上下轉頭，因此UI界面不應在太高或太低的位置，大規(guī)模界面最好選擇橫向布局，而不是縱向布局；

懸停效果是一種視覺的對焦反饋，可很好的確認用戶注視點的位置，并讓用戶了解哪些元素可以交互；

蘋果對UI設計要求細致，交互元素的邊角形狀也有要求，上下圖層的邊角需要是同心圓的一部分，以確保UI外觀看起來統(tǒng)一；

visionOS所有系統(tǒng)組件都支持不同的輸入方式，包括眼球、手勢、藍牙鍵盤/觸控板等等。

03. 視覺體驗設計

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

◎ 視覺深度線索

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

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

◎ 應用場景優(yōu)化

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

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

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

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

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

04. 運動感知設計

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

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

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

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

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

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

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

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

參考：

https://developer.apple.com/visionos/learn/

https://apple.com/visionpro

本文僅代表作者觀點，版權歸原創(chuàng)者所有，如需轉載請在文中注明來源及作者名字。

免責聲明：本文系轉載編輯文章，僅作分享之用。如分享內容、圖片侵犯到您的版權或非授權發(fā)布，請及時與我們聯(lián)系進行審核處理或刪除，您可以發(fā)送材料至郵箱：service@tojoy.com