實用的隔空手勢交互設計規範

羨慕鋼鐵俠電影中酷炫的手勢操作?其實背後的交互思考遠遠超出你的想象!未來的交互方式會發生顛覆性的全新改變，隔空手勢就是一個完全陌生的領域。下文將為大家展示一份全面實用的空手勢交互設計規範，歡迎學習!

未來的交互是多重方式的。但結合觸控和隔空手勢(還可能有語音輸入)的方式，並非典型的UI設計任務。

在Exipple，我們的設計師與工程師協作打造各種環境中的界面，能夠響應手勢交互和用户移動等物理屬性。我們從迭代式的設計、研發和評估過程中受益良多，我願意在此分享我們在手勢交互中的領悟與心得。

(FC Barcelona博物館中一堵交互式視頻牆的照片)

　　設計易於發現的手勢

手勢通常被認為是與屏幕和物體交互的自然方式，我們會談論在移動設備屏幕上雙指縮放地圖，還有在電視前揮手切換到下一部電影。但這些手勢真的那麼自然嗎?

對於從沒體驗過某種交互方式的用户而言，手勢是陌生的領域。雖然我們都本能地瞭解在觸屏上查看地圖細節該如何操作，但是想一想，如果在遠處觀看一塊大屏幕呢?如果有人告訴你，你不用觸碰屏幕，可以通過手部運動，以一種很自然直觀的方式放大地圖，你會首先嚐試什麼手勢?遇到這種問題時，我們每個人對自然的手勢都有各自的定義。

　　“未來的交互是多重方式的”

設計要易於發現，這點非常重要。要確保提供正確的設計符號線索，幫助用户輕鬆發現手勢操作方式。這些可以是視覺提示，表明什麼樣的手勢觸發什麼樣的動作。反覆使用後，這些探索性的提示就不必保留了，因為用户已經學會了這種手勢。

還可以設計動畫，漸進式地揭示某種不同的交互方式。例如，要確保用户瞭解到他們可以不必觸碰屏幕，在遠處就能操作，為此我們創造了一個菜單，當手指向屏幕時它就能顯示更多信息。起初圖片以一種隨意的方式懸浮排列(A圖)。靠近伸手指向這些圖片，能顯示出每張圖片其實是一個分類，包含更多內容(B圖)。

　　為什麼不能直接把觸控操作搬過來

去年我們做了一個小小的非正式研究。我們邀請了一些人到工作室來，向他們展示了一些熟悉的電視界面：菜單和圖標、地圖、網格、輪播圖。讓他們想象應該如何在遠處通過隔空手勢操作這些界面。

這些界面實際上是一系列微型的手勢交互原型。我們收集他們的期望，讓他們探索一番並給我們反饋。其中顯示出一種清晰的模式，他們的期望基本都來源於移動設備上熟悉的手勢。所有的參與者，都將手機上的心理模型應用到隔空手勢上。有時候，通過對界面操作的期望，我們甚至能從中區分出iOS和Android用户。

　　“最直觀的未必最有效易用。”

但我們很快就遭遇了挑戰：最直觀的未必最有效易用。例如，鼠標是一種高精度設備，提供一種精確控制。人的肢體在三維空間中隔空移動就沒這麼精確。我們覺得自己的手在X軸上移動，但實際上我們在另外兩個維度上也在微微運動。

我們無法指望達到相同的精確度。專注於精確細緻的移動，會不可避免地導致某種緊張——而且“伸直手”肯定不是自然的交互方式。

觸碰屏幕時，觸點就是起點——一個參照點。想象一下，典型的雙指縮放和雙手隔空構成類似的操作，兩者有什麼區別。縮放等級的參考點變得模糊不定。你也不能鬆開屏幕來停止操作，所以起始點和結束點都變得模稜兩可。

應該避免的例子：等同於雙指縮放的隔空手勢。

不要嘗試把觸控手勢直接變成隔空手勢，儘管它們更熟悉和容易。手勢交互需要一種全新的方式——一種起初陌生，但最終能夠讓用户極盡掌控、並使用户體驗設計走得更遠的方式。

　　去掉“亂跳”的指針

如果你在項目中運用計算機視覺技術(例如通過Kinect、Asus、Orbecc等帶有深度傳感器的相機捕捉動作)，你就知道，無法100%實現手和手指的位置追蹤。

其他的技術或許能提供更高的精確度，但它們通常需要用户穿戴特殊的設備。隨着我們手部運動，計算機並不能持續“看見”我們的手，結果就導致了我們所謂的手抖：看起來像屏幕上的指針或箭頭“緊張”顫抖。

　　“去掉指針這種反饋形式，提供一種替代方案。”

設計另一種指針或箭頭起不到多大作用，因為它仍然需要在屏幕上追蹤手部運動。你可以要求開發者過濾這些微妙的手部運動來避免這種效果。但是，這種解決方案要付出很高的代價，喪失了某些響應和精確度，並且會導致指針與手有輕微的延遲，降低用户對於界面的操控感。喪失用户的操控感，我們承擔不起。

　　那應該怎麼辦?

去掉指針。觸摸屏上也不需要指針。去掉指針這種反饋形式，提供一種替代方案。讓圖片和物體“彈出來”，立即響應用户的手部運動，不需要任何指針。

這會從根本上改變你思考用户界面的方式。這不是網頁，也不是移動端觸摸屏體驗。

　　敞開思路

要嘗試解放思想，從你熟悉的標準網頁和移動UI模式中解脱出來。忘了按鈕——思考動作。想象一下，不再有屏幕了，你要用手勢來控制周圍環境中的設備。你要如何讓電視機降低音量?如何點亮電燈?

象徵性和形象的手勢，例如用食指做出“噓”的手勢降低電視音量，這就簡單直接、富於表達力。這或許有些依賴特定場景，也需要用户學習，但一旦用户學會了，他們就很容易記住和使用。

　　我們創造了一些成功的手勢來控制了媒體播放：

要在手勢和它所觸發的動作之間建立聯繫。這些可以基於容易記憶的含義或者視覺參考。這並不容易——因為你需要考慮例如文化環境這樣的.方面。比如説，在某個國家或文化中被普遍接受的一種手勢表達，在另一個國家中或許有冒犯的意味。在某些環境中非常突出的象徵，在其他場合或許就沒有幫助。

依靠形象化的手勢創造所有類型的交互，可能會導致太多的手勢要記憶。要將它們當做快捷、有力的快速觸發方式——值得分配給那些需要用户頻繁重複的操作。

　　減少錯誤識別

對於計算機而言最大的挑戰，就是區分真正的意圖，和那些人們自然做出的偶然手勢，例如與人交談時手部四處移動。

很容易會意外觸發動作，讓界面在不該變化時發生改變，導致不穩定的體驗。作為UI設計師，你得與開發者密切配合，找出哪些有意義、哪些沒有，就能避免哪些錯誤的識別。

好的起點是：手勢設計總是要與特定場景和需要遇到的狀況聯繫起來。是否正在播放音樂?那麼手勢就可以觸發。如果沒有，那就什麼也不做。

　　“忘了按鈕——思考動作。”

要區分手勢和意外手部運動，時間是個重要的因素。例如，如果我指着某個物體超過1秒，就意味着我的確想要操作它。

距離也是另一個因素。如果你在為博物館或參觀中心設計一套互動裝置，你可能想讓它識別足夠靠近的參與者的手勢，相對忽略那些站在遠處的旁觀者。

　　避免疲勞

就像字面意思，感受手勢造成的影響並不容易。你得一遍遍觀察用户，理解你所創造的體驗給人帶來的真實感受。

　　簡單幾點需要記住：

1、除非你在設計物理遊戲或鍛鍊項目，否則要確保人們不必太頻繁或太長時間舉起手臂、抬起雙手。

2、要確保手部軌跡和UI元素間距離的比例足夠舒適，尤其對於大屏幕。這意味着用户可以毫不費力指向屏幕的任何部分。

一個例子，小範圍動作對應屏幕上更大範圍的區域，讓觸達更加輕鬆。

3、使用雙手比單手交互更不容易感到疲勞。

可以把某隻手作為慣用手，用來觸發操作(比如顯示出滑塊)。然後用另一隻手來輔助(調整滑塊的數值)。要考慮到你不必用單手來完成所有操作，可以探索更多的組合。

　　保持一致，左右手都要觸發相同動作

最後，用户通過右手觸發的任何操作，也應當能夠用左手觸發。這不僅是為了方便右撇子和左撇子，這種一致性也幫助人們學習和接受。所以如果你學會了某個手勢，你可以用任意一隻手觸發——不必記住要用哪隻手。

一致性要貫穿你整個概念，就像其他所有UX項目一樣。成功創造了手勢+動作的組合後，可以考慮是否需要在其他用户場景下啟用類似動作。一旦熟悉了，用户會期望使用相同的手勢。

要創造易於發現和記憶的統一的手勢語言。

有了這些手勢交互的規範，你就可以開始探索這塊相對未知的創意領域了。一旦理解了這些區別，就能結合隔空手勢和觸控手勢，創造獨特流暢的用户交互。