一  關于手勢交互 

手勢交互的普及，提升了人與設備之間的溝通體驗，降低了用戶的操作門檻。手機在觸屏時代之前多為按鍵模式，手勢相對簡單，提供的服務也比較單一。蘋果公司在 2007 年推出具有高分辨率、多點觸控功能的 iPhone，確立了觸摸屏的標準，觸屏手機時代席卷而來。而手勢交互的多樣化也開啟了新篇章，被逐步完善和運用到智能手機中，給用戶帶來了不一樣的人機互動體驗。

觸屏手機的手勢交互體驗被逐步運用到各類 APP 中，給用戶帶來了更為便捷的操作體驗。通過單擊、滑動、長按等操作，可以將原本繁瑣的功能操作變得更為簡化，隨著去 Home 鍵的全屏手機出現，更是依托于手勢交互改變了用戶對于手機的使用習慣。

手勢交互將會在未來成為 APP 設計中的重要交互環節，作為產品設計師來說要充分的利用其優勢，改變和培養用戶的習慣。本文也將作為拋磚引玉，為大家開啟關于手勢交互的探索方向，希望可以帶給大家更多幫助。

 二  手勢交互的形式 

隨著觸屏技術的不斷成熟，手勢交互無論是靈敏度還是互動形式都得到了很大的改變，不再只局限于單擊、滑動等常規形式，更為豐富多樣的手勢操作正在逐步被挖掘。

2.1、單指手勢交互

單指手勢交互是最為普及的形式，也是用戶最先學習并掌握的手勢交互。從最初的按鍵手機開始，我們便已經適應通過點擊來完成對于手機的使用。

單指手勢交互主要有：單擊、雙擊、多擊、長按、滑動、拖動等。針對觸屏靈敏度的不同，操作的力度也被應用到不同的交互觸發上，后面將會重點通過案例分析單手指手勢交互。

2.2、雙指手勢交互

隨著觸屏手機靈敏度的提升，單指手勢操作已經無法滿足更多復雜的交互，通過雙指的輔助可以完成更為復雜的交互動作。

雙指手勢交互是通過兩個手指的配合進行輔助，例如通過雙指代表鼠標的左鍵和右鍵，替代鼠標的功能；也可以進行配合實現畫面縮放；還有一些產品賦予其別的功能，比如網易云音樂評論區針對單條評論雙指上滑，可以收到“抱抱”的情感化設計。

2.3、多指手勢交互

當單指和雙指被充分探索之后，為了帶來手勢交互的深入挖掘，會面向多指手勢交互進行探索。

目前針對多指交互的設計相對較少，比如可以通過手指開合來進行桌面窗口的切換操作。一些樂器類產品，可以通過單手或者雙手進行模擬操作。相信這將會成為繼續探索的方向，滿足用戶對于繁瑣功能的需求。

2.4、隔空手勢交互

隔空手勢的交互是在一定的距離控制范圍內，隔空對手機進行手勢操作。比如隔空翻頁、上下滑動和隔空截屏等基礎操作，滿足生活中對簡單功能的操作需求。

設想一下自己在吃東西的時候，再也不用擔心手觸碰屏幕的衛生問題，可以利用隔空手勢快速調節比如暫停、靜音、進度調節、音量調節、內容切換等。讓用戶解放雙手，享受智能時代帶來的使用體驗。

2.5、小結

手勢交互的形式會隨著手機硬件的強大和軟件體驗的升級得到更多應用，帶給用戶操作體驗的便捷和快捷。下面將會針對單指手勢交互進行分析，探索現有的優秀案例。

 三  單指手勢交互 

手勢交互的形式豐富多樣，本期將會重點分析單指手勢交互，通過優秀的案例解析不一樣的設計解決方案。

3.1、單擊

單擊是手勢交互中最基礎的操作，是最早被應用的交互形式，從按鍵手機到觸屏手機都離不開單擊手勢。在 APP 設計中單擊可以作為選中和觸發進行頁面跳轉，也有配合力度的不同表現按壓的操作，喚起不同的交互動作。

在功能應用上面，單擊可以作為功能選項完成單選或者多選操作；在短視頻平臺也可以作為播放和暫停的切換；可以通過單擊激活功能，比如點贊、關注、喜歡等。

3.2、雙擊

在單擊容易誤操作或者需要多次確認的情況下，雙擊是最適合的選擇。比如短視頻的播放暫停通過單擊完成，而影視播放平臺則是通過雙擊進行切換。雙擊相當于二次確認，可以避免單擊的誤操作。

如果當單擊已被功能占有，也會采用雙擊來替代同等重要的功能。比如短視頻單擊為播放/暫停，而雙擊則是激活愛心圖標，實現喜歡短視頻的操作。在進行產品交互設計的時候，可以更多的考慮手勢交互來替代目標功能的尋找，讓操作變得更便利。

3.3、多擊

多擊是點擊次數在三次或者以上，通常用于較為復雜的操作，或者喚起更加隱藏的功能。比如蘋果手機可以通過三擊打開輔助觸控，再次三擊進行關閉。

如果當單擊和雙擊手勢交互已經在當前頁面被占用，可以考慮多擊操作，雖然學習成本增加，但是通過新手引導的學習可以逐步培養用戶習慣。習慣培養之后將會提高用戶操作快捷度，也能提高隱藏功能的使用率。

3.4、長按

單擊屬于高觸發型，容易被誤操作，而長按需要配合一定的時間，適合需要用戶確認后的功能激活。當我們需要激活一些隱藏功能或者重要操作的時候可以使用長按，比如蘋果手機長按屏幕可以激活應用管理；我們在編輯文本的時候長按可以實現選擇、全選、復制、剪切、粘貼等輔助操作。

長按可以輔助當前操作，而不會干擾當前正在進行的操作。作為輔助性質和復雜功能激活都是非常不錯的選擇，也能作為快速預覽，長按激活松開退出，在 APP 設計場景中應用較為廣泛。

3.5、滑動

滑動是最基礎的手勢交互之一，在 APP 設計中十分常見，很多功能操作都離不開滑動這一動態操作。

可以通過上下滑動翻閱全屏連貫性內容；左右滑動可以對內容卡片、輪播 Banner、功能模塊切換和頁面轉場等進行操作；滑動還能在屏幕中進行創作，比如一些繪畫類 APP 就是通過手指滑動進行創作的；除了上下左右滑動以外，斜角滑動也被充分利用，可以在操作當前 APP 的時候激活手機系統的部分功能操作。滑動是手勢交互的基礎操作，可以在滑動的方向上面做更多延伸，滿足更多功能的激活。

3.6、拖動

在滑動的基礎上增加一定的壓力，就會形成拖動的手勢交互。拖動的操作可以對一些功能進行位移，也能對一些浮層元素進行位置的變動。也有一些操作上面拖動和滑動是類似的，比如進度類功能的操作，在沒有壓力的時候也能通過滑動改變控件的位置，有些是微弱壓力就能實現拖動。

一些產品首頁功能可以實現自定義，在進行自定義功能編輯的時候通常就是在激活后進行拖動實現位置的改變。拖動由于需要兩個動作的結合，可以有效的預防誤操作。

單指手勢交互在 APP 設計中應用非常普遍，隨著用戶習慣的培養，相信還會出現更便捷的操作和更多手勢交互的輔助。加強優秀案例的積累和分析，將有助于我們進一步掌握更多的玩法，下面將會為大家分享一些優秀案例。

 四  線上案例分析 

基于優秀案例之上才能不斷激發靈感，探索出更多的設計解決方案。下面分享一些 APP 的上線案例，希望這些案例可以輔助大家進行理解，從單擊、雙擊、多擊、長按、滑動、拖動進行案例呈現。

4.1、單擊進入全屏模式

#單擊

雖然手機逐步進入大屏時代，但是用戶還是希望獲得更少的干擾，全屏模式的操作可以讓干擾降到最低。

百度地圖 APP 在操作后會有彈窗式的內容呈現，用戶可以通過單擊屏幕退出彈窗，再次單擊則會進一步隱藏基礎控件，進入全屏模式。通過單擊的手勢交互來簡化內容結構，降低干擾帶給用戶更集中的操作體驗。

4.2、雙擊頭像“拍一拍”

#雙擊

在微信群聊或者與好友聊天的時候，為了重點提示好友，可以通過雙擊好友頭像進行“拍一拍”，晃動的頭像和震動的提示加強好友對信息的關注度。

結合雙擊的手勢交互，在不改變當前布局的情況下加強社交屬性，增強好友間的互動提示，通過手勢豐富了社交體驗。

4.3、雙擊最大化圖片預覽

#雙擊

在圖片預覽的時候，可以通過雙擊最大化圖片，方便對細節的觀察。通過雙擊的手勢交互來快速放大圖片，在很多相冊應用、電商產品、微信等社交產品中都有涉足，只要是全屏模式下預覽圖片，都可以通過該手勢交互完成縮放。

雙指縮放屬于慢動作，而雙擊最大化屬于快速一步到位，適合查看圖片細節等操作。通常是雙擊最大化，再次雙擊恢復正常。

4.4、三擊激活“輔助觸控”

#多擊

單擊和雙擊的手勢交互較為常見，而三擊手勢應用較少，有待深入探索。目前來說，帶有 Home 鍵的蘋果系列手機，可以通過三擊 Home 鍵激活“輔助觸控”快捷鍵，再次三擊隱藏快捷鍵。

通過三擊可以快速激活功能快捷鍵，減少了多個步驟路徑，也不會導致用戶誤操作。

4.5、長按快速預覽精彩片段

#長按

通過愛奇藝 APP 刷劇的時候，在搜尋影視作品的過程中，可以通過長按作品封面進行快速預覽，播放精彩片段來判斷是否值得追劇。

通過長按激活彈窗，可以在不改變當前布局結構的前提下，進行更多功能操作。適合針對隱藏式功能，也能避免誤操作。

4.6、長按結合位置區域變化

#長按

很多影視類產品在全屏播放視頻時，除了通過拖動進度條進行快進/倒退之外，也能通過長按屏幕進行快進。

而騰訊視頻 APP 與之不同的是結合了屏幕區域，在全屏狀態下，左側區域長按快退，右側區域長按快進。長按結合位置區域變化功能狀態，深入了手勢交互的操作，也能帶來不一樣的操作體驗。

4.7、長按滑動實現多選

#長按

在百度網盤 APP 中可以通過單擊選擇控件對文件進行選擇操作，也可以通過長按整個區域實現選中，長按過程中可以結合滑動實現多選。

長按滑動進行多選針對文件較多的場景非常便利，也不用擔心誤操作。在一些相冊應用中點擊選擇按鈕之后也可以通過滑動實現多選，操作路徑多一步。無論是通過激活選擇按鈕，還是長按都是起到二次確認的作用，長按滑動操作相對更簡單。

4.8、長按與時間跨度的結合

#長按

長按激活功能比較常見，但是結合時間長短的變化相對較少。蘋果手機桌面的應用管理，在長按應用圖標時會彈窗展示功能列表，繼續維持長按則會進入應用管理，隨著長按的時間跨度不一樣激活不同功能需求。

在手勢交互設計過程中，除了通過動作的不同激活功能操作之外，也可以結合時間跨度、力度、位置等進行組合交互，來滿足多重功能操作的需求。

4.9、可以移動的紅包

#滑動

通過紅包吸引用戶進而轉化是很多電商產品的玩法，在必要 APP 中紅包通過倒計時的形式營造出緊迫感，促使用戶立即使用，進而提高紅包的使用率。紅包懸浮在左側會擋住分類的展示，為了解決這個問題紅包借助滑動手勢可以移動，用戶可以在左側導航欄到底部標簽欄之間任意滑動，方便預覽分類。

單指滑動是常用的手勢交互，精準定位元素之后可以拖動使其改變位置，不僅方便內容的展示也不會造成底層內容的閱讀干擾。

4.10、通過左滑程度控制刪除

#滑動

左滑動是產品設計中非常普遍的手勢交互，通過左滑展開列表隱藏功能，比如編輯、置頂、刪除等。

在脈脈 APP 的消息模塊，消息列表左滑可以進行置頂和刪除，如果繼續往左側滑動則會實現自動刪除，以此來替代點擊刪除圖標完成刪除操作的步驟。通過左滑配合點擊刪除操作路徑多一步，而左滑程度控制刪除效率更高，針對一些消息較多的產品，可以方便用戶快速清理未讀消息。

4.11、列表式設計中的左右滑動交互

#滑動

在列表式設計中，比較隱藏式的交互就是左滑和右滑，通常左滑刪除較為常見。而大部分的列表設計中都沒有探索過右滑交互，除非是右滑返回或者退出等操作。

在小宇宙 App 的訂閱欄目中，對于關注的內容列表左滑為刪除（不喜歡），右滑則是添加到播放列表中。充分運用了左右滑動的手勢交互，不僅操作便利也帶給用戶不一樣的使用體驗。

4.12、下拉程度影響功能變化

#滑動

手勢下滑形成下拉刷新已經成為產品設計中的基礎操作，為了進一步延展功能，很多產品在下拉過程中根據下拉的程度判斷是刷新還是進入二層樓（活動或者功能模塊）。

通常是通過控制下拉的距離來做判斷，會提示“松開刷新”的字樣，如果繼續下拉則會激活功能變化。進入二級功能界面或者二層樓活動界面，深度的功能開發帶給用戶更多的選擇性。

4.13、拖動完成自定義設置

#拖動

隨著用戶對個性化的需求升級，很多產品都開放了部分常用功能模塊的自定義設置。比如網易云音樂 APP 的底部導航欄在設置環節中，便可通過拖動完成自定義設置。

利用壓力結合滑動可以實現拖動手勢交互，對于一些需要用戶謹慎操作的功能比較適合，也能有效防止誤操作。

4.14、拖動疊加實現應用建組

#拖動

當用戶下載的應用很多的時候，通常都會通過建組管理手機桌面上的各類應用軟件。可以通過拖動應用疊加到其他應用軟件上實現自動建組，建組、進組、移出等操作均可通過拖動手勢完成，操作非常便利。

拖動手勢交互針對一些防止誤操作的功能比較適合，相當于二次確認的過程。

4.15、拖動交互自定義標簽導航

#拖動

阿里云盤 APP 底部標簽欄的設計去掉了傳統的圖標+文字形式，而直接以純文本形式設計功能模塊。采用了左右可滑動的交互形式，方便展示更多功能入口。

右側設計了全部功能的入口，點擊之后以圖標+文字的形式展示所有功能模塊，圖標設計也是非常的精致美觀。用戶也可以通過編輯來自定義設置底部導航的排序，通過拖動功能列表的方式實現自定義設置。方便根據用戶自己的使用習慣來進行自定義，提高用戶的使用體驗。

 五  總結 

手勢交互在 APP 設計中的普及帶給用戶更便捷的使用體驗，避免過多內容的展示所帶來的使用干擾。通過手勢交互前期的用戶習慣培養，一旦培養完成對于用戶來說是非常友好的操作之旅。

本期主要為大家分享的是單指手勢交互，后續將會為大家繼續延伸更多關于手勢交互的內容，希望本期探索的方向可以帶給你更多的幫助。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》探索APP設計的手勢交互（上）

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.ocunn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務