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

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

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

　　以下是visionOS UI的一些特點(diǎn)：visionOS的界面設(shè)計(jì)元素保持了iOS部分設(shè)計(jì)風(fēng)格，比如側(cè)邊欄、標(biāo)簽選項(xiàng)、搜索欄等大家熟悉的元素; 菜單界面的尺寸(半透明窗口)可根據(jù)實(shí)際用途、顯示內(nèi)容和所在空間調(diào)整大小，比其他VR平臺(tái)的固定尺寸界面更人性化。另外，還可以同時(shí)開(kāi)啟不同尺寸的界面，提升多任務(wù)處理效率; 界面默認(rèn)位于用戶視線高度和視野中心(考慮到用戶的實(shí)際身高和姿態(tài)); 在Quest平臺(tái)，你可以點(diǎn)擊手柄上的Oculus鍵來(lái)重置菜單位置，盡管Vision Pro沒(méi)有官方手柄，但依然可以通過(guò)點(diǎn)擊頭顯機(jī)身的數(shù)字旋鈕來(lái)重定向; 為了幫助用戶準(zhǔn)確的將AR窗口固定在特定的物理空間，visionOS在窗口移動(dòng)時(shí)采用了微妙的變化，比如移動(dòng)時(shí)窗口為半透明，允許用戶識(shí)別窗口背后的環(huán)境，固定后窗口又變回高飽和度圖像; 在AR觀影模式中，visionOS系統(tǒng)會(huì)自動(dòng)調(diào)低VST透視的透明度，讓觀影體驗(yàn)更沉浸、專(zhuān)注; visionOS非常注重虛擬和現(xiàn)實(shí)的融合，比如會(huì)渲染窗口投射到周?chē)�環(huán)境上的光以及地面陰影，看起來(lái)有實(shí)體感，就像是擺在空間中的屏幕。或者在顯示照片等內(nèi)容時(shí)，將照片邊緣模糊化; 充分結(jié)合微弱的深度變化信息，來(lái)突出特定的界面元素，比如將需要用戶關(guān)注的界面放在更靠近用戶的位置，而其他界面則靠后一些。 01. 交互設(shè)計(jì)

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

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

　　為了確保注視點(diǎn)瞄準(zhǔn)的準(zhǔn)確性，蘋(píng)果不僅優(yōu)化了Vision Pro頭顯的傳感器設(shè)計(jì)，在UI設(shè)計(jì)上也有諸多考慮，比如：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　20)為了確保注視點(diǎn)輸入的準(zhǔn)確性，visionOS界面主要采用一些邊緣圓潤(rùn)的圖形，因?yàn)槿绻�采用方形等邊緣鋒利的形狀，注視點(diǎn)可能會(huì)跑到外部，從而降低識(shí)別的精確度;此外圖形應(yīng)避免采用粗輪廓，以避免將注意力吸引到圖形外部。 02. 空間UI設(shè)計(jì)

　　為了幫助開(kāi)發(fā)者更快適應(yīng)空間計(jì)算平臺(tái)，蘋(píng)果構(gòu)建了一種比較熟悉的視覺(jué)語(yǔ)言，特點(diǎn)是和iOS等現(xiàn)有的平臺(tái)具有一致性，同時(shí)一些元素針對(duì)空間平臺(tái)進(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)志會(huì)展開(kāi)，并顯示高光和陰影來(lái)加深微妙的視覺(jué)層次。

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

　　2，背景材質(zhì)

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

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

　　3，文字排版

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

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

　　4，Vibrancy活力模式

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

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

　　5，色彩

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

　　6，其他建議： 考慮用戶頸部活動(dòng)范圍，大多數(shù)人更習(xí)慣于左右轉(zhuǎn)頭，而不是上下轉(zhuǎn)頭，因此UI界面不應(yīng)在太高或太低的位置，大規(guī)模界面最好選擇橫向布局，而不是縱向布局; 懸停效果是一種視覺(jué)的對(duì)焦反饋，可很好的確認(rèn)用戶注視點(diǎn)的位置，并讓用戶了解哪些元素可以交互; 蘋(píng)果對(duì)UI設(shè)計(jì)要求細(xì)致，交互元素的邊角形狀也有要求，上下圖層的邊角需要是同心圓的一部分，以確保UI外觀看起來(lái)統(tǒng)一; visionOS所有系統(tǒng)組件都支持不同的輸入方式，包括眼球、手勢(shì)、藍(lán)牙鍵盤(pán)/觸控板等等。 03. 視覺(jué)體驗(yàn)設(shè)計(jì)

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

　　◎ 視覺(jué)深度線索

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

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

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

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

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

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

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

　　在閱讀文本時(shí)，可通過(guò)放大文字、調(diào)整窗口大小和深度來(lái)強(qiáng)化文字視覺(jué)清晰度，避免讓用戶頻繁轉(zhuǎn)頭閱讀。 04. 運(yùn)動(dòng)感知設(shè)計(jì)

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

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

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

　　蘋(píng)果建議，開(kā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í)場(chǎng)景地平線對(duì)齊，內(nèi)容移動(dòng)的中心方向應(yīng)該位于人眼視野內(nèi)，并避免快速轉(zhuǎn)彎或純旋轉(zhuǎn)運(yùn)動(dòng)(可以利用快速淡出來(lái)渲染瞬時(shí)轉(zhuǎn)向)。

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

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

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

　　參考：Apple