交互手勢全解析:點擊類手勢
編輯導語:點擊是每個人在使用觸屏手機等產品時必然發生的動作之一,然而就是這樣一個簡單的動作,其中也蘊含著多門學問,不同的點擊手勢也有不一樣的處理方式和功能對應。本篇文章里,作者就點擊類手勢做了全面解析,一起來看一下。
一、點擊類手勢的描述維度
與位移類手勢類似,點擊類手勢也存在著自己的描述維度,它們分別是觸發時機、點擊次數和時間限制,三者的變化同樣會產生不同的變種。我們首先了解一下這三個維度。
1. 點擊次數
第一個維度是點擊次數。
常見的點擊類手勢只需要單擊即可觸發操作。但是有時為了在有限的界面空間中拓展更多的功能,會增加一個多次點擊(后續簡稱為“多擊”)才可觸發的功能。
例如抖音的單擊觸發暫停短視頻播放,雙擊觸發點贊。點擊次數超過2次的功能非常少見,因為點擊次數越多,相應的教育用戶的成本越高。
落點是一個會影響系統區分單擊和多擊的因素,它指的是手指進行點擊操作時在屏幕按下的位置。進行第一次點擊后,落點周圍會生成一個范圍,第二次點擊的落點需要處于前一個落點周圍生成的范圍內,只有這樣才能形成一次有效的雙擊,否則就會形成兩次單擊。
多擊的判斷規則以此類推。生成的范圍可以調用直接系統提供的默認值,一般不需要設計師提供。
2. 觸發時機
點擊類手勢可以在兩個時機觸發操作,分別是手指按下時和釋放時。按下時觸發由于不能通過將手指移出熱區進行反悔回退,從而缺乏掌控感,但是對于撤銷成本低的操作可以使用它提高效率。釋放時觸發能夠通過將手指移出熱區進行反悔回退,掌控感強。
在Smartisan OS(錘子科技基于 Android 深度定制的手機系統)的電話 App 中點擊數字進行撥號時,觸發時機就是「按下時」,但選中一個數字后無法通過將手指移出熱區進行撤銷。
釋放時觸發過于常見,就不舉例贅述了。絕大多數點擊操作都是釋放時觸發,反而是按下時觸發的案例非常罕見。
前文提到“按下時觸發由于不能通過將手指移出熱區進行反悔回退,從而缺乏掌控感”。實際上當滿足一些特殊條件時,按下時觸發也是能夠通過將手指移出熱區進行反悔回退的。這些特殊條件包括:
- 點擊操作對頁面造成的變化較?。?/li>
- 操作結果的撤銷成本較??;
- 同一熱區不存在滑動操作。
如何理解這些條件呢?下面我們逐一分析。
① 點擊操作對頁面造成的變化較小
如果點擊操作對頁面造成的變化較大,就可能會導致原熱區消失或被遮擋(如下圖),很難讓用戶建立移出熱區進行返回回退的認知。
②? 操作結果的撤銷成本較小
按下后觸發會導致手指一旦按下到按鈕后操作立刻生效,如果是支付類,就會面臨極高的撤銷成本,所以使用按下時觸發時,允許通過手指移出熱區進行反悔回退的功能必須是輕量的、撤銷成本低的。
③ 同一熱區不存在滑動操作
這個很好理解,如果同一熱區存在滑動操作,就會導致為了撤銷進行的滑動和其他滑動操作產生沖突。
iOS的鎖屏頁面輸入密碼操作雖然是按下時觸發(如下圖),但是能夠通過將手指移出熱區進行反悔回退,它是同時滿足上述的三個條件的。按下時觸發很少被應用,且絕大多數情況可以使用釋放后觸發替代,因此大家對這部分知識僅做了解即可,日常設計時默認仍然選擇釋放時觸發。
3. 時間限制
時間限制一般出現在多擊和長按兩種情況。
當手勢為多擊時,為了與單擊進行區分,系統會設置一個時長閾值。如果下一次單擊距離上一次單擊的時長超過了這個閾值,多擊就會被判定為多次單擊。
如下圖的微信中對頭像的點擊案例所示,在第一次單擊后在時長閾值內如果沒有檢測到第二次單擊,那么系統就會將本次手勢的操作結果判定為跳轉到更多操作頁。如果在第一次單擊后在時長閾值內檢測到第二次單擊,那么系統就會將本次手勢的操作結果判定為拍一拍。
當單擊和多擊可以作用于同一個熱區實現兩個不同功能時,系統會延遲對單擊的反饋來檢測可能存在的下一次單擊,從而導致用戶在使用單擊所觸發的功能時會感覺到反饋的拖沓感和延遲感,例如上圖微信的單擊頭像進入更多操作頁和雙擊拍一拍的同時存在,導致單擊進入更多操作頁時反饋有一個很明顯的0.5s的延遲。
大部分用戶對這個延遲可能并不會留意,但是對少部分追求效率的用戶來說還是部分影響了體驗。
當面向特定的用戶群時,這個延遲的數字可以做相應的調整。例如面向年輕用戶群體的App可以將延遲調整為較短的0.3s從而提高反饋速度,面向老年人群體或者全年齡的App就要趨于保守,使用較長的0.5s保證基礎體驗。因為老年人的反應和操作速度較慢,延遲設置過短會讓多擊難以觸發。
當手勢為長按時,為了與單擊進行區分,系統也會設置一個時長閾值。
為方便理解,我們把一次單擊拆分為三個狀態:抬起狀態→按下狀態→抬起狀態。
在一次單擊過程中,如果手指在按下狀態的時間達到了這個閾值,那么系統就會將本次手勢判定為長按而不是單擊了,但如果按下狀態持續的時間沒有達到這個閾值,那么系統仍然會將本次手勢判定為單擊。
如下圖案例所示,在iOS端的照片App中單擊打開照片時,按下狀態持續達到0.3s就會被判定為長按并觸發情景菜單,不超過0.3秒會被判定為單擊打開圖片。
將時間限制的用法進一步延展,可以在單個熱區觸發超過2種功能,在一定的時間限制內觸發一種功能,超過了時間限制則觸發另一種功能。
例如在iOS端桌面按下應用圖標,當按下的持續時長不超過0.3s時,被判定為單擊打開App。當大于或等于0.3s且小于2s時,會觸發更多菜單,當大于或等于2s時,會觸發編輯主屏幕。
不過,當單個熱區通過區分按下時長來觸發的功能越多,用戶就越難感知到時間限制的邊界,操作成本因此更高。
另外補充一點,如果單擊與長按共用了熱區,那么單擊的按下狀態的持續時間必須小于相應的時間閾值。為了進行區分,我們將這種被限制在時間閾值內完成的單擊稱作做“快擊”。
二、常見點擊類手勢解析
1. 單擊
1)定義
使用單指在熱區位置按下后抬起,從而觸發相應的功能。整個狀態變化過程為「抬起狀態→按下狀態→抬起狀態」。
2)特點
單擊是在移動端使用最普遍的手勢。相較于其他手勢,單擊是最容易讓用戶感知到的。
上文講解「觸發時機」時提到過,單擊時可以通過在按下狀態時移出熱區,在熱區外抬起從而取消本次操作,因此給予了用戶反悔的機會。
3)案例
AppStore每日推薦中,單擊某個推薦卡片可以進入推薦的詳情頁。iOS的設置中,單擊開關按鈕可以切換飛行模式的開關狀態。
2. 按下
1)定義
使用單指在熱區位置按下,從而觸發相應的功能。整個狀態變化過程為「抬起狀態→按下狀態」。
2)特點
與“單擊”相比,“按下”由于從“抬起狀態”到“按下狀態”即可觸發操作,導致不能通過將手指移出熱區進行反悔回退,從而缺乏掌控感,但是在撤銷成本低的操作可以使用它提高效率。按下手勢極少用于可產生明確結果的操作,一般僅用于用戶按下按鈕后的視覺反饋。
3)案例
在Smartisan OS的電話 App 中撥號時,按下數字按鈕不需要抬起即可成功輸。得到App調節文字的字號時,按下相應的大小級別就立即生效。這兩個案例中的“按下”替換為“單擊”也是可行的。
3. 抬起
1)定義
在單指已經在熱區位置處于按下狀態時,抬起手指從而觸發相應的功能。整個變化過程為「按下狀態→抬起狀態」。
2)特點
“抬起”的觸發前提是手指已經處于按下狀態。某個應用場景中,“抬起”會改變或取消“按下狀態”產生的效果。例如在iOS相機的照片模式中,按下拍攝按鈕并保持按下狀態,就會開始錄制視頻,此時“抬起”就會取消錄制視頻。
3)案例
在手機游戲《憤怒的小鳥》中,拖動小鳥并不松手使彈弓進入蓄力狀態,此時“抬起”就會將彈弓的蓄力狀態變為釋放狀態,從而將小鳥發射出去。
4. 快擊
1)定義
使用單指在熱區位置按下后抬起,從而觸發相應的功能。整個狀態變化過程為「抬起狀態→按下狀態→抬起狀態」,其中“按下狀態”不能超過限定的時間。
2)特點
快擊與單擊只有一個不同點,快擊的“按下狀態”會被限制在特定時間內完成,而單擊則不然。
快擊之所以存在,是因為單擊與長按共用了熱區。如果單擊時的“按下狀態”持續時間過長,就會觸發長按,因此單擊就必須將“按下狀態”的持續時長必須限制在特定時間內。我們將這種被限制在特定時長內完成的單指點擊操作稱作做“快擊”,從而和“單擊”進行區分。更多細節可以查看前文的「點擊手勢的描述維度-時間限制」。
3)案例
觀看抖音視頻時,點擊視頻可以暫停,此處的點擊手勢就是“快擊”。若按下狀態保持的時間過長,則會觸發更多操作的浮層。
5. 長按
1)定義
使用單指在熱區位置按下,并保持按下狀態特定的時間,從而觸發相應的功能。整個狀態變化過程為「抬起狀態→按下狀態」,其中“按下狀態”會被要求達到某個時長。
2)特點
與上述的幾個手勢相比,長按是一個比較隱蔽的手勢。除一些教育成熟的使用場景外,如果不加引導,用戶很難感知到。其次,長按由于需要一定時間才能夠觸發,操作效率與單擊相比較低。
綜合以上兩點,長按不適合用于高頻或主要功能的唯一觸發方式,而可以作為次要功能的主要觸發方式或高頻或主要功能的額外觸發方式。
網易云音樂長按黑膠查看封面大圖、長按文字復制等,長按是這些次要功能的唯一觸發方式。嗶哩嗶哩站的長按點贊可同時觸發點贊、投幣、收藏(簡稱一鍵三連),長按抖音視頻分享好友,長按是這些高頻或主要功能的額外觸發方式。
當一個功能僅支持長按不支持點擊時,需要在用戶點擊時進行引導,告知用戶正確的手勢。舉一個反例,嗶哩嗶哩播放視頻頁的GIF錄制功能需要長按才能錄制,但是當單擊時卻沒有任何反饋告知用戶需要長按進行。
更好的做法是在用戶單擊時進行輕量提示,例如下圖中用網易云音樂一起聽時,對講機需要長按才能對講,如果用戶單擊,就會通過一個toast提示來引導用戶。
3)案例
嗶哩嗶哩長按點贊按鈕可以同時觸發點贊、投幣、收藏功能。
6. 雙按
1)定義
使用單指在熱區位置按下后抬起,然后再次按下,從而觸發相應的功能。整個狀態變化過程為「抬起狀態→按下狀態→抬起狀態→按下狀態」。
2)特點
雙按是一個在移動端非常罕見的手勢,并且非常隱蔽。雙按很少用于觸發一個特定的功能,在移動端它常見于觸發一個模式。
例如當在一個界面中,上下左右四個方向都已經存在位移類手勢了,但是仍然有功能需要新增額外的位移類手勢。此時可以將雙按看做是一個模式啟動方式,雙按后可以立即使用上下左右四個方向的手勢觸發額外的功能。
3)案例
在地圖類App中,通常上下左右的滑動手勢會用來拖動地圖,雙擊放大地圖,雙指張開和捏合用來放大和縮小地圖,但是在出行場景中單手操作的情況很多,如何使用單手就可以對地圖進行放大縮小呢?
通常都會使用雙按來作為模式的啟動。雙按后不松開手指的情況下通過上滑來放大地圖,通過下滑來縮小地圖,從而解決了單手操作時難以放大縮小地圖的痛點。
不足之處在于,這個手勢的教育成本較高,只有少部分用戶能夠發現并持續使用。
7. 雙擊
1)定義
使用單指在熱區位置按下后抬起,然后再次按下后抬起,從而觸發相應的功能。整個狀態變化過程為「抬起狀態→按下狀態→抬起狀態→按下狀態→抬起狀態」。
2)特點
雙擊雖然也是一個隱蔽的手勢,但是在部分場景中由于應用廣泛從而降低了教育成本,例如雙擊點贊、喜歡。當一個熱區同時存在單擊和雙擊手勢時,會導致單擊手勢的反饋延遲,具體內容在上文「點擊類手勢的描述維度-時間限制」已詳細講解,在此不做贅述。
3)案例
雙擊iOS的地圖的地圖界面,會放大地圖。
三、特殊描述維度
上述介紹的手勢通過「觸發時機」、 「按下屏幕次數」、 「時間限制」三個描述維度構成了不同的點擊類手勢,除了這三者之外,有兩個比較特殊的維度也帶給點擊類手勢不同的可能性,即「按壓力度」和「接觸面積」。
1. 按壓力度
通過手指按壓力度的不同來觸發不同功能的設計首次應用于Apple Watch上采用的Force Touch,之后開始在 iPhone 6s以及后續部分機型上應用,被命名為3D Touch。
(由于比較普及的使用按壓力度作為變量的功能現在僅有3D Touch,因此接下來的介紹也主要圍繞3D Touch 進行)3D Touch從誕生之日起就面臨著許多的爭議,是劃時代的設計還是食之無味的雞肋?不同的用戶有不同的看法。下面我就簡單講一下它的優缺點。
首先談談優點:
①?與3D Touch的使用場景最接近的手勢是長按,3D Touch與長按相比的優勢在于,它可以更快速地觸發操作,而不需要長按所要等待的時間,顯得更加干脆、流暢。
如下圖案例,可觀察長按和3D Touch喚起快捷操作菜單的速度對比。
② 與單擊、長按相比,3D Touch有更好的防誤觸效果。
例如在支持3D Touch的iPhone機型上,鎖屏界面的手電筒只能通過3D Touch觸發,點擊和長按都無法觸發,個人認為目的也是為了防止手機放在口袋時誤觸。
③ 在特定場景下,3D Touch有著其他手勢難以替代的優勢。
例如在移動端的三維射擊游戲中,按鍵操作一直是個難題,右手很難在屏幕上滑動調整視角的同時開槍射擊。3D Touch 的獨特屬性能夠解決這個問題,通過按壓力度控制開槍,滑動屏幕調整視角,能夠實現邊瞄準邊開槍的效果。
在繪畫App中,通過3D Touch可以用手指按壓力度來模擬顏色的深淺和筆觸的粗細,從而實現更好的畫面效果。
上述兩個案例遇到的需求都是在單指保持滑動過程中需要另外一個維度的控制,如果遇到相同的需求也可以思考如何通過3D Touch來實現更好的體驗。
其次是缺點:
① 由于3D Touch并不支持所有的設備,因此App廠商在進行手勢適配時就不能把3D Touch當做某個功能唯一的觸發方式,而是只能將其作為一個輔助性的手勢,而長按作為一個支持所有設備的手勢,雖然觸發速度沒有3D Touch迅速,但是基本也可以替代3D Touch。因此造成了大部分情況下3D Touch是一個可有可無的雞肋手勢。
② 3D Touch是一個很難被用戶察覺到的手勢,沒有引導的情況下我們很難注意到它的存在,從而降低了使用率。
③ 為了支持3D Touch而產生的硬件成本是一個不能忽略的因素,而且電池的空間因此進一步被壓縮,影響設備的續航。
綜上所述,3D Touch對于用戶和手機廠商來說,性價比偏低,因此蘋果公司在后續的機型上砍掉了3D Touch功能,使用按壓力度來觸發功能的設計可能從此也會退出歷史的舞臺。
2. 接觸面積
接觸面積維度支持根據手指在屏幕的接觸面積的不同從而觸發不同功能。案例比較少見,我認為其中Smartisan OS的大爆炸功能將這個維度運用地最為出色。
大爆炸是一個系統級的手勢,通過它可以快速提取所有App里的文字信息進行編輯和更多操作。為了不與各種App里已有的手勢沖突,大爆炸只能另辟蹊徑,找到一個獨有的手勢來完成操作,下面的操作示例是大爆炸的宣傳視頻。
使用接觸面積的判定來觸發是一個很合理的解決方案,解決方向有些類似于前面講到的3D Touch,但是避開了3D Touch所需要的硬件成本。
同樣運用了接觸面積維度的功能還有華為手機的指關節截屏,通過識別包括接觸面積等多個參數判斷是否是指關節。
以上就是關于點擊類手勢的思考總結,后續暫定的更新計劃如下。有興趣的朋友可以持續關注哦~
參考書籍:
- 《交互設計語言:與萬物對話的藝術》?作者: 羅濤
- 《交互設計精髓 4》作者:[美] 艾倫·庫伯 / [美] 羅伯特·萊曼 / [美] 戴維·克羅寧 / [美] 克里斯托弗·諾埃塞爾
本文由 @Ballen成明 原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
謝謝分享
謝謝教學
謝謝教授
射擊游戲里的長按射擊也是“按下”觸發,與移動視角有沖突,不知道觸發條件是什么,所以經常誤觸,想知道是什么條件
分析得很好,不錯
使用觸屏手機等產品時必然發生的動作之一,然而就是這樣一個簡單的動作,其中也蘊含著多門學問。
在當代電子產品當道的社會下,一些交互手勢便可以傳達出許多信息。
適用電子產品的人越來越多,點擊是每個人在使用觸屏手機等產品時必然發生的動作之一,然而就是這樣一個簡單的動作,其中也蘊含著多門學問,不同的點擊手勢也有不一樣的處理方式和功能對應。使用者越來越方便。
從雙擊到關節畫S,不得不說,越是便捷,越是費腦子
了解了新的知識,不同環境下的作用是不同的
很容易不小心就點到識圖功能,手指不能一直放在屏幕上了