實(shí)用的隔空手勢(shì)交互設(shè)計(jì)規(guī)范
羨慕鋼鐵俠電影中酷炫的手勢(shì)操作?其實(shí)背后的交互思考遠(yuǎn)遠(yuǎn)超出你的想象!未來的交互方式會(huì)發(fā)生顛覆性的全新改變，隔空手勢(shì)就是一個(gè)完全陌生的領(lǐng)域。下文將為大家展示一份全面實(shí)用的空手勢(shì)交互設(shè)計(jì)規(guī)范，歡迎學(xué)習(xí)!
未來的交互是多重方式的。但結(jié)合觸控和隔空手勢(shì)(還可能有語(yǔ)音輸入)的方式，并非典型的UI設(shè)計(jì)任務(wù)。
在Exipple，我們的設(shè)計(jì)師與工程師協(xié)作打造各種環(huán)境中的界面，能夠響應(yīng)手勢(shì)交互和用戶移動(dòng)等物理屬性。我們從迭代式的設(shè)計(jì)、研發(fā)和評(píng)估過程中受益良多，我愿意在此分享我們?cè)谑謩?shì)交互中的領(lǐng)悟與心得。
(FC Barcelona博物館中一堵交互式視頻墻的照片)
設(shè)計(jì)易于發(fā)現(xiàn)的手勢(shì)
手勢(shì)通常被認(rèn)為是與屏幕和物體交互的自然方式，我們會(huì)談?wù)撛谝苿?dòng)設(shè)備屏幕上雙指縮放地圖，還有在電視前揮手切換到下一部電影。但這些手勢(shì)真的那么自然嗎?
對(duì)于從沒體驗(yàn)過某種交互方式的用戶而言，手勢(shì)是陌生的領(lǐng)域。雖然我們都本能地了解在觸屏上查看地圖細(xì)節(jié)該如何操作，但是想一想，如果在遠(yuǎn)處觀看一塊大屏幕呢?如果有人告訴你，你不用觸碰屏幕，可以通過手部運(yùn)動(dòng)，以一種很自然直觀的方式放大地圖，你會(huì)首先嘗試什么手勢(shì)?遇到這種問題時(shí)，我們每個(gè)人對(duì)自然的手勢(shì)都有各自的定義。
“未來的交互是多重方式的”
設(shè)計(jì)要易于發(fā)現(xiàn)，這點(diǎn)非常重要。要確保提供正確的設(shè)計(jì)符號(hào)線索，幫助用戶輕松發(fā)現(xiàn)手勢(shì)操作方式。這些可以是視覺提示，表明什么樣的手勢(shì)觸發(fā)什么樣的動(dòng)作。反復(fù)使用后，這些探索性的提示就不必保留了，因?yàn)橛脩粢呀?jīng)學(xué)會(huì)了這種手勢(shì)。
還可以設(shè)計(jì)動(dòng)畫，漸進(jìn)式地揭示某種不同的交互方式。例如，要確保用戶了解到他們可以不必觸碰屏幕，在遠(yuǎn)處就能操作，為此我們創(chuàng)造了一個(gè)菜單，當(dāng)手指向屏幕時(shí)它就能顯示更多信息。起初圖片以一種隨意的方式懸浮排列(A圖)。靠近伸手指向這些圖片，能顯示出每張圖片其實(shí)是一個(gè)分類，包含更多內(nèi)容(B圖)。
為什么不能直接把觸控操作搬過來
去年我們做了一個(gè)小小的非正式研究。我們邀請(qǐng)了一些人到工作室來，向他們展示了一些熟悉的電視界面：菜單和圖標(biāo)、地圖、網(wǎng)格、輪播圖。讓他們想象應(yīng)該如何在遠(yuǎn)處通過隔空手勢(shì)操作這些界面。
這些界面實(shí)際上是一系列微型的手勢(shì)交互原型。我們收集他們的期望，讓他們探索一番并給我們反饋。其中顯示出一種清晰的模式，他們的期望基本都來源于移動(dòng)設(shè)備上熟悉的手勢(shì)。所有的參與者，都將手機(jī)上的心理模型應(yīng)用到隔空手勢(shì)上。有時(shí)候，通過對(duì)界面操作的期望，我們甚至能從中區(qū)分出iOS和Android用戶。
“最直觀的未必最有效易用。”
但我們很快就遭遇了挑戰(zhàn)：最直觀的未必最有效易用。例如，鼠標(biāo)是一種高精度設(shè)備，提供一種精確控制。人的肢體在三維空間中隔空移動(dòng)就沒這么精確。我們覺得自己的手在X軸上移動(dòng)，但實(shí)際上我們?cè)诹硗鈨蓚�(gè)維度上也在微微運(yùn)動(dòng)。
我們無法指望達(dá)到相同的精確度。專注于精確細(xì)致的移動(dòng)，會(huì)不可避免地導(dǎo)致某種緊張——而且“伸直手”肯定不是自然的交互方式。
觸碰屏幕時(shí)，觸點(diǎn)就是起點(diǎn)——一個(gè)參照點(diǎn)。想象一下，典型的雙指縮放和雙手隔空構(gòu)成類似的操作，兩者有什么區(qū)別。縮放等級(jí)的參考點(diǎn)變得模糊不定。你也不能松開屏幕來停止操作，所以起始點(diǎn)和結(jié)束點(diǎn)都變得模棱兩可。
應(yīng)該避免的例子：等同于雙指縮放的隔空手勢(shì)。
不要嘗試把觸控手勢(shì)直接變成隔空手勢(shì)，盡管它們更熟悉和容易。手勢(shì)交互需要一種全新的方式——一種起初陌生，但最終能夠讓用戶極盡掌控、并使用戶體驗(yàn)設(shè)計(jì)走得更遠(yuǎn)的方式。
去掉“亂跳”的指針
如果你在項(xiàng)目中運(yùn)用計(jì)算機(jī)視覺技術(shù)(例如通過Kinect、Asus、Orbecc等帶有深度傳感器的相機(jī)捕捉動(dòng)作)，你就知道，無法100%實(shí)現(xiàn)手和手指的位置追蹤。
其他的技術(shù)或許能提供更高的精確度，但它們通常需要用戶穿戴特殊的設(shè)備。隨著我們手部運(yùn)動(dòng)，計(jì)算機(jī)并不能持續(xù)“看見”我們的手，結(jié)果就導(dǎo)致了我們所謂的手抖：看起來像屏幕上的指針或箭頭“緊張”顫抖。
“去掉指針這種反饋形式，提供一種替代方案。”
設(shè)計(jì)另一種指針或箭頭起不到多大作用，因?yàn)樗匀恍枰谄聊簧献粉櫴植窟\(yùn)動(dòng)。你可以要求開發(fā)者過濾這些微妙的手部運(yùn)動(dòng)來避免這種效果。但是，這種解決方案要付出很高的代價(jià)，喪失了某些響應(yīng)和精確度，并且會(huì)導(dǎo)致指針與手有輕微的延遲，降低用戶對(duì)于界面的操控感。喪失用戶的操控感，我們承擔(dān)不起。
那應(yīng)該怎么辦?
去掉指針。觸摸屏上也不需要指針。去掉指針這種反饋形式，提供一種替代方案。讓圖片和物體“彈出來”，立即響應(yīng)用戶的手部運(yùn)動(dòng)，不需要任何指針。
這會(huì)從根本上改變你思考用戶界面的方式。這不是網(wǎng)頁(yè)，也不是移動(dòng)端觸摸屏體驗(yàn)。
敞開思路
要嘗試解放思想，從你熟悉的標(biāo)準(zhǔn)網(wǎng)頁(yè)和移動(dòng)UI模式中解脫出來。忘了按鈕——思考動(dòng)作。想象一下，不再有屏幕了，你要用手勢(shì)來控制周圍環(huán)境中的設(shè)備。你要如何讓電視機(jī)降低音量?如何點(diǎn)亮電燈?
象征性和形象的手勢(shì)，例如用食指做出“噓”的手勢(shì)降低電視音量，這就簡(jiǎn)單直接、富于表達(dá)力。這或許有些依賴特定場(chǎng)景，也需要用戶學(xué)習(xí)，但一旦用戶學(xué)會(huì)了，他們就很容易記住和使用。
我們創(chuàng)造了一些成功的手勢(shì)來控制了媒體播放：
要在手勢(shì)和它所觸發(fā)的動(dòng)作之間建立聯(lián)系。這些可以基于容易記憶的含義或者視覺參考。這并不容易——因?yàn)槟阈枰紤]例如文化環(huán)境這樣的方面。比如說，在某個(gè)國(guó)家或文化中被普遍接受的一種手勢(shì)表達(dá)，在另一個(gè)國(guó)家中或許有冒犯的意味。在某些環(huán)境中非常突出的象征，在其他場(chǎng)合或許就沒有幫助。
依靠形象化的手勢(shì)創(chuàng)造所有類型的交互，可能會(huì)導(dǎo)致太多的手勢(shì)要記憶。要將它們當(dāng)做快捷、有力的快速觸發(fā)方式——值得分配給那些需要用戶頻繁重復(fù)的操作。
減少錯(cuò)誤識(shí)別
對(duì)于計(jì)算機(jī)而言最大的挑戰(zhàn)，就是區(qū)分真正的意圖，和那些人們自然做出的偶然手勢(shì)，例如與人交談時(shí)手部四處移動(dòng)。
很容易會(huì)意外觸發(fā)動(dòng)作，讓界面在不該變化時(shí)發(fā)生改變，導(dǎo)致不穩(wěn)定的體驗(yàn)。作為UI設(shè)計(jì)師，你得與開發(fā)者密切配合，找出哪些有意義、哪些沒有，就能避免哪些錯(cuò)誤的識(shí)別。
好的起點(diǎn)是：手勢(shì)設(shè)計(jì)總是要與特定場(chǎng)景和需要遇到的狀況聯(lián)系起來。是否正在播放音樂?那么手勢(shì)就可以觸發(fā)。如果沒有，那就什么也不做。
“忘了按鈕——思考動(dòng)作。”
要區(qū)分手勢(shì)和意外手部運(yùn)動(dòng)，時(shí)間是個(gè)重要的因素。例如，如果我指著某個(gè)物體超過1秒，就意味著我的確想要操作它。
距離也是另一個(gè)因素。如果你在為博物館或參觀中心設(shè)計(jì)一套互動(dòng)裝置，你可能想讓它識(shí)別足夠靠近的參與者的手勢(shì)，相對(duì)忽略那些站在遠(yuǎn)處的旁觀者。
避免疲勞
就像字面意思，感受手勢(shì)造成的影響并不容易。你得一遍遍觀察用戶，理解你所創(chuàng)造的體驗(yàn)給人帶來的真實(shí)感受。
簡(jiǎn)單幾點(diǎn)需要記住：
1、除非你在設(shè)計(jì)物理游戲或鍛煉項(xiàng)目，否則要確保人們不必太頻繁或太長(zhǎng)時(shí)間舉起手臂、抬起雙手。
2、要確保手部軌跡和UI元素間距離的比例足夠舒適，尤其對(duì)于大屏幕。這意味著用戶可以毫不費(fèi)力指向屏幕的任何部分。
一個(gè)例子，小范圍動(dòng)作對(duì)應(yīng)屏幕上更大范圍的區(qū)域，讓觸達(dá)更加輕松。
3、使用雙手比單手交互更不容易感到疲勞。
可以把某只手作為慣用手，用來觸發(fā)操作(比如顯示出滑塊)。然后用另一只手來輔助(調(diào)整滑塊的數(shù)值)。要考慮到你不必用單手來完成所有操作，可以探索更多的組合。
保持一致，左右手都要觸發(fā)相同動(dòng)作
最后，用戶通過右手觸發(fā)的任何操作，也應(yīng)當(dāng)能夠用左手觸發(fā)。這不僅是為了方便右撇子和左撇子，這種一致性也幫助人們學(xué)習(xí)和接受。所以如果你學(xué)會(huì)了某個(gè)手勢(shì)，你可以用任意一只手觸發(fā)——不必記住要用哪只手。
一致性要貫穿你整個(gè)概念，就像其他所有UX項(xiàng)目一樣。成功創(chuàng)造了手勢(shì)+動(dòng)作的組合后，可以考慮是否需要在其他用戶場(chǎng)景下啟用類似動(dòng)作。一旦熟悉了，用戶會(huì)期望使用相同的手勢(shì)。
要?jiǎng)?chuàng)造易于發(fā)現(xiàn)和記憶的統(tǒng)一的手勢(shì)語(yǔ)言。
有了這些手勢(shì)交互的規(guī)范，你就可以開始探索這塊相對(duì)未知的創(chuàng)意領(lǐng)域了。一旦理解了這些區(qū)別，就能結(jié)合隔空手勢(shì)和觸控手勢(shì)，創(chuàng)造獨(dú)特流暢的用戶交互。
【隔空手勢(shì)交互設(shè)計(jì)規(guī)范】相關(guān)文章：
網(wǎng)頁(yè)設(shè)計(jì)規(guī)范11-05
PC網(wǎng)頁(yè)設(shè)計(jì)規(guī)范12-24
解讀交互設(shè)計(jì)-Axure原型交互輸出10-20
網(wǎng)頁(yè)設(shè)計(jì)字體設(shè)計(jì)規(guī)范09-19
如何了解網(wǎng)站設(shè)計(jì)規(guī)范07-29
AXURE交互實(shí)例介紹11-12
交互設(shè)計(jì)總結(jié)03-06