通過本文，學(xué)會(huì)根據(jù)需求設(shè)計(jì)合適的位移類手勢，能夠判斷手勢的體驗(yàn)問題并提出相應(yīng)解決方案，并與開發(fā)同學(xué)高效溝通確保落地。
前言
一年前更新了文章《交互手勢的容錯(cuò)性和邏輯性》之后，有很多讀者朋友詢問是否能夠做一個(gè)詳細(xì)的講解交互手勢的系列文章，講解每個(gè)手勢的不同之處、應(yīng)用場景以及在工作中如何使用。
我非常理解這些讀者的痛點(diǎn)，因?yàn)槲以谌粘５墓ぷ髦?，也?jīng)常遇到一些難題。比如同樣是滑動(dòng)，但是些許參數(shù)的變化就會(huì)導(dǎo)致體驗(yàn)的天差地別，應(yīng)該如何進(jìn)行選擇。再比如與開發(fā)同學(xué)溝通過程中如何準(zhǔn)確描述自己想要的效果，讓最后的結(jié)果不至于與自己的預(yù)期不一致。
這些難題也促使我大量思考，大量體驗(yàn)各種產(chǎn)品的手勢操作，希望能夠從中總結(jié)出規(guī)律，讓手勢的設(shè)計(jì)與落地能夠有理有據(jù)。現(xiàn)在經(jīng)過一段時(shí)間的積累，我認(rèn)為我在這方面可以講一些能夠幫助大家的內(nèi)容了。不足之處，希望大家指正。
今天給大家?guī)韺诘牡谝黄督换ナ謩萑馕鲋灰祁愂謩荨贰?
1 位移類手勢的描述維度
手勢作為圖形界面與用戶之間溝通的方式之一，在便攜電子設(shè)備上大量應(yīng)用。與實(shí)體按鍵相比，它有著純粹的簡潔性和無盡的創(chuàng)造性，手指的個(gè)數(shù)變化、不同變量的組合能夠創(chuàng)造出無數(shù)的操控方式。
位移類手勢是指代那些通過手指接觸屏幕后的位置變化從而操控電子設(shè)備的手勢，本篇文章主要講解單指操作的位移類手勢，多指的位移類手勢（如捏合）將放到后續(xù)文章中講解。
一談到位移類手勢，大部分設(shè)計(jì)師的腦海中可能會(huì)浮現(xiàn)出拖拽、甩動(dòng)和輕掃這三個(gè)術(shù)語。然而，當(dāng)我們想仔細(xì)談?wù)撍麄內(nèi)咧g的區(qū)別時(shí)，大部分設(shè)計(jì)師可能無法準(zhǔn)確地描述。為了能夠準(zhǔn)確描述三者的區(qū)別，我們在這里引入三個(gè)維度的概念，它們分別是控制方式、穩(wěn)定化效果、以及閾值類型，這三者的不同的變化組合可以創(chuàng)造不同的位移類手勢，拖拽、甩動(dòng)和輕掃之間的區(qū)別也是這三個(gè)維度影響的。當(dāng)我們在討論不同位移類手勢之間的區(qū)別時(shí)，不如說是在討論這三個(gè)維度之間的區(qū)別。比如常見的輕掃手勢，因?yàn)檫@三個(gè)維度的變化就會(huì)產(chǎn)生不同的變種，而且不同變種在體驗(yàn)上也存在很大差別，若不分場景隨意使用，很容易就影響用戶體驗(yàn)。那接下來我們首先了解一下這三個(gè)維度。
1.1 控制方式
第一個(gè)維度是控制方式，它分為絕對(duì)控制和相對(duì)控制，也可以通俗的表達(dá)為跟手和不跟手，區(qū)別如下。
絕對(duì)控制/跟手：施加控制的一方（后文簡稱施控物）的某個(gè)屬性變化與被施加控制的一方（后文簡稱受控物）的某個(gè)屬性變化是對(duì)應(yīng)的。
相對(duì)控制/不跟手：施控物的某個(gè)屬性變化與受控物的某個(gè)屬性變化不是對(duì)應(yīng)的。
比如在網(wǎng)易云音樂的播放頁（下圖左），左右滑動(dòng)黑膠時(shí)，手指是施控物，黑膠是受控物，手指的橫向位置變化和黑膠的橫向位置變化是對(duì)應(yīng)的，即絕對(duì)控制。上滑調(diào)出評(píng)論頁時(shí)（下圖右），評(píng)論頁的位置和手指的位置沒有對(duì)應(yīng)關(guān)系，手指的上滑僅僅控制評(píng)論頁是否出現(xiàn)，即相對(duì)控制。
與相對(duì)控制相比，絕對(duì)控制允許用戶去操控受控物的屬性變化過程，因此給予了用戶更強(qiáng)的掌控感。比如在微信讀書閱讀頁邊緣右滑，手指的橫向位置與書籍封面的變化過程對(duì)應(yīng)，模擬現(xiàn)實(shí)生活中慢慢合上書的感覺，如下圖。
但是在有些場景，為了避免混亂，屬性變化過程是不適合被用戶絕對(duì)控制的，此時(shí)我們應(yīng)采取相對(duì)控制的方案。比如 iOS 的相機(jī)中，左右滑動(dòng)切換拍攝模式，由于前后不同模式之間的頁面框架變化較大，切換時(shí)會(huì)有過多元素的屬性變化，如果使用絕對(duì)控制就會(huì)導(dǎo)致切換拖沓且混亂，使用相對(duì)控制就能避免這個(gè)問題。
1.2 穩(wěn)定化效果
1.2.1 定義
當(dāng)我們使用手勢控制某個(gè)受控物時(shí)，由于手勢的某個(gè)屬性（如手指位移）達(dá)到閾值，進(jìn)而導(dǎo)致受控物的某個(gè)屬性穩(wěn)定在了特定狀態(tài)的效果被稱為「穩(wěn)定化效果」，或者也可以稱為「吸附」。
穩(wěn)定化效果能夠保持界面的視覺秩序，避免過多的中間狀態(tài)導(dǎo)致界面的雜亂，進(jìn)而幫助用戶聚焦信息。
是否有穩(wěn)定化效果是區(qū)別輕掃與另外兩個(gè)手勢即甩動(dòng)和拖拽的重要維度，當(dāng)某個(gè)位移類手勢有穩(wěn)定化效果，我們就將其稱作輕掃。
以滑動(dòng)切換抖音視頻為例，當(dāng)手指上滑的位移距離和釋放速度其中的某一項(xiàng)屬性達(dá)到閾值后，下一條視頻會(huì)往上移動(dòng)到一個(gè)固定的位置然后進(jìn)入穩(wěn)定狀態(tài)，而不會(huì)出現(xiàn)停留在不完整的中間狀態(tài)，如下圖所示。
在 iOS 端的微信消息頁左滑某條消息后會(huì)出現(xiàn)更多操作按鈕，按鈕會(huì)在手指滑動(dòng)的距離達(dá)到閾值并松開后穩(wěn)定在一個(gè)固定的大小，而不會(huì)停在類似下圖左所示的混亂的中間狀態(tài)。
在多內(nèi)容選擇的場景中，如果滑動(dòng)與選中是綁定的話，一般需要使用穩(wěn)定化效果。例如在 iOS 相機(jī)里選擇濾鏡時(shí)，滑動(dòng)濾鏡選項(xiàng)不但能夠控制濾鏡選項(xiàng)的位置，并且會(huì)自動(dòng)選中一個(gè)位于中間位置的濾鏡，位置的穩(wěn)定化避免了被選中選項(xiàng)的不明確。
如果滑動(dòng)與選中是分開的，比如美圖秀秀的濾鏡選項(xiàng)需要先滑動(dòng)后選中，這種情況下穩(wěn)定化效果不是必要的。
1.2.2 與效率的關(guān)系
不同的穩(wěn)定化規(guī)則帶給用戶的體驗(yàn)差異是非常大的，最明顯的差異是在效率方面。我們使用穩(wěn)定化效果的強(qiáng)弱來理解，穩(wěn)定化效果越強(qiáng)，單次滑動(dòng)能夠切換的選項(xiàng)個(gè)數(shù)越少，效率越低。穩(wěn)定化效果越弱，單次滑動(dòng)能夠切換的選項(xiàng)個(gè)數(shù)越多，效率越高。
比如在比較常見的 banner 切換功能中（下圖左），無論手指位移和釋放速度的值有多高，banner 只能切換并穩(wěn)定到下一個(gè)，不能夠一次切換多個(gè) banner。而在網(wǎng)易云音樂的首頁排行榜中，一次滑動(dòng)能夠切換多個(gè)內(nèi)容卡片。因此，我們可以說前者的穩(wěn)定化效果比后者強(qiáng)。
拖拽和甩動(dòng)雖然沒有穩(wěn)定化效果，但是也存在效率的高低。我們可以將其與輕掃放在一起做對(duì)比，如下圖所示，拖拽、穩(wěn)定化效果強(qiáng)的輕掃、穩(wěn)定化效果弱的輕掃、甩動(dòng)它們切換效率依次增加。
那么我們決定添加穩(wěn)定化效果后，如何選擇強(qiáng)弱程度呢？選擇沒有絕對(duì)的對(duì)錯(cuò)，整體來說主要考慮兩點(diǎn)，業(yè)務(wù)訴求和用戶訴求。例如在常見的 banner 切換中，banner 的總數(shù)量一般不會(huì)很多，業(yè)務(wù)的訴求是希望盡可能曝光每一個(gè) banner ，使感興趣的用戶進(jìn)行消費(fèi)，因此這里比較適合做穩(wěn)定化效果強(qiáng)的輕掃。在云音樂的排行榜案例里，不同用戶感興趣的榜單是不同的，穩(wěn)定化效果弱的輕掃可以方便用戶單次滑動(dòng)切換多個(gè)，快速切換到自己感興趣的榜單的大概位置。
百度 App 的表情面板原本是左右輕掃瀏覽表情，在一次改版中改為了上下甩動(dòng)瀏覽。主要目的之一就是為了提高瀏覽效率、降低非首屏表情的曝光難度。
微信視頻號(hào)的改版是一個(gè)典型的案例，舊版的微信視頻號(hào)的視頻流并不是類似抖音那樣的全屏化形式和輕掃手勢（下圖右），而是占據(jù)屏幕尺寸三分之一到二分之一之間的卡片形式（下圖左），并且使用甩動(dòng)而非輕掃。視頻號(hào)問世初期優(yōu)質(zhì)內(nèi)容匱乏，社交推薦算法不完善，貿(mào)然模仿抖音式的全屏化形式和輕掃手勢的話，會(huì)導(dǎo)致用戶瀏覽到劣質(zhì)視頻時(shí)負(fù)面感受被增強(qiáng)且切換效率變低，反之卡片形式加甩動(dòng)手勢給予了用戶更自由的選擇空間，提高了用戶的切換效率，降低了負(fù)面體驗(yàn)。等到如今時(shí)機(jī)成熟，再從卡片形式和甩動(dòng)手勢換成全屏化形式和輕掃手勢就勢在必行了。
在某些場景，用戶需要先通過高效的方式選擇特定區(qū)域的內(nèi)容，然后進(jìn)入聚焦?fàn)顟B(tài)進(jìn)行內(nèi)容瀏覽和慢速的切換，此時(shí)我們需要設(shè)計(jì)兩種切換效率不同的手勢應(yīng)對(duì)前后場景的變化。如下圖，在 iOS 的照片 App 中，先使用切換效率較高的甩動(dòng)進(jìn)行粗略切換找到目標(biāo)圖片大概位置，點(diǎn)擊進(jìn)入大圖模式時(shí)使用切換效率較低的輕掃進(jìn)行精確切換查看。
1.2.3 觸發(fā)時(shí)機(jī)
觸發(fā)穩(wěn)定化的時(shí)機(jī)可以分為釋放前和釋放后，不同的時(shí)機(jī)帶給用戶的體驗(yàn)也不同。釋放前穩(wěn)定化指的是用戶使用手指滑動(dòng)屏幕時(shí)，手指位移達(dá)到閾值后，手指無需離開屏幕，穩(wěn)定化即可被觸發(fā)。如下圖左，iOS 的相機(jī)滑動(dòng)切換濾鏡使用的就是釋放前穩(wěn)定化。釋放后穩(wěn)定化指的是用戶使用手指滑動(dòng)屏幕時(shí)，手指位移或釋放速度達(dá)到閾值后，手指必須離開屏幕，穩(wěn)定化才能被觸發(fā)。如下圖右，常見的 banner 切換。
釋放前穩(wěn)定化可以避免拖沓，增加切換效率，但是缺點(diǎn)是無法反悔回退且缺乏掌控感。反之，釋放后穩(wěn)定可以反悔回退，掌控感強(qiáng)，但是缺點(diǎn)是比釋放前穩(wěn)定化拖沓了一些。
1.3 閾值類型
閾值是能夠觸發(fā)變化的最小值。比如當(dāng)水的溫度達(dá)到 100 度時(shí)就開始變成水蒸氣，100 度就是一個(gè)閾值，溫度是閾值類型。在手指與屏幕的交互中，手指在屏幕上的某個(gè)停留時(shí)間、位移、釋放速度、點(diǎn)擊次數(shù)等都可以成為一個(gè)閾值類型，達(dá)到相應(yīng)閾值后就可以觸發(fā)相應(yīng)的變化，常見的變化有受控物的位置、大小、不透明度等，理論上變化可以是任意的。
在位移類手勢中，通常會(huì)用到的閾值類型有手指位移和釋放速度，手指位移是用戶在手指觸摸屏幕時(shí)的位置與之后某個(gè)時(shí)間手指位于屏幕的位置之間的距離，釋放速度是用戶的手指在屏幕表面進(jìn)行位移后離開屏幕那一瞬間的速度。
市面上的 App 暫時(shí)不存在僅通過釋放速度判定而與手指位移無關(guān)的閾值判定方式，因?yàn)槠洳惶铣ＷR(shí)。因此我們在設(shè)計(jì)位移類手勢時(shí)，能夠選擇的閾值判定方式常見的有兩種：
- ① 判定手指位移和釋放速度滿足任意一個(gè)即可；
- ② 僅判定手指位移。
當(dāng)我們設(shè)計(jì)手勢時(shí)，就需要考慮兩者的區(qū)別。由于 ① 比 ② 增加了釋放速度帶來的額外移動(dòng)距離，因此 ① 的主要優(yōu)點(diǎn)是高效。但是由于我們無法預(yù)判釋放速度帶給受控物的移動(dòng)距離長短，所以相對(duì)應(yīng)的缺點(diǎn)就是易誤操作和不精確。②就恰恰相反，由于不存在釋放速度造成的不確定因素，它的優(yōu)點(diǎn)是不易誤操作和精確，缺點(diǎn)是低效。
甩動(dòng)和拖拽之間的區(qū)別就在于閾值判定方式，甩動(dòng)是 ① ，拖拽是 ② 。如下圖，當(dāng)在微信消息列表找相應(yīng)的消息時(shí)，用戶的訴求就是能夠快速找到特定消息的位置，對(duì)特定消息的出現(xiàn)在屏幕的位置也沒有特定要求，只要能夠被手指點(diǎn)擊到即可，因此選用甩動(dòng)較為合適，但是對(duì)于調(diào)節(jié)音量、亮度這一類的操作，滑動(dòng)的范圍有限，因此用戶對(duì)效率沒有太高的要求，但是對(duì)于滑塊位置的精確度有要求，因此選用拖拽是更為恰當(dāng)?shù)摹?
再舉一個(gè)反例，在 Steam 移動(dòng)端橫滑首頁的泳道卡片時(shí)（下圖左），使用的手勢是拖拽而不是甩動(dòng)，瀏覽起來特別低效。更適合的做法應(yīng)為甩動(dòng)，會(huì)更符合此場景下的快速瀏覽的訴求，如下圖右的豆瓣。
對(duì)于輕掃來說，使用哪種閾值判定方式有多種情況（如下圖所示）。在本文中，根據(jù)閾值類型、穩(wěn)定化效果以及控制方式的不同我將把輕掃分為 A-E 共 5 類（A-E的命名方式僅存在于本文章，因此在向其他人傳達(dá)時(shí)，盡量使用在后文我介紹的手勢描述而不是類別名稱，以便于對(duì)方理解。）。后續(xù)會(huì)為大家仔細(xì)舉例講解，大家現(xiàn)在僅了解一下即可。
當(dāng)我們在刷抖音視頻時(shí)使用的手勢就是輕掃，是否滑動(dòng)到下一條視頻進(jìn)行播放的判定方式是① 判定手指位移和釋放速度滿足任意一個(gè)即可，對(duì)應(yīng)的手勢類別是上面表格中的輕掃A。如下圖所示，在刷抖音時(shí)，如果使用判定手指位移的方式，我們可以將手指在垂直方向位移大于半個(gè)屏幕高度的距離，從而切換到下一個(gè)視頻。如果使用判定釋放速度的方式，我們可以移動(dòng)任意的垂直距離但是手指離開屏幕時(shí)保留一個(gè)速度從而切換到下一個(gè)視頻。大部分情況下用戶都會(huì)使用判定釋放速度的方式，因?yàn)榧仁×τ直憬荨?
如果將閾值判定方式改為 ②僅判定手指位移，對(duì)應(yīng)的手勢類別是上面表格中的輕掃 B，并且位移的閾值設(shè)置得比較大的話，給用戶帶來的負(fù)面體驗(yàn)可能將是非常大的。比如下圖中打開美圖秀秀的短視頻評(píng)論浮層后，想要下滑收起時(shí)，App 僅判定手指位移，而且這個(gè)位移閾值設(shè)置得比較大，對(duì)于希望通過快速滑動(dòng)一小段距離收起浮層的用戶來說體驗(yàn)很差。即使由于開發(fā)資源有限我們只能做到僅判定手指位移，我們也可以通過減少手指位移的閾值來降低負(fù)面體驗(yàn)。
但是某些場景下，②僅判定手指位移是更加合適的。比如想要在微信中下拉打開小程序選擇頁，就只能通過手指位移達(dá)到一個(gè)特定的閾值才能夠觸發(fā)，無論怎么用力滑動(dòng)去增加釋放速度都無法打開小程序選擇頁。這樣處理的原因是在微信消息列表頁，上下滑動(dòng)瀏覽微信消息是一個(gè)高頻操作，如果釋放速度也能作為打開小程序頁面的閾值的話，用戶可能就極易在下滑消息列表時(shí)誤操作，無意間打開小程序選擇頁。
因此，對(duì)于位移類手勢，選用哪種閾值判斷方式要依據(jù)用戶使用場景和訴求，不能想當(dāng)然地設(shè)計(jì)。
2 常見位移類手勢解析
了解完三個(gè)基礎(chǔ)維度后，我們再將其進(jìn)行組合，從特定手勢的角度更全面地理解它們的差異和使用場景。三個(gè)維度的排列組合能夠生成十余種位移類手勢，我列舉出了常見的 7 類，如下圖所示，這 7 類基本涵蓋了 95% 以上的場景，我將一一舉例說明。由于施控物控制受控物改變的屬性一般都為位置，因此接下來在描述下面手勢的定義時(shí)我都以受控物的位置變化進(jìn)行舉例。
2.1 拖拽
2.1.1 定義
使用手指在受控物位置按下后，操控受控物沿著某個(gè)方向移動(dòng)，無論釋放時(shí)手指是否仍有速度，受控物都會(huì)立即停止移動(dòng)。（下圖的動(dòng)態(tài)演示由 Principle 制作，觀看會(huì)有些不太直觀，大家可以在文章結(jié)尾處下載 Principle 源文件后導(dǎo)入到手機(jī)里體驗(yàn)，源文件包含文章提到的所有位移類手勢）
2.1.2 特點(diǎn)
精確度高但效率低。由于閾值類型僅判定手指位移且沒有穩(wěn)定化效果，拖拽適用于對(duì)操作精度要求高，對(duì)效率要求低的功能。
2.1.3 案例
在 iOS 設(shè)置中調(diào)節(jié)亮度時(shí)，在有限范圍內(nèi)，手指左右拖拽可以控制亮度變化。
2.2甩動(dòng)
2.2.1定義
使用手指在受控物位置按下后，操控受控物沿著某個(gè)方向移動(dòng)。若釋放時(shí)手指仍有速度，受控物將移動(dòng)一段距離后才慢慢停止，移動(dòng)的距離與釋放速度呈正相關(guān)。若釋放時(shí)手指速度為 0 ，則受控物立即停止移動(dòng)。
2.2.2 特點(diǎn)
精確度低但效率高。由于閾值類型判定釋放速度和手指位移，甩動(dòng)適用于需要快速瀏覽較多內(nèi)容的場景，如滾動(dòng)瀏覽列表。
2.2.3 案例
在微信的消息列表頁，使用甩動(dòng)手勢控制列表上下移動(dòng)，若釋放時(shí)仍有速度，列表將仍移動(dòng)一段距離后才慢慢停止。
2.3 輕掃 A
2.3.1 定義
使用手指在受控物位置按下后，操控受控物沿著某個(gè)方向移動(dòng)。若釋放時(shí)的速度和手指位移有任意一個(gè)達(dá)到閾值，受控物將穩(wěn)定在一個(gè)新位置。若釋放速度和手指位移沒有任何一個(gè)達(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 可以通過用手指在屏幕滑動(dòng)很短的距離但離開屏幕時(shí)保留一個(gè)速度來切換內(nèi)容，因此更加省力。
2.3.3 案例
在刷抖音時(shí)，如果使用判定手指位移的方式，我們可以將手指在垂直方向移動(dòng)大概半個(gè)屏幕高度的距離，從而切換到下一個(gè)視頻。如果使用判定釋放速度的方式，我們可以移動(dòng)任意的垂直距離并且手指離開屏幕時(shí)保留一個(gè)速度從而切換到下一個(gè)視頻。
2.4 輕掃 B
2.4.1 定義
使用手指在受控物位置按下后，操控受控物沿著某個(gè)方向移動(dòng)。若釋放時(shí)手指位移達(dá)到閾值，受控物將穩(wěn)定在一個(gè)新位置。若釋放時(shí)手指位移沒有達(dá)到閾值，受控物將回到原位置。
2.4.2 特點(diǎn)
輕掃 B 與輕掃 A 相比唯一的區(qū)別是閾值類型減少了釋放速度的判定方式，這提高了觸發(fā)切換的難度，使操作成本變高，但是在某些場景下，這也降低了誤操作的概率。如下拉刷新等。
2.4.3 案例
比如想要在微信中下拉打開小程序選擇頁，就只能通過手指位移達(dá)到一個(gè)特定的閾值才能夠觸發(fā)，無論怎么用力滑動(dòng)去增加釋放速度都無法打開小程序選擇頁，這樣處理的原因是在消息列表頁上下滑動(dòng)瀏覽消息是一個(gè)高頻操作，如果釋放速度也能作為打開小程序頁面的閾值判定方式，用戶可能就極易在下滑消息列表時(shí)誤操作，無意間打開小程序頁面。
因此，當(dāng)頁面已存在一個(gè)滑動(dòng)操作的情況下，還存在另外一個(gè)方向相同的滑動(dòng)操作且僅會(huì)在邊界情況下才能觸發(fā)時(shí)，為了避免誤操作，會(huì)將后者的手勢設(shè)計(jì)為輕掃 B 。
上文提到，輕掃 A 的閾值類型為判定「釋放速度和手指位移」，輕掃 B 的閾值類型為僅判定「手指位移」，由于前者的實(shí)現(xiàn)成本比后者高，導(dǎo)致本應(yīng)適合做成輕掃 A 的功能有時(shí)只能妥協(xié)做成輕掃 B ，比如之前提到過的美圖秀秀的短視頻評(píng)論浮層案例，但我們也可以通過減少手指位移的閾值來降低負(fù)面體驗(yàn)，后文會(huì)講解如何與開發(fā)同學(xué)溝通。
2.5 輕掃 C
2.5.1 定義
使用手指在受控物位置按下后，操控受控物沿著某個(gè)方向移動(dòng)，但是受控物并不隨著手指的控制而同步移動(dòng)，僅當(dāng)釋放時(shí)手指位移達(dá)到閾值時(shí)，受控物才開始移動(dòng)并穩(wěn)定在一個(gè)新位置。若釋放時(shí)手指位移沒有達(dá)到閾值，受控物位置則一直保持不變。
2.5.2 特點(diǎn)
上文講到過釋放后穩(wěn)定化和相對(duì)控制的缺點(diǎn)，釋放后穩(wěn)定化比較拖沓，相對(duì)控制讓用戶缺乏掌控感。兩者如果應(yīng)用到了同一個(gè)手勢（即輕掃 C ），就會(huì)導(dǎo)致用戶在滑動(dòng)屏幕時(shí)得不到任何反饋，用戶會(huì)疑惑是否因?yàn)樽约翰僮鞑划?dāng)或是設(shè)備出現(xiàn)故障。只有當(dāng)用戶手指離開屏幕后才會(huì)發(fā)現(xiàn)觸發(fā)了操作，整體的交互流程給用戶一種滯后與延遲的感覺。
因此輕掃 C 與其他類別的輕掃相比存在劣勢，但是它也存在很多的 App 的 H5 頁面中，我的猜測是由于 H5 對(duì)于判定釋放速度和絕對(duì)控制這兩個(gè)維度與客戶端相比難度大很多，因此只能退而求其次選擇輕掃 C 這個(gè)較差的方案，實(shí)際上在同樣的應(yīng)用場景中用輕掃 A 替換輕掃 C 可以帶來更好的體驗(yàn)。
2.5.3 案例
下圖左是 QQ 的個(gè)性裝扮的 H5 頁面，卡片的切換使用的就是輕掃 C ，如果能夠優(yōu)化為輕掃 A 體驗(yàn)會(huì)更好，比如下圖右的音街首頁卡片的設(shè)計(jì)。
2.6 輕掃 D
2.6.1 定義
使用手指在受控物位置按下后，操控受控物沿著某個(gè)方向移動(dòng)，但是手指位移達(dá)到閾值前受控物并不隨著手指的移動(dòng)而移動(dòng)。若手指位移達(dá)到閾值，無需手指釋放，受控物將開始移動(dòng)并穩(wěn)定在一個(gè)新位置。若手指位移沒有達(dá)到閾值，無論是否釋放，受控物位置則一直保持不變。
2.6.2 特點(diǎn)
相對(duì)控制的方式降低了用戶的掌控感，釋放前穩(wěn)定化減少了操作的拖沓感。使用此手勢的場景是在多個(gè)對(duì)象之間切換時(shí)，我們不希望用戶過于自由地操控對(duì)象之間的屬性變化過程，并且犧牲掌控感從而增加單次的切換效率。
2.6.3 案例
比如 iOS 的相機(jī)中，左右滑動(dòng)切換拍攝模式時(shí)，由于前后不同模式之間的頁面框架變化較大，切換時(shí)會(huì)有不同元素的屬性變化，如果使用絕對(duì)控制和釋放后穩(wěn)定化就會(huì)導(dǎo)致切換混亂且拖沓，使用相對(duì)控制和釋放前穩(wěn)定化就能避免這個(gè)問題。
2.7 輕掃E
2.7.1 特殊說明
上文我們講到，通過輕掃手勢 A-D 對(duì)受控物的絕對(duì)/相對(duì)控制都是存在于穩(wěn)定化前，受控物一旦穩(wěn)定化，就脫離了手指的控制，需要手指離開屏幕后再次接觸屏幕開始下一次控制。
輕掃E的不同之處在于它可以在受控物穩(wěn)定化后，仍然控制受控物朝著下一個(gè)節(jié)點(diǎn)穩(wěn)定化，在每個(gè)節(jié)點(diǎn)之間切換時(shí)能夠明顯感覺到分段感，如下圖案例所示。
由于輕掃E相對(duì)于輕掃 A-D 的特殊性，控制方式中的絕對(duì)控制和相對(duì)控制無法覆蓋這個(gè)特殊現(xiàn)象，因此我們使用「多段相對(duì)控制」來命名輕掃E的這種特殊的控制方式。
2.7.2 定義
使用手指在受控物位置按下后，操控受控物沿著某個(gè)方向移動(dòng)，若手指位移達(dá)到閾值，無需手指釋放，受控物就穩(wěn)定在了一個(gè)新位置，但是此時(shí)手指還是仍然可以操控受控物繼續(xù)移動(dòng)的，并且繼續(xù)移動(dòng)過程中如果手指位移達(dá)到閾值將會(huì)到達(dá)下一個(gè)穩(wěn)定化狀態(tài)。
2.7.3 特點(diǎn)
輕掃 E 適用于需要在多個(gè)對(duì)象之間快速切換和確認(rèn)的場景，它的使用感覺很接近拖拽。如下圖所示，我們可以這樣理解，當(dāng)被切換的對(duì)象數(shù)量接近于無窮大同時(shí)每個(gè)對(duì)象之間的距離接近無窮小時(shí)，輕掃 E 就可以視為拖拽。
2.7.4 案例
iOS相機(jī)人像模式切換打光方式、微信的通訊錄滑動(dòng)字母索引導(dǎo)航，它們都使用輕掃 E 來滿足多個(gè)對(duì)象之間快速切換和確認(rèn)的需求。
3 實(shí)戰(zhàn)案例
了解完上述的維度和常用手勢后，我們在腦中就可以形成一個(gè)思考框架。當(dāng)我們要針對(duì)一個(gè)功能設(shè)計(jì)位移類手勢時(shí)，就可以從閾值類型、穩(wěn)定化效果以及控制方式這三個(gè)維度思考。接下來我用一個(gè)我參與過的實(shí)際項(xiàng)目作為案例給大家講解一下思考過程。
本案例是網(wǎng)易云音樂陌生人版一起聽中的一個(gè)功能，一起聽的雙方在聽歌過程中會(huì)收到彼此共同信息，比如聽歌口味相似度、是否同城、都喜歡哪些歌手等，目的是為了增加可玩性和互動(dòng)性、降低退出率，鼓勵(lì)用戶互相了解、提高一起聽過程中的社交體驗(yàn)。
為了營造儀式感和避免信息過載，共同信息的展示方式設(shè)計(jì)為了一次只能看一條，進(jìn)入浮層后默認(rèn)展示最新的一條，可以通過滑動(dòng)查看上一條。因此為了避免出現(xiàn)兩條同時(shí)占據(jù)展示區(qū)域的混亂狀態(tài)（如下圖左），我們?yōu)槠涮砑恿?strong>釋放后穩(wěn)定化效果（如下圖右），同時(shí)為了方便用戶可以快速瀏覽舊的共同信息，這里使用的穩(wěn)定化效果是較弱的，用戶可以通過滑動(dòng)一次切換多個(gè)共同信息。
由于需要滿足用戶快速瀏覽舊的共同信息的訴求，閾值類型選用了「判定手指位移和釋放速度滿足任意一個(gè)即可」，用戶可以通過控制釋放速度進(jìn)而控制信息的切換數(shù)量?？刂品绞絼t選擇了掌控感強(qiáng)的絕對(duì)控制。最后的結(jié)果如下圖所示。綜合三個(gè)維度進(jìn)行歸類，此手勢為穩(wěn)定化效果較弱的輕掃 A 。
4 手勢角度的處理
位移類手勢的方向一般為上下或左右，但并不是一定要完全垂直或水平才能夠觸發(fā)手勢。當(dāng)上下滑動(dòng)和左右滑動(dòng)同時(shí)存在于一個(gè)頁面時(shí)，默認(rèn)會(huì)有一個(gè)容錯(cuò)角度，比如上滑時(shí)手指滑動(dòng)方向只要左右偏移不超過 45° 都會(huì)被判定為上滑，如下圖所示。
但是有時(shí)開發(fā)同學(xué)出現(xiàn)失誤，導(dǎo)致容錯(cuò)角度沒有均分，例如下圖中觸發(fā)上滑和下滑的角度極小，導(dǎo)致用戶在上下滑動(dòng)時(shí)非常容易誤操作為左滑和右滑。
云音樂也曾有過類似的遺留問題，iOS 端的播放頁上滑調(diào)出評(píng)論頁極易誤操作為左右滑動(dòng)黑膠切歌（如下圖 A ，現(xiàn)已修復(fù)），安卓端的賬號(hào)側(cè)邊欄上滑瀏覽極易誤操作為左滑收起側(cè)邊欄（如下圖 B ）。
因此，在驗(yàn)收階段，除了上述的三個(gè)維度外，角度的容錯(cuò)性檢查也是重要的一環(huán)。因此在驗(yàn)收時(shí)間充裕的情況下，最好要切換不同的手持方式分別體驗(yàn)一次，因?yàn)橛行﹩栴}只有在特定的手持方式下才能夠被發(fā)現(xiàn)。
客戶端的角度判定方式實(shí)際上是一個(gè)比較復(fù)雜的過程，上述的內(nèi)容是簡化的版本。后續(xù)將延展為一篇獨(dú)立文章給大家仔細(xì)聊一聊。
5 客戶端的差異
上文講到，基礎(chǔ)的三個(gè)維度即閾值類型、穩(wěn)定化效果和控制方式?jīng)Q定了手勢的類別，是設(shè)計(jì)階段一定要定義清楚的。但是除此之外，設(shè)計(jì)一個(gè)手勢需要定義的細(xì)節(jié)非常多。比如受控物的移動(dòng)是否有速度曲線？手指位移與受控物之間的位移的比率是多少呢？這些都是開發(fā)階段不得不面對(duì)的。幸運(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 框架下的界面滑動(dòng)的體驗(yàn)比較差的原因。
6 高效溝通
由于信息不對(duì)稱，與開發(fā)的溝通過程中，很容易出現(xiàn)理解偏差。比較常見的錯(cuò)誤有：將甩動(dòng)誤解為輕掃 A ，將輕掃 A 誤解為輕掃 B 或甩動(dòng)。如果造成效果達(dá)不到預(yù)期的情況，很多設(shè)計(jì)師不知道如何讓開發(fā)同學(xué)修改，只能說“這個(gè)手勢不絲滑，優(yōu)化一下”，開發(fā)同學(xué)也是一頭霧水，不知道往哪個(gè)方向優(yōu)化。如果我們能夠直接說出“閾值判定方式現(xiàn)在只有手指的位移，需要釋放時(shí)的速度也能夠觸發(fā)跳轉(zhuǎn)；這個(gè)位移的閾值太高了，滑動(dòng)時(shí)很難觸發(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 上的類似效果大家可以用本文的每個(gè)手勢的案例給開發(fā)同學(xué)展示，但是 App 可能會(huì)更新，案例可能在未來某個(gè)時(shí)間就找不到了，所以我用 Principle 做了一個(gè)簡易的基礎(chǔ) demo 集合（如下圖，源文件在文章末尾下載），和我上述介紹的手勢是對(duì)應(yīng)的，大家可以拿著這個(gè) demo 給開發(fā)同學(xué)演示大概的效果，也可以在這個(gè) demo 源文件修改。
下載鏈接： https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q 密碼: asto。
拖拽和甩動(dòng)由于需要定義的細(xì)節(jié)參數(shù)都被操作系統(tǒng)提前封裝好了，一般不需要我們給到額外的標(biāo)注。但是對(duì)于輕掃，我們需要將細(xì)節(jié)定義清晰，下面將詳細(xì)講解。
6.1 閾值類型
上文講到，閾值類型一般有兩種：
- ① 判定手指位移和釋放速度滿足任意一個(gè)即可；
- ② 僅判定手指位移。
①的開發(fā)成本高于②。
如果我們選用輕掃的閾值類型是①，開發(fā)同學(xué)編寫代碼需要兩個(gè)參數(shù)的閾值，分別是手指位移和釋放速度。手指位移閾值一般默認(rèn)為受控物的1/2，例如下圖的全屏短視頻和 Banner 。
當(dāng)然我們也可以自定義一個(gè)閾值，比如 100pt 、受控物高度的 1/6 等，沒有特別的需要的話使用默認(rèn)值即可而且也不用給開發(fā)同學(xué)特殊說明，但是如果有特殊需要想要修改默認(rèn)值，就要告知開發(fā)同學(xué)你自定義的手指位移閾值。對(duì)于釋放速度閾值，通常默認(rèn)就非常的小，幾乎是大于 0 即可觸發(fā)，一般情況下使用默認(rèn)值即可。
在本應(yīng)該選用①的場景中，如果由于技術(shù)成本原因不得不選用②，需要注意的是由于缺少了釋放速度的判定，手指位移的閾值我們需要設(shè)置得小一些方便用戶觸發(fā)，否則就會(huì)出現(xiàn)上文中美圖秀秀浮層的那樣的體驗(yàn)問題。經(jīng)過我的實(shí)驗(yàn)，手指位移閾值一般定為 16pt 是比較適中的，既不會(huì)太容易誤操作也不會(huì)難以觸發(fā)。
6.2 穩(wěn)定化效果
輕掃是一定存在穩(wěn)定化效果的，關(guān)鍵在于告知開發(fā)是釋放前穩(wěn)定化還是釋放后穩(wěn)定化。從開發(fā)的角度講，系統(tǒng)會(huì)監(jiān)測用戶的行為，用戶在使用滑動(dòng)時(shí)會(huì)有按下（down）、移動(dòng)（move）、抬起（up）三個(gè)行為，釋放前穩(wěn)定化是在移動(dòng)階段判斷閾值并觸發(fā)操作、釋放后穩(wěn)定化是在抬起后判斷閾值并觸發(fā)操作，開發(fā)成本幾乎沒有區(qū)別。
上文提到過穩(wěn)定化效果強(qiáng)弱的概念。穩(wěn)定化效果越強(qiáng)，單次滑動(dòng)能夠切換的選項(xiàng)個(gè)數(shù)越少，效率越低。穩(wěn)定化效果越弱，單次滑動(dòng)能夠切換的選項(xiàng)個(gè)數(shù)越多，效率越高。首先，我們需要確定單次滑動(dòng)允許切換多個(gè)還是只允許切換一個(gè)，如果允許切換多個(gè)，開發(fā)同學(xué)會(huì)設(shè)定一個(gè)控制切換難度的系數(shù)，而只允許切換一個(gè)的話就不存在這個(gè)系數(shù)。通常我們也不需要修改這個(gè)默認(rèn)系數(shù)，但如果想讓操作更加難或容易觸發(fā)，可以告知開發(fā)同學(xué)修改這個(gè)系數(shù)。
6.3 控制方式
絕對(duì)控制比相對(duì)控制的開發(fā)成本高，如果開發(fā)資源并不是很緊張，需要絕對(duì)控制的場景就不要退而求其次使用相對(duì)控制。涉及到輕掃手勢一定要告知開發(fā)同學(xué)控制方式，否則很可能被視為相對(duì)控制處理。
7 手勢排查
通過本文的學(xué)習(xí)，我們不但可以在開發(fā)工作進(jìn)行前與開發(fā)同學(xué)高效溝通，保證開發(fā)工作的順利進(jìn)行，也可以對(duì)自家移動(dòng)端產(chǎn)品的現(xiàn)有手勢進(jìn)行逐一排查發(fā)現(xiàn)問題點(diǎn)進(jìn)行記錄，并且找到合適解決方案，然后用準(zhǔn)確的語言描述給開發(fā)同學(xué)。下圖是我在進(jìn)行手勢排查后輸出的表格，挑選出一些有代表性的案例給大家作參考，開發(fā)同學(xué)可以通過它快速明確問題，理解解決方案。
結(jié)語
本篇文章的歸納總結(jié)是通過日常積累和思考得來，希望能夠幫助大家在設(shè)計(jì)與溝通層面解決實(shí)際問題，如果有任何疏漏和不嚴(yán)謹(jǐn)?shù)牡胤?，希望大家能夠指出，后續(xù)的更新會(huì)將專欄不斷完善，交互手勢系列暫定的后續(xù)更新計(jì)劃如下。
基礎(chǔ)篇：
- ①位移類手勢（本篇文章）
- ②點(diǎn)擊類手勢
- ③其他類手勢
進(jìn)階篇：
- ④交互手勢的特性
超越篇：
- ⑤設(shè)計(jì)創(chuàng)新型手勢
有興趣的小伙伴可以持續(xù)關(guān)注哦~
文章提到的 Principle 格式的手勢 demo 下載鏈接： https://pan.baidu.com/s/1iaFrcFwzC58TG3L17bjC_Q 密碼: asto。
參考書籍：
《交互設(shè)計(jì)語言：與萬物對(duì)話的藝術(shù)》 作者: 羅濤
《交互設(shè)計(jì)精髓 4》作者：[美] 艾倫·庫伯 / [美] 羅伯特·萊曼 / [美] 戴維·克羅寧 / [美] 克里斯托弗·諾埃塞爾
參考文章：
百度APP「表情面板」體驗(yàn)升級(jí)
微信視頻號(hào)為什么沒有采用全屏沉浸式交互
參考網(wǎng)站：
iOS Human Interface Guidelines
原文地址：站酷
作者：Ballen成明
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》交互手勢全解析之位移類手勢
文章來源：站酷 作者：陳皮Celia
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)