超多案例！交互手勢全解析（三）：多指類和組合類

多指類手勢

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

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

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

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

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

1. 多指點擊

特點

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

案例

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

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

2. 多指位移

特點

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

案例

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

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

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

3. 多指縮放

特點

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

案例

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

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

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

4. 多指旋轉(zhuǎn)

特點

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

案例

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

5. 多指特殊手勢

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

組合類手勢

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

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

1. 設(shè)計模型

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

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

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

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

2. 常見案例

長按+輕掃 E+抬起

特點

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

案例

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

長按+拖拽+停留

特點

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

案例

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

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

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

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

輕掃 B+輕掃 E+抬起

特點

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

案例

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

雙按+拖拽

定義

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

案例

地圖類 App 中，可以通過雙按后手指不離開屏幕往上拖拽來放大地圖，往下拖拽來縮小地圖，從而解決了單手操作時難以放大縮小地圖的問題。不足之處在于，這個手勢的教育成本較高，只有少部分用戶能夠發(fā)現(xiàn)并持續(xù)使用。

3. 根據(jù)使用場景進行分類

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

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

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

雙按+拖拽

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

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

長按+拖拽

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

多個功能選其一

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

長按+輕掃 E+抬起

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

默認選擇主要功能

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

長按+輕掃 E+抬起

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

輕掃 B+輕掃 E+抬起

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

同時進行兩項操作

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

長按+拖拽+停留

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

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

歡迎關(guān)注作者微信公眾號：「設(shè)成于思」