交互手勢全解析-2萬字長文幫你搞懂交互手勢

點(diǎn)擊下方「設(shè)成于思」?關(guān)注我，更多文章更新中

更新說明

本篇文章是關(guān)于手勢的前4篇文章的匯總版，匯總版根據(jù)讀者反饋和自己的進(jìn)一步思考做了以下優(yōu)化：

1.不美觀和不易理解的配圖重新設(shè)計；

2.一些有瑕疵的表達(dá)進(jìn)行修改；

3.增加「手勢的感知與記憶」、「手勢的創(chuàng)新」、「手勢與傳感器」等新內(nèi)容。（「手勢的創(chuàng)新」本來計劃寫成獨(dú)立文章，但篇幅過小，所以放在這個匯總版里）

圖形用戶界面為我們呈現(xiàn)了豐富的視覺信息，而觸摸技術(shù)則改變了我們與工具之間交互的方式。從使用起來費(fèi)力的電阻觸摸屏到如今輕松省力的電容觸摸屏，這種技術(shù)的進(jìn)步讓手勢的精細(xì)化設(shè)計成為可能，同時也讓它在便攜電子設(shè)備上得到大量應(yīng)用。與實(shí)體按鍵相比，它有著純粹的簡潔性和無盡的創(chuàng)造性，手指的個數(shù)變化、不同變量的組合能夠創(chuàng)造出無數(shù)的操控方式來滿足需要。

交互手勢的描述維度是什么？在這里我們將其簡單定義為影響一個交互手勢呈現(xiàn)效果的變量。

點(diǎn)擊類手勢的描述維度包括：觸發(fā)時機(jī)、觸屏次數(shù)和時間限制，三者的變化會產(chǎn)生不同的變種。我們首先了解一下這三個維度。

1.1 觸屏次數(shù)

常見的點(diǎn)擊類手勢只需要單擊就可以觸發(fā)操作，即觸屏1次。但是有時為了在有限的界面空間中拓展更多的功能，會增加一個多次點(diǎn)擊（后續(xù)簡稱為“多擊”）才可觸發(fā)的功能。例如抖音的單擊觸發(fā)暫停短視頻播放，雙擊觸發(fā)點(diǎn)贊。觸屏次數(shù)超過2次的功能非常少見，因?yàn)榇螖?shù)越多，相應(yīng)的教育用戶的成本越高。

落點(diǎn)是一個會影響系統(tǒng)區(qū)分單擊和多擊的因素，它指的是手指觸屏?xí)r按下的位置。進(jìn)行第一次點(diǎn)擊后，落點(diǎn)周圍會生成一個范圍，第二次點(diǎn)擊的落點(diǎn)需要處于前一個落點(diǎn)周圍生成的范圍內(nèi)，只有這樣才能形成一次有效的雙擊，否則就會形成兩次單擊。多擊的判斷規(guī)則以此類推。生成的范圍可以調(diào)用直接系統(tǒng)提供的默認(rèn)值，一般不需要設(shè)計師提供。

1.2 觸發(fā)時機(jī)

點(diǎn)擊類手勢可以在兩個時機(jī)觸發(fā)操作，分別是手指按下時和釋放時。按下時觸發(fā)由于不能通過將手指移出熱區(qū)進(jìn)行反悔回退，從而缺乏掌控感，但是對于撤銷成本低的操作可以使用它提高效率。釋放時觸發(fā)能夠通過將手指移出熱區(qū)進(jìn)行反悔回退，掌控感強(qiáng)。

在Smartisan OS（錘子科技基于 Android 深度定制的手機(jī)系統(tǒng)）的電話 App 中點(diǎn)擊數(shù)字進(jìn)行撥號時，觸發(fā)時機(jī)就是「按下時」，雖然輸入快速但選中一個數(shù)字后無法通過將手指移出熱區(qū)進(jìn)行撤銷。

釋放時觸發(fā)過于常見，就不舉例贅述了。絕大多數(shù)點(diǎn)擊操作都是釋放時觸發(fā)，反而是按下時觸發(fā)的案例非常罕見。

前文提到“按下時觸發(fā)由于不能通過將手指移出熱區(qū)進(jìn)行反悔回退，從而缺乏掌控感”。實(shí)際上當(dāng)滿足一些特殊條件時，按下時觸發(fā)也是能夠通過將手指移出熱區(qū)進(jìn)行反悔回退的。這些特殊條件包括：①點(diǎn)擊操作對頁面造成的變化較??；②操作結(jié)果的撤銷成本較??；③同一熱區(qū)不存在滑動操作。如何理解這些條件呢？下面我們逐一分析。

①點(diǎn)擊操作對頁面造成的變化較小

如果點(diǎn)擊操作對頁面造成的變化較大，就可能會導(dǎo)致原熱區(qū)消失或被遮擋（如下圖），很難讓用戶建立移出熱區(qū)進(jìn)行返回回退的認(rèn)知。

②操作結(jié)果的撤銷成本較小

按下后觸發(fā)會導(dǎo)致手指一旦按下到按鈕后操作立刻生效，如果是支付類，就會面臨極高的撤銷成本，所以使用按下時觸發(fā)時，允許通過手指移出熱區(qū)進(jìn)行反悔回退的功能必須是輕量的、撤銷成本低的。

③同一熱區(qū)不存在滑動操作

這個很好理解，如果同一熱區(qū)存在滑動操作，就會導(dǎo)致為了撤銷進(jìn)行的滑動和其他滑動操作產(chǎn)生沖突。

iOS的鎖屏頁面輸入密碼操作雖然是按下時觸發(fā)（如下圖），但是能夠通過將手指移出熱區(qū)進(jìn)行反悔回退，它同時滿足上述的三個條件。按下時觸發(fā)由于提升的效率過小，因此很少被選用，且絕大多數(shù)情況可以使用釋放后觸發(fā)替代，因此大家對這部分知識僅做了解即可，日常設(shè)計時默認(rèn)仍然選擇釋放時觸發(fā)。

1.3 時間限制

時間限制一般出現(xiàn)在多擊和長按兩種情況。

當(dāng)手勢為多擊時，為了與單擊進(jìn)行區(qū)分，系統(tǒng)會設(shè)置一個時長閾值。如果下一次單擊距離上一次單擊的時長大于這個閾值，多擊就會被判定為多次單擊。如下圖的微信中對頭像的點(diǎn)擊案例所示，在第一次單擊后在時長閾值內(nèi)如果沒有檢測到第二次單擊，那么系統(tǒng)就會將本次手勢判定為單擊，然后跳轉(zhuǎn)到更多操作頁。如果在第一次單擊后在時長閾值內(nèi)檢測到第二次單擊，那么系統(tǒng)就會將本次手勢判定為雙擊，然后觸發(fā)拍一拍。

當(dāng)單擊和多擊可以作用于同一個熱區(qū)實(shí)現(xiàn)兩個不同功能時，系統(tǒng)會延遲對單擊的反饋來檢測可能存在的下一次單擊，從而導(dǎo)致用戶在使用單擊所觸發(fā)的功能時會感覺到反饋的拖沓感和延遲感。例如上圖微信的單擊頭像進(jìn)入更多操作頁和雙擊拍一拍的同時存在，導(dǎo)致單擊進(jìn)入更多操作頁時反饋有一個很明顯的0.5s的延遲。大部分用戶對這個延遲可能并不會留意，但是對少部分追求效率的用戶來說還是部分影響了體驗(yàn)。當(dāng)面向特定的用戶群時，這個延遲的數(shù)字可以做相應(yīng)的調(diào)整。例如面向年輕用戶群體的App可以將延遲調(diào)整為較短的0.3s從而提高反饋速度，面向老年人群體或者全年齡的App就要趨于保守，使用較長的0.5s保證基礎(chǔ)體驗(yàn)。因?yàn)槔夏耆说姆磻?yīng)和操作速度較慢，延遲設(shè)置過短會讓多擊難以觸發(fā)。

當(dāng)手勢為長按時，為了與單擊進(jìn)行區(qū)分，系統(tǒng)也會設(shè)置一個時長閾值。為方便理解，我們把一次單擊拆分為三個狀態(tài)：抬起狀態(tài)→按下狀態(tài)→抬起狀態(tài)。在一次單擊過程中，如果手指在按下狀態(tài)的時間大于這個閾值，那么系統(tǒng)就會將本次手勢判定為長按而不是單擊，但如果按下狀態(tài)持續(xù)的時間小于或等于這個閾值，那么系統(tǒng)仍然會將本次手勢判定為單擊。如下圖案例所示，在iOS端的照片App中單擊打開照片時，按下狀態(tài)大于0.3s就會被判定為長按并觸發(fā)情景菜單，小于或等于0.3秒會被判定為單擊打開圖片。

將時間限制的用法進(jìn)一步延展，可以在單個熱區(qū)觸發(fā)超過2種功能，在一定的時間限制內(nèi)觸發(fā)一種功能，超過了時間限制則觸發(fā)另一種功能。例如在iOS端桌面按下應(yīng)用圖標(biāo)，當(dāng)按下的持續(xù)時長小于或等于0.3s時，被判定為單擊打開App。當(dāng)大于0.3s且小于或等于2s時，會觸發(fā)更多菜單，當(dāng)大于2s時，會觸發(fā)編輯主屏幕。不過，當(dāng)單個熱區(qū)通過區(qū)分按下時長來觸發(fā)的功能越多，用戶就越難感知到時間限制的邊界，操作成本因此更高。

另外補(bǔ)充一點(diǎn)，如果單擊與長按共用了熱區(qū)，那么單擊的按下狀態(tài)的持續(xù)時間必須小于相應(yīng)的時間閾值。為了進(jìn)行區(qū)分，我們將這種被限制在時間閾值內(nèi)完成的單擊稱作做「快擊」，上面兩個案例里的單擊都可以稱為快擊。

根據(jù)上述三個描述維度的變化，有以下常見的手勢類別。

2.1 單擊

2.1.1 定義

使用單指在熱區(qū)位置按下后抬起，從而觸發(fā)相應(yīng)的功能。整個狀態(tài)變化過程為「抬起狀態(tài)→按下狀態(tài)→抬起狀態(tài)」。

2.1.2 特點(diǎn)

單擊是在移動端使用最普遍的手勢。相較于其他手勢，單擊是最容易讓用戶感知到的。

上文講解「觸發(fā)時機(jī)」時提到過，單擊時可以通過在按下狀態(tài)時移出熱區(qū)，在熱區(qū)外抬起從而取消本次操作，因此給予了用戶反悔的機(jī)會。

2.1.3 案例

AppStore每日推薦中，單擊某個推薦卡片可以進(jìn)入推薦的詳情頁。iOS的設(shè)置中，單擊開關(guān)按鈕可以切換飛行模式的開關(guān)狀態(tài)。

2.2 按下

2.2.1 定義

使用單指在熱區(qū)位置按下，從而觸發(fā)相應(yīng)的功能。整個狀態(tài)變化過程為「抬起狀態(tài)→按下狀態(tài)」。

2.2.2 特點(diǎn)

與“單擊”相比，“按下”由于從“抬起狀態(tài)”到“按下狀態(tài)”即可觸發(fā)操作，導(dǎo)致不能通過將手指移出熱區(qū)進(jìn)行反悔回退，從而缺乏掌控感，但是在撤銷成本低的操作可以使用它提高效率。按下手勢極少用于可產(chǎn)生明確結(jié)果的操作，一般僅用于用戶按下按鈕后的視覺反饋。

2.2.3 案例

在Smartisan OS的電話 App 中撥號時，按下數(shù)字按鈕不需要抬起即可成功輸入。得到App調(diào)節(jié)文字的字號時，按下相應(yīng)的大小級別就立即生效。這兩個案例中的“按下”替換為“單擊”也是可行的。

2.3 抬起

2.3.1 定義

在單指已經(jīng)在熱區(qū)位置處于按下狀態(tài)時，抬起手指從而觸發(fā)相應(yīng)的功能。整個變化過程為「按下狀態(tài)→抬起狀態(tài)」。

2.3.2 特點(diǎn)

“抬起”的觸發(fā)前提是手指已經(jīng)處于按下狀態(tài)。某些應(yīng)用場景中，“抬起”會改變或取消“按下狀態(tài)”產(chǎn)生的效果。例如在iOS相機(jī)的照片模式中，按下拍攝按鈕并保持按下狀態(tài)，就會開始錄制視頻，此時“抬起”就會取消錄制視頻。

2.3.3 案例

在手機(jī)游戲《憤怒的小鳥》中，拖動小鳥并不松手使彈弓進(jìn)入蓄力狀態(tài)，此時“抬起”就會將彈弓的蓄力狀態(tài)變?yōu)獒尫艩顟B(tài)，從而將小鳥發(fā)射出去。

2.4 快擊

2.4.1 定義

使用單指在熱區(qū)位置按下后抬起，從而觸發(fā)相應(yīng)的功能。整個狀態(tài)變化過程為「抬起狀態(tài)→按下狀態(tài)→抬起狀態(tài)」，其中“按下狀態(tài)”不能超過限定的時間。

2.4.2 特點(diǎn)

快擊與單擊只有一個不同點(diǎn)，快擊的“按下狀態(tài)”會被限制在特定時間內(nèi)完成，而單擊則不然。

快擊之所以存在，是因?yàn)閱螕襞c長按共用了熱區(qū)。如果單擊時的“按下狀態(tài)”持續(xù)時間過長，就會觸發(fā)長按，因此單擊就必須將“按下狀態(tài)”的持續(xù)時長必須限制在特定時間內(nèi)。我們將這種被限制在特定時長內(nèi)完成的單指點(diǎn)擊操作稱作做“快擊”，從而和“單擊”進(jìn)行區(qū)分。更多內(nèi)容可以查看剛剛提到的「點(diǎn)擊手勢的描述維度-時間限制」。

2.4.3 案例

觀看抖音視頻時，點(diǎn)擊視頻可以暫停，此處的點(diǎn)擊手勢就是“快擊”。若按下狀態(tài)保持的時間過長，則會觸發(fā)更多操作的浮層。

2.5 長按

2.5.1 定義

使用單指在熱區(qū)位置按下，并保持按下狀態(tài)特定的時間，從而觸發(fā)相應(yīng)的功能。整個狀態(tài)變化過程為「抬起狀態(tài)→按下狀態(tài)」，其中“按下狀態(tài)”會被要求達(dá)到某個時長。

2.5.2 特點(diǎn)

與上述的幾個手勢相比，長按是一個比較隱蔽的手勢。除一些教育成熟的使用場景外，如果不加引導(dǎo)，用戶很難感知到。其次，長按由于需要一定時間才能夠觸發(fā)，操作效率與單擊相比較低。

綜合以上兩點(diǎn)，長按不適合用于高頻或主要功能的唯一觸發(fā)方式，而可以作為次要功能的主要觸發(fā)方式或高頻或主要功能的額外觸發(fā)方式。網(wǎng)易云音樂長按黑膠查看封面大圖、長按文字復(fù)制等，長按是這些次要功能的唯一觸發(fā)方式。嗶哩嗶哩的長按點(diǎn)贊可同時觸發(fā)點(diǎn)贊、投幣、收藏（簡稱一鍵三連），長按抖音視頻分享好友，長按是這些高頻或主要功能的額外觸發(fā)方式。

當(dāng)一個功能僅支持長按不支持點(diǎn)擊時，需要在用戶點(diǎn)擊時進(jìn)行引導(dǎo)，告知用戶正確的手勢。舉一個反例，嗶哩嗶哩播放視頻頁的GIF錄制功能需要長按才能錄制，但是當(dāng)單擊時卻沒有任何反饋告知用戶需要長按進(jìn)行。

更好的做法是在用戶單擊時進(jìn)行輕量提示，例如下圖中用網(wǎng)易云音樂一起聽時，對講機(jī)需要長按才能對講，如果用戶單擊，就會通過一個toast提示來引導(dǎo)用戶使用正確的手勢。

2.5.3 案例

嗶哩嗶哩長按點(diǎn)贊按鈕可以同時觸發(fā)點(diǎn)贊、投幣、收藏功能。

2.6 雙按

2.6.1 定義

使用單指在熱區(qū)位置按下后抬起，然后再次按下，從而觸發(fā)相應(yīng)的功能。整個狀態(tài)變化過程為「抬起狀態(tài)→按下狀態(tài)→抬起狀態(tài)→按下狀態(tài)」。

2.6.2 特點(diǎn)

雙按是一個在移動端非常罕見的手勢，并且非常隱蔽。雙按很少用于觸發(fā)一個特定的功能，在移動端它常見于觸發(fā)一個模式。

例如當(dāng)在一個界面中，上下左右四個方向都已經(jīng)存在位移類手勢了，但是仍然有功能需要新增額外的位移類手勢。此時可以將雙按看做是一個模式啟動方式，雙按后可以立即使用上下左右四個方向的手勢觸發(fā)額外的功能。

2.6.3 案例

在地圖類App中，通常上下左右的滑動手勢會用來拖動地圖，雙擊放大地圖，雙指張開和捏合用來放大和縮小地圖，但是在出行場景中單手操作的情況很多，如何使用單手就可以對地圖進(jìn)行放大縮小呢？通常都會使用雙按來作為模式的啟動。雙按后不松開手指的情況下通過上滑來放大地圖，通過下滑來縮小地圖，從而解決了單手操作時難以放大縮小地圖的痛點(diǎn)。不足之處在于，這個手勢的教育成本較高，只有少部分用戶能夠發(fā)現(xiàn)并持續(xù)使用。

2.7 雙擊

2.7.1 定義

使用單指在熱區(qū)位置按下后抬起，然后再次按下后抬起，從而觸發(fā)相應(yīng)的功能。整個狀態(tài)變化過程為「抬起狀態(tài)→按下狀態(tài)→抬起狀態(tài)→按下狀態(tài)→抬起狀態(tài)」。

2.7.2 特點(diǎn)

雙擊雖然也是一個隱蔽的手勢，但是在部分場景中由于應(yīng)用廣泛從而降低了教育成本，例如雙擊點(diǎn)贊、喜歡。當(dāng)一個熱區(qū)同時存在單擊和雙擊手勢時，會導(dǎo)致單擊手勢的反饋延遲，具體內(nèi)容在上文「點(diǎn)擊類手勢的描述維度-時間限制」已詳細(xì)講解，在此不做贅述。

2.7.3 案例

雙擊iOS的地圖的地圖界面，會放大地圖。

2.8 總結(jié)

將上述的手勢的描述維度和手勢類別的關(guān)系匯總為表格，如下所示。

上述介紹的手勢通過「觸發(fā)時機(jī)」、 「觸屏次數(shù)」、 「時間限制」三個描述維度構(gòu)成了不同的點(diǎn)擊類手勢，除了這三者之外，有兩個比較特殊的維度也帶給點(diǎn)擊類手勢不同的可能性，即「按壓力度」和「接觸面積」。

3.1 按壓力度

通過手指按壓力度不同來觸發(fā)不同功能的設(shè)計首次應(yīng)用于Apple Watch上采用的Force Touch，之后開始在 iPhone 6s以及后續(xù)部分機(jī)型上應(yīng)用，被命名為3D Touch。（由于比較普及的使用按壓力度作為變量的功能現(xiàn)在僅有3D Touch，因此接下來的介紹也主要圍繞3D Touch 進(jìn)行）3D Touch從誕生之日起就面臨著許多的爭議，是劃時代的設(shè)計還是食之無味的雞肋？不同的用戶有不同的看法。下面我就簡單講一下它的優(yōu)缺點(diǎn)。

首先談?wù)剝?yōu)點(diǎn)：

①與3D Touch的使用場景最接近的手勢是長按，3D Touch與長按相比的優(yōu)勢在于，它可以更快速地觸發(fā)操作，而不需要長按所要等待的時間，顯得更加干脆、流暢。如下圖案例，可觀察長按和3D Touch喚起快捷操作菜單的速度對比。

②與單擊、長按相比，3D Touch有更好的防誤觸效果。例如在支持3D Touch的iPhone機(jī)型上，鎖屏界面的手電筒只能通過3D Touch觸發(fā)，點(diǎn)擊和長按都無法觸發(fā)，個人認(rèn)為目的是為了防止手機(jī)放在口袋時誤觸。

③在特定場景下，3D Touch有著其他手勢難以替代的優(yōu)勢。例如在移動端的三維射擊游戲中，按鍵操作一直是個難題，右手很難在屏幕上滑動調(diào)整視角的同時開槍射擊。3D Touch 的獨(dú)特屬性能夠解決這個問題，通過按壓力度控制開槍，滑動屏幕調(diào)整視角，能夠?qū)崿F(xiàn)邊瞄準(zhǔn)邊開槍的效果。

在繪畫App中，通過3D Touch可以用手指按壓力度來模擬顏色的深淺和筆觸的粗細(xì)，從而實(shí)現(xiàn)更好的畫面效果。

上述兩個案例遇到的需求都是在單指保持滑動過程中需要另外一個維度的控制，如果遇到相同的需求也可以思考如何通過3D Touch來實(shí)現(xiàn)更好的體驗(yàn)。

其次是缺點(diǎn)：

①由于3D Touch并不支持所有的設(shè)備，因此App廠商在進(jìn)行手勢適配時就不能把3D Touch當(dāng)做某個功能唯一的觸發(fā)方式，而是只能將其作為一個輔助性的手勢，而長按作為一個支持所有設(shè)備的手勢，雖然觸發(fā)速度沒有3D Touch迅速，但是基本也可以替代3D Touch。因此造成了大部分情況下3D Touch是一個可有可無的雞肋手勢。

②3D Touch是一個很難被用戶察覺到的手勢，沒有引導(dǎo)的情況下我們很難注意到它的存在，從而降低了使用率。

③為了支持3D Touch而產(chǎn)生的硬件成本是一個不能忽略的因素，而且電池的空間因此進(jìn)一步被壓縮，影響設(shè)備的續(xù)航。

綜上所述，3D Touch對于用戶和手機(jī)廠商來說，性價比偏低，因此蘋果公司在后續(xù)的機(jī)型上砍掉了3D Touch功能，使用按壓力度來觸發(fā)功能的設(shè)計可能從此也會退出歷史的舞臺。

3.2 接觸面積

接觸面積維度支持根據(jù)手指在屏幕的接觸面積的不同從而觸發(fā)不同功能。案例比較少見，我認(rèn)為其中Smartisan OS的大爆炸功能將這個維度運(yùn)用地最為出色。（下圖為大爆炸的觸發(fā)方式）

大爆炸是一個系統(tǒng)級的手勢，通過它可以快速提取所有App里的文字信息進(jìn)行編輯和更多操作。為了不與各種App里已有的手勢沖突，大爆炸只能另辟蹊徑，找到一個獨(dú)有的手勢來完成操作，下面的操作示例是大爆炸的宣傳視頻。使用接觸面積的判定來觸發(fā)是一個很巧妙的解決方案，解決方向有些類似于前面講到的3D Touch，但是避免了3D Touch所需要的硬件成本。

同樣運(yùn)用了接觸面積維度的功能還有華為手機(jī)的指關(guān)節(jié)截屏，通過識別包括接觸面積等多個參數(shù)判斷是否是指關(guān)節(jié)。

位移類手勢是指那些通過手指接觸屏幕后的位置變化從而操控電子設(shè)備的手勢。這一部分主要講解單指類的位移類手勢，多指類的會在后文的「多指和點(diǎn)擊類」中講解。

一談到位移類手勢，大部分設(shè)計師的腦海中可能會浮現(xiàn)出拖拽、甩動和輕掃這三個術(shù)語。然而，當(dāng)我們想仔細(xì)談?wù)撍麄內(nèi)咧g的區(qū)別時，大部分設(shè)計師可能無法準(zhǔn)確地描述。為了能夠準(zhǔn)確描述三者的區(qū)別，我們在這里引入三個維度的概念，它們分別是控制方式、穩(wěn)定化效果、以及閾值類型，這三者的不同的變化組合可以創(chuàng)造不同的位移類手勢，拖拽、甩動和輕掃之間的區(qū)別也是這三個維度影響的。那接下來先了解一下這三個維度。

1.1 控制方式

第一個維度是控制方式，它分為絕對控制和相對控制，也可以通俗的表達(dá)為跟手和不跟手，區(qū)別如下：

絕對控制/跟手：施加控制的一方（后文簡稱施控物）的某個屬性變化與被施加控制的一方（后文簡稱受控物）的某個屬性變化是對應(yīng)的。

相對控制/不跟手：施控物的某個屬性變化與受控物的某個屬性變化不是對應(yīng)的。

比如在網(wǎng)易云音樂的播放頁（下圖左），左右滑動黑膠時，手指是施控物，黑膠是受控物，手指的橫向位置變化和黑膠的橫向位置變化是對應(yīng)的，即絕對控制。上滑調(diào)出評論頁時，評論頁的位置和手指的位置沒有對應(yīng)關(guān)系，手指的上滑僅僅控制評論頁是否出現(xiàn)，即相對控制。

與相對控制相比，絕對控制允許用戶去操控受控物的屬性變化過程，因此給予了用戶更強(qiáng)的掌控感。比如在京東讀書閱讀頁邊緣右滑，手指的橫向位置與書籍封面的變化過程對應(yīng)，模擬現(xiàn)實(shí)生活中慢慢合上書的感覺，如下圖。

但是在有些場景，為了避免混亂，屬性變化過程是不適合被用戶絕對控制的，此時我們應(yīng)采取相對控制的方案。比如 iOS 的相機(jī)中，左右滑動切換拍攝模式，由于前后不同模式之間的頁面框架變化較大，切換時會有過多元素的屬性變化，如果使用絕對控制就會導(dǎo)致切換時拖沓且混亂，使用相對控制就能避免這個問題。

1.2 穩(wěn)定化效果

1.2.1 定義

當(dāng)我們使用手勢操控某個受控物時，受控物的屬性A達(dá)到閾值，進(jìn)而導(dǎo)致受控物的屬性B穩(wěn)定在了特定狀態(tài)的效果被稱為「穩(wěn)定化效果」，或者也可以稱為「吸附」。

穩(wěn)定化效果能夠保持界面的視覺秩序，避免過多的中間狀態(tài)導(dǎo)致界面的雜亂，進(jìn)而幫助用戶聚焦信息。 是否有穩(wěn)定化效果是區(qū)別輕掃與另外兩個手勢即甩動和拖拽的重要維度，當(dāng)某個位移類手勢有穩(wěn)定化效果，我們就將其稱作「輕掃」。

以滑動切換抖音視頻為例，當(dāng)手指上滑的位移距離和釋放速度其中的某一項(xiàng)屬性達(dá)到閾值后，下一條視頻會往上移動到一個固定的位置然后進(jìn)入穩(wěn)定狀態(tài)，而不會出現(xiàn)停留在不完整的中間狀態(tài)，如下圖所示。

在 iOS 端的微信消息頁左滑某條消息后會出現(xiàn)更多操作按鈕，按鈕會在手指滑動的距離達(dá)到閾值并松開后穩(wěn)定在一個固定的大小，而不會停在類似下圖左所示的混亂的中間狀態(tài)。

在多內(nèi)容選擇的場景中，如果滑動與選中是綁定的話，一般需要使用穩(wěn)定化效果。例如在 iOS 相機(jī)里選擇濾鏡時，滑動濾鏡選項(xiàng)不但能夠控制濾鏡選項(xiàng)的位置，并且會自動選中一個位于中間位置的濾鏡，位置的穩(wěn)定化避免了被選中選項(xiàng)的不明確。

但如果滑動與選中是分開的，比如美圖秀秀的濾鏡選項(xiàng)需要先滑動后選中，這種情況下穩(wěn)定化效果不是必要的。

1.2.2 與效率的關(guān)系

不同的穩(wěn)定化規(guī)則帶給用戶的體驗(yàn)差異是非常大的，最明顯的差異是在效率方面。我們使用穩(wěn)定化效果的強(qiáng)弱來理解，穩(wěn)定化效果越強(qiáng)，單次滑動能夠切換的選項(xiàng)個數(shù)越少，效率越低。穩(wěn)定化效果越弱，單次滑動能夠切換的選項(xiàng)個數(shù)越多，效率越高。

比如在比較常見的 banner 切換功能中（下圖左），無論手指位移和釋放速度的值有多高，banner 只能切換并穩(wěn)定到下一個，不能夠一次切換多個 banner。而在網(wǎng)易云音樂的首頁排行榜中，一次滑動能夠切換多個內(nèi)容卡片，我們可以說前者的穩(wěn)定化效果比后者強(qiáng)。

拖拽和甩動雖然沒有穩(wěn)定化效果，但是也存在效率的高低。我們可以將其與輕掃放在一起做對比，如下圖所示，拖拽、穩(wěn)定化效果強(qiáng)的輕掃、穩(wěn)定化效果弱的輕掃、甩動它們切換效率依次增加。

那么我們決定添加穩(wěn)定化效果后，如何選擇強(qiáng)弱程度呢？選擇沒有絕對的對錯，整體來說主要考慮兩點(diǎn)，業(yè)務(wù)訴求和用戶訴求。例如在常見的 banner 切換中，banner ?的總數(shù)量一般不會很多，業(yè)務(wù)的訴求是希望盡可能曝光每一個 banner ，使感興趣的用戶進(jìn)行消費(fèi)，因此這里比較適合做穩(wěn)定化效果強(qiáng)的輕掃。在云音樂的排行榜案例里，不同用戶感興趣的榜單是不同的，穩(wěn)定化效果弱的輕掃可以方便用戶單次滑動切換多個，快速切換到自己感興趣的榜單的大概位置。

百度 App 的表情面板原本是左右輕掃瀏覽表情，在一次改版中改為了上下甩動瀏覽。主要目的之一就是為了提高瀏覽效率、降低非首屏表情的曝光難度。

微信視頻號的改版是一個典型的案例，舊版的微信視頻號的視頻流并不是類似抖音那樣的全屏化形式和輕掃手勢（下圖右），而是占據(jù)屏幕尺寸三分之一到二分之一之間的卡片形式（下圖左），并且使用甩動而非輕掃。視頻號問世初期優(yōu)質(zhì)內(nèi)容匱乏，社交推薦算法不完善，貿(mào)然模仿抖音式的全屏化形式和輕掃手勢的話，會導(dǎo)致用戶瀏覽到劣質(zhì)視頻時負(fù)面感受被增強(qiáng)且切換效率變低，反之卡片形式加甩動手勢給予了用戶更自由的選擇空間，提高了用戶的切換效率，降低了負(fù)面體驗(yàn)。等到如今時機(jī)成熟，再從卡片形式和甩動手勢換成全屏化形式和輕掃手勢就勢在必行了。

在某些場景，用戶需要先通過高效的方式選擇特定區(qū)域的內(nèi)容，然后進(jìn)入聚焦?fàn)顟B(tài)進(jìn)行內(nèi)容瀏覽和慢速的切換，此時我們需要設(shè)計兩種切換效率不同的手勢應(yīng)對前后場景的變化。如下圖，在 iOS 的照片 App 中，先使用切換效率較高的甩動進(jìn)行粗略切換找到目標(biāo)圖片大概位置，點(diǎn)擊進(jìn)入大圖模式時使用切換效率較低的輕掃進(jìn)行精確切換查看。

1.2.3 觸發(fā)時機(jī)

觸發(fā)穩(wěn)定化的時機(jī)可以分為釋放前和釋放后，不同的時機(jī)帶給用戶的體驗(yàn)也不同。釋放前穩(wěn)定化指的是用戶使用手指滑動屏幕時，手指位移達(dá)到閾值后，手指無需離開屏幕，穩(wěn)定化即可被觸發(fā)。如下圖左，iOS 的相機(jī)滑動切換拍攝模式使用的就是釋放前穩(wěn)定化。釋放后穩(wěn)定化指的是用戶使用手指滑動屏幕時，手指位移或釋放速度達(dá)到閾值后，手指必須離開屏幕，穩(wěn)定化才能被觸發(fā)。如下圖右，常見的 banner 切換。

釋放前穩(wěn)定化可以避免拖沓，增加切換效率，但是缺點(diǎn)是無法反悔回退且缺乏掌控感。反之，釋放后穩(wěn)定化可以反悔回退，掌控感強(qiáng)，但是缺點(diǎn)是比釋放前穩(wěn)定化拖沓了一些。

1.3 閾值類型

閾值是能夠觸發(fā)變化的最小值。比如當(dāng)水的溫度達(dá)到 100 度時就開始變成水蒸氣，100 度就是一個閾值，溫度是閾值類型。在手指與屏幕的交互中，手指在屏幕上的某個停留時間、位移、釋放速度、觸屏次數(shù)等都可以成為一個閾值類型，達(dá)到相應(yīng)閾值后就可以觸發(fā)相應(yīng)的變化，常見的變化有受控物的位置、大小、不透明度等，理論上變化可以是任意的。

在位移類手勢中，通常會用到的閾值類型有手指位移和釋放速度，手指位移是用戶在手指觸摸屏幕時的位置與之后某個時間手指位于屏幕的位置之間的距離，釋放速度是用戶的手指在屏幕表面進(jìn)行位移后離開屏幕那一瞬間的速度。

市面上的 App 暫時不存在僅通過釋放速度判定而與手指位移無關(guān)的閾值判定方式，因?yàn)槠洳惶铣ＷR。因此我們在設(shè)計位移類手勢時，能夠選擇的閾值判定方式常見的有兩種：① 判定手指位移和釋放速度滿足任意一個即可；② 僅判定手指位移。

當(dāng)我們設(shè)計手勢時，就需要考慮兩者的區(qū)別。由于 ① 比 ② 增加了釋放速度帶來的額外移動距離，因此 ① 的主要優(yōu)點(diǎn)是高效。但是由于我們無法預(yù)判釋放速度帶給受控物的移動距離長短，所以相對應(yīng)的缺點(diǎn)就是易誤操作和不精確。②就恰恰相反，由于不存在釋放速度造成的不確定因素，它的優(yōu)點(diǎn)是不易誤操作和精確，缺點(diǎn)是低效。

甩動和拖拽之間的區(qū)別就在于閾值判定方式，甩動是 ① ，拖拽是 ② 。如下圖，當(dāng)在微信消息列表找相應(yīng)的消息時，用戶的訴求就是能夠快速找到某條消息，對消息的出現(xiàn)在屏幕的位置沒有特定要求，只要能夠被手指點(diǎn)擊到即可，因此選用甩動較為合適，但是對于調(diào)節(jié)音量、亮度這一類的操作，滑動的范圍有限，因此用戶對效率沒有特別的要求，但是對于滑塊位置的精確度有要求，因此選用拖拽是更為恰當(dāng)?shù)摹?/span>

再舉一個反例，在 Steam 移動端橫滑首頁的泳道卡片時（下圖左），使用的手勢是拖拽而不是甩動，瀏覽起來特別低效。更適合的做法應(yīng)為甩動，會更符合此場景下的快速瀏覽的訴求，如下圖右的豆瓣。

對于輕掃來說，使用哪種閾值判定方式有多種情況（如下圖所示）。在本文中，根據(jù)閾值類型、穩(wěn)定化效果以及控制方式的不同我將把輕掃分為 A-E 共 5 類（A-E的命名方式僅存在于本文章，因此在向其他人傳達(dá)時，盡量使用在后文我介紹的手勢描述而不是類別名稱，以便于對方理解。）。后續(xù)會為大家仔細(xì)舉例講解，大家現(xiàn)在僅了解一下即可。

當(dāng)我們在刷抖音視頻時使用的手勢就是輕掃，是否滑動到下一條視頻進(jìn)行播放的判定方式是① 判定手指位移和釋放速度滿足任意一個即可，對應(yīng)的手勢類別是上面表格中的輕掃A。如下圖所示，在刷抖音時，如果使用判定手指位移的方式，我們可以將手指在垂直方向位移大于半個屏幕高度的距離，從而切換到下一個視頻。如果使用判定釋放速度的方式，我們可以移動任意的垂直距離但是手指離開屏幕時保留一個速度從而切換到下一個視頻。大部分情況下用戶都會使用判定釋放速度的方式，因?yàn)榧仁×τ直憬荨?/span>

如果將閾值判定方式改為 ②僅判定手指位移，對應(yīng)的手勢類別是上面表格中的輕掃 B，并且位移的閾值設(shè)置得比較大的話，給用戶帶來的負(fù)面體驗(yàn)可能將是非常大的。比如下圖中打開美圖秀秀的短視頻評論浮層后，想要下滑收起時，App 僅判定手指位移，而且這個位移閾值設(shè)置得比較大，對于希望通過快速滑動一小段距離收起浮層的用戶來說體驗(yàn)很差。即使由于開發(fā)資源有限我們只能做到僅判定手指位移，我們也可以通過減少手指位移的閾值來降低負(fù)面體驗(yàn)。

但是某些場景下，②僅判定手指位移是更加合適的。比如想要在微信中下拉打開小程序選擇頁，就只能通過手指位移達(dá)到一個特定的閾值才能夠觸發(fā)，無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁。這樣處理的原因是在微信消息列表頁，上下滑動瀏覽微信消息是一個高頻操作，如果釋放速度也能作為打開小程序頁面的閾值的話，用戶可能就極易在下滑消息列表時誤操作，無意間打開小程序選擇頁。

因此，對于位移類手勢，選用哪種閾值判斷方式要依據(jù)用戶使用場景和訴求，不能想當(dāng)然地設(shè)計。

了解完三個基礎(chǔ)維度后，我們再將其進(jìn)行組合，從特定手勢的角度更全面地理解它們的差異和使用場景。三個維度的排列組合能夠生成十余種位移類手勢，我列舉出了常見的 7 類，如下圖所示，這 7 類基本涵蓋了 95% 以上的場景，我將一一舉例說明。由于施控物控制受控物改變的屬性一般都為位置，因此接下來在描述下面手勢的定義時我都以受控物的位置變化進(jìn)行舉例。

2.1 拖拽

2.1.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動，無論釋放時手指是否仍有速度，受控物都會立即停止移動。

2.1.2 特點(diǎn)

精確度高但效率低。由于閾值類型僅判定手指位移且沒有穩(wěn)定化效果，拖拽適用于對操作精度要求高，對效率要求低的功能。

2.1.3 案例

在 iOS 設(shè)置中調(diào)節(jié)亮度時，在有限范圍內(nèi)，手指左右拖拽可以控制亮度變化。

2.2 甩動

2.2.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動。若釋放時手指仍有速度，受控物將移動一段距離后才慢慢停止，移動的距離與釋放速度呈正相關(guān)。若釋放時手指速度為 0 ，則受控物立即停止移動。

2.2.2 特點(diǎn)

精確度低但效率高。由于閾值類型判定釋放速度和手指位移，甩動適用于需要快速瀏覽較多內(nèi)容的場景，如滾動瀏覽列表。

2.2.3 案例

在微信的消息列表頁，使用甩動手勢控制列表上下移動，若釋放時仍有速度，列表將仍移動一段距離后才慢慢停止。

2.3 輕掃 A

2.3.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動。若釋放時的速度和手指位移有任意一個達(dá)到閾值，受控物將穩(wěn)定在一個新位置。若釋放速度和手指位移沒有任何一個達(dá)到閾值，受控物將回到原位置。

2.3.2 特點(diǎn)

由于輕掃擁有穩(wěn)定化效果，因此它能夠保持界面的視覺秩序，避免過多的中間狀態(tài)導(dǎo)致界面的雜亂，進(jìn)而幫助用戶聚焦信息。接下來講解的其他輕掃類型都有這一特性，就不一一贅述了。輕掃 A 與接下來要講解的輕掃 B-E 的最大不同之處在于輕掃 A 的閾值類型為「釋放速度和手指位移」，這讓輕掃 A 與輕掃 B-E 有兩點(diǎn)不同，一是輕掃 A 可以通過釋放速度的快慢去控制內(nèi)容的切換數(shù)量的多少，更加高效，二是輕掃 A 可以通過用手指在屏幕滑動很短的距離但離開屏幕時保留一個速度來切換內(nèi)容，因此更加省力。

2.3.3 案例

在刷抖音時，如果使用判定手指位移的方式，我們可以將手指在垂直方向移動大概半個視頻高度的距離，從而切換到下一個視頻。如果使用判定釋放速度的方式，我們可以移動任意的垂直距離并且手指離開屏幕時保留一個速度從而切換到下一個視頻。

2.4 輕掃 B

2.4.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動。若釋放時手指位移達(dá)到閾值，受控物將穩(wěn)定在一個新位置。若釋放時手指位移沒有達(dá)到閾值，受控物將回到原位置。

2.4.2 特點(diǎn)

輕掃 B 與輕掃 A 相比唯一的區(qū)別是閾值類型減少了釋放速度的判定方式，這提高了觸發(fā)切換的難度，使操作成本變高，但是在某些場景下，這也降低了誤操作的概率。如下拉刷新等。

2.4.3 案例

比如想要在微信中下拉打開小程序選擇頁，就只能通過手指位移達(dá)到一個特定的閾值才能夠觸發(fā)，無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁，這樣處理的原因是在消息列表頁上下滑動瀏覽消息是一個高頻操作，如果釋放速度也能作為打開小程序頁面的閾值判定方式，用戶可能就極易在下滑消息列表時誤操作，無意間打開小程序頁面。

因此，當(dāng)頁面已存在一個滑動操作的情況下，還存在另外一個方向相同的滑動操作且僅會在邊界情況下才能觸發(fā)時，為了避免誤操作，會將后者的手勢設(shè)計為輕掃 B 。

上文提到，輕掃 A 的閾值類型為「判定手指位移和釋放速度滿足任意一個即可」，輕掃 B 的閾值類型為「僅判定手指位移」，由于前者的實(shí)現(xiàn)成本比后者高，導(dǎo)致本應(yīng)適合做成輕掃 A 的功能有時只能妥協(xié)做成輕掃 B ，比如之前提到過的美圖秀秀的短視頻評論浮層案例，但我們也可以通過減少手指位移的閾值來降低負(fù)面體驗(yàn)，后文會講解如何與開發(fā)同學(xué)溝通。

2.5 輕掃 C

2.5.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動，但是受控物并不隨著手指的控制而同步移動，僅當(dāng)釋放時手指位移達(dá)到閾值時，受控物才開始移動并穩(wěn)定在一個新位置。若釋放時手指位移沒有達(dá)到閾值，受控物位置則一直保持不變。

2.5.2 特點(diǎn)

上文講到過釋放后穩(wěn)定化和相對控制的缺點(diǎn)，釋放后穩(wěn)定化比較拖沓，相對控制讓用戶缺乏掌控感。兩者如果應(yīng)用到了同一個手勢（即輕掃 C ），就會導(dǎo)致用戶在滑動屏幕時得不到任何反饋，用戶會疑惑是否因?yàn)樽约翰僮鞑划?dāng)或是設(shè)備出現(xiàn)故障。只有當(dāng)用戶手指離開屏幕后才會發(fā)現(xiàn)觸發(fā)了操作，整體的交互流程給用戶一種滯后與延遲的感覺。

因此輕掃 C 與其他類別的輕掃相比存在劣勢，但是它也存在很多的 App 的 H5 頁面中，我的猜測是由于 H5 對于判定釋放速度和絕對控制這兩個維度與客戶端相比難度大很多，因此只能退而求其次選擇輕掃 C 這個較差的方案，實(shí)際上在同樣的應(yīng)用場景中用輕掃 A 替換輕掃 C 可以帶來更好的體驗(yàn)。

2.5.3 案例

下圖左是 QQ 的個性裝扮的 H5 頁面，卡片的切換使用的就是輕掃 C ，如果能夠優(yōu)化為輕掃 A 體驗(yàn)會更好，比如下圖右的音街首頁卡片的設(shè)計。

2.6 輕掃 D

2.6.1 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動，但是手指位移達(dá)到閾值前受控物并不隨著手指的移動而移動。若手指位移達(dá)到閾值，無需手指釋放，受控物將開始移動并穩(wěn)定在一個新位置。若手指位移沒有達(dá)到閾值，無論是否釋放，受控物位置則一直保持不變。

2.6.2 特點(diǎn)

相對控制的方式降低了用戶的掌控感，釋放前穩(wěn)定化減少了操作的拖沓感。使用此手勢的場景是在多個對象之間切換時，我們不希望用戶過于自由地操控對象之間的屬性變化過程，并且犧牲掌控感從而增加單次的切換效率。

2.6.3 案例

比如 iOS 的相機(jī)中，左右滑動切換拍攝模式時，由于前后不同模式之間的頁面框架變化較大，切換時會有不同元素的屬性變化，如果使用絕對控制和釋放后穩(wěn)定化就會導(dǎo)致切換混亂且拖沓，使用相對控制和釋放前穩(wěn)定化就能避免這個問題。

2.7 輕掃E

2.7.1 特殊說明

上文我們講到，通過輕掃手勢 A-D 對受控物的絕對/相對控制都是存在于穩(wěn)定化前，受控物一旦穩(wěn)定化，就脫離了手指的控制，需要手指離開屏幕后再次接觸屏幕開始下一次控制。

輕掃E的不同之處在于它可以在受控物穩(wěn)定化后，仍然控制受控物朝著下一個節(jié)點(diǎn)穩(wěn)定化，在每個節(jié)點(diǎn)之間切換時能夠明顯感覺到分段感，如下圖案例所示。

由于輕掃E相對于輕掃 A-D 的特殊性，控制方式中的絕對控制和相對控制無法覆蓋這個特殊現(xiàn)象，因此我們使用「多段相對控制」來命名輕掃E的這種特殊的控制方式。

2.7.2 定義

使用手指在受控物位置按下后，操控受控物沿著某個方向移動，若手指位移達(dá)到閾值，無需手指釋放，受控物就穩(wěn)定在了一個新位置，但是此時手指還是仍然可以操控受控物繼續(xù)移動的，并且繼續(xù)移動過程中如果手指位移達(dá)到閾值將會到達(dá)下一個穩(wěn)定化狀態(tài)。

2.7.3 特點(diǎn)

輕掃 E 適用于需要在多個對象之間快速切換和確認(rèn)的場景，它的使用感覺很接近拖拽。如下圖所示，我們可以這樣理解，當(dāng)被切換的對象數(shù)量接近于無窮大同時每個對象之間的距離接近無窮小時，輕掃 E 就可以視為拖拽。

2.7.4 案例

上文中iOS相機(jī)人像模式切換打光方式、微信的通訊錄滑動字母索引導(dǎo)航，它們都使用輕掃 E 來滿足多個對象之間快速切換和確認(rèn)的需求。

了解完上述的維度和常用手勢后，我們在腦中就可以形成一個思考框架。當(dāng)我們要針對一個功能設(shè)計位移類手勢時，就可以從閾值類型、穩(wěn)定化效果以及控制方式這三個維度思考。接下來我用一個我參與過的實(shí)際項(xiàng)目作為案例給大家講解一下思考過程。

本案例是網(wǎng)易云音樂陌生人版一起聽中的一個功能，一起聽的雙方在聽歌過程中會收到彼此共同信息，比如聽歌口味相似度、是否同城、都喜歡哪些歌手等，目的是為了增加可玩性和互動性、降低退出率，鼓勵用戶互相了解、提高一起聽過程中的社交體驗(yàn)。

為了營造儀式感和避免信息過載，共同信息的展示方式設(shè)計為了一次只能看一條，進(jìn)入浮層后默認(rèn)展示最新的一條，可以通過滑動查看上一條。因此為了避免出現(xiàn)兩條同時占據(jù)展示區(qū)域的混亂狀態(tài)（如下圖左），我們?yōu)槠涮砑恿?/span>釋放后穩(wěn)定化效果（如下圖右），同時為了方便用戶可以快速瀏覽舊的共同信息，這里使用的穩(wěn)定化效果是較弱的，用戶可以通過滑動一次切換多個共同信息。

由于需要滿足用戶快速瀏覽舊的共同信息的訴求，閾值類型選用了「判定手指位移和釋放速度滿足任意一個即可」，用戶可以通過控制釋放速度進(jìn)而控制信息的切換數(shù)量?？刂品绞絼t選擇了掌控感強(qiáng)的絕對控制。最后的結(jié)果如下圖所示。綜合三個維度進(jìn)行歸類，此手勢為穩(wěn)定化效果較弱的輕掃 A 。

上文講到，基礎(chǔ)的三個維度即閾值類型、穩(wěn)定化效果和控制方式?jīng)Q定了手勢的類別，是設(shè)計階段一定要定義清楚的。但是除此之外，設(shè)計一個手勢需要定義的細(xì)節(jié)非常多。比如受控物的移動是否有速度曲線？手指位移與受控物之間的位移的比率是多少呢？這些都是開發(fā)階段不得不面對的。幸運(yùn)的是，安卓和 iOS 有系統(tǒng)封裝好的一套系統(tǒng)組件可以調(diào)用，操作系統(tǒng)自行解決了剛才講到的細(xì)節(jié)問題，但是 H5 框架下是無法調(diào)用系統(tǒng)組件的，手勢的各種細(xì)節(jié)都需要前端開發(fā)人員自己編寫，難度較大，大部分情況只能實(shí)現(xiàn)一些比較簡陋的效果，這也是為什么在很多 H5 框架下的界面滑動的體驗(yàn)比較差的原因。

位移類手勢由于種類較多，細(xì)節(jié)差異比較大，并且考慮到信息不對稱，與開發(fā)的溝通過程中，很容易出現(xiàn)理解偏差。比較常見的錯誤有：將甩動誤解為輕掃 A ，將輕掃 A 誤解為輕掃 B 或甩動。如果造成效果達(dá)不到預(yù)期的情況，很多設(shè)計師不知道如何讓開發(fā)同學(xué)修改，只能說“這個手勢不絲滑，優(yōu)化一下”，開發(fā)同學(xué)也是一頭霧水，不知道往哪個方向優(yōu)化。如果我們能夠直接說出“閾值判定方式現(xiàn)在只有手指的位移，需要釋放時的速度也能夠觸發(fā)跳轉(zhuǎn)；這個位移的閾值太高了，滑動時很難觸發(fā)跳轉(zhuǎn)，需要把閾值改為 16pt ”類似這樣準(zhǔn)確的描述，就能夠大大降低溝通成本，順利驗(yàn)收。為了避免溝通出現(xiàn)問題，下面我將日常經(jīng)驗(yàn)總結(jié)出現(xiàn)希望能夠幫助到大家。

首先，一旦涉及到位移類手勢，除了必要的文字描述外（可參考上述的手勢定義的描述），最好給開發(fā)體驗(yàn) demo 或者其他 App 上類似的效果，否則很容易產(chǎn)生理解偏差。各種 App 上的類似效果大家可以用本文的每個手勢的案例給開發(fā)同學(xué)展示，但是 App 可能會更新，案例可能在未來某個時間就找不到了，所以我用 Principle 做了一個簡易的基礎(chǔ) demo 集合（如下圖，源文件在文章末尾下載），和我上述介紹的手勢是對應(yīng)的，大家可以拿著這個 demo 給開發(fā)同學(xué)演示大概的效果，也可以在這個 demo 源文件修改。

拖拽和甩動由于需要定義的細(xì)節(jié)參數(shù)都被操作系統(tǒng)提前封裝好了，不需要我們給到額外的標(biāo)注。但是對于輕掃，我們需要將細(xì)節(jié)定義清晰，下面將詳細(xì)講解。

5.1 閾值類型

上文講到，閾值類型一般有兩種：① 判定手指位移和釋放速度滿足任意一個即可；② 僅判定手指位移。①的開發(fā)成本高于②。

如果我們選用輕掃的閾值類型是①，開發(fā)同學(xué)編寫代碼需要兩個參數(shù)的閾值，分別是手指位移和釋放速度。手指位移閾值一般默認(rèn)為受控物的1/2，例如下圖的全屏短視頻和 Banner 。

當(dāng)然我們也可以自定義一個閾值，比如 100pt 、受控物高度的 1/6 等，沒有特別的需要的話使用默認(rèn)值即可而且也不用給開發(fā)同學(xué)特殊說明，但是如果有特殊需要想要修改默認(rèn)值，就要告知開發(fā)同學(xué)你自定義的手指位移閾值。對于釋放速度閾值，通常默認(rèn)就非常的小，幾乎是大于 0 即可觸發(fā)，一般情況下使用默認(rèn)值即可。

在本應(yīng)該選用①的場景中，如果由于技術(shù)成本原因不得不選用②，需要注意的是由于缺少了釋放速度的判定，手指位移的閾值我們需要設(shè)置得小一些方便用戶觸發(fā)，否則就會出現(xiàn)上文中美圖秀秀浮層的那樣的體驗(yàn)問題。經(jīng)過我的實(shí)驗(yàn)，手指位移閾值一般定為 16pt 是比較適中的，既不會太容易誤操作也不會難以觸發(fā)。

5.2 穩(wěn)定化效果

輕掃是一定存在穩(wěn)定化效果的，關(guān)鍵在于告知開發(fā)是釋放前穩(wěn)定化還是釋放后穩(wěn)定化。從開發(fā)的角度講，系統(tǒng)會監(jiān)測用戶的行為，用戶在使用滑動時會有按下（down）、移動（move）、抬起（up）三個行為，釋放前穩(wěn)定化是在移動階段判斷閾值并觸發(fā)操作、釋放后穩(wěn)定化是在抬起后判斷閾值并觸發(fā)操作，開發(fā)成本幾乎沒有區(qū)別。

上文提到過穩(wěn)定化效果強(qiáng)弱的概念。穩(wěn)定化效果越強(qiáng)，單次滑動能夠切換的選項(xiàng)個數(shù)越少，效率越低。穩(wěn)定化效果越弱，單次滑動能夠切換的選項(xiàng)個數(shù)越多，效率越高。首先，我們需要確定單次滑動允許切換多個還是只允許切換一個，如果允許切換多個，開發(fā)同學(xué)會設(shè)定一個控制切換難度的系數(shù)，而只允許切換一個的話就不存在這個系數(shù)。通常我們也不需要修改這個默認(rèn)系數(shù)，但如果想讓操作更加難或容易觸發(fā)，可以告知開發(fā)同學(xué)修改這個系數(shù)。

5.3 控制方式

絕對控制比相對控制的開發(fā)成本高，如果開發(fā)資源并不是很緊張，需要絕對控制的場景就不要退而求其次使用相對控制。涉及到輕掃手勢一定要告知開發(fā)同學(xué)控制方式，否則很可能被視為相對控制處理。

通過學(xué)習(xí)，我們不但可以在開發(fā)工作進(jìn)行前與開發(fā)同學(xué)高效溝通，保證開發(fā)工作的順利進(jìn)行，也可以對自家移動端產(chǎn)品的現(xiàn)有手勢進(jìn)行逐一排查發(fā)現(xiàn)問題點(diǎn)進(jìn)行記錄，并且找到合適解決方案，然后用準(zhǔn)確的語言描述給開發(fā)同學(xué)。位移類手勢是問題發(fā)生的重災(zāi)區(qū)，下圖是我在進(jìn)行手勢排查后輸出的表格，挑選出一些有代表性的位移類手勢問題案例給大家作參考，開發(fā)同學(xué)可以通過它快速明確問題，理解解決方案。

之前的文章講解位移類手勢和點(diǎn)擊類手勢的時候，提到過不同的描述維度會讓手勢產(chǎn)生不同的變種，比如觸發(fā)時機(jī)、 觸屏次數(shù)、 閾值類型等。我們同樣也可以把使用手指的數(shù)目看做是一個描述維度，使用的手指數(shù)目不同也會產(chǎn)生不同的手勢變種，有著不同的應(yīng)用方式。

使用多指類手勢的原因主要有兩個：

① 單個界面對于手勢的需求量比較大。當(dāng)可用的單指類手勢都已經(jīng)被占用后，通過引入多指的維度來擴(kuò)充手勢，從而滿足設(shè)計需要，避免產(chǎn)生手勢沖突；

② 系統(tǒng)級的全局手勢通常使用多指類手勢來盡量避免與第三方App的手勢沖突。

全局手勢如果設(shè)計得過于簡單很容易引發(fā)手勢沖突。例如一加手機(jī)的某個系統(tǒng)版本中，有一個全局手勢是單指連續(xù)點(diǎn)擊三次觸發(fā)頁面縮放，對于非游戲類的App來說基本沒有這個手勢，不必?fù)?dān)心誤操作，但是對于游戲類App而言，連續(xù)點(diǎn)擊屏幕上的攻擊鍵是一個很常用的操作，連續(xù)點(diǎn)擊三次觸發(fā)頁面縮放的設(shè)計導(dǎo)致用戶游戲過程中極易不小心觸發(fā)了頁面縮放。iOS系統(tǒng)的做法很巧妙，在點(diǎn)擊的次數(shù)外增加了手指個數(shù)的維度，通過三指雙擊才能夠觸發(fā)頁面縮放，從而基本解決了手勢沖突問題。

1.1 多指點(diǎn)擊

1.1.1 特點(diǎn)

多指點(diǎn)擊同樣有觸屏次數(shù)、觸發(fā)時機(jī)和時間限制這些描述維度，它們的變化會給多指點(diǎn)擊帶來不同變種。在App中多指點(diǎn)擊常見的變種一般有多指單擊、多指按下，而像多指雙擊、多指長按這一類更復(fù)雜的變種較為少見，一般僅用于系統(tǒng)級的全局手勢。

1.1.2案例

在iOS的短信App中，可以通過「雙指按下」快速選中一個短信。

在iOS的設(shè)置中開啟縮放功能后，任何頁面都可以通過「三指雙擊」觸發(fā)頁面縮放。

1.2 多指位移

1.2.1 特點(diǎn)

多指位移同樣有控制方式、穩(wěn)定化效果、以及閾值類型這些描述維度，它們的變化可以實(shí)現(xiàn)多指輕掃、多指拖拽、多指甩動這些效果。多指位移通常用來移動受控物或觸發(fā)某個功能。?

1.2.2 案例

在iOS的短信App中，可以通過「雙指拖拽」快速多選短信。

在網(wǎng)易云音樂的播放頁，向下「雙指輕掃」可以觸發(fā)黑膠背后的故事。

在筆記應(yīng)用GoodNotes中，瀏覽模式下可以通過「單指甩動」瀏覽頁面，但是當(dāng)進(jìn)入編輯模式后，單指位移會觸發(fā)繪圖，為避免手勢沖突，單指甩動會變?yōu)椤鸽p指甩動」。

1.3多指縮放

1.3.1 特點(diǎn)

多指縮放與多指位移比較相近，不同之處在于多指縮放的手指移動方向是以某一個點(diǎn)為中心進(jìn)行匯聚或分散?？刂品绞?、穩(wěn)定化效果、以及閾值類型這些描述維度同樣適用于多指縮放。

1.3.2 案例

iPad可以通過「四指縮小」快速退出應(yīng)用。

iOS的照片App中，可以通過「雙指縮放」縮小或放大照片。

網(wǎng)易云音樂可以通過「雙指縮小」觸發(fā)抱一抱彩蛋。

1.4 多指旋轉(zhuǎn)

1.4.1特點(diǎn)

多指旋轉(zhuǎn)可以看做是以多指的中心為圓心，通過多指的移動來模擬出圍繞這個圓心做旋轉(zhuǎn)的手勢。它是對物理世界幾乎100%的映射，因此一般用于旋轉(zhuǎn)某個物體，調(diào)節(jié)旋鈕等操作。

1.4.2案例

iOS的照片App中，可以通過「雙指旋轉(zhuǎn)」轉(zhuǎn)動照片。

1.5 多指特殊手勢

有一類特殊的多指手勢可以支持更復(fù)雜的交互，一般為系統(tǒng)級手勢。例如iOS中長按桌面的App后進(jìn)行拖拽時，可以同時點(diǎn)擊其他App一起進(jìn)行拖拽。

2. 組合類手勢

組合類手勢由兩個或兩個以上的手勢組成，因此隱蔽性較強(qiáng)，如果不進(jìn)行引導(dǎo)很難被用戶發(fā)現(xiàn)，也是由于這種特性，它所觸發(fā)的功能一般有其他更明顯的入口或操作方式，使用它通常是為了增加高頻功能的操作效率，服務(wù)于專家型用戶。組合類手勢之所以能夠提高效率，是因?yàn)樗延脩羝綍r需要通過多個步驟才能完成的操作簡化為了短時間即可完成的手勢組合。雖然初次使用有一定學(xué)習(xí)成本，但是一旦用戶形成肌肉記憶，操作過程會非?？焖佟?br />

因?yàn)榻M合類手勢更加多變，且系統(tǒng)并未直接提供這類手勢給設(shè)計師調(diào)用，需要設(shè)計師自己根據(jù)需求來組合搭配，因此很考驗(yàn)設(shè)計師的創(chuàng)新能力。之后的案例展示僅為常見的用法，并不是全部。通過舉一反三，我們也可以設(shè)計出不同與本文中的案例但更滿足需求的組合類手勢。

2.1 設(shè)計模型

下面這個表格里的模型是總結(jié)常見的組合類手勢而設(shè)計的，能夠涵蓋絕大部分的設(shè)計需求，但僅適用于單指的組合類手勢設(shè)計。

模型將組合類手勢的操作過程分為啟動、調(diào)整和觸發(fā)三個階段。每一階段由一個分支手勢構(gòu)成。比如在第一階段中，可以選用的手勢有長按、雙按、輕掃B。并不是只能選用這三個，而是它們?nèi)齻€作為第一階段的分支手勢體驗(yàn)良好且最常用。

①啟動階段的目的是創(chuàng)建一個新模式，在新模式下，界面原有的手勢會失效，系統(tǒng)只能響應(yīng)②調(diào)整階段的手勢，可以選用拖拽和輕掃E。在③觸發(fā)階段可以進(jìn)行抬起、停留來觸發(fā)最后的功能，如果選擇「無操作」，則說明手勢在②調(diào)整階段已經(jīng)達(dá)到目的，不需要③觸發(fā)階段的手勢。

僅解釋這個模型可能比較難理解，下面會用一些案例進(jìn)行演示。

2.2 常見案例

2.2.1 長按+輕掃E+抬起

2.2.1.1 特點(diǎn)

通過長按激活一個控件，在手指不離開屏幕的情況下將手指移動到某個功能選項(xiàng)的位置上，然后通過抬起觸發(fā)該功能。功能選項(xiàng)一般出現(xiàn)在手指的附近，從而方便下一步操作。

2.2.1.2??案例

花瓣App中長按某個圖片后可以快速進(jìn)行收藏等操作。

2.2.2?輕掃B+輕掃E+抬起

2.2.2.1?特點(diǎn)

通過輕掃B激活一個控件，在不松手的情況下將手指往某個方向移動來選中某個功能選項(xiàng)，然后通過抬起觸發(fā)該功能。

2.2.2.2?案例

Chrome瀏覽器中，下拉頁面后將手指左右移動并抬起可以觸發(fā)其他功能。

2.2.3?長按+拖拽+停留

2.2.3.1?特點(diǎn)

通過長按激活一個控件，在不松手的情況下將手指拖動到控件的某個功能選項(xiàng)的位置上，然后停留特定時間觸發(fā)該功能。

2.2.3.2?案例

在京東讀書App中，需要跨頁選擇文本時，需要長按后拖動手指至頁面左下角后，停留一段時間進(jìn)行翻頁。

在iOS桌面長按圖標(biāo)將其拖動到邊界，停留一段時間后可以將圖標(biāo)移動到下一頁。

為什么上面兩個案例在觸發(fā)階段使用停留而不是抬起？

因?yàn)橥瓿闪擞|發(fā)階段的操作后手指仍然需要對受控物保持控制狀態(tài)，此時不能松開手指，因此這種情況下操作的觸發(fā)手勢使用停留更合適。

2.2.4?雙按+拖拽

2.2.4.1?定義

當(dāng)一個界面中，上下左右四個方向都已經(jīng)存在位移類手勢了，但是仍然有功能需要新增額外的位移類手勢。此時可以將雙按看做是一個模式啟動，雙按后可以立即使用拖拽來觸發(fā)相應(yīng)功能。

2.2.4.2 案例

地圖類App中，可以通過雙按后手指不離開屏幕往上拖拽來放大地圖，往下拖拽來縮小地圖，從而解決了單手操作時難以放大縮小地圖的問題。不足之處在于，這個手勢

的教育成本較高，只有少部分用戶能夠發(fā)現(xiàn)并持續(xù)使用。

2.3 根據(jù)使用場景進(jìn)行分類

上文依據(jù)操作方式將案例進(jìn)行了分類。實(shí)際上在設(shè)計過程中，使用場景分類更能便于我們?nèi)ミx擇適合的手勢。我將組合類手勢通過使用場景的區(qū)別分為了四類，它們分別是 ①單個屬性的調(diào)整、②多個功能選其一、③默認(rèn)選擇主要功能、④同時進(jìn)行兩項(xiàng)操作。由于下面案例的手勢在上文已經(jīng)進(jìn)行了介紹，所以不做贅述僅羅列更多案例幫助理解。

2.3.1 單個屬性的調(diào)整

單個屬性可以是亮度、大小、位置等，通過雙按或長按啟動模式后，再使用拖拽來進(jìn)行調(diào)整。

2.3.1.1?雙按+拖拽

每個地圖App基本都支持這個手勢，雙按后通過拖拽來對地圖大小進(jìn)行調(diào)整。

（上文有動圖示例，這里不再重復(fù)展示）

2.3.1.2?長按+拖拽

在快手App的拍攝界面中，長按拍攝鍵后上下拖拽可以調(diào)整取景框的大小。

2.3.2 多個功能選其一

通過長按喚起功能菜單，在手指不離開屏幕的情況下移動到某個功能后抬起觸發(fā)該功能。

2.3.2.1?長按+輕掃E+抬起

在iOS的桌面長按App的圖標(biāo)可以喚起更多功能菜單，移動手指到某個功能后抬起可觸發(fā)該功能。

2.3.3 默認(rèn)選擇主要功能

使用長按或輕掃B后可以直接松手默認(rèn)觸發(fā)主要功能，但如果保持手指不離開屏幕使用輕掃E，則可以選擇其他次要的功能，然后抬起觸發(fā)。

2.3.3.1?長按+輕掃E+抬起

微信錄制完語音后，抬起默認(rèn)會觸發(fā)發(fā)送語音，也可以通過移動手指到「取消」或「轉(zhuǎn)文字」上來觸發(fā)另外兩個較為低頻的功能。

2.3.3.2?輕掃B+輕掃E+抬起

下面是一個概念案例，來自于一本交互設(shè)計相關(guān)圖書《交互設(shè)計語言》，非常推薦閱讀。在下圖案例中，手勢的目的是解決微信的多層級導(dǎo)致的返回步驟過多問題。右滑頁面后如果直接松手會返回上一頁，但是如果上下移動則可選擇其他層級的頁面，抬起后進(jìn)行跳轉(zhuǎn)。

2.3.4 同時進(jìn)行兩項(xiàng)操作

部分場景中，長按后手指需要保持接觸屏幕的情況下同時操作兩個功能，由拖拽和停留分別操作。

2.3.4.1?長按+拖拽+停留

暫無更多案例展示，可以看上文的京東讀書App選中更多文字的同時進(jìn)行翻頁、在iOS桌面拖動圖標(biāo)的同時進(jìn)行翻頁的案例，在這里就不重復(fù)展示了。

在文章的開頭我們提到過描述維度是影響一個交互手勢呈現(xiàn)效果的變量。在上文中，提及過的描述維度包括穩(wěn)定化效果、控制方式、閾值類型、時間限制、觸屏次數(shù)、觸發(fā)時機(jī)，但它們的都是一些較為顯性的描述維度，確定了某個手勢的基本框架。還有一些未提到的較為隱性的描述維度，它們同樣影響著用戶的操作體驗(yàn)，包括角度與方向、反饋比率、熱區(qū)。

1.角度與方向

位移類手勢的方向一般為上下方向或左右方向，或者二者兼有之，但是想要觸發(fā)操作，手指移動方向并不需要完全垂直或水平，默認(rèn)會有一個容錯角度。

當(dāng)某個界面或模塊僅支持上下方向或左右方向的位移類手勢時，如下圖所示，360度會1：1均分，每個方向有180度的容錯角度，只要在角度范圍內(nèi)滑動，都可以觸發(fā)相應(yīng)操作，但需要注意的是在僅支持上下方向滑動時，如果完全水平方向去滑動，則不會觸發(fā)任何操作，反之亦然。

雖然說角度的容錯范圍很大，但是滑動時離預(yù)期方向的角度偏離越大，單位長度產(chǎn)生的有效位移距離就會變少。例如下圖中，在一個只能上下滑動的頁面，垂直上滑和偏移上滑相同距離產(chǎn)生的有效位移是不同的，垂直上滑的效率明顯更高。

當(dāng)上下滑動和左右滑動同時存在于一個頁面或模塊時，會出現(xiàn)兩種情況。第一種情況是被滑動的內(nèi)容除上下左右外可以往更多方向移動，例如滑動照片或地圖查看更多細(xì)節(jié)（如下圖所示），是允許用戶自由地朝任意方向滑動的。

第二種情況是，在單次操作中，只有上下或左右方向的滑動需求。360度會1：1：1：1均分，每個方向有90度的容錯角度。在這種情況，上滑時手指滑動方向只要左右偏移不超過 45° 都會被判定為上滑，如下圖所示。

對于這第二種情況，系統(tǒng)需要處理以下兩個問題。

問題A：如果在上下滑過程中進(jìn)行左右滑動的操作，系統(tǒng)如何判定？

一般我們是不希望用戶在一次操作中同時進(jìn)行上下滑動和左右滑動的。系統(tǒng)如果判定某次滑動為上下滑動，為了避免誤操作，在本次滑動結(jié)束前（滑動結(jié)束的定義：手指離開屏幕并且受控物停止移動或停止其他屬性變化），左右滑動會被完全禁用，而且左右滑動的容錯角度會臨時分配給上下滑動，如下圖所示。

例如，在iOS信息列表中，左右滑動可以喚起更多操作，上下滑動可以滾動頁面，但是一旦進(jìn)入上下滑動的過程，不松手的情況下左右滑動喚起更多操作就被完全禁用了，且左右滑動的容錯角度會臨時分配給上下滑動。

問題B：系統(tǒng)是如何在某一次滑動時判定我們是想要上下滑動還是左右滑動呢？

系統(tǒng)給予我們自然的使用體驗(yàn)背后是復(fù)雜的判定過程。判定的難點(diǎn)有兩個，第一個難點(diǎn)：手指在操控屏幕時并不是一個穩(wěn)定的狀態(tài)，接觸屏幕的一瞬間很容易抖動。抖動的方向也是不確定的，這個抖動需要判定為滑動嗎？如果用戶并不想滑動只是想進(jìn)行點(diǎn)擊操作的話怎么辦?

第二個難點(diǎn)：手指在接觸屏幕后，接觸屏幕的手指面積是逐漸增加的，但向下的增加要比其他方向的多，如果直接識別的話會被判定為下滑，應(yīng)該怎么處理？

下圖的動畫是慢速模擬手指接觸屏幕的過程。

為了解決上述的兩個難點(diǎn)，系統(tǒng)會設(shè)定一個容錯距離，用戶的滑動位移如果在這個距離內(nèi)，系統(tǒng)就會把手勢判定為“點(diǎn)擊”，只有當(dāng)用戶往某個方向的滑動位移達(dá)到或超過這個距離，系統(tǒng)才會判定為“滑動”。但是由于這個容錯距離很小，作為用戶的我們?nèi)ゲ僮鲿r，是很難感受到這個容錯距離的存在的。

基礎(chǔ)規(guī)則講完了，接下來針對第二種情況介紹一些負(fù)面案例，下圖左是滑動前正常的角度分配，但是有時由于開發(fā)同學(xué)的失誤，導(dǎo)致容錯角度沒有均分，出現(xiàn)下圖右中觸發(fā)上滑和下滑的角度極小的情況，進(jìn)而導(dǎo)致用戶在上下滑動時非常容易誤操作為左滑和右滑。

網(wǎng)易云音樂也曾有過類似的遺留問題，iOS 端的播放頁上滑調(diào)出評論頁極易誤操作為左右滑動黑膠切歌（下圖 A ，現(xiàn)已修復(fù)），安卓端的賬號側(cè)邊欄上滑瀏覽極易誤操作為左滑收起側(cè)邊欄（下圖 B ）。

因此，在驗(yàn)收階段，角度的容錯性檢查也是重要的一環(huán)。因此在驗(yàn)收時間充裕的情況下，可以切換不同的手持方式分別體驗(yàn)一次，因?yàn)橛行﹩栴}只有在特定的手持方式下才容易被發(fā)現(xiàn)。

2.反饋比率

上文提到過施控物（施加控制的一方）和受控物（被施加控制的一方）的概念。比率是受控物的某個屬性變化與的施控物某個屬性變化的比值。為了更好地理解這個概念，在這里舉個例子。如下圖，在網(wǎng)易云音樂的播放頁和微信小程序頁面邊緣右滑一個固定距離時，頁面下降的距離是不同的，網(wǎng)易云音樂播放頁的下降距離大約只有微信小程序頁面的一半，我們可以認(rèn)為對于這個操作，網(wǎng)易云音樂的反饋比率是微信小程序的一半。

比率的大小并沒有絕對的優(yōu)劣之分。比率越小，反饋越遲鈍，但方便精準(zhǔn)操作。比率越大，反饋越靈敏，效率高，但不方便精準(zhǔn)操作。由于比率的這些特性，在不同的場景中會根據(jù)需求來選用合適的比率。

在現(xiàn)實(shí)生活中，不同車型的轉(zhuǎn)向比就是一個較為典型的案例。汽車方向盤旋轉(zhuǎn)1圈半只能讓輪胎旋轉(zhuǎn)30度左右，而賽車、卡丁車的方向盤旋轉(zhuǎn)角度和輪胎的旋轉(zhuǎn)角度通常是一致的。普通人使用汽車的主要目的是代步，主要訴求是舒適安全，因此選用反饋比率小的轉(zhuǎn)向比能夠提高容錯率。而對于賽車、卡丁車這一類為競技而設(shè)計的車型，駕駛員要隨時對復(fù)雜的賽道環(huán)境做出快速的操作，因此需要使用反饋比率高的轉(zhuǎn)向比提高靈敏度。

反饋比率在很多設(shè)備的交互設(shè)計中都有應(yīng)用，例如我們可以設(shè)置鼠標(biāo)的跟蹤速度的快慢，跟蹤速度越快，反饋比率越大，鼠標(biāo)移動相同的距離可以控制光標(biāo)移動更大的距離。

在觀看視頻時，對進(jìn)度進(jìn)行細(xì)微調(diào)整和跨度較大的調(diào)整都是用戶的常見需求，因此一般做法是采用兩種比率不同的操作方式來滿足需求。通過拖動視頻區(qū)域的熱區(qū)來進(jìn)行反饋比率較小的細(xì)微調(diào)整，通過拖動進(jìn)度條的熱區(qū)來進(jìn)行反饋比率較大的大跨度調(diào)整。

3.熱區(qū)

熱區(qū)為手勢提供了可操作的區(qū)域，需要接觸屏幕的手勢都需要熱區(qū)才能觸發(fā)。合理的熱區(qū)布置能夠有效提高用戶體驗(yàn)。

3.1熱區(qū)大小

更大的熱區(qū)可以減少用戶瞄準(zhǔn)所花費(fèi)的時間，減少觸發(fā)失敗的概率。熱區(qū)的大小不一定等于按鈕的大小，當(dāng)某個按鈕在視覺上設(shè)計得比較小時，為了方便用戶操作，我們可以將熱區(qū)合理地設(shè)計大一些。例如下圖的App Store應(yīng)用詳情頁中，視覺上按鈕雖然很小，但是點(diǎn)擊熱區(qū)卻設(shè)置得很大。

按鈕與熱區(qū)如果聯(lián)系感弱，就會導(dǎo)致用戶的疑惑。例如下面的案例，換一換的按鈕熱區(qū)過大，擴(kuò)大到了標(biāo)題區(qū)域，用戶如果無意間點(diǎn)擊標(biāo)題卻更換了一批內(nèi)容，就可能感到奇怪。

下面的詞典案例中，雖然播放按鈕只是右側(cè)的一個小圖標(biāo)，但是頂部由單詞構(gòu)成的整個區(qū)域都是可以點(diǎn)擊的。因?yàn)辄c(diǎn)擊單詞與發(fā)音存在強(qiáng)聯(lián)系，所以這樣的熱區(qū)擴(kuò)大是合理的、聯(lián)系感強(qiáng)的。

按鈕的層級和樣式如果相同，熱區(qū)面積一般需要保持一致，并撐滿可用空間。例如常見的tab欄上的圖標(biāo)。

對于高頻操作，很多App會另外設(shè)計一個額外手勢供用戶使用，因?yàn)轭~外手勢所能提供的熱區(qū)遠(yuǎn)遠(yuǎn)大于單擊按鈕的熱區(qū)，更加便于用戶操作。例如網(wǎng)易云音樂的播放頁會將高頻功能都另外配備一個手勢以此來提高操作效率。下圖藍(lán)色為按鈕熱區(qū)，紅色為手勢的熱區(qū)。

如果一個操作不可撤銷且存在危險性質(zhì)，我們盡量不要提供熱區(qū)過大的手勢操作。此時我們需要用戶更加專注，如果加入熱區(qū)過大的手勢操作可能會增加誤操作的概率。

3.2熱區(qū)層級

界面會存在點(diǎn)擊類手勢與位移類手勢的熱區(qū)重疊的情況，此時兩者是平級的，因?yàn)槭謩莶町惔笏曰ゲ桓蓴_。

當(dāng)界面中存在兩種點(diǎn)擊類手勢的熱區(qū)重疊情況或兩種位移類手勢的熱區(qū)重疊情況時，就會出現(xiàn)層級排序的問題。

在支付寶的一個猜漲跌的模塊中，熱區(qū)的大概分布如下圖所示。整個模塊整體有一個熱區(qū)，點(diǎn)擊可以進(jìn)入二級頁面?？礉q和看跌分別有一個熱區(qū)，點(diǎn)擊可以直接選擇操作，層級布置是在整體熱區(qū)的上一層。

對于位移類手勢，熱區(qū)的層級布置更為復(fù)雜。比如以豆瓣的我的頁面為例，在iOS全面屏上的橫滑熱區(qū)分布如下圖所示。

①邊緣右滑喚起側(cè)邊欄；②橫滑泳道可以看更多書影音檔案；③橫滑底部的iOS安全區(qū)可以切換應(yīng)用；④其他位置右滑可以切換tab頁。

通過熱區(qū)層級的觀察，我們能夠發(fā)現(xiàn)一些明顯的體驗(yàn)問題。

在QQ音樂的首頁，頁面可以通過橫滑切換tab，同時歌單可以通過橫滑查看更多。歌單的滑動熱區(qū)位于橫滑tab熱區(qū)的上一層。

通過觀察熱區(qū)的層級我們可以看出，歌單的橫滑熱區(qū)幾乎覆蓋了拇指的易操作區(qū)域，導(dǎo)致tab的橫滑手勢難以觸發(fā)。

有書的播放頁中，左邊界的全局右滑返回?zé)釁^(qū)在進(jìn)度控件的上一層，但是進(jìn)度滑塊由于距離頁面左邊界太近，導(dǎo)致滑動進(jìn)度滑塊時很容易誤操作為返回上一頁。這種情況下我們可以標(biāo)注一個右滑手勢禁用區(qū)域給開發(fā)工程師說明情況，將此情況避免掉即可。

3.3熱區(qū)的啟動熱區(qū)與調(diào)整熱區(qū)

對于某些位移類手勢，在操作時熱區(qū)并不是一直保持不變的，而是分為了啟動熱區(qū)與調(diào)整熱區(qū)。當(dāng)位移類手勢的起始點(diǎn)位于啟動熱區(qū)時，系統(tǒng)才會響應(yīng)，后續(xù)操作過程中，手指不離開屏幕繼續(xù)進(jìn)行位移操作時系統(tǒng)響應(yīng)的區(qū)域被稱為調(diào)整熱區(qū)。通常調(diào)整熱區(qū)會擴(kuò)大到全屏，同時禁用了界面的其他全部功能，目的主要是為了保證在后續(xù)操作過程中能夠?yàn)橛脩籼峁┳銐虼蟮臒釁^(qū)增加操作舒適度，其次是為了避免用戶手指一直擋住觸發(fā)區(qū)域的重要信息。

例如，iOS的控制中心中，在音量控件區(qū)域上下拖動可以調(diào)節(jié)音量大小，拖動過程中將手指移出音量控件區(qū)域繼續(xù)上下拖動仍然可以繼續(xù)調(diào)節(jié)。這樣的設(shè)計可以避免手指擋住控件造成無法直觀看清音量大小的問題。

在iOS端，QQ音樂和網(wǎng)易云音樂的播放條都支持左右滑動切歌，但是整體體驗(yàn)上有一些差距。在面積大小層面，QQ音樂的啟動熱區(qū)與網(wǎng)易云音樂的啟動熱區(qū)是基本相同的，但是QQ音樂的調(diào)整熱區(qū)是全屏，而網(wǎng)易云音樂的調(diào)整熱區(qū)仍然和啟動熱區(qū)一致。這樣導(dǎo)致的問題是，用戶在使用網(wǎng)易云音樂時，如果左右滑動播放條的過程中手指無意間超出了啟動熱區(qū)就會導(dǎo)致本次操作無效，影響使用體驗(yàn)，而QQ音樂沒有這個問題。

用戶與一個手勢的交互過程是從感知到使用，最后產(chǎn)生記憶。上文的知識基本是關(guān)于使用層面的，對于感知和記憶層面，我們需要了解以下內(nèi)容。

1 自然

針對某個功能選擇最自然的手勢，在使用中能夠代入到相應(yīng)的情境，并且能夠幫助用戶感知和記憶，最終習(xí)得。這里提到的“自然”指的是符合文化習(xí)俗、日常習(xí)慣和現(xiàn)實(shí)映射。

近些年任天堂的體感游戲成功破圈，主要原因我認(rèn)為是它的操作方式貼近現(xiàn)實(shí)映射，基本模擬了我們?nèi)粘５膭幼髁?xí)慣，讓游戲非常容易上手，讓之前被傳統(tǒng)電子游戲的操作門檻攔在外面的人有了享受游戲的機(jī)會。

擁抱是我們基于文化來表達(dá)善意的方式。在云音樂中，抱一抱彩蛋是使用雙指捏合某個評論進(jìn)行觸發(fā)，它是基于現(xiàn)實(shí)生活中我們常用來表達(dá)關(guān)愛的擁抱動作衍生而來。正因如此，使用時才會感覺氛圍感與儀式感滿滿。

水果忍者這個名字你應(yīng)該不會陌生，這款手游在2015年就達(dá)到了10億次的下載量，足以看出它的受歡迎程度。在游戲中，設(shè)計師將“切”這個現(xiàn)實(shí)的動作通過滑動手勢進(jìn)行了自然的映射，進(jìn)而讓上到80歲的老奶奶，下到剛學(xué)會說話的孩子都能無障礙地玩兒這款游戲。

2 經(jīng)驗(yàn)

用戶習(xí)得某個手勢后，經(jīng)過反復(fù)使用形成經(jīng)驗(yàn)。當(dāng)用戶面對類似的界面時，就能快速感知到可以使用哪些手勢?？紤]到這種經(jīng)驗(yàn)，在同一個場景，如果某個功能與某個手勢的綁定已經(jīng)成為行業(yè)通用做法，盡量沿用而不要換另一個手勢。比如下拉刷新、雙擊點(diǎn)贊等。

3 容錯

手勢的容錯包括認(rèn)知的容錯還有記憶的容錯。比如當(dāng)感知一個功能應(yīng)該用什么手勢操作時，不同的人會有不同的認(rèn)知方式，支持多種手勢就能包容這些認(rèn)知差異。比如QQ 閱讀的下拉擬物繩燈可以切換夜間模式，考慮到了有些用戶在現(xiàn)實(shí)生活中并未見過擬物繩燈，并不知道是要進(jìn)行下拉才能觸發(fā)操作。因此，QQ 閱讀貼心地搭配了一個簡單的點(diǎn)擊操作，用戶通過點(diǎn)擊繩燈也可以切換夜間模式。

類似地，探探、Tinder的左滑無感右滑喜歡的手勢當(dāng)用戶經(jīng)過較長時間不使用后是容易遺忘的，為了包容用戶記憶上的差異，無感和喜歡仍然會設(shè)計出固定的按鈕供用戶使用。

4 邏輯

在交互手勢的層面上，如果用戶通過某個手勢進(jìn)行某個操作后，界面仍然存在上一個界面的可操作性元素，按照邏輯用戶也可以通過反向的手勢或?qū)?yīng)的手勢進(jìn)行逆向操作。比如在微信首頁下拉調(diào)出小程序頁面，之后可以通過上拉返回首頁。

如果違背了邏輯，就容易與用戶的心理模型不相符，用戶就會感覺到混亂和不適。

舉一個反例， Uki 的個人主頁可以通過點(diǎn)擊或下拉底部的浮層收起更多信息，但是收起后即使浮層仍保留在界面的情況下只能通過點(diǎn)擊展開更多個人信息而不能上拉。

有時，為了提高容錯，可以犧牲一部分邏輯。如知乎評論彈出框，邏輯上它是從底部彈出的，但是不但能夠下拉關(guān)閉還可以右滑關(guān)閉。雖然右滑關(guān)閉在邏輯上有點(diǎn)奇怪，但是確實(shí)讓用戶操作更加方便。

5 引導(dǎo)

用戶在感知某個功能使用哪個手勢的過程中，首先會使用經(jīng)驗(yàn)來判斷。但是當(dāng)選用的手勢無法讓用戶通過經(jīng)驗(yàn)感知到時，我們需要使用合理的引導(dǎo)來教育用戶。

5.1 引導(dǎo)的強(qiáng)弱

有引導(dǎo)就會有強(qiáng)弱，是強(qiáng)是弱要取決于功能的重要級。

強(qiáng)引導(dǎo)一般是模態(tài)的浮層，會打斷用戶當(dāng)前的操作，雖然保證了用戶一定會注意到，但是也會讓用戶厭煩地跳過而忽略內(nèi)容。

弱引導(dǎo)沒有固定的樣式，不會打斷用戶當(dāng)前的操作。如豆瓣的關(guān)注Tab下的帖子流被瀏覽完后，繼續(xù)上滑會出現(xiàn)手勢引導(dǎo)。

iPhone 一代經(jīng)典的滑動解鎖，按鈕上的向右箭頭和暗文“滑動以解鎖”的引導(dǎo)文案都再提示用戶如何使用。

還有一類弱引導(dǎo)，以隱喻來幫助用戶感知到應(yīng)該使用的手勢。例如常見的泳道設(shè)計，會在最后露出截斷的內(nèi)容暗示用戶左滑可以看更多內(nèi)容。（如下圖紅框區(qū)域）

當(dāng)某個點(diǎn)擊操作觸發(fā)了內(nèi)容的平移動畫，那么這個平移動畫會暗示用戶可以通過左右滑動來操作。比如切換Tab、左右滑動翻牌等。

5.2 引導(dǎo)的時機(jī)

5.2.1 操作前

當(dāng)產(chǎn)品中設(shè)計了不容易感知的新手勢，在用戶操作前，通過引導(dǎo)讓用戶了解和學(xué)習(xí)新的手勢。大部分的手勢引導(dǎo)都在這個時機(jī)。

5.2.2?操作中

當(dāng)某個手勢可以分階段觸發(fā)不同功能時，在用戶正在操作第一階段時給予第二階段的引導(dǎo)非常適時且容易被注意到。

下拉進(jìn)入二樓是淘寶最先使用的創(chuàng)新手勢，根據(jù)下拉的兩種距離來觸發(fā)刷新和二樓。二樓不是一個常用功能很難被發(fā)現(xiàn)，但是由于存在下拉刷新這個第一階段的手勢，可以在用戶進(jìn)行刷新時進(jìn)行提示引導(dǎo)，告知用戶二樓的存在。

微信的浮窗也是一個操作中引導(dǎo)的優(yōu)秀案例。用戶在微信閱讀文章時，可以通過右滑并將手指移入控件從而將文章最小化，稍后再閱讀。移入控件這個第二階段的手勢在用戶在操作高頻的右滑返回時進(jìn)行引導(dǎo)，非常容易被發(fā)現(xiàn)（下圖左）。如果沒有這個手勢設(shè)計，僅僅保留到更多浮層里的這個入口，相信很多用戶根本發(fā)現(xiàn)不了這個功能。（下圖右）

5.2.3?操作后

對于一些與用戶的心理模型和習(xí)慣不一致的手勢，提前預(yù)測用戶可能輸入的錯誤手勢，在用戶錯誤操作后進(jìn)行提示，規(guī)范用戶的操作方式。如下圖，由于知乎舊版本是通過左右滑動切換回答的，新版本調(diào)整為上下滑動后，需要糾正用戶使用習(xí)慣。因此，當(dāng)用戶仍然使用左右滑動時，會出現(xiàn)浮層提示用戶正確的手勢。

前文講解的手勢只能算作智能設(shè)備輸入方式的其中一種。還有很多其他依賴于不同傳感器的輸入方式，接下來介紹一些與手勢比較相關(guān)的傳感器作為拓展知識和案例進(jìn)行了解。當(dāng)針對某個功能找不到適合的手勢時，可以嘗試從傳感器的角度思考。

1 陀螺儀

陀螺儀可以測量沿一個軸或幾個軸動作的角速度，跟蹤并捕捉3D空間的完整動作，應(yīng)用非常廣泛，特別是在體感游戲的設(shè)計中發(fā)揮了很大作用。很多產(chǎn)品設(shè)計利用陀螺儀可以進(jìn)行一些擬真的設(shè)計。例如FIMO相機(jī)里的膠卷會跟隨手機(jī)的傾斜而產(chǎn)生旋轉(zhuǎn)。

錘子科技在堅果Pro2的發(fā)布會上提出的“無限屏”功能也是基于陀螺儀等傳感器的一次勇敢的創(chuàng)新，但是在體驗(yàn)層面用戶褒貶不一。

2 加速度傳感器

加速度傳感器可以在加速過程中，通過對質(zhì)量塊所受慣性力的測量，利用牛頓第二定律獲得加速度值。微信搖一搖、搖動切換內(nèi)容的實(shí)現(xiàn)就是利用了這個傳感器。

3 姿態(tài)感應(yīng)器

姿態(tài)感應(yīng)器是基于MEMS技術(shù)的高性能三維運(yùn)動姿態(tài)測量系統(tǒng)。華為隔空手勢就是利用這個技術(shù)實(shí)現(xiàn)了不接觸手機(jī)進(jìn)行操作。

“它太強(qiáng)大了，像魔術(shù)一樣！” ?2007年9月1日，伴隨著陣陣驚呼，喬布斯向觀眾展示了初代iPhone的多點(diǎn)觸控技術(shù)并發(fā)出這樣的贊嘆。

去掉臃腫復(fù)雜的實(shí)體鍵，以簡單自然的手勢作為替代。在蘋果手機(jī)一代發(fā)布會當(dāng)晚，滑動解鎖、上下滑動滾動列表、傾斜手機(jī)進(jìn)入橫屏模式、雙指縮放等等創(chuàng)新手勢讓我們印象深刻，其中的大部分一直被我們沿用至今。

如何定義創(chuàng)新手勢呢？我認(rèn)為有兩個層面，從0到1的創(chuàng)新和從1到1.1的創(chuàng)新。蘋果手機(jī)一代發(fā)布時展示的交互手勢屬于從0到1，讓交互手勢從無到有。如今我們做得比較多的是從1到1.1的創(chuàng)新，主要體現(xiàn)為使用已存在的手勢與某個功能結(jié)合后，體驗(yàn)出色且與過往的解決方案有足夠差異。比如，下拉和上下滑動都是已經(jīng)存在的手勢，但是Tweetie將下拉與刷新結(jié)合、Musical.ly（國際版抖音前身）將上下滑動與切換視頻結(jié)合，都為用戶帶來了更好的體驗(yàn)，因此屬于1到1.1的創(chuàng)新手勢。

在前文中提到的案例，如微信拍一拍、網(wǎng)易云音樂抱一抱、Tinder左滑無感右滑喜歡等都屬于1到1.1的創(chuàng)新且獲得了成功。當(dāng)然，也有一些創(chuàng)新并沒有獲得認(rèn)可，比如舊版微信的下拉拍攝視頻和錘子系統(tǒng)的無限屏。不管創(chuàng)新是否獲得成功，敢于進(jìn)取和突破的精神仍然是值得敬佩的。因?yàn)橛辛诉@些敢于創(chuàng)新的設(shè)計師，體驗(yàn)設(shè)計才可以迎來一次次突破，為用戶帶來了更優(yōu)質(zhì)的體驗(yàn)，為其他設(shè)計師提供了更合適的可選方案。

斷斷續(xù)續(xù)一年多終于把手勢系列更新完了，希望以上我對于交互手勢的全部思考能夠幫助你建立基礎(chǔ)的認(rèn)知，為你在實(shí)際工作中提供參考。手勢的設(shè)計或選用沒有標(biāo)準(zhǔn)答案，需要我們根據(jù)實(shí)際情況進(jìn)行思考和取舍后做出判斷，然后在一次次的實(shí)踐中不斷強(qiáng)化自己的判斷力。

參考書籍：

《交互設(shè)計：原理與方法》作者：顧振宇

《交互設(shè)計語言：與萬物對話的藝術(shù)》?作者: 羅濤

《交互設(shè)計精髓 4》作者：[美] 艾倫·庫伯 / [美] 羅伯特·萊曼 / [美] 戴維·克羅寧 / [美] 克里斯托弗·諾埃塞爾

大家好，我是公眾號文章作者 Ballen成明 。希望大家能夠?點(diǎn)一下“贊”和“在看”支持一下。在公眾號主頁右上角“...”中將「設(shè)成于思」設(shè)為星標(biāo)可以及時收到更新哦。希望與我討論更多的話可以加我好友，拉你進(jìn)交流群，一起成長~