在Vision Pro中，輸入方式的不同也對(duì)應(yīng)著不一樣的交互方式。本文主要討論一下如何用眼睛和雙手進(jìn)行自然的交互設(shè)計(jì)，希望對(duì)你有所啟發(fā)。

在前兩篇文章《Apple Vision Pro設(shè)計(jì)規(guī)范之空間設(shè)計(jì)原則篇》及《Apple Vision Pro設(shè)計(jì)規(guī)范之空間用戶(hù)界面篇》中，作者分別介紹了Vision Pro的核心設(shè)計(jì)原則及空間UI界面設(shè)計(jì)規(guī)范。在本篇中，我們將學(xué)習(xí)Vision Pro如何基于雙手和眼設(shè)計(jì)舒適、直覺(jué)、滿(mǎn)意度高的空間設(shè)計(jì)方法，以及設(shè)計(jì)師如何在空間計(jì)算平臺(tái)上充分利用該全新的輸入方式。

在Vision Pro中，主要的輸入方式有三種：

1. 非直接交互：通過(guò)眼部追蹤結(jié)合意圖預(yù)測(cè)算法作為交互瞄準(zhǔn)器，手勢(shì)捏合動(dòng)作作為觸發(fā)器進(jìn)行手眼協(xié)統(tǒng)輸入，這是系統(tǒng)內(nèi)主要的交互方式。
2. 直接交互：有些界面元素可以直接與手部進(jìn)行交互，例如虛擬鍵盤(pán)輸入、近距離窗口操作以及抓握虛擬物體等。但蘋(píng)果認(rèn)為直接交互會(huì)產(chǎn)生手臂疲勞，所以?xún)H在必要時(shí)進(jìn)行使用。
3. 語(yǔ)音交互：在很多場(chǎng)景下，可以利用語(yǔ)音進(jìn)行快捷搜索，幫助用戶(hù)輕松無(wú)障礙的進(jìn)行輸入，這有助于提升工作效率。

當(dāng)然除了上述主要三種交互方式以外，系統(tǒng)還允許外界設(shè)備適配不同場(chǎng)景下的輸入。比如辦公場(chǎng)景下可以通過(guò)外接實(shí)體鍵盤(pán)進(jìn)行文本輸入，游戲場(chǎng)景下可以外接游戲手柄增強(qiáng)游戲體驗(yàn)。

蘋(píng)果認(rèn)為空間輸入方式應(yīng)該是私人的、舒適的、精確的。

• 私人的（Personal）：設(shè)備上的攝像頭雖然捕捉所有用戶(hù)操作的動(dòng)作，但是以尊重用戶(hù)隱私的方式進(jìn)行記錄。
• 舒適的（Comfortable）：設(shè)備周?chē)臄z像頭能幫助用戶(hù)捕捉到廣闊的視野，所以用戶(hù)可以將雙手放在腿上進(jìn)行操作，以避免疲勞。
• 精確的(Precise)：設(shè)備會(huì)過(guò)濾到用戶(hù)隱私數(shù)據(jù)，方便用戶(hù)在系統(tǒng)中使用到準(zhǔn)確的交互輸入。

今天，我們主要討論一下如何用眼睛和雙手進(jìn)行自然的交互設(shè)計(jì)。

一、Eyes

眼睛是空間體驗(yàn)的主要意圖目標(biāo)，系統(tǒng)中所有界面，都會(huì)對(duì)用戶(hù)看的元素內(nèi)容做出反應(yīng)，系統(tǒng)可以毫不費(fèi)力的瞄準(zhǔn)任何空間中的元素。接下來(lái)，我們講探討如何設(shè)計(jì)舒適(Comfortable)的交互，讓元素內(nèi)容容易被你的眼睛瞄準(zhǔn)（Easy to use），以及界面如何響應(yīng)用戶(hù)的視線(xiàn)（Responsive）。

1. Comfortable

將應(yīng)用內(nèi)容放置在用戶(hù)的可視區(qū)內(nèi)

在空間計(jì)算平臺(tái)上，即使你的應(yīng)用有一個(gè)無(wú)限大的畫(huà)布空間，但用戶(hù)能看到的視野內(nèi)容是有限的。從人因工程學(xué)角度，用戶(hù)中心視角30度內(nèi)是瀏覽內(nèi)容最舒適區(qū)域，越往邊緣角度內(nèi)容，瀏覽越缺乏舒適性。所以，應(yīng)用窗口大小的設(shè)計(jì)應(yīng)該盡量將主要內(nèi)容放置在用戶(hù)的視野中心，以最大限度的減少頸部和身體的運(yùn)動(dòng)，而將用戶(hù)不需要的次要內(nèi)容或操作放置在邊緣區(qū)域。

盡量保持所有交互界面在同一個(gè)空間深度上

除此之外，深度也是一個(gè)影響用戶(hù)舒適性的特性。內(nèi)容的遠(yuǎn)或近，會(huì)給用戶(hù)創(chuàng)造不同的體驗(yàn)。但用戶(hù)一次只能聚焦在同一個(gè)深度，來(lái)回的切換會(huì)增加用戶(hù)視覺(jué)疲勞感，所以盡量保持所有的交互界面在同一個(gè)空間深度，以便在UI之間輕松切換。

比如，當(dāng)出現(xiàn)新的模態(tài)彈窗時(shí)，父窗口會(huì)向后推，以保證模態(tài)窗口在之前的空間距離上。通過(guò)保持相同的Z軸空間距離，你的眼睛不需要重新適應(yīng)新的距離。

2. Easy to use

引導(dǎo)視線(xiàn)到元素的中心，以提升眼睛瞄準(zhǔn)精確度

我們的雙眼是很精確的，有些特性能幫助我們的眼睛成功的瞄準(zhǔn)UI元素。眼睛會(huì)自然將注意力集中在形狀上，將我們注意力引導(dǎo)到元素內(nèi)容，所以建議使用像圓形、圓角矩形之類(lèi)較為圓潤(rùn)的形狀，而盡量避免使用鋒利的形狀，這樣你的眼睛往往會(huì)集中在元素外部，從而減小眼睛瞄準(zhǔn)的精確度。我們的眼睛會(huì)自然的將注意力集中在形狀上，將我們的注意力引導(dǎo)到物體中間，像圓形、圓角矩形等。但當(dāng)你使用鋒利的形狀時(shí)，你的眼睛往往會(huì)集中在外面。

同時(shí)，保持形狀扁平，避免粗輪廓或引起邊緣注意的效果。

最后，確保圖形和文本盡量居中圖形，以保持一定的內(nèi)間距。

保持最小60pt熱區(qū)，以幫助眼睛快速瞄準(zhǔn)

控件也有最小瞄準(zhǔn)區(qū)域，眼睛瞄準(zhǔn)的最小元素區(qū)域是60pt，但元素內(nèi)容可以小于60pt,通過(guò)添加內(nèi)間距后滿(mǎn)足最小目標(biāo)區(qū)域60pt即可。

使用動(dòng)態(tài)縮放，確保最小控件熱區(qū)

有了最小控件熱區(qū)后，我們必須確保在空間中的任何位置都能保持這個(gè)目標(biāo)區(qū)域，因?yàn)槲覀冃枰私馊绾慰s放你的用戶(hù)界面，讓我們看看兩種不同的縮放機(jī)制。

• 動(dòng)態(tài)縮放：窗口會(huì)隨著空間距離的遠(yuǎn)離而變大，隨著它的靠近而變小，動(dòng)態(tài)縮放能使界面填充相同的視野，并保持目標(biāo)區(qū)域的大小，無(wú)論窗口在哪里。
• 固定縮放：窗口會(huì)隨著空間距離的遠(yuǎn)離而變小，它改變界面的大小，會(huì)使界面難以用眼睛瞄準(zhǔn)。

所以，為了保證最小控件熱區(qū)，盡量使用動(dòng)態(tài)縮放（Use dynamic scale for UI）以確保您的眼睛始終可以瞄準(zhǔn)縮放后的界面上的所有控件。

保證界面始終朝向你的用戶(hù)

除了尺寸外，界面角度也會(huì)影響應(yīng)用的可用性。如果界面只能有一個(gè)角度的，用戶(hù)就很難查看或使，這就是為什么系統(tǒng)窗口始終面向用戶(hù)，但如果你在 創(chuàng)建自定義窗口，請(qǐng)始終確保UI界面面向你的用戶(hù)（Keep UI oriented to the viewer）。

3. Responsive

使用懸停效果來(lái)增強(qiáng)視覺(jué)反饋

界面元素的響應(yīng)至關(guān)重要，當(dāng)界面元素在高亮?xí)r，用戶(hù)能知道是眼睛在與它進(jìn)行交互。在系統(tǒng)中，所有控件元素都有高亮的懸停效果。比如在用戶(hù)看向按鈕時(shí)，相冊(cè)的照片時(shí)，所有空間都會(huì)有高亮反饋。所以，如果你為APP創(chuàng)建自定義元素內(nèi)容，請(qǐng)用Hover效果來(lái)增強(qiáng)視覺(jué)反饋（Use hover effects to provide feedback），并使你的元素具有響應(yīng)性。

用戶(hù)的意圖是非常敏感的信息，在處理眼動(dòng)數(shù)據(jù)時(shí)，隱私是首要任務(wù)，所有的hover效果都在進(jìn)程之外，只有在有手勢(shì)觸發(fā)的元素上存在交互時(shí)，你才能獲得要聚焦哪個(gè)元素的信息。

4. Intentional

充分利用眼睛意圖來(lái)進(jìn)行設(shè)計(jì)

當(dāng)用戶(hù)的眼睛懸停在某一個(gè)元素上時(shí)，實(shí)際是在表達(dá)意圖的信號(hào)，當(dāng)你看一個(gè)東西很久的時(shí)候，我們就可以知道你很感興趣，這是一個(gè)很好的機(jī)會(huì)向用戶(hù)展示更多的信息。例如按鈕可以有兩個(gè)狀態(tài)，當(dāng)你看向它會(huì)有懸停態(tài)以展現(xiàn)更多信息；同樣的，當(dāng)你看向側(cè)邊欄時(shí)，它會(huì)展開(kāi)，為每個(gè)選項(xiàng)卡顯示一個(gè)詳細(xì)標(biāo)簽；當(dāng)用戶(hù)聚焦在搜索欄上的麥克風(fēng)時(shí)，語(yǔ)音搜索將被觸發(fā)，你可以快速通過(guò)語(yǔ)音進(jìn)行交互。所有這些控件都會(huì)在你需要時(shí)提供額外信息，所以記得充分利用眼睛的意圖來(lái)進(jìn)行設(shè)計(jì)（Take advantage of eye intent）。

除此之外，系統(tǒng)還提供注視控制功能，即利用眼睛直接選擇內(nèi)容。比如，當(dāng)用戶(hù)的眼睛專(zhuān)注一個(gè)按鈕較短的時(shí)間內(nèi)，該按鈕就可以被選中，而不需要額外利用手勢(shì)來(lái)進(jìn)行操作。

二、Hands

將UI界面的反饋與手勢(shì)交互相連接

手勢(shì)是整個(gè)系統(tǒng)交互的主要方式，在Vision Pro中，系統(tǒng)支持點(diǎn)戳，捏合滑動(dòng)，以及雙手進(jìn)行縮放和旋轉(zhuǎn)操作。所以要記得將UI界面的反饋與手勢(shì)交互相連接（Connect UI feedback to gesture），這有助于用戶(hù)感受手勢(shì)操作的反饋。

使用與系統(tǒng)一致的手勢(shì)語(yǔ)言

在整個(gè)系統(tǒng)中手勢(shì)以一致且遵循邏輯方式使用，這讓用戶(hù)可以真正專(zhuān)注于體驗(yàn)，而不是必須考慮如何進(jìn)行手勢(shì)交互,這就是為什么我們應(yīng)該依靠這些熟悉的模式進(jìn)行設(shè)計(jì)(Use familiar patterns)，確保以符合用戶(hù)期望的方式響應(yīng)手勢(shì)。

僅在必要情況下設(shè)計(jì)自定義手勢(shì)

在某些情況下，你的界面中可能會(huì)包含一些獨(dú)特的操作行為，無(wú)法用系統(tǒng)手勢(shì)來(lái)執(zhí)行交互操作，你看需要自定義一個(gè)新的手勢(shì)，下面是蘋(píng)果給設(shè)計(jì)師關(guān)于如何定義優(yōu)秀手勢(shì)的建議：

確保手勢(shì)易于解釋和執(zhí)行（easy to explain and perform），以便人們可以快速學(xué)習(xí)如何使用它。

避免手勢(shì)沖突(avoid gesture conflicts),自定義的手勢(shì)需要與系統(tǒng)級(jí)或人們?cè)趯?duì)話(huà)中可能使用的常見(jiàn)手部動(dòng)作明顯不同。

可以不斷重復(fù)而不緊張或疲勞（comfortable and reliable）的手勢(shì)，使手勢(shì)具有極低的誤觸率。

手勢(shì)能對(duì)每個(gè)用戶(hù)無(wú)障礙進(jìn)行使用（accessible to everyone），并考慮手勢(shì)對(duì)特殊用戶(hù)的可用性。

避免手勢(shì)歧義（Unambiguous），手勢(shì)對(duì)不同用戶(hù)有不同的含義，確保你的自定義手勢(shì)不會(huì)傳達(dá)你不想傳達(dá)的信息。

用眼睛意圖增強(qiáng)手勢(shì)交互

除了手勢(shì)操作外，Vision Pro還提供了備用交互方案，即使用眼睛作為意圖信號(hào)（eyes and intent），使用眼睛的注視方向，結(jié)合手勢(shì)，我們可以創(chuàng)建在其他平臺(tái)上不可能實(shí)現(xiàn)的精確和令人滿(mǎn)意的交互。

讓我們拿手勢(shì)縮放舉例，當(dāng)我們?cè)诳磮D片時(shí)，我們眼睛注視的特定位置，可以通過(guò)手勢(shì)被放大或居中。這樣，用戶(hù)就可以輕松的操作圖片上任意一個(gè)位置的大小。你所看到的地方能很自然的表明交互意圖。

另一個(gè)例子是Markup中的指針移動(dòng)，當(dāng)你用手控制畫(huà)筆光標(biāo)進(jìn)行繪圖時(shí)，它的體驗(yàn)就像鼠標(biāo)執(zhí)政一樣，但如果你看向畫(huà)布的另一邊，光標(biāo)就會(huì)快速移動(dòng)到相應(yīng)的位置，這有助于增強(qiáng)交互準(zhǔn)確性并幫助用戶(hù)快速在較大的畫(huà)布上進(jìn)行交互。

因此眼睛不僅闊用于精確的瞄準(zhǔn)目標(biāo)元素，還能隱含的為某些交互提供功能更精細(xì)的位置。

使用直接交互體驗(yàn)合適的場(chǎng)景

現(xiàn)在讓我們談?wù)務(wù)麄€(gè)系統(tǒng)的直接交互，系統(tǒng)支持直接利用雙手指尖來(lái)進(jìn)行交互。例如，用戶(hù)可以將safari靠近自己并直接滾動(dòng)頁(yè)面，還可以使用雙手在虛擬鍵盤(pán)上打字，甚至可以在手臂觸手可及的范圍內(nèi)操作3D內(nèi)容。

在設(shè)計(jì)直接交互時(shí)，我們必須記住，長(zhǎng)時(shí)間讓雙手騰空會(huì)導(dǎo)致疲勞感。但有些場(chǎng)景仍然是適合將內(nèi)放置在手臂可及的直接交互范圍內(nèi)，例如讓用戶(hù)近距離觀看或操作時(shí)，或?qū)ο蟛僮魇墙⒃诩∪庥洃浿系?，以及我們的身體活動(dòng)是處于體驗(yàn)中心的時(shí)候。

提供清晰反饋彌補(bǔ)缺失的觸覺(jué)信息

另一件要考慮的事情是缺乏觸覺(jué)反饋，每次我們觸摸物理世界中的東西時(shí)，我們的手都會(huì)收到大量的多感官反饋，這對(duì)我們的感知至關(guān)重要，但當(dāng)我們伸出手觸摸虛擬物體時(shí)，這些都不會(huì)發(fā)生，為了使使交互反饋更加真實(shí)，我們需要用其他類(lèi)型的反饋來(lái)彌補(bǔ)缺失的感受信息（Provide extensive feedback for direct touch）。

讓我們看看鍵盤(pán)是如何彌補(bǔ)觸覺(jué)反饋的，鍵盤(pán)的按鈕在面板上是凸起的，以示意用戶(hù)是可以被按下的，當(dāng)手指靠近鍵盤(pán)按鈕時(shí)，鍵盤(pán)上方會(huì)顯示懸停狀態(tài)，當(dāng)你繼續(xù)靠近按鈕表面時(shí)，高光返回會(huì)變得更亮。它提供了一個(gè)接近的效果，并幫助引導(dǎo)手指找到目標(biāo)位置。在按下的瞬間，按鈕狀態(tài)迅速變化，反應(yīng)靈敏，并伴隨著空間音效。這些額外的反饋，對(duì)補(bǔ)足觸覺(jué)的缺失尤其重要，并讓直接交互變得可靠和滿(mǎn)意。

參考鏈接：空間輸入設(shè)計(jì)篇：https://developer.apple.com/videos/play/wwdc2023/10073/