嘿~最近在做各種移動端的產(chǎn)品，設(shè)計(jì)啊體驗(yàn)啊操作啊，用的手都起繭，工作之余也思考了“手”這種較新的交互方式，以及它與界面的關(guān)系。本文從手勢的種類，應(yīng)用場景，存在的可用性問題以及如何設(shè)計(jì)四個(gè)大的部分談起，在此拋磚引玉供大家思考和學(xué)習(xí)。

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

然而交互設(shè)計(jì)領(lǐng)域，大家普遍探討的手勢概念，是區(qū)別于傳統(tǒng)的鍵盤操作和鼠標(biāo)操作的。后面會著重研究移動設(shè)備的手勢操作，主要從手勢存在的問題、應(yīng)用場景以及設(shè)計(jì)時(shí)應(yīng)注意什么說起。#p#

1. 利用鼠標(biāo)、光標(biāo)的軌跡模擬手勢

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

蘋果Magic Mouse鼠標(biāo), 。macbook觸摸板均支持單指多指滑動等多種手勢。

3. 在觸摸屏上的手勢

主要有長按、輕觸、滑動、拖動、旋轉(zhuǎn)、縮放、搖動這八種手勢。

4. 遠(yuǎn)距離體感

[[42659]]

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

5. 未來的手勢

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

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

#p#

可用性研究的專家Don Norma在最新一期的《Interaction》雜志中也對手勢交互界面進(jìn)行了質(zhì)疑和抨擊，認(rèn)為新的手勢交互界面有很多地方?jīng)]有遵循已經(jīng)建立好的交互設(shè)計(jì)原則，使得經(jīng)過良好測試和業(yè)內(nèi)已被理解的交互設(shè)計(jì)標(biāo)準(zhǔn)正在被推翻、忽略和違背。

筆者通過分析現(xiàn)有的app 應(yīng)用，以及多產(chǎn)品的設(shè)計(jì)經(jīng)驗(yàn)，發(fā)現(xiàn)此質(zhì)疑不無道理，主要有以下幾個(gè)問題：

1.精確性降低

以 iOS為例，相比光標(biāo)1像素的精度，手勢的精確性要低很多。適合手指點(diǎn)擊區(qū)域需要做到44*44px(iphone4以下設(shè)備)，配合手勢的輕重有0~20px的偏差，所以觸屏界面需要使用更大尺寸的控件響應(yīng)面積。iPhone 3GS、iPad和iPhone4屏幕分辨率密度分別為163 ppi 、132 ppi和326ppi，可以看到3GS和iPad的控件響應(yīng)像素接近，單邊應(yīng)達(dá)到44px的標(biāo)準(zhǔn)，而iPhone4則需要再擴(kuò)大幾倍。2.缺乏可見性和一致性

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

造成這個(gè)問題的重要原因是手勢界面通常沒有代表動作的可視元素，手勢即動作。若是通用自然的手勢就沒問題，若是罕見的組合手勢那用戶就很難發(fā)現(xiàn)它，并有可能帶來可用性問題。3.增加操作成本以及誤操作

在位移上

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

在力度上

手勢操作沒有鼠標(biāo)按下的物理反饋，因?yàn)榱Χ纫搽y以掌握，有時(shí)糟糕的設(shè)計(jì)會讓用戶誤以為是自己操作的問題，從而反復(fù)嘗試。

在靈敏度上

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

4.受限于物理因素

物理按鍵

帶來真實(shí)的觸感和一定的操作中斷感，后期的手機(jī)逐漸弱化物理按鍵，手勢與屏幕結(jié)合的更緊湊。Android用硬件按鈕觸發(fā)菜單，意味著你無法預(yù)知什么程序以及在什么情況下會有菜單選項(xiàng)。因?yàn)橛布粹o始終在那里，無論程序是否需要它。

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

橫豎方向

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

設(shè)備尺寸

大屏幕的Pad支持更多的多指復(fù)雜手勢，手機(jī)大多單指操作。

控件形態(tài)

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

#p#

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

1.操作引導(dǎo)

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

2.操作反饋

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

3.誤操作

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

OMG，不知不覺講了這么多⊙﹏⊙b，以上只是手勢交互的初探，對于這個(gè)應(yīng)用領(lǐng)域，還有很多值得研究和探索的地方，歡迎大家一起來探討和學(xué)習(xí)。