擁有對macOS、iPadOS、watchOS、IOS等系統(tǒng)的開發(fā)經(jīng)驗，蘋果在XR操作系統(tǒng)設(shè)計上也具有先天優(yōu)勢，相比于其他公司從頭開始構(gòu)建XR系統(tǒng)界面，蘋果可直接借鑒已經(jīng)過驗證的設(shè)計美學(xué)。
與此同時，WWDC 2023上公布的一系列開發(fā)者教程來看，該公司在VST透視模式UI的設(shè)計上也有著深刻思考。這種混合現(xiàn)實(shí)形式背景基于周圍動態(tài)環(huán)境，而不是像VR那樣設(shè)定在可控的虛擬場景，因此在界面設(shè)計上需要重新考慮。另外再配上Vision Pro的眼球、手勢輸入功能，visionOS的視覺交互體驗相當(dāng)獨(dú)特，對其他XR系統(tǒng)設(shè)計也許能帶來啟發(fā)。
以下是visionOS UI的一些特點(diǎn)：
- visionOS的界面設(shè)計元素保持了iOS部分設(shè)計風(fēng)格，比如側(cè)邊欄、標(biāo)簽選項、搜索欄等大家熟悉的元素；
- 菜單界面的尺寸（半透明窗口）可根據(jù)實(shí)際用途、顯示內(nèi)容和所在空間調(diào)整大小，比其他VR平臺的固定尺寸界面更人性化。另外，還可以同時開啟不同尺寸的界面，提升多任務(wù)處理效率；
- 界面默認(rèn)位于用戶視線高度和視野中心（考慮到用戶的實(shí)際身高和姿態(tài)）；
- 在Quest平臺，你可以點(diǎn)擊手柄上的Oculus鍵來重置菜單位置，盡管Vision Pro沒有官方手柄，但依然可以通過點(diǎn)擊頭顯機(jī)身的數(shù)字旋鈕來重定向；
- 為了幫助用戶準(zhǔn)確的將AR窗口固定在特定的物理空間，visionOS在窗口移動時采用了微妙的變化，比如移動時窗口為半透明，允許用戶識別窗口背后的環(huán)境，固定后窗口又變回高飽和度圖像；
- 在AR觀影模式中，visionOS系統(tǒng)會自動調(diào)低VST透視的透明度，讓觀影體驗更沉浸、專注；
- visionOS非常注重虛擬和現(xiàn)實(shí)的融合，比如會渲染窗口投射到周圍環(huán)境上的光以及地面陰影，看起來有實(shí)體感，就像是擺在空間中的屏幕。或者在顯示照片等內(nèi)容時，將照片邊緣模糊化；
- 充分結(jié)合微弱的深度變化信息，來突出特定的界面元素，比如將需要用戶關(guān)注的界面放在更靠近用戶的位置，而其他界面則靠后一些。
01. 交互設(shè)計
在visionOS空間計算平臺中，你只需要注視一個按鈕，然后用手勢輕敲即可輸入，Vision Pro在頭顯底部配備攝像頭，因此你無需抬手臂也能實(shí)現(xiàn)手勢追蹤。另外，相比于此前VR系統(tǒng)使用的光標(biāo)投射操控方式，注視點(diǎn)可以更自然的瞄準(zhǔn)選項，并與微手勢快速配合。
Vision Pro并未配備原生手柄，但在輸入方式上依然有多種選擇，注視點(diǎn)是主要瞄準(zhǔn)方式，無論UI距離用戶多遠(yuǎn)，都可以毫不費(fèi)力的根據(jù)注視點(diǎn)信息來瞄準(zhǔn)任意部分。接著，可以使用微手勢確認(rèn)選擇，或是用手直接和UI元素交互，除此之外還可以通過語音輸入，或是連接藍(lán)牙鍵盤、妙控板、游戲手柄。
為了確保注視點(diǎn)瞄準(zhǔn)的準(zhǔn)確性，蘋果不僅優(yōu)化了Vision Pro頭顯的傳感器設(shè)計，在UI設(shè)計上也有諸多考慮，比如：
1）應(yīng)用的主要內(nèi)容應(yīng)位于視野中心：即使空間計算有無限大的發(fā)揮空間，但用戶只能看到視野內(nèi)的畫面，而且視野內(nèi)也只有最中心的部分觀看體驗最舒適（下圖30度范圍內(nèi)）；
2）應(yīng)用的次要內(nèi)容或操作機(jī)制可放在視野邊緣；
3）應(yīng)用布局也要考慮肩頸舒適性；
4）人眼一次只能聚焦在一個深度，頻繁改變焦距會造成視覺疲勞，因此應(yīng)該將交互內(nèi)容保持在相同深度，確保用戶能不費(fèi)力切換UI；
5）可使用細(xì)微的深度變化來傳達(dá)UI的層次結(jié)構(gòu)；
6）適合注視點(diǎn)選定的最小區(qū)域至少60pt大小，開發(fā)者可以在這個范圍內(nèi)設(shè)計圖標(biāo)等元素（約44pt大小），并確保該元素與選定區(qū)邊緣的間距夠?qū)挘瑥亩屪⒁朁c(diǎn)選定更加準(zhǔn)確、快速；
7）UI可動態(tài)縮放（近小、遠(yuǎn)大），如果開發(fā)者選擇固定UI比例，那么如果界面放在遠(yuǎn)處，視覺看起來會更小，難以用眼球控制；
8）visionOS交互系統(tǒng)的設(shè)計初衷，是允許用戶在遠(yuǎn)距離也能與UI舒適交互；也支持近距離直接輸入，比如在虛擬鍵盤上用手指打字；
9）使用懸停突出/高亮來代表注視點(diǎn)運(yùn)動，為了對人眼快速移動做出及時反應(yīng)，這種效果做的比較自然微妙；
10）注視點(diǎn)長時間懸停在一個位置，代表了用戶的興趣和意圖；
11）長時間注視一個位置，visionOS的界面會顯示額外的信息、功能，比如工具提示、展開標(biāo)簽欄、觸發(fā)語音搜索等等，當(dāng)注意力從UI上轉(zhuǎn)移時，UI會恢復(fù)干凈簡潔的界面；
12）在Vision Pro頭顯中，用眼神和語音即可操作；長時間注視甚至還可以取代手勢來確認(rèn)輸入，意味著只用眼睛就能控制UI；
13）眼球+手勢定位是visionOS系統(tǒng)的主要交互方式，宣稱可提供準(zhǔn)確、體驗感好的交互，并實(shí)現(xiàn)一些智能的組合動作，比如：在縮放圖像時，會優(yōu)先從用戶注視點(diǎn)位置放大或縮小；或者，還可以用注視點(diǎn)來控制繪圖光標(biāo)，實(shí)現(xiàn)更高效創(chuàng)作體驗；
14）Vision Pro頭顯的手勢交互設(shè)計與人們熟悉的手機(jī)觸屏操作接近，比如手指捏合的動作相當(dāng)于在手機(jī)屏幕上點(diǎn)擊，而拖動捏合手勢則可以瀏覽界面，還可以用雙手來縮放；
15）手勢交互的邏輯與多點(diǎn)觸控手勢的邏輯類似，因此容易上手，用戶通過單手、雙手的捏合動作，就能實(shí)現(xiàn)單擊、雙擊、抓取、拖放、放大、旋轉(zhuǎn)等操作；
16）除了系統(tǒng)標(biāo)準(zhǔn)手勢外，開發(fā)者還可以自定義手勢；
17）虛擬鍵盤使用動態(tài)高亮效果來提示距離，引導(dǎo)手指瞄準(zhǔn)按鍵；
18）由于長時間舉手臂容易引起疲勞，因此應(yīng)適當(dāng)使用近距離觸控手勢，僅在體驗的核心玩法中使用；避免多次重復(fù)手勢讓用戶感到疲勞，或是采用容易做錯的手勢；
19）在空間計算平臺，軟件應(yīng)用不再局限于窗口中，而是可以占據(jù)用戶所在的物理空間，并對用戶的身體運(yùn)動做出反應(yīng)；
20）為了確保注視點(diǎn)輸入的準(zhǔn)確性，visionOS界面主要采用一些邊緣圓潤的圖形，因為如果采用方形等邊緣鋒利的形狀，注視點(diǎn)可能會跑到外部，從而降低識別的精確度；此外圖形應(yīng)避免采用粗輪廓，以避免將注意力吸引到圖形外部。
02. 空間UI設(shè)計
為了幫助開發(fā)者更快適應(yīng)空間計算平臺，蘋果構(gòu)建了一種比較熟悉的視覺語言，特點(diǎn)是和iOS等現(xiàn)有的平臺具有一致性，同時一些元素針對空間平臺進(jìn)行了優(yōu)化。
◎ 基礎(chǔ)和設(shè)計原則
1，App圖標(biāo)
visionOS的App圖標(biāo)采用了與iOS接近的風(fēng)格，最大的區(qū)別是形狀從圓角矩形變成了圓形，這種設(shè)計變化的一大原因，是為了讓注視點(diǎn)瞄準(zhǔn)的更準(zhǔn)確。除此之外，visionOS的App標(biāo)志是立體的，從側(cè)面能看到表面凸起，而且可與注視點(diǎn)動態(tài)交互，當(dāng)你盯著一個標(biāo)志時，標(biāo)志會展開，并顯示高光和陰影來加深微妙的視覺層次。
簡單來講，visionOS的App標(biāo)志為了呈現(xiàn)深度，通常由3個平面的圖層組成（1個背景層，2個表面層），目的是呈現(xiàn)雙目視差效果。此外，系統(tǒng)還會疊加一個“玻璃層”效果，來渲染深度、高光和陰影。
2，背景材質(zhì)
值得注意的是，visionOS的應(yīng)用標(biāo)志并非直接疊加在物理透視背景上，而是固定在一個像毛玻璃質(zhì)感的半透明界面上。蘋果指出，這種設(shè)計的好處是具有輕盈感、物理空間感，并可適應(yīng)各種不同的使用場景，比如狹小的空間、夜間或明亮的日光下等等。此外，半透光特性意味著不會完全遮擋物理空間，而是可模擬環(huán)境光動態(tài)透過的效果。
為了讓用戶在空間體驗中也能很好的感知環(huán)境，蘋果不建議開發(fā)者使用純色的菜單背景。
3，文字排版
為了提升文字易讀性、和背景的對比度，visionOS的字體在iOS字體基礎(chǔ)上加粗、加重。盡管如此，即使將窗口放大，一些較小的說明性文字依然難以辨別，因此建議盡量為字體增重、加粗。
值得注意的是，蘋果還為visionOS推出了兩種全新的字體樣式，特點(diǎn)是基于較寬的編輯樣式布局。
4，Vibrancy活力模式
原理是突出文字的光和色彩（與背景的對比度），開啟后文字看起來更亮，可讀性更強(qiáng)。考慮到visionOS菜單的窗口背景隨周圍環(huán)境而改變外觀，文字的活力模式也會實(shí)時調(diào)節(jié)亮度，確保文字清晰可見。
不僅如此，活力模式有三種亮度，可展現(xiàn)不同字符之間的層次結(jié)構(gòu)。
5，色彩
蘋果建議開發(fā)者將文字色彩設(shè)為系統(tǒng)默認(rèn)的白色，因為蘋果已經(jīng)針對白色文字的易讀性進(jìn)行校準(zhǔn)，可動態(tài)適應(yīng)背景窗口的色調(diào)和對比度。
6，其他建議：
- 考慮用戶頸部活動范圍，大多數(shù)人更習(xí)慣于左右轉(zhuǎn)頭，而不是上下轉(zhuǎn)頭，因此UI界面不應(yīng)在太高或太低的位置，大規(guī)模界面最好選擇橫向布局，而不是縱向布局；
- 懸停效果是一種視覺的對焦反饋，可很好的確認(rèn)用戶注視點(diǎn)的位置，并讓用戶了解哪些元素可以交互；
- 蘋果對UI設(shè)計要求細(xì)致，交互元素的邊角形狀也有要求，上下圖層的邊角需要是同心圓的一部分，以確保UI外觀看起來統(tǒng)一；
- visionOS所有系統(tǒng)組件都支持不同的輸入方式，包括眼球、手勢、藍(lán)牙鍵盤/觸控板等等。
03. 視覺體驗設(shè)計
相比于2D界面，空間計算平臺有更多獨(dú)特的玩法，比如深度和360°視野。另外，開發(fā)者需要考慮人身體的局限性，否則可能影響XR應(yīng)用體驗。換句話說，XR內(nèi)容的設(shè)計決策對用戶的視覺舒適度有重大影響。
◎ 視覺深度線索
XR內(nèi)容需要提供正確的視覺深度線索（與人眼實(shí)際對焦匹配）。怎么做？利用色彩、模糊、相對尺寸、輕柔的運(yùn)動、背景、光影、遮擋、紋理密度等信號，在視覺上側(cè)面暗示目標(biāo)所在的位置和深度。比如，在稀疏的場景中，將檸檬切片以綠色顯示，人腦會自動匹配現(xiàn)實(shí)生活中的檸檬，并根據(jù)檸檬的視覺尺寸，去分析它所在的深度。
值得注意的是，開發(fā)者應(yīng)該避免重復(fù)圖案等具有誤導(dǎo)性的視覺線索，否則如果左右眼對焦在不同的物體上，感知焦距與物體的實(shí)際焦距可能不匹配，從而造成重影。
◎ 應(yīng)用場景優(yōu)化
針對不同的應(yīng)用場景，XR內(nèi)容的視覺參數(shù)需要通過優(yōu)化來提升視覺舒適度，降低人眼壓力。比如在XR閱讀等需要長時間注視的應(yīng)用中，電子書放置在一臂之外的距離為最佳。同時，還要賦予用戶調(diào)整界面深度/距離的能力。相比之下，短暫視覺效果或直接交互的內(nèi)容（支持直接手勢輸入），則可以在靠近人眼的位置顯示。
另外，在顯示文字時應(yīng)采用高對比度，而對于轉(zhuǎn)移注意力的虛擬信號，則可以設(shè)置為較低對比度、透明度，或加入模糊效果。XR界面從暗色切換到亮色時，也要確保放慢切換過程，允許人眼舒適的適應(yīng)這種過渡。
圖像在空間中的位置也有講究，比如人眼向下、向左、向右看最舒適，而向上看、對角線掃視則需要更多眼部運(yùn)動，開發(fā)者在設(shè)計XR應(yīng)用時應(yīng)該考慮這些特性，來提升視覺體驗。如果XR內(nèi)容需要極端的眼球運(yùn)動，建議設(shè)計為簡短的交互，或是盡量防止在視野中心，來減少眼球轉(zhuǎn)動。
為了讓人眼有間歇的時間，開發(fā)者應(yīng)該在XR交互體驗中加入自然間歇。
在閱讀文本時，可通過放大文字、調(diào)整窗口大小和深度來強(qiáng)化文字視覺清晰度，避免讓用戶頻繁轉(zhuǎn)頭閱讀。
04. 運(yùn)動感知設(shè)計
容易眩暈是很多人對XR的印象，由于人感官系統(tǒng)的特性和局限，在XR內(nèi)容中移動可能會影響體驗的舒適性。蘋果指出，人的視覺系統(tǒng)負(fù)責(zé)接收光線、感知周圍的動態(tài)內(nèi)容，包括人自身的運(yùn)動。同時，內(nèi)耳中的前庭系統(tǒng)也會感知人的動作。
在通常情況下，視覺信息和前庭系統(tǒng)感知的運(yùn)動總是一致，但在視覺運(yùn)動信息缺失，或與前庭信息沖突時，人會感到不適，引起頭暈或反胃。
在XR場景中，人的身體通常固定在一個位置，而視覺上來看，身體卻在虛擬控件中走動，而這顯然造成了運(yùn)動感知沖突。為此，蘋果希望通過精心設(shè)計內(nèi)容，來讓大腦認(rèn)為XR場景為相對靜止，從而優(yōu)化用戶舒適性。比如，將XR中移動的對象設(shè)置為半透明，并確保VST場景清晰可見，以此來確保人腦識別到身體的靜止?fàn)顟B(tài)。
蘋果建議，開發(fā)者盡量不讓UI界面跟隨用戶頭部移動，如果一定要這樣設(shè)計，盡量縮小界面尺寸，放置在較遠(yuǎn)的距離，或是采用延遲跟隨方式，緩慢的跟隨用戶頭部移動。
UI界面內(nèi)的運(yùn)動設(shè)計也需要注意，比如窗口內(nèi)的地平線應(yīng)與現(xiàn)實(shí)場景地平線對齊，內(nèi)容移動的中心方向應(yīng)該位于人眼視野內(nèi)，并避免快速轉(zhuǎn)彎或純旋轉(zhuǎn)運(yùn)動（可以利用快速淡出來渲染瞬時轉(zhuǎn)向）。
同時，為了優(yōu)化視覺舒適性，XR運(yùn)動元素應(yīng)避免采用大規(guī)模物體，并使用低亮度對比度的純色紋理，降低人眼對運(yùn)動的識別度。
總之，開發(fā)者課程很好的闡釋了visionOS的設(shè)計邏輯，從中我們能夠看到蘋果對AR、VR上設(shè)計思路。可以說，目前蘋果已經(jīng)將第一方應(yīng)用和服務(wù)大部分集成至visionOS。
相信更多開發(fā)者也在期待月底上線的visionOS SDK，無論是嘗試遷移iOS應(yīng)用，或者全新為visionOS開發(fā)，屆時開發(fā)者們將會可以進(jìn)行更完整的探索，畢竟親自上手才更有說服力。
參考：Apple
