編輯導(dǎo)語：點(diǎn)擊是每個人在使用觸屏手機(jī)等產(chǎn)品時必然發(fā)生的動作之一，然而就是這樣一個簡單的動作，其中也蘊(yùn)含著多門學(xué)問，不同的點(diǎn)擊手勢也有不一樣的處理方式和功能對應(yīng)。本篇文章里，作者就點(diǎn)擊類手勢做了全面解析，一起來看一下。

一、點(diǎn)擊類手勢的描述維度

與位移類手勢類似，點(diǎn)擊類手勢也存在著自己的描述維度，它們分別是觸發(fā)時機(jī)、點(diǎn)擊次數(shù)和時間限制，三者的變化同樣會產(chǎn)生不同的變種。我們首先了解一下這三個維度。

1. 點(diǎn)擊次數(shù)

第一個維度是點(diǎn)擊次數(shù)。

常見的點(diǎn)擊類手勢只需要單擊即可觸發(fā)操作。但是有時為了在有限的界面空間中拓展更多的功能，會增加一個多次點(diǎn)擊（后續(xù)簡稱為“多擊”）才可觸發(fā)的功能。

例如抖音的單擊觸發(fā)暫停短視頻播放，雙擊觸發(fā)點(diǎn)贊。點(diǎn)擊次數(shù)超過2次的功能非常少見，因?yàn)辄c(diǎn)擊次數(shù)越多，相應(yīng)的教育用戶的成本越高。

落點(diǎn)是一個會影響系統(tǒng)區(qū)分單擊和多擊的因素，它指的是手指進(jìn)行點(diǎn)擊操作時在屏幕按下的位置。進(jìn)行第一次點(diǎn)擊后，落點(diǎn)周圍會生成一個范圍，第二次點(diǎn)擊的落點(diǎn)需要處于前一個落點(diǎn)周圍生成的范圍內(nèi)，只有這樣才能形成一次有效的雙擊，否則就會形成兩次單擊。

多擊的判斷規(guī)則以此類推。生成的范圍可以調(diào)用直接系統(tǒng)提供的默認(rèn)值，一般不需要設(shè)計師提供。

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)行反悔回退的。這些特殊條件包括：

1. 點(diǎn)擊操作對頁面造成的變化較小；
2. 操作結(jié)果的撤銷成本較小；
3. 同一熱區(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ā)很少被應(yīng)用，且絕大多數(shù)情況可以使用釋放后觸發(fā)替代，因此大家對這部分知識僅做了解即可，日常設(shè)計時默認(rèn)仍然選擇釋放時觸發(fā)。

3. 時間限制

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

當(dāng)手勢為多擊時，為了與單擊進(jìn)行區(qū)分，系統(tǒng)會設(shè)置一個時長閾值。如果下一次單擊距離上一次單擊的時長超過了這個閾值，多擊就會被判定為多次單擊。

如下圖的微信中對頭像的點(diǎn)擊案例所示，在第一次單擊后在時長閾值內(nèi)如果沒有檢測到第二次單擊，那么系統(tǒng)就會將本次手勢的操作結(jié)果判定為跳轉(zhuǎn)到更多操作頁。如果在第一次單擊后在時長閾值內(nèi)檢測到第二次單擊，那么系統(tǒng)就會將本次手勢的操作結(jié)果判定為拍一拍。

當(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)的時間達(dá)到了這個閾值，那么系統(tǒng)就會將本次手勢判定為長按而不是單擊了，但如果按下狀態(tài)持續(xù)的時間沒有達(dá)到這個閾值，那么系統(tǒng)仍然會將本次手勢判定為單擊。

如下圖案例所示，在iOS端的照片App中單擊打開照片時，按下狀態(tài)持續(xù)達(dá)到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)完成的單擊稱作做“快擊”。

二、常見點(diǎn)擊類手勢解析

1. 單擊

1）定義

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

2）特點(diǎn)

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

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

3）案例

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

2. 按下

1）定義

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

2）特點(diǎn)

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

3）案例

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

3. 抬起

1）定義

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

2）特點(diǎn)

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

3）案例

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

4. 快擊

1）定義

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

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ū)分。更多細(xì)節(jié)可以查看前文的「點(diǎn)擊手勢的描述維度-時間限制」。

3）案例

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

5. 長按

1）定義

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

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)用戶。

3）案例

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

6. 雙按

1）定義

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

2）特點(diǎn)

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

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

3）案例

在地圖類App中，通常上下左右的滑動手勢會用來拖動地圖，雙擊放大地圖，雙指張開和捏合用來放大和縮小地圖，但是在出行場景中單手操作的情況很多，如何使用單手就可以對地圖進(jìn)行放大縮小呢？

通常都會使用雙按來作為模式的啟動。雙按后不松開手指的情況下通過上滑來放大地圖，通過下滑來縮小地圖，從而解決了單手操作時難以放大縮小地圖的痛點(diǎn)。

不足之處在于，這個手勢的教育成本較高，只有少部分用戶能夠發(fā)現(xiàn)并持續(xù)使用。

7. 雙擊

1）定義

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

2）特點(diǎn)

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

3）案例

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

三、特殊描述維度

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

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è)計可能從此也會退出歷史的舞臺。

2. 接觸面積

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

大爆炸是一個系統(tǒng)級的手勢，通過它可以快速提取所有App里的文字信息進(jìn)行編輯和更多操作。為了不與各種App里已有的手勢沖突，大爆炸只能另辟蹊徑，找到一個獨(dú)有的手勢來完成操作，下面的操作示例是大爆炸的宣傳視頻。

使用接觸面積的判定來觸發(fā)是一個很合理的解決方案，解決方向有些類似于前面講到的3D Touch，但是避開了3D Touch所需要的硬件成本。

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

以上就是關(guān)于點(diǎn)擊類手勢的思考總結(jié)，后續(xù)暫定的更新計劃如下。有興趣的朋友可以持續(xù)關(guān)注哦~

參考書籍：

• 《交互設(shè)計語言：與萬物對話的藝術(shù)》?作者: 羅濤
• 《交互設(shè)計精髓 4》作者：[美] 艾倫·庫伯 / [美] 羅伯特·萊曼 / [美] 戴維·克羅寧 / [美] 克里斯托弗·諾埃塞爾

本文由 @Ballen成明 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。