一 關(guān)于手勢交互
手勢交互的普及，提升了人與設(shè)備之間的溝通體驗(yàn)，降低了用戶的操作門檻。手機(jī)在觸屏?xí)r代之前多為按鍵模式，手勢相對簡單，提供的服務(wù)也比較單一。蘋果公司在 2007 年推出具有高分辨率、多點(diǎn)觸控功能的 iPhone，確立了觸摸屏的標(biāo)準(zhǔn)，觸屏手機(jī)時(shí)代席卷而來。而手勢交互的多樣化也開啟了新篇章，被逐步完善和運(yùn)用到智能手機(jī)中，給用戶帶來了不一樣的人機(jī)互動(dòng)體驗(yàn)。
觸屏手機(jī)的手勢交互體驗(yàn)被逐步運(yùn)用到各類 APP 中，給用戶帶來了更為便捷的操作體驗(yàn)。通過單擊、滑動(dòng)、長按等操作，可以將原本繁瑣的功能操作變得更為簡化，隨著去 Home 鍵的全屏手機(jī)出現(xiàn)，更是依托于手勢交互改變了用戶對于手機(jī)的使用習(xí)慣。
手勢交互將會(huì)在未來成為 APP 設(shè)計(jì)中的重要交互環(huán)節(jié)，作為產(chǎn)品設(shè)計(jì)師來說要充分的利用其優(yōu)勢，改變和培養(yǎng)用戶的習(xí)慣。本文也將作為拋磚引玉，為大家開啟關(guān)于手勢交互的探索方向，希望可以帶給大家更多幫助。
二 手勢交互的形式
隨著觸屏技術(shù)的不斷成熟，手勢交互無論是靈敏度還是互動(dòng)形式都得到了很大的改變，不再只局限于單擊、滑動(dòng)等常規(guī)形式，更為豐富多樣的手勢操作正在逐步被挖掘。
2.1、單指手勢交互
單指手勢交互是最為普及的形式，也是用戶最先學(xué)習(xí)并掌握的手勢交互。從最初的按鍵手機(jī)開始，我們便已經(jīng)適應(yīng)通過點(diǎn)擊來完成對于手機(jī)的使用。
單指手勢交互主要有：單擊、雙擊、多擊、長按、滑動(dòng)、拖動(dòng)等。針對觸屏靈敏度的不同，操作的力度也被應(yīng)用到不同的交互觸發(fā)上，后面將會(huì)重點(diǎn)通過案例分析單手指手勢交互。
2.2、雙指手勢交互
隨著觸屏手機(jī)靈敏度的提升，單指手勢操作已經(jīng)無法滿足更多復(fù)雜的交互，通過雙指的輔助可以完成更為復(fù)雜的交互動(dòng)作。
雙指手勢交互是通過兩個(gè)手指的配合進(jìn)行輔助，例如通過雙指代表鼠標(biāo)的左鍵和右鍵，替代鼠標(biāo)的功能；也可以進(jìn)行配合實(shí)現(xiàn)畫面縮放；還有一些產(chǎn)品賦予其別的功能，比如網(wǎng)易云音樂評論區(qū)針對單條評論雙指上滑，可以收到“抱抱”的情感化設(shè)計(jì)。
2.3、多指手勢交互
當(dāng)單指和雙指被充分探索之后，為了帶來手勢交互的深入挖掘，會(huì)面向多指手勢交互進(jìn)行探索。
目前針對多指交互的設(shè)計(jì)相對較少，比如可以通過手指開合來進(jìn)行桌面窗口的切換操作。一些樂器類產(chǎn)品，可以通過單手或者雙手進(jìn)行模擬操作。相信這將會(huì)成為繼續(xù)探索的方向，滿足用戶對于繁瑣功能的需求。
2.4、隔空手勢交互
隔空手勢的交互是在一定的距離控制范圍內(nèi)，隔空對手機(jī)進(jìn)行手勢操作。比如隔空翻頁、上下滑動(dòng)和隔空截屏等基礎(chǔ)操作，滿足生活中對簡單功能的操作需求。
設(shè)想一下自己在吃東西的時(shí)候，再也不用擔(dān)心手觸碰屏幕的衛(wèi)生問題，可以利用隔空手勢快速調(diào)節(jié)比如暫停、靜音、進(jìn)度調(diào)節(jié)、音量調(diào)節(jié)、內(nèi)容切換等。讓用戶解放雙手，享受智能時(shí)代帶來的使用體驗(yàn)。
2.5、小結(jié)
手勢交互的形式會(huì)隨著手機(jī)硬件的強(qiáng)大和軟件體驗(yàn)的升級得到更多應(yīng)用，帶給用戶操作體驗(yàn)的便捷和快捷。下面將會(huì)針對單指手勢交互進(jìn)行分析，探索現(xiàn)有的優(yōu)秀案例。
三 單指手勢交互
手勢交互的形式豐富多樣，本期將會(huì)重點(diǎn)分析單指手勢交互，通過優(yōu)秀的案例解析不一樣的設(shè)計(jì)解決方案。
3.1、單擊
單擊是手勢交互中最基礎(chǔ)的操作，是最早被應(yīng)用的交互形式，從按鍵手機(jī)到觸屏手機(jī)都離不開單擊手勢。在 APP 設(shè)計(jì)中單擊可以作為選中和觸發(fā)進(jìn)行頁面跳轉(zhuǎn)，也有配合力度的不同表現(xiàn)按壓的操作，喚起不同的交互動(dòng)作。
在功能應(yīng)用上面，單擊可以作為功能選項(xiàng)完成單選或者多選操作；在短視頻平臺(tái)也可以作為播放和暫停的切換；可以通過單擊激活功能，比如點(diǎn)贊、關(guān)注、喜歡等。
3.2、雙擊
在單擊容易誤操作或者需要多次確認(rèn)的情況下，雙擊是最適合的選擇。比如短視頻的播放暫停通過單擊完成，而影視播放平臺(tái)則是通過雙擊進(jìn)行切換。雙擊相當(dāng)于二次確認(rèn)，可以避免單擊的誤操作。
如果當(dāng)單擊已被功能占有，也會(huì)采用雙擊來替代同等重要的功能。比如短視頻單擊為播放/暫停，而雙擊則是激活愛心圖標(biāo)，實(shí)現(xiàn)喜歡短視頻的操作。在進(jìn)行產(chǎn)品交互設(shè)計(jì)的時(shí)候，可以更多的考慮手勢交互來替代目標(biāo)功能的尋找，讓操作變得更便利。
3.3、多擊
多擊是點(diǎn)擊次數(shù)在三次或者以上，通常用于較為復(fù)雜的操作，或者喚起更加隱藏的功能。比如蘋果手機(jī)可以通過三擊打開輔助觸控，再次三擊進(jìn)行關(guān)閉。
如果當(dāng)單擊和雙擊手勢交互已經(jīng)在當(dāng)前頁面被占用，可以考慮多擊操作，雖然學(xué)習(xí)成本增加，但是通過新手引導(dǎo)的學(xué)習(xí)可以逐步培養(yǎng)用戶習(xí)慣。習(xí)慣培養(yǎng)之后將會(huì)提高用戶操作快捷度，也能提高隱藏功能的使用率。
3.4、長按
單擊屬于高觸發(fā)型，容易被誤操作，而長按需要配合一定的時(shí)間，適合需要用戶確認(rèn)后的功能激活。當(dāng)我們需要激活一些隱藏功能或者重要操作的時(shí)候可以使用長按，比如蘋果手機(jī)長按屏幕可以激活應(yīng)用管理；我們在編輯文本的時(shí)候長按可以實(shí)現(xiàn)選擇、全選、復(fù)制、剪切、粘貼等輔助操作。
長按可以輔助當(dāng)前操作，而不會(huì)干擾當(dāng)前正在進(jìn)行的操作。作為輔助性質(zhì)和復(fù)雜功能激活都是非常不錯(cuò)的選擇，也能作為快速預(yù)覽，長按激活松開退出，在 APP 設(shè)計(jì)場景中應(yīng)用較為廣泛。
3.5、滑動(dòng)
滑動(dòng)是最基礎(chǔ)的手勢交互之一，在 APP 設(shè)計(jì)中十分常見，很多功能操作都離不開滑動(dòng)這一動(dòng)態(tài)操作。
可以通過上下滑動(dòng)翻閱全屏連貫性內(nèi)容；左右滑動(dòng)可以對內(nèi)容卡片、輪播 Banner、功能模塊切換和頁面轉(zhuǎn)場等進(jìn)行操作；滑動(dòng)還能在屏幕中進(jìn)行創(chuàng)作，比如一些繪畫類 APP 就是通過手指滑動(dòng)進(jìn)行創(chuàng)作的；除了上下左右滑動(dòng)以外，斜角滑動(dòng)也被充分利用，可以在操作當(dāng)前 APP 的時(shí)候激活手機(jī)系統(tǒng)的部分功能操作?；瑒?dòng)是手勢交互的基礎(chǔ)操作，可以在滑動(dòng)的方向上面做更多延伸，滿足更多功能的激活。
3.6、拖動(dòng)
在滑動(dòng)的基礎(chǔ)上增加一定的壓力，就會(huì)形成拖動(dòng)的手勢交互。拖動(dòng)的操作可以對一些功能進(jìn)行位移，也能對一些浮層元素進(jìn)行位置的變動(dòng)。也有一些操作上面拖動(dòng)和滑動(dòng)是類似的，比如進(jìn)度類功能的操作，在沒有壓力的時(shí)候也能通過滑動(dòng)改變控件的位置，有些是微弱壓力就能實(shí)現(xiàn)拖動(dòng)。
一些產(chǎn)品首頁功能可以實(shí)現(xiàn)自定義，在進(jìn)行自定義功能編輯的時(shí)候通常就是在激活后進(jìn)行拖動(dòng)實(shí)現(xiàn)位置的改變。拖動(dòng)由于需要兩個(gè)動(dòng)作的結(jié)合，可以有效的預(yù)防誤操作。
單指手勢交互在 APP 設(shè)計(jì)中應(yīng)用非常普遍，隨著用戶習(xí)慣的培養(yǎng)，相信還會(huì)出現(xiàn)更便捷的操作和更多手勢交互的輔助。加強(qiáng)優(yōu)秀案例的積累和分析，將有助于我們進(jìn)一步掌握更多的玩法，下面將會(huì)為大家分享一些優(yōu)秀案例。
四 線上案例分析
基于優(yōu)秀案例之上才能不斷激發(fā)靈感，探索出更多的設(shè)計(jì)解決方案。下面分享一些 APP 的上線案例，希望這些案例可以輔助大家進(jìn)行理解，從單擊、雙擊、多擊、長按、滑動(dòng)、拖動(dòng)進(jìn)行案例呈現(xiàn)。
4.1、單擊進(jìn)入全屏模式
#單擊
雖然手機(jī)逐步進(jìn)入大屏?xí)r代，但是用戶還是希望獲得更少的干擾，全屏模式的操作可以讓干擾降到最低。
百度地圖 APP 在操作后會(huì)有彈窗式的內(nèi)容呈現(xiàn)，用戶可以通過單擊屏幕退出彈窗，再次單擊則會(huì)進(jìn)一步隱藏基礎(chǔ)控件，進(jìn)入全屏模式。通過單擊的手勢交互來簡化內(nèi)容結(jié)構(gòu)，降低干擾帶給用戶更集中的操作體驗(yàn)。
4.2、雙擊頭像“拍一拍”
#雙擊
在微信群聊或者與好友聊天的時(shí)候，為了重點(diǎn)提示好友，可以通過雙擊好友頭像進(jìn)行“拍一拍”，晃動(dòng)的頭像和震動(dòng)的提示加強(qiáng)好友對信息的關(guān)注度。
結(jié)合雙擊的手勢交互，在不改變當(dāng)前布局的情況下加強(qiáng)社交屬性，增強(qiáng)好友間的互動(dòng)提示，通過手勢豐富了社交體驗(yàn)。
4.3、雙擊最大化圖片預(yù)覽
#雙擊
在圖片預(yù)覽的時(shí)候，可以通過雙擊最大化圖片，方便對細(xì)節(jié)的觀察。通過雙擊的手勢交互來快速放大圖片，在很多相冊應(yīng)用、電商產(chǎn)品、微信等社交產(chǎn)品中都有涉足，只要是全屏模式下預(yù)覽圖片，都可以通過該手勢交互完成縮放。
雙指縮放屬于慢動(dòng)作，而雙擊最大化屬于快速一步到位，適合查看圖片細(xì)節(jié)等操作。通常是雙擊最大化，再次雙擊恢復(fù)正常。
![[優(yōu)化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2021/12/ezgif-2-8349464cbd84.gif)
4.4、三擊激活“輔助觸控”
#多擊
單擊和雙擊的手勢交互較為常見，而三擊手勢應(yīng)用較少，有待深入探索。目前來說，帶有 Home 鍵的蘋果系列手機(jī)，可以通過三擊 Home 鍵激活“輔助觸控”快捷鍵，再次三擊隱藏快捷鍵。
通過三擊可以快速激活功能快捷鍵，減少了多個(gè)步驟路徑，也不會(huì)導(dǎo)致用戶誤操作。
4.5、長按快速預(yù)覽精彩片段
#長按
通過愛奇藝 APP 刷劇的時(shí)候，在搜尋影視作品的過程中，可以通過長按作品封面進(jìn)行快速預(yù)覽，播放精彩片段來判斷是否值得追劇。
通過長按激活彈窗，可以在不改變當(dāng)前布局結(jié)構(gòu)的前提下，進(jìn)行更多功能操作。適合針對隱藏式功能，也能避免誤操作。
4.6、長按結(jié)合位置區(qū)域變化
#長按
很多影視類產(chǎn)品在全屏播放視頻時(shí)，除了通過拖動(dòng)進(jìn)度條進(jìn)行快進(jìn)/倒退之外，也能通過長按屏幕進(jìn)行快進(jìn)。
而騰訊視頻 APP 與之不同的是結(jié)合了屏幕區(qū)域，在全屏狀態(tài)下，左側(cè)區(qū)域長按快退，右側(cè)區(qū)域長按快進(jìn)。長按結(jié)合位置區(qū)域變化功能狀態(tài)，深入了手勢交互的操作，也能帶來不一樣的操作體驗(yàn)。
4.7、長按滑動(dòng)實(shí)現(xiàn)多選
#長按
在百度網(wǎng)盤 APP 中可以通過單擊選擇控件對文件進(jìn)行選擇操作，也可以通過長按整個(gè)區(qū)域?qū)崿F(xiàn)選中，長按過程中可以結(jié)合滑動(dòng)實(shí)現(xiàn)多選。
長按滑動(dòng)進(jìn)行多選針對文件較多的場景非常便利，也不用擔(dān)心誤操作。在一些相冊應(yīng)用中點(diǎn)擊選擇按鈕之后也可以通過滑動(dòng)實(shí)現(xiàn)多選，操作路徑多一步。無論是通過激活選擇按鈕，還是長按都是起到二次確認(rèn)的作用，長按滑動(dòng)操作相對更簡單。
4.8、長按與時(shí)間跨度的結(jié)合
#長按
長按激活功能比較常見，但是結(jié)合時(shí)間長短的變化相對較少。蘋果手機(jī)桌面的應(yīng)用管理，在長按應(yīng)用圖標(biāo)時(shí)會(huì)彈窗展示功能列表，繼續(xù)維持長按則會(huì)進(jìn)入應(yīng)用管理，隨著長按的時(shí)間跨度不一樣激活不同功能需求。
在手勢交互設(shè)計(jì)過程中，除了通過動(dòng)作的不同激活功能操作之外，也可以結(jié)合時(shí)間跨度、力度、位置等進(jìn)行組合交互，來滿足多重功能操作的需求。
4.9、可以移動(dòng)的紅包
#滑動(dòng)
通過紅包吸引用戶進(jìn)而轉(zhuǎn)化是很多電商產(chǎn)品的玩法，在必要 APP 中紅包通過倒計(jì)時(shí)的形式營造出緊迫感，促使用戶立即使用，進(jìn)而提高紅包的使用率。紅包懸浮在左側(cè)會(huì)擋住分類的展示，為了解決這個(gè)問題紅包借助滑動(dòng)手勢可以移動(dòng)，用戶可以在左側(cè)導(dǎo)航欄到底部標(biāo)簽欄之間任意滑動(dòng)，方便預(yù)覽分類。
單指滑動(dòng)是常用的手勢交互，精準(zhǔn)定位元素之后可以拖動(dòng)使其改變位置，不僅方便內(nèi)容的展示也不會(huì)造成底層內(nèi)容的閱讀干擾。
4.10、通過左滑程度控制刪除
#滑動(dòng)
左滑動(dòng)是產(chǎn)品設(shè)計(jì)中非常普遍的手勢交互，通過左滑展開列表隱藏功能，比如編輯、置頂、刪除等。
在脈脈 APP 的消息模塊，消息列表左滑可以進(jìn)行置頂和刪除，如果繼續(xù)往左側(cè)滑動(dòng)則會(huì)實(shí)現(xiàn)自動(dòng)刪除，以此來替代點(diǎn)擊刪除圖標(biāo)完成刪除操作的步驟。通過左滑配合點(diǎn)擊刪除操作路徑多一步，而左滑程度控制刪除效率更高，針對一些消息較多的產(chǎn)品，可以方便用戶快速清理未讀消息。
4.11、列表式設(shè)計(jì)中的左右滑動(dòng)交互
#滑動(dòng)
在列表式設(shè)計(jì)中，比較隱藏式的交互就是左滑和右滑，通常左滑刪除較為常見。而大部分的列表設(shè)計(jì)中都沒有探索過右滑交互，除非是右滑返回或者退出等操作。
在小宇宙 App 的訂閱欄目中，對于關(guān)注的內(nèi)容列表左滑為刪除（不喜歡），右滑則是添加到播放列表中。充分運(yùn)用了左右滑動(dòng)的手勢交互，不僅操作便利也帶給用戶不一樣的使用體驗(yàn)。
![[優(yōu)化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2021/12/ezgif-2-227d31991368.gif)
4.12、下拉程度影響功能變化
#滑動(dòng)
手勢下滑形成下拉刷新已經(jīng)成為產(chǎn)品設(shè)計(jì)中的基礎(chǔ)操作，為了進(jìn)一步延展功能，很多產(chǎn)品在下拉過程中根據(jù)下拉的程度判斷是刷新還是進(jìn)入二層樓（活動(dòng)或者功能模塊）。
通常是通過控制下拉的距離來做判斷，會(huì)提示“松開刷新”的字樣，如果繼續(xù)下拉則會(huì)激活功能變化。進(jìn)入二級功能界面或者二層樓活動(dòng)界面，深度的功能開發(fā)帶給用戶更多的選擇性。
4.13、拖動(dòng)完成自定義設(shè)置
#拖動(dòng)
隨著用戶對個(gè)性化的需求升級，很多產(chǎn)品都開放了部分常用功能模塊的自定義設(shè)置。比如網(wǎng)易云音樂 APP 的底部導(dǎo)航欄在設(shè)置環(huán)節(jié)中，便可通過拖動(dòng)完成自定義設(shè)置。
利用壓力結(jié)合滑動(dòng)可以實(shí)現(xiàn)拖動(dòng)手勢交互，對于一些需要用戶謹(jǐn)慎操作的功能比較適合，也能有效防止誤操作。
4.14、拖動(dòng)疊加實(shí)現(xiàn)應(yīng)用建組
#拖動(dòng)
當(dāng)用戶下載的應(yīng)用很多的時(shí)候，通常都會(huì)通過建組管理手機(jī)桌面上的各類應(yīng)用軟件。可以通過拖動(dòng)應(yīng)用疊加到其他應(yīng)用軟件上實(shí)現(xiàn)自動(dòng)建組，建組、進(jìn)組、移出等操作均可通過拖動(dòng)手勢完成，操作非常便利。
拖動(dòng)手勢交互針對一些防止誤操作的功能比較適合，相當(dāng)于二次確認(rèn)的過程。
4.15、拖動(dòng)交互自定義標(biāo)簽導(dǎo)航
#拖動(dòng)
阿里云盤 APP 底部標(biāo)簽欄的設(shè)計(jì)去掉了傳統(tǒng)的圖標(biāo)+文字形式，而直接以純文本形式設(shè)計(jì)功能模塊。采用了左右可滑動(dòng)的交互形式，方便展示更多功能入口。
右側(cè)設(shè)計(jì)了全部功能的入口，點(diǎn)擊之后以圖標(biāo)+文字的形式展示所有功能模塊，圖標(biāo)設(shè)計(jì)也是非常的精致美觀。用戶也可以通過編輯來自定義設(shè)置底部導(dǎo)航的排序，通過拖動(dòng)功能列表的方式實(shí)現(xiàn)自定義設(shè)置。方便根據(jù)用戶自己的使用習(xí)慣來進(jìn)行自定義，提高用戶的使用體驗(yàn)。
五 總結(jié)
手勢交互在 APP 設(shè)計(jì)中的普及帶給用戶更便捷的使用體驗(yàn)，避免過多內(nèi)容的展示所帶來的使用干擾。通過手勢交互前期的用戶習(xí)慣培養(yǎng)，一旦培養(yǎng)完成對于用戶來說是非常友好的操作之旅。
本期主要為大家分享的是單指手勢交互，后續(xù)將會(huì)為大家繼續(xù)延伸更多關(guān)于手勢交互的內(nèi)容，希望本期探索的方向可以帶給你更多的幫助。
原文地址：黑馬家族（公眾號）
作者：黑馬青年
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》探索APP設(shè)計(jì)的手勢交互（上）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專注而深入的界面設(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ù)