10種觸屏手勢(shì),解鎖隱藏交互技巧

1 評(píng)論 531 瀏覽 3 收藏 11 分鐘

觸屏手勢(shì)是移動(dòng)交互的隱形語(yǔ)言,但90%的用戶只用到基礎(chǔ)操作。本文深度拆解10種核心手勢(shì),從單擊的精準(zhǔn)反饋到復(fù)合手勢(shì)的沖突處理,揭示如何通過(guò)手勢(shì)設(shè)計(jì)提升操作效率與沉浸感。產(chǎn)品經(jīng)理與設(shè)計(jì)師可借此優(yōu)化交互邏輯,讓每一次觸摸都成為愉悅體驗(yàn)。

今天就來(lái)盤(pán)點(diǎn)常見(jiàn)的觸摸交互手勢(shì),從基礎(chǔ)操作到復(fù)雜技巧,一個(gè)個(gè)講清楚它們的用法和小細(xì)節(jié)~

01 單擊手勢(shì)

單擊是最常用的手勢(shì),這個(gè)動(dòng)作和按實(shí)體按鈕很像,完全不用學(xué),上手就會(huì)。

比如刷信息流時(shí),點(diǎn)一下卡片就能打開(kāi)全文;看到“發(fā)送”“保存”“關(guān)注”這類按鈕,點(diǎn)一下就執(zhí)行命令。輕點(diǎn)就像手機(jī)操作的“萬(wàn)能鑰匙”,撐起了大部分導(dǎo)航和功能觸發(fā)。

不過(guò)要注意,手機(jī)交互時(shí)需給出清晰的反饋——例如點(diǎn)完按鈕變顏色、出現(xiàn)微動(dòng)效效果,這樣才知道“操作成功了”。

02 雙擊手勢(shì)

雙擊是指在同一個(gè)地方快速點(diǎn)兩下,主要用來(lái)放大或縮小內(nèi)容,特別適合需要查看細(xì)節(jié)的場(chǎng)景。

比如看照片時(shí),雙擊一下就能放大到全屏,再雙擊又能縮回去;看文檔、地圖時(shí),雙擊也能快速聚焦到細(xì)節(jié),例如地圖上雙擊某個(gè)區(qū)域,立刻放大查看街道。

比起用捏合手勢(shì),雙擊更省事,能讓用戶快速沉浸到內(nèi)容里,小屏幕也能輕松看細(xì)節(jié)。

03 長(zhǎng)按手勢(shì)

長(zhǎng)按是按住屏幕上的某個(gè)元素不松手,等一會(huì)兒就會(huì)彈出附加功能或菜單。

比如長(zhǎng)按聊天記錄,會(huì)彈出復(fù)制、刪除、轉(zhuǎn)發(fā)等“隱藏功能”;長(zhǎng)按桌面圖標(biāo),能拖動(dòng)換位置,還能調(diào)出卸載、應(yīng)用信息等選項(xiàng)。

長(zhǎng)按能讓操作更深入,還不打斷當(dāng)前的使用流程,但一定要有即時(shí)反饋——比如按住后圖標(biāo)變亮、手機(jī)輕微振動(dòng),這樣才知道“系統(tǒng)收到指令了”。

04 滾動(dòng)手勢(shì)

滾動(dòng)是在屏幕中上下、左右自由滾動(dòng),用來(lái)瀏覽超出屏幕的內(nèi)容,比如長(zhǎng)文章、朋友圈、圖片庫(kù)。

這是最自然的手勢(shì)操作之一:刷朋友圈時(shí)向上滑,就能看到更多動(dòng)態(tài);看圖片庫(kù)時(shí)左右滑,就能切換照片。滾動(dòng)的速度和流暢度很影響體驗(yàn)——滑得順、不卡頓,才會(huì)讓用戶覺(jué)得好用。

05 滑動(dòng)手勢(shì)

滑動(dòng)是快速在屏幕上移動(dòng)手指,用來(lái)切換頁(yè)面或顯示隱藏功能。動(dòng)作比滾動(dòng)更干脆,通?;幌戮湍芨愣ú僮?。

比如左滑聊天記錄,會(huì)彈出“刪除”“歸檔”;切換APP標(biāo)簽頁(yè)、翻幻燈片時(shí),左右滑一下就切換;從屏幕頂部下滑調(diào)出通知欄,底部上滑調(diào)出控制中心,這些都是滑動(dòng)手勢(shì)。

設(shè)計(jì)時(shí)要注意屏幕上元素的反饋?lái)樞?,比如既想滑?dòng)列表又想滑動(dòng)頁(yè)面,兩者就很容易出現(xiàn)矛盾?;瑒?dòng)時(shí)最好有進(jìn)度提示(比如切換頁(yè)面時(shí)的動(dòng)畫(huà)),讓用戶明確知道滑到什么位置了。

① 滾動(dòng)和滑動(dòng)的區(qū)別?

可能很多人會(huì)混淆這兩個(gè)動(dòng)作,其實(shí)很好分:

滾動(dòng)是“慢慢滑、連續(xù)滑”,比如刷長(zhǎng)文章、逛購(gòu)物APP,一點(diǎn)點(diǎn)瀏覽更多內(nèi)容;

滑動(dòng)是“快速滑一下”,比如切換圖片、刪除消息,動(dòng)作干脆,目的是快速完成單個(gè)操作。

② 什么是平移手勢(shì)?

平移和滾動(dòng)有點(diǎn)像,都是觸摸屏幕后拖動(dòng),但平移更偏向不抬手連續(xù)移動(dòng)。比如在全景圖上拖動(dòng)查看完整畫(huà)面,或者在畫(huà)板上移動(dòng)畫(huà)布,都屬于平移操作。

③什么是輕拂手勢(shì)?

輕拂和滑動(dòng)類似,都是單向動(dòng)作,但響應(yīng)速度更快一點(diǎn)。比如下拉刷新頁(yè)面時(shí),快速往下拉動(dòng)屏幕;從屏幕邊緣快速滑出抽屜菜單,都屬于輕拂。它的特點(diǎn)是“快準(zhǔn)狠”,能瞬間完成操作。

06 預(yù)測(cè)性返回

預(yù)測(cè)性返回是比較有特色的一種手勢(shì),操作很簡(jiǎn)單:從屏幕邊緣向內(nèi)滑,就能返回上一頁(yè)。像底部面板、導(dǎo)航欄、搜索欄這些組件,都支持這個(gè)手勢(shì)。

這種交互體驗(yàn)好的地方在于滑動(dòng)過(guò)程中還沒(méi)松手時(shí),系統(tǒng)會(huì)給出預(yù)覽動(dòng)畫(huà),比如讓你看到上一頁(yè)的樣子,這時(shí)你可以決定繼續(xù)滑返回,還是松手留在當(dāng)前頁(yè)。

現(xiàn)在的智能手機(jī)基本上都沒(méi)有實(shí)體返回鍵了,這個(gè)手勢(shì)可以稱得上是導(dǎo)航“神器”。

07 拖拽手勢(shì)

拖拽是用手指按住屏幕上的元素,然后拖動(dòng)到新位置或者在不同頁(yè)面間移動(dòng)。

比如調(diào)整APP圖標(biāo)的位置、在備忘錄里拖動(dòng)列表項(xiàng)改順序、把文件從一個(gè)文件夾拖到另一個(gè)文件夾,都要用拖拽。

這個(gè)手勢(shì)很有物理感,就像真的在移動(dòng)一個(gè)東西,關(guān)鍵是手機(jī)要準(zhǔn)確響應(yīng)——拖了多少距離、移到哪了,都要清晰反饋,不然容易拖錯(cuò)位置。

08 長(zhǎng)按拖動(dòng)手勢(shì)

長(zhǎng)按拖動(dòng)是“長(zhǎng)按”和“拖拽”的結(jié)合:先長(zhǎng)按某個(gè)內(nèi)容,然后拖動(dòng)到新位置放下。

比如日歷里的事件,長(zhǎng)按后可以拖到其他日期;APP里的卡片,長(zhǎng)按后能拖動(dòng)重新排列順序。這個(gè)手勢(shì)模擬了“拿起東西移動(dòng)位置”的感覺(jué),反饋動(dòng)效需要流暢——從長(zhǎng)按“選中”到拖動(dòng)“移動(dòng)”,再到松手“放下”,整個(gè)過(guò)程要自然。

09 捏合手勢(shì)

捏合是用兩根手指操作的手勢(shì):兩根手指往中間捏,內(nèi)容就縮小;兩根手指往外張開(kāi),內(nèi)容放大。

捏合手勢(shì)在看圖片、地圖、圖表時(shí)特別好用,想看清細(xì)節(jié)就張開(kāi)手指放大,想看整體就捏合縮小。好的捏合手勢(shì)不僅縮放流暢,還能跟著手指的中心移動(dòng) (雙指放大圖片時(shí),圖片會(huì)跟著手指的位置聚焦),沉浸感更強(qiáng),操作起來(lái)也更順手。

什么是旋轉(zhuǎn)?

和捏合類似,用兩根手指觸摸屏幕后,像擰瓶蓋一樣輕輕轉(zhuǎn)動(dòng)手指就能旋轉(zhuǎn)內(nèi)容。比如把倒過(guò)來(lái)的圖片轉(zhuǎn)正,主要用在圖片編輯場(chǎng)景。

10 復(fù)合手勢(shì)

復(fù)合手勢(shì)就是同時(shí)或連續(xù)做多個(gè)手勢(shì),來(lái)完成更復(fù)雜的操作。

比如用地圖時(shí),既能雙指捏合放大縮小,又能同時(shí)拖動(dòng)地圖換位置;編輯圖片時(shí),一邊旋轉(zhuǎn)一邊縮放,不用分開(kāi)操作。這種手勢(shì)能讓用戶更自由地操控內(nèi)容,把多個(gè)命令“打包”成一個(gè)動(dòng)作,效率更高。

但手勢(shì)多了容易沖突,比如又想縮放又想平移,系統(tǒng)不知道該響應(yīng)哪個(gè),所以系統(tǒng)要優(yōu)先處理最重要的操作。

最后說(shuō)兩句

手勢(shì)是“看不見(jiàn)的操作”,它不像按鈕那樣擺在頁(yè)面上,有些手勢(shì)如果沒(méi)有提示用戶,可能很多人根本不知道有這個(gè)功能,反而會(huì)影響使用。

所以核心功能比如刪除、保存、返回,除了手勢(shì),最好還有明確的按鈕或菜單可以操作,避免用戶找不到~

本文由人人都是產(chǎn)品經(jīng)理作者【Clip設(shè)計(jì)夾】,微信公眾號(hào):【Clip設(shè)計(jì)夾】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于 CC0 協(xié)議。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 整理的太全面了!用手機(jī)的時(shí)候從來(lái)沒(méi)思考過(guò)這些

    來(lái)自陜西 回復(fù)