一  關(guān)于手勢交互 

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

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

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

 二  手勢交互的形式 

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

2.1、單指手勢交互

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

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

2.2、雙指手勢交互

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

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

2.3、多指手勢交互

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

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

2.4、隔空手勢交互

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

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

2.5、小結(jié)

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

 三  單指手勢交互 

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

3.1、單擊

單擊是手勢交互中最基礎(chǔ)的操作，是最早被應(yīng)用的交互形式，從按鍵手機到觸屏手機都離不開單擊手勢。在 APP 設(shè)計中單擊可以作為選中和觸發(fā)進行頁面跳轉(zhuǎn)，也有配合力度的不同表現(xiàn)按壓的操作，喚起不同的交互動作。

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

3.2、雙擊

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

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

3.3、多擊

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

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

3.4、長按

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

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

3.5、滑動

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

可以通過上下滑動翻閱全屏連貫性內(nèi)容；左右滑動可以對內(nèi)容卡片、輪播 Banner、功能模塊切換和頁面轉(zhuǎn)場等進行操作；滑動還能在屏幕中進行創(chuàng)作，比如一些繪畫類 APP 就是通過手指滑動進行創(chuàng)作的；除了上下左右滑動以外，斜角滑動也被充分利用，可以在操作當前 APP 的時候激活手機系統(tǒng)的部分功能操作?；瑒邮鞘謩萁换サ幕A(chǔ)操作，可以在滑動的方向上面做更多延伸，滿足更多功能的激活。

3.6、拖動

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

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

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

 四  線上案例分析 

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

4.1、單擊進入全屏模式

#單擊

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

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

4.2、雙擊頭像“拍一拍”

#雙擊

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

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

4.3、雙擊最大化圖片預(yù)覽

#雙擊

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

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

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

#多擊

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

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

4.5、長按快速預(yù)覽精彩片段

#長按

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

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

4.6、長按結(jié)合位置區(qū)域變化

#長按

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

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

4.7、長按滑動實現(xiàn)多選

#長按

在百度網(wǎng)盤 APP 中可以通過單擊選擇控件對文件進行選擇操作，也可以通過長按整個區(qū)域?qū)崿F(xiàn)選中，長按過程中可以結(jié)合滑動實現(xiàn)多選。

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

4.8、長按與時間跨度的結(jié)合

#長按

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

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

4.9、可以移動的紅包

#滑動

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

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

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

#滑動

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

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

4.11、列表式設(shè)計中的左右滑動交互

#滑動

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

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

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

#滑動

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

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

4.13、拖動完成自定義設(shè)置

#拖動

隨著用戶對個性化的需求升級，很多產(chǎn)品都開放了部分常用功能模塊的自定義設(shè)置。比如網(wǎng)易云音樂 APP 的底部導(dǎo)航欄在設(shè)置環(huán)節(jié)中，便可通過拖動完成自定義設(shè)置。

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

4.14、拖動疊加實現(xiàn)應(yīng)用建組

#拖動

當用戶下載的應(yīng)用很多的時候，通常都會通過建組管理手機桌面上的各類應(yīng)用軟件?？梢酝ㄟ^拖動應(yīng)用疊加到其他應(yīng)用軟件上實現(xiàn)自動建組，建組、進組、移出等操作均可通過拖動手勢完成，操作非常便利。

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

4.15、拖動交互自定義標簽導(dǎo)航

#拖動

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

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

 五  總結(jié) 

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

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

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

作者：黑馬青年

轉(zhuǎn)載請注明：學UI網(wǎng)》探索APP設(shè)計的手勢交互（上）

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)