visionOS：理想的UI設(shè)計(jì)竟要考慮這么多細(xì)節(jié)

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

【資料圖】

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

以下是visionOS UI的一些特點(diǎn)：

01. 交互設(shè)計(jì)

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

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è)計(jì)，在UI設(shè)計(jì)上也有諸多考慮，比如：

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

2）應(yīng)用的次要內(nèi)容或操作機(jī)制可放在視野邊緣；

3）應(yīng)用布局也要考慮肩頸舒適性；

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

5）可使用細(xì)微的深度變化來傳達(dá)UI的層次結(jié)構(gòu)；

6）適合注視點(diǎn)選定的最小區(qū)域至少60pt大小，開發(fā)者可以在這個(gè)范圍內(nèi)設(shè)計(jì)圖標(biāo)等元素（約44pt大小），并確保該元素與選定區(qū)邊緣的間距夠?qū)挘瑥亩屪⒁朁c(diǎn)選定更加準(zhǔn)確、快速；

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

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

9）使用懸停突出/高亮來代表注視點(diǎn)運(yùn)動(dòng)，為了對人眼快速移動(dòng)做出及時(shí)反應(yīng)，這種效果做的比較自然微妙；

10）注視點(diǎn)長時(shí)間懸停在一個(gè)位置，代表了用戶的興趣和意圖；

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

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

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

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

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

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

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

18）由于長時(shí)間舉手臂容易引起疲勞，因此應(yīng)適當(dāng)使用近距離觸控手勢，僅在體驗(yàn)的核心玩法中使用；避免多次重復(fù)手勢讓用戶感到疲勞，或是采用容易做錯(cuò)的手勢；

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

20）為了確保注視點(diǎn)輸入的準(zhǔn)確性，visionOS界面主要采用一些邊緣圓潤的圖形，因?yàn)槿绻捎梅叫蔚冗吘変h利的形狀，注視點(diǎn)可能會跑到外部，從而降低識別的精確度；此外圖形應(yīng)避免采用粗輪廓，以避免將注意力吸引到圖形外部。

02. 空間UI設(shè)計(jì)

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

◎ 基礎(chǔ)和設(shè)計(jì)原則

1，App圖標(biāo)

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

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

2，背景材質(zhì)

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

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

3，文字排版

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

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

4，Vibrancy活力模式

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

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

5，色彩

蘋果建議開發(fā)者將文字色彩設(shè)為系統(tǒng)默認(rèn)的白色，因?yàn)樘O果已經(jīng)針對白色文字的易讀性進(jìn)行校準(zhǔn)，可動(dòng)態(tài)適應(yīng)背景窗口的色調(diào)和對比度。

6，其他建議：

03. 視覺體驗(yàn)設(shè)計(jì)

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

◎ 視覺深度線索

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

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

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

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

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

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

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

在閱讀文本時(shí)，可通過放大文字、調(diào)整窗口大小和深度來強(qiáng)化文字視覺清晰度，避免讓用戶頻繁轉(zhuǎn)頭閱讀。

04. 運(yùn)動(dòng)感知設(shè)計(jì)

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

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

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

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

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

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

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

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

參考：Apple

責(zé)任編輯：Rex_20