探秘：移動(dòng)設備人機交互的手勢設計

　　移動(dòng)設備大行其道的今天，手勢是一個(gè)流行詞匯，那手勢是什么呢？手，是人類(lèi)各種創(chuàng )造性活動(dòng)的天然工具，人們天生就會(huì )使用手的動(dòng)作去表達情感，比如人們會(huì )使用握手來(lái)表示友好，聾啞人使用一套用手語(yǔ)來(lái)代替語(yǔ)言交流，這些都是手勢在生活中的應用?？梢?jiàn)自古以來(lái)手勢就是一套特定的語(yǔ)言系統，在人的交流中發(fā)揮重 要的作用。從交互上看，手勢實(shí)際上是一種輸入模式。我們現在在直觀(guān)意義上理解的人機交互是指人與機器之間的互動(dòng)方式，這種互動(dòng)方式經(jīng)歷了鼠標、物理硬件、屏幕觸控、遠距離的體感操作的逐步發(fā)展的過(guò)程。

　　然而交互設計領(lǐng)域，大家普遍探討的手勢概念，是區別于傳統的鍵盤(pán)操作和鼠標操作的。后面會(huì )著(zhù)重研究移動(dòng)設備的手勢操作，主要從手勢存在的問(wèn)題、應用場(chǎng)景以及設計時(shí)應注意什么說(shuō)起。

1　廣義的手勢類(lèi)型

　　1.1 利用鼠標、光標的軌跡模擬手勢　

　　網(wǎng)站www.kakarod.com，采用了大量的屏幕模擬手勢交互，點(diǎn)擊、拖拽等動(dòng)作，生動(dòng)活潑讓人眼前一亮。

　　1.2 在物理硬件上的手勢　

　　蘋(píng)果Magic Mouse鼠標， macbook觸摸板均支持單指多指滑動(dòng)等多種手勢。

　　1.3 在觸摸屏上的手勢　

　　主要有長(cháng)按、輕觸、滑動(dòng)、拖動(dòng)、旋轉、縮放、搖動(dòng)這八種手勢。

　　1.4 遠距離體感

　　通過(guò)攝像頭，傳感器等捕捉手甚至整個(gè)身體的姿勢，來(lái)進(jìn)行控制。

　　1.5 未來(lái)的手勢　　

　　利用全息投影以及傳感器，在空間或者投影上直接操作，這個(gè)已經(jīng)應用在某些領(lǐng)域，相信不久的將來(lái)一定會(huì )廣泛服務(wù)于我們的生活。PS：在蘋(píng)果最新申請的專(zhuān)利中就提到了“投影手勢操作”的技術(shù)，喬幫主這次又會(huì )帶來(lái)什么革命性的產(chǎn)品就讓我們拭目以待吧?！?/P>

　　當然在生活中也還有其他的手勢操作，這里就不再贅述。本文主要研究的是目前爆發(fā)式增長(cháng)的移動(dòng)設備上的觸摸屏手勢操作，以ios，android 系統為主。觸屏上的手勢是指，將一系列多點(diǎn)觸摸事件綜合為一個(gè)單獨事件。分析觸摸屏上的手勢使用現狀，發(fā)現相對于傳統鼠標鍵盤(pán)，手勢交互操作一些明顯的特點(diǎn)。下圖是從時(shí)間和空間兩個(gè)維度總結出的手勢概覽。為讀者在手勢設計時(shí)提供參考。

2 存在的可用性問(wèn)題

　　不少專(zhuān)家認為新的手勢交互界面有很多地方?jīng)]有遵循已經(jīng)建立好的交互設計原則，使得經(jīng)過(guò)良好測試和業(yè)內已被理解的交互設計標準正在被推翻、忽略和違背。

　　主要有以下幾個(gè)問(wèn)題：

　　2.1 精確性降低

　　以 ios為例，相比光標1像素的精度，手勢的精確性要低很多。適合手指點(diǎn)擊區域需要做到44*44px（iphONe4以下設備），配合手勢的輕重有 0~20px的偏差，所以觸屏界面需要使用更大尺寸的控件響應面積。iPhone 3GS、iPad和iPhone4屏幕分辨率密度分別為163 ppi 、132 ppi和326ppi，可以看到3GS和iPad的控件響應像素接近，單邊應達到44px的標準，而iPhone4則需要再擴大幾倍。

　　2.2 缺乏可見(jiàn)性和一致性

　　以iPad Pages這個(gè)App為例，比如文稿中有2個(gè)對象，你想要使它大小一樣，有以下兩個(gè)方法：你可以通過(guò)雙指拖拽利用邊緣參考線(xiàn)讓它們大小一樣，當然這種放大 縮小的方式在很多App中都很常見(jiàn)，因此很容易想到。另外你也可以這樣做，用一只手指拖拽其中一個(gè)對象的同時(shí)，用另一直手指觸碰你想要與之相同的對象，當出現符合大小提示時(shí)先抬起第一個(gè)手指再抬起第二個(gè)手指，那么這兩個(gè)對象的尺寸就完全一樣了（這兩種方式在app中沒(méi)有任何幫助和說(shuō)明）。那么很顯然，沒(méi)有人會(huì )輕易發(fā)現第二種手勢方式。即使發(fā)現了也不會(huì )很快知道如何使用。再比如android的長(cháng)按操作也是如此?！?/P>

　　造成這個(gè)問(wèn)題的重要原因是手勢界面通常沒(méi)有代表動(dòng)作的可視元素，手勢即動(dòng)作。若是通用自然的手勢就沒(méi)問(wèn)題，若是罕見(jiàn)的組合手勢那用戶(hù)就很難發(fā)現它，并有可能帶來(lái)可用性問(wèn)題。

　　2.3 增加操作成本以及誤操作

　　2.3.1 在位移上

　　手勢操作相比于呆板的鼠標點(diǎn)擊的確生動(dòng)有趣了許多，但一些操作，比如放大縮小和下拉卻增加了操作成本，在鼠標上滾輪就能完成的事，觸屏上就需要手指上下拖動(dòng)許多下。

　　2.3.2 在力度上

　　手勢操作沒(méi)有鼠標按下的物理反饋，因為力度也難以掌握，有時(shí)糟糕的設計會(huì )讓用戶(hù)誤以為是自己操作的問(wèn)題，從而反復嘗試。

　　2.3.3 在靈敏度上

　　ios的觸屏都很靈敏，輕觸和長(cháng)按的操作界限很模糊，并且除了固定的Button，很多操作的響應區都很大，不受Button大小限制。因此常常會(huì )不小心碰到使某個(gè)操作響應，例如在通話(huà)記錄播出一個(gè)號碼以及備忘錄的右滑的刪除。

　　2.4 受限于物理因素

　　2.4.1 物理按鍵

　　帶來(lái)真實(shí)的觸感和一定的操作中斷感，后期的手機逐漸弱化物理按鍵，手勢與屏幕結合的更緊湊。Android用硬件按鈕觸發(fā)菜單，意味著(zhù)你無(wú)法預知什么程序以及在什么情況下會(huì )有菜單選項。因為硬件按鈕始終在那里，無(wú)論程序是否需要它?！?/P>

　　上圖從左往右依次是Plam pre、palm pre2、palm pre3，返回按鈕與手機屏幕融合得越來(lái)越緊湊。

　　2.4.2 橫豎方向

　　直接受限于物理按鍵，android設備的物理按鍵位置不統一，橫豎屏切換時(shí)不便于快速辨認，手勢的連貫操作會(huì )受到比較大的影響。如果app支持水平方向，考慮將返回按鈕和常用的菜單直接顯示在軟件界面上。因此app應考慮直接提供“返回”按鈕?！?/P>

　　2.4.3 設備尺寸

　　大屏幕的Pad支持更多的多指復雜手勢，手機大多單指操作。

　　2.4.4 控件形態(tài)

　　按鈕的大小控制（不同分辨率下大小的轉換）、拖動(dòng)時(shí)的反饋提示、滑動(dòng)選擇與點(diǎn)擊的轉化。

3 手勢設計要注意什么

　　基于上述可用性問(wèn)題，總結出手勢操作設計時(shí)應該注意以下幾點(diǎn)：

　　3.1 操作引導

　　這里可以是詳細的幫助界面也可以是隱喻圖形化的引導（隱喻要符合用戶(hù)的心智模型），例如分頁(yè)的圓點(diǎn)標識，或者切換頁(yè)面露出一部分內容，可長(cháng)按的系統 icon，翻起的頁(yè)腳升，甚至動(dòng)畫(huà)等等。這里的提示程度自己拿捏，效率型應用，盡量做到清晰可見(jiàn)，即看即點(diǎn)。沉浸型應用可以適當預留探索的空間，讓用戶(hù)自己去發(fā)現，帶來(lái)預期之外的驚喜。比如QQLiveHD首頁(yè)拉繩的晃動(dòng)。但是，要注意的是隱藏手勢和快捷手勢不能影響主操作流程，可以作為輔助手勢來(lái)使用?！?/P>

　　3.2 操作反饋

　　手勢操作快速輕便，但沒(méi)有鼠標按下時(shí)didadida聲的安全感，也十分受限于設備屏幕的靈敏度，所以操作反饋的作用至關(guān)重要。例如icon按下時(shí)的響應，這里除了沒(méi)有mouse over的效果，其他三態(tài)和PC端是一致的，缺一不可。除此之外還要考慮的是操作區太小被手指遮擋住的情況，反饋一定要明顯，并呈現在可視范圍內。比如 QQ通訊錄的姓名檢索操作。除了視覺(jué)反饋聲音也是一種有效的反饋方式，比如iPhone發(fā)送SMS發(fā)送成功的聲音。新浪微博的feed拉 取，tweetbot等，都巧妙的運用了聲音反饋?！?/P>

　　3.3 誤操作

　　手勢操作相比鼠標更靈活，如果你的程序非常復雜，承載的信息很多，大部分區域都是響應區，那么發(fā)生誤操作的幾率也會(huì )大大增加。因此要讓用戶(hù)可以及時(shí)撤銷(xiāo)操作，時(shí)刻知道現在發(fā)生了什么，而不是僅僅當發(fā)生后給出一個(gè)警告。常用于較重要或隱晦的手勢，例如刪除，一鍵清除，長(cháng)按等等，二次確認操作就顯得至關(guān)重要。