?Apple Vision Pro設計規范之空間輸入篇
在Vision Pro中,輸入方式的不同也對應著不一樣的交互方式。本文主要討論一下如何用眼睛和雙手進行自然的交互設計,希望對你有所啟發。
在前兩篇文章《Apple Vision Pro設計規范之空間設計原則篇》及《Apple Vision Pro設計規范之空間用戶界面篇》中,作者分別介紹了Vision Pro的核心設計原則及空間UI界面設計規范。在本篇中,我們將學習Vision Pro如何基于雙手和眼設計舒適、直覺、滿意度高的空間設計方法,以及設計師如何在空間計算平臺上充分利用該全新的輸入方式。
在Vision Pro中,主要的輸入方式有三種:
- 非直接交互:通過眼部追蹤結合意圖預測算法作為交互瞄準器,手勢捏合動作作為觸發器進行手眼協統輸入,這是系統內主要的交互方式。
- 直接交互:有些界面元素可以直接與手部進行交互,例如虛擬鍵盤輸入、近距離窗口操作以及抓握虛擬物體等。但蘋果認為直接交互會產生手臂疲勞,所以僅在必要時進行使用。
- 語音交互:在很多場景下,可以利用語音進行快捷搜索,幫助用戶輕松無障礙的進行輸入,這有助于提升工作效率。
當然除了上述主要三種交互方式以外,系統還允許外界設備適配不同場景下的輸入。比如辦公場景下可以通過外接實體鍵盤進行文本輸入,游戲場景下可以外接游戲手柄增強游戲體驗。
蘋果認為空間輸入方式應該是私人的、舒適的、精確的。
- 私人的(Personal):設備上的攝像頭雖然捕捉所有用戶操作的動作,但是以尊重用戶隱私的方式進行記錄。
- 舒適的(Comfortable):設備周圍的攝像頭能幫助用戶捕捉到廣闊的視野,所以用戶可以將雙手放在腿上進行操作,以避免疲勞。
- 精確的(Precise):設備會過濾到用戶隱私數據,方便用戶在系統中使用到準確的交互輸入。
今天,我們主要討論一下如何用眼睛和雙手進行自然的交互設計。
一、Eyes
眼睛是空間體驗的主要意圖目標,系統中所有界面,都會對用戶看的元素內容做出反應,系統可以毫不費力的瞄準任何空間中的元素。接下來,我們講探討如何設計舒適(Comfortable)的交互,讓元素內容容易被你的眼睛瞄準(Easy to use),以及界面如何響應用戶的視線(Responsive)。
1. Comfortable
將應用內容放置在用戶的可視區內
在空間計算平臺上,即使你的應用有一個無限大的畫布空間,但用戶能看到的視野內容是有限的。從人因工程學角度,用戶中心視角30度內是瀏覽內容最舒適區域,越往邊緣角度內容,瀏覽越缺乏舒適性。所以,應用窗口大小的設計應該盡量將主要內容放置在用戶的視野中心,以最大限度的減少頸部和身體的運動,而將用戶不需要的次要內容或操作放置在邊緣區域。
盡量保持所有交互界面在同一個空間深度上
除此之外,深度也是一個影響用戶舒適性的特性。內容的遠或近,會給用戶創造不同的體驗。但用戶一次只能聚焦在同一個深度,來回的切換會增加用戶視覺疲勞感,所以盡量保持所有的交互界面在同一個空間深度,以便在UI之間輕松切換。
比如,當出現新的模態彈窗時,父窗口會向后推,以保證模態窗口在之前的空間距離上。通過保持相同的Z軸空間距離,你的眼睛不需要重新適應新的距離。
2. Easy to use
引導視線到元素的中心,以提升眼睛瞄準精確度
我們的雙眼是很精確的,有些特性能幫助我們的眼睛成功的瞄準UI元素。眼睛會自然將注意力集中在形狀上,將我們注意力引導到元素內容,所以建議使用像圓形、圓角矩形之類較為圓潤的形狀,而盡量避免使用鋒利的形狀,這樣你的眼睛往往會集中在元素外部,從而減小眼睛瞄準的精確度。我們的眼睛會自然的將注意力集中在形狀上,將我們的注意力引導到物體中間,像圓形、圓角矩形等。但當你使用鋒利的形狀時,你的眼睛往往會集中在外面。
同時,保持形狀扁平,避免粗輪廓或引起邊緣注意的效果。
最后,確保圖形和文本盡量居中圖形,以保持一定的內間距。
保持最小60pt熱區,以幫助眼睛快速瞄準
控件也有最小瞄準區域,眼睛瞄準的最小元素區域是60pt,但元素內容可以小于60pt,通過添加內間距后滿足最小目標區域60pt即可。
使用動態縮放,確保最小控件熱區
有了最小控件熱區后,我們必須確保在空間中的任何位置都能保持這個目標區域,因為我們需要了解如何縮放你的用戶界面,讓我們看看兩種不同的縮放機制。
- 動態縮放:窗口會隨著空間距離的遠離而變大,隨著它的靠近而變小,動態縮放能使界面填充相同的視野,并保持目標區域的大小,無論窗口在哪里。
- 固定縮放:窗口會隨著空間距離的遠離而變小,它改變界面的大小,會使界面難以用眼睛瞄準。
所以,為了保證最小控件熱區,盡量使用動態縮放(Use dynamic scale for UI)以確保您的眼睛始終可以瞄準縮放后的界面上的所有控件。
保證界面始終朝向你的用戶
除了尺寸外,界面角度也會影響應用的可用性。如果界面只能有一個角度的,用戶就很難查看或使,這就是為什么系統窗口始終面向用戶,但如果你在 創建自定義窗口,請始終確保UI界面面向你的用戶(Keep UI oriented to the viewer)。
3. Responsive
使用懸停效果來增強視覺反饋
界面元素的響應至關重要,當界面元素在高亮時,用戶能知道是眼睛在與它進行交互。在系統中,所有控件元素都有高亮的懸停效果。比如在用戶看向按鈕時,相冊的照片時,所有空間都會有高亮反饋。所以,如果你為APP創建自定義元素內容,請用Hover效果來增強視覺反饋(Use hover effects to provide feedback),并使你的元素具有響應性。
用戶的意圖是非常敏感的信息,在處理眼動數據時,隱私是首要任務,所有的hover效果都在進程之外,只有在有手勢觸發的元素上存在交互時,你才能獲得要聚焦哪個元素的信息。
4. Intentional
充分利用眼睛意圖來進行設計
當用戶的眼睛懸停在某一個元素上時,實際是在表達意圖的信號,當你看一個東西很久的時候,我們就可以知道你很感興趣,這是一個很好的機會向用戶展示更多的信息。例如按鈕可以有兩個狀態,當你看向它會有懸停態以展現更多信息;同樣的,當你看向側邊欄時,它會展開,為每個選項卡顯示一個詳細標簽;當用戶聚焦在搜索欄上的麥克風時,語音搜索將被觸發,你可以快速通過語音進行交互。所有這些控件都會在你需要時提供額外信息,所以記得充分利用眼睛的意圖來進行設計(Take advantage of eye intent)。
除此之外,系統還提供注視控制功能,即利用眼睛直接選擇內容。比如,當用戶的眼睛專注一個按鈕較短的時間內,該按鈕就可以被選中,而不需要額外利用手勢來進行操作。
二、Hands
將UI界面的反饋與手勢交互相連接
手勢是整個系統交互的主要方式,在Vision Pro中,系統支持點戳,捏合滑動,以及雙手進行縮放和旋轉操作。所以要記得將UI界面的反饋與手勢交互相連接(Connect UI feedback to gesture),這有助于用戶感受手勢操作的反饋。
使用與系統一致的手勢語言
在整個系統中手勢以一致且遵循邏輯方式使用,這讓用戶可以真正專注于體驗,而不是必須考慮如何進行手勢交互,這就是為什么我們應該依靠這些熟悉的模式進行設計(Use familiar patterns),確保以符合用戶期望的方式響應手勢。
僅在必要情況下設計自定義手勢
在某些情況下,你的界面中可能會包含一些獨特的操作行為,無法用系統手勢來執行交互操作,你看需要自定義一個新的手勢,下面是蘋果給設計師關于如何定義優秀手勢的建議:
確保手勢易于解釋和執行(easy to explain and perform),以便人們可以快速學習如何使用它。
避免手勢沖突(avoid gesture conflicts),自定義的手勢需要與系統級或人們在對話中可能使用的常見手部動作明顯不同。
可以不斷重復而不緊張或疲勞(comfortable and reliable)的手勢,使手勢具有極低的誤觸率。
手勢能對每個用戶無障礙進行使用(accessible to everyone),并考慮手勢對特殊用戶的可用性。
避免手勢歧義(Unambiguous),手勢對不同用戶有不同的含義,確保你的自定義手勢不會傳達你不想傳達的信息。
用眼睛意圖增強手勢交互
除了手勢操作外,Vision Pro還提供了備用交互方案,即使用眼睛作為意圖信號(eyes and intent),使用眼睛的注視方向,結合手勢,我們可以創建在其他平臺上不可能實現的精確和令人滿意的交互。
讓我們拿手勢縮放舉例,當我們在看圖片時,我們眼睛注視的特定位置,可以通過手勢被放大或居中。這樣,用戶就可以輕松的操作圖片上任意一個位置的大小。你所看到的地方能很自然的表明交互意圖。
另一個例子是Markup中的指針移動,當你用手控制畫筆光標進行繪圖時,它的體驗就像鼠標執政一樣,但如果你看向畫布的另一邊,光標就會快速移動到相應的位置,這有助于增強交互準確性并幫助用戶快速在較大的畫布上進行交互。
因此眼睛不僅闊用于精確的瞄準目標元素,還能隱含的為某些交互提供功能更精細的位置。
使用直接交互體驗合適的場景
現在讓我們談談整個系統的直接交互,系統支持直接利用雙手指尖來進行交互。例如,用戶可以將safari靠近自己并直接滾動頁面,還可以使用雙手在虛擬鍵盤上打字,甚至可以在手臂觸手可及的范圍內操作3D內容。
在設計直接交互時,我們必須記住,長時間讓雙手騰空會導致疲勞感。但有些場景仍然是適合將內放置在手臂可及的直接交互范圍內,例如讓用戶近距離觀看或操作時,或對象操作是建立在肌肉記憶之上的,以及我們的身體活動是處于體驗中心的時候。
提供清晰反饋彌補缺失的觸覺信息
另一件要考慮的事情是缺乏觸覺反饋,每次我們觸摸物理世界中的東西時,我們的手都會收到大量的多感官反饋,這對我們的感知至關重要,但當我們伸出手觸摸虛擬物體時,這些都不會發生,為了使使交互反饋更加真實,我們需要用其他類型的反饋來彌補缺失的感受信息(Provide extensive feedback for direct touch)。
讓我們看看鍵盤是如何彌補觸覺反饋的,鍵盤的按鈕在面板上是凸起的,以示意用戶是可以被按下的,當手指靠近鍵盤按鈕時,鍵盤上方會顯示懸停狀態,當你繼續靠近按鈕表面時,高光返回會變得更亮。它提供了一個接近的效果,并幫助引導手指找到目標位置。在按下的瞬間,按鈕狀態迅速變化,反應靈敏,并伴隨著空間音效。這些額外的反饋,對補足觸覺的缺失尤其重要,并讓直接交互變得可靠和滿意。
參考鏈接:空間輸入設計篇:https://developer.apple.com/videos/play/wwdc2023/10073/
本文由 @Vicky。 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
- 目前還沒評論,等你發揮!