交互手勢全解析之多指類和組合類

導讀:前三篇文章講解了單指點擊類手勢、單指位移類手勢、描述維度。本文討論多指和組合類手勢,它們的使用遠遠少於單指類的手勢。由於本文與前兩篇文章的相關性較強,為了加深理解建議配合下面兩篇文章閲讀本文。

交互手勢全解析之多指類和組合類
一、多指類手勢

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

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

  • 單個界面對於手勢的需求量比較大。當可用的單指類手勢都已經被佔用後,通過引入多指的維度來擴充手勢,從而滿足設計需要,避免產生手勢衝突;
  • 系統級的全局手勢通常使用多指類手勢來儘量避免與第三方App的手勢衝突。

全局手勢如果設計得過於簡單很容易引發手勢衝突。

例如一加手機的某個系統版本中,有一個全局手勢是單指連續點擊三次觸發頁面縮放,對於非遊戲類的App來説基本沒有這個手勢,不必擔心誤操作,但是對於遊戲類App而言,連續點擊屏幕上的攻擊鍵是一個很常用的操作,連續點擊三次觸發頁面縮放的設計導致用户遊戲過程中極易不小心觸發了頁面縮放。

iOS系統的做法很巧妙,在點擊次數外增加了手指個數的維度,通過三指雙擊才能夠觸發頁面縮放,從而基本解決了手勢衝突問題。

1.1 多指點擊

1)特點

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

2)案例

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

交互手勢全解析之多指類和組合類

在iOS的設置中開啓縮放功能後,任何頁面都可以通過「三指雙擊」觸發頁面縮放。

交互手勢全解析之多指類和組合類
1.2 多指位移

1)特點

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

2)案例

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

交互手勢全解析之多指類和組合類

在網易雲音樂的播放頁,向下「雙指輕掃」可以觸發黑膠背後的故事。

交互手勢全解析之多指類和組合類

在筆記應用GoodNotes中,瀏覽模式下可以通過「單指甩動」瀏覽頁面,但是當進入編輯模式時,為避免手勢衝突,單指甩動會變為「雙指甩動」。

交互手勢全解析之多指類和組合類
1.3 多指縮放

1)特點

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

2)案例

iPad可以通過「四指縮小」快速退出應用。

交互手勢全解析之多指類和組合類

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

交互手勢全解析之多指類和組合類

網易雲音樂可以通過「雙指縮小」觸發抱一抱彩蛋。

交互手勢全解析之多指類和組合類
1.4 多指旋轉

1)特點

多指旋轉可以看做是以多指的中心為圓心,通過多指的移動來模擬出圍繞這個圓心做旋轉的手勢。它是對物理世界幾乎100%的映射,因此一般用於旋轉某個物體,調節旋鈕等操作。

2)案例

iOS的照片App中,可以通過「雙指旋轉」轉動照片。

交互手勢全解析之多指類和組合類
1.5 多指特殊手勢

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

交互手勢全解析之多指類和組合類
二、組合類手勢

組合類手勢由兩個或兩個以上的手勢組成,因此隱蔽性較強,如果不進行引導很難被用户發現,也是由於這種特性,它所觸發的功能一般有其他更明顯的入口或操作方式,使用它通常是為了增加高頻功能的操作效率,服務於專家型用户。

組合類手勢之所以能夠提高效率,是因為它把用户平時需要通過多個步驟才能完成的操作簡化為了短時間即可完成的手勢組合。雖然初次使用有一定學習成本,但是一旦用户形成肌肉記憶,操作過程會非常快速。

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

2.1 設計模型

下面這個表格裏的模型是總結常見的組合類手勢而設計的,能夠涵蓋絕大部分的設計需求,但僅適用於單指的組合類手勢設計。

交互手勢全解析之多指類和組合類

模型將組合類手勢的操作過程分為啓動、調整和觸發三個階段。每一階段由一個分支手勢構成。比如在第一階段中,可以選用的手勢有長按、雙按、輕掃B。並不是只能選用這三個,而是它們三個作為第一階段的分支手勢體驗良好且最常用。

①啓動階段的目的是創建一個新模式,在新模式下,界面原有的手勢會失效,系統只能響應②調整階段的手勢,可以選用拖拽和輕掃E。在③觸發階段可以進行抬起、停留來觸發最後的功能,如果選擇「無操作」,則説明手勢在②調整階段已經達到目的,不需要③觸發階段的手勢。

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

2.2 常見案例

長按+輕掃E+抬起

特點:

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

案例:

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

交互手勢全解析之多指類和組合類

長按+拖拽+停留

特點:

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

案例:

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

交互手勢全解析之多指類和組合類

在iOS桌面長按圖標將其拖動到邊界,停留一段時間後可以將圖標移動到下一頁。

交互手勢全解析之多指類和組合類

為什麼上面兩個案例在觸發階段使用停留而不是抬起?

因為完成了觸發階段的操作後手指仍然需要對受控物保持控制狀態,此時不能鬆開手指,因此這種情況下操作的觸發手勢使用停留更合適。

輕掃B+輕掃E+抬起

特點:

通過輕掃B激活一個控件,在不鬆手的情況下將手指往某個方向移動來選中某個功能選項,然後通過抬起觸發該功能。

案例:

Chrome瀏覽器中,下拉頁面後將手指左右移動並抬起可以觸發其他功能。

交互手勢全解析之多指類和組合類

雙按+拖拽

定義:

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

案例:

地圖類App中,可以通過雙按後手指不離開屏幕往上拖拽來放大地圖,往下拖拽來縮小地圖,從而解決了單手操作時難以放大縮小地圖的問題。不足之處在於,這個手勢的教育成本較高,只有少部分用户能夠發現並持續使用。

交互手勢全解析之多指類和組合類
2.3 根據使用場景進行分類

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

2.3.1 單個屬性的調整

單個屬性可以是亮度、大小、位置等,通過雙按或長按啓動模式後,再使用拖拽來進行調整。

雙按+拖拽

每個地圖App基本都支持這個手勢,雙按後通過拖拽來對地圖大小進行調整。

(上文有動圖示例,這裏不再重複展示)

長按+拖拽

在快手App的拍攝界面中,長按拍攝鍵後上下拖拽可以調整取景框的大小。

交互手勢全解析之多指類和組合類

2.3.2 多個功能選其一

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

長按+輕掃E+抬起

在iOS的桌面長按App的圖標可以喚起更多功能菜單,移動手指到某個功能後抬起可觸發該功能。

交互手勢全解析之多指類和組合類

2.3.3 默認選擇主要功能

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

長按+輕掃E+抬起

微信錄製完語音後,抬起默認會觸發發送語音,也可以通過移動手指到「取消」或「轉文字」上來觸發另外兩個較為低頻的功能。

交互手勢全解析之多指類和組合類

輕掃B+輕掃E+抬起

下面是一個概念案例,來自於一本交互設計相關圖書《交互設計語言》,非常推薦閲讀。在下圖案例中,手勢的目的是解決微信的多層級導致的返回步驟過多問題。右滑頁面後如果直接鬆手會返回上一頁,但是如果上下移動則可選擇其他層級的頁面,抬起後進行跳轉。

交互手勢全解析之多指類和組合類

2.3.4 同時進行兩項操作

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

長按+拖拽+停留

暫無更多案例展示,可以看上文的京東讀書App選中更多文字的同時進行翻頁、在iOS桌面拖動圖標的同時進行翻頁的案例,在這裏就不重複展示了。

以上就是關於多指類和組合類手勢的思考總結,後續暫定的更新計劃如下。有興趣的朋友可以持續關注哦~

交互手勢全解析之多指類和組合類

相關閲讀:

交互手勢全解析之位移類手勢

本文由 @Ballen成明 原創發佈於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議。

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 3615 字。

轉載請註明: 交互手勢全解析之多指類和組合類 - 楠木軒