如果，把視覺(jué)比作App的好看皮囊。那么，我認(rèn)為交互就是App的有趣靈魂。

某一天，我突然在想：App的交互方式有哪些？不同的交互方式有什么區(qū)別？每一種交互方式主要的運(yùn)用場(chǎng)景是什么？如何運(yùn)用不同的交互方式創(chuàng)造出好玩又爽的體驗(yàn)？

然而，我并沒(méi)有找到有關(guān)于上述問(wèn)題的系統(tǒng)化的回答，于是就引發(fā)我的好奇與探索。本文便是關(guān)于交互方式我的一些思考與總結(jié)。

1. 點(diǎn)

點(diǎn)（點(diǎn)擊）就是通過(guò)拇指與屏幕的某個(gè)區(qū)域發(fā)生一次短暫接觸的交互方式。點(diǎn)擊產(chǎn)生的結(jié)果包羅萬(wàn)象，包括tab切換、頁(yè)面跳轉(zhuǎn)、按鈕操作等等，類似于在PC上的點(diǎn)擊鼠標(biāo)左鍵的效果。

點(diǎn)擊應(yīng)該是觸屏手機(jī)最簡(jiǎn)單、最重要、最常見(jiàn)的一種交互方式，如果APP只能保留一種交互方式的話，那自然是點(diǎn)擊。甚至可以說(shuō)，單靠點(diǎn)擊就可以完成幾乎全部的操作。

點(diǎn)擊的操作效果包含打開、跳轉(zhuǎn)、確認(rèn)等等。點(diǎn)擊行為如此普遍，我不可能在次一一將其列舉出，甚至我們可以簡(jiǎn)單粗暴地將App的頁(yè)面劃分為可點(diǎn)擊和不可點(diǎn)擊兩個(gè)部分。

這就引出了一個(gè)非常重要的問(wèn)題，即怎么能讓用戶清楚頁(yè)面上哪些是可點(diǎn)擊部分，而哪些不是呢？

我認(rèn)為這個(gè)問(wèn)題是交互設(shè)計(jì)時(shí)需要著重思考的，要是讓用戶在這個(gè)問(wèn)題上犯錯(cuò)就是交互設(shè)計(jì)的失敗。比如：用戶認(rèn)為某個(gè)區(qū)域是可點(diǎn)擊的（其實(shí)是不可點(diǎn)擊的），試了幾次都沒(méi)有效果，用戶會(huì)懷疑是不是手機(jī)卡住了，然后關(guān)閉程序重新進(jìn)入后再試了幾次，依舊沒(méi)有反應(yīng)，最終用戶認(rèn)識(shí)到原來(lái)這是不可點(diǎn)擊的，這樣會(huì)讓用戶覺(jué)得自己很蠢，而事實(shí)上則是設(shè)計(jì)的鍋。

點(diǎn)擊雖然看似簡(jiǎn)單不過(guò)，其實(shí)最簡(jiǎn)單的反而最容易被忽略，一個(gè)好的產(chǎn)品體驗(yàn)往往體現(xiàn)在那些容易被人忽略的細(xì)節(jié)上。大家都知道微信里的對(duì)話內(nèi)容正常情況是不可點(diǎn)擊，但如果對(duì)話內(nèi)容里出現(xiàn)一串連續(xù)的數(shù)字就會(huì)變成可點(diǎn)擊了。為什么呢？

因?yàn)橐淮B續(xù)數(shù)字很可能是一個(gè)電話號(hào)碼，用戶會(huì)存在用這個(gè)電話號(hào)碼來(lái)呼叫、復(fù)制或添加到通訊錄，而將其變成可點(diǎn)擊以區(qū)別于普通文字，就可以非常方便地讓用戶通過(guò)點(diǎn)擊以實(shí)現(xiàn)想要的操作目的。

更進(jìn)一步，你是否注意過(guò)，微信的對(duì)話內(nèi)容里包含多少個(gè)連續(xù)數(shù)字就會(huì)變成可點(diǎn)擊的呢？

如果你能回答7，那么說(shuō)明你是個(gè)有心人。至于為什么這么設(shè)計(jì)，我相信你肯定也猜到了，去查一查各國(guó)電話號(hào)碼中位數(shù)最少是幾位就知道了。

不過(guò)，7這個(gè)答案也并不完全準(zhǔn)確。如果前面帶區(qū)號(hào)（數(shù)字+連字符），只要有連續(xù)6個(gè)數(shù)字就會(huì)變成可點(diǎn)擊的了。如果前面僅有連字符而沒(méi)有數(shù)字，即使6個(gè)連續(xù)數(shù)字也是不可點(diǎn)擊的。之所以有這么復(fù)雜的設(shè)計(jì)，是因?yàn)檫B續(xù)數(shù)字也并不一定就是電話號(hào)碼，設(shè)計(jì)者是盡可能地在可能是號(hào)碼時(shí)方便用戶點(diǎn)擊，同時(shí)也在盡可能地排除掉非號(hào)碼的數(shù)字串帶給用戶不必要的干擾。

微信可點(diǎn)擊的數(shù)字

就這么一個(gè)小小可點(diǎn)擊與非可點(diǎn)擊的交互，居然也包含了微信的設(shè)計(jì)者如此多的思考在里面。在我看來(lái)，看似最為簡(jiǎn)單的點(diǎn)擊，或許是最為復(fù)雜的交互方式。關(guān)鍵在于，在設(shè)計(jì)中融入了多少思考和創(chuàng)新。

2. 按

按（長(zhǎng)按）是通過(guò)拇指與屏幕的某個(gè)區(qū)域進(jìn)行持續(xù)接觸的交互方式。

長(zhǎng)按主要的作用是為了擴(kuò)充某個(gè)區(qū)域操作的多樣性。對(duì)于某個(gè)區(qū)域點(diǎn)擊可以觸發(fā)某一類效果，如果還想對(duì)該需要進(jìn)行其他操作，就可以通過(guò)長(zhǎng)按的方式來(lái)實(shí)現(xiàn)，類似于在PC上點(diǎn)擊鼠標(biāo)右鍵的效果。

舉個(gè)例子：微信公眾號(hào)里的圖文消息，點(diǎn)擊就可以跳轉(zhuǎn)到圖文落地頁(yè)，長(zhǎng)按就會(huì)出現(xiàn)“轉(zhuǎn)發(fā)、收藏、多選”這三個(gè)擴(kuò)展操作選項(xiàng)。

iOS微信公眾號(hào)

長(zhǎng)按操作看起來(lái)和點(diǎn)擊一樣不值一提，其實(shí)細(xì)致研究起來(lái)也會(huì)發(fā)現(xiàn)內(nèi)有乾坤，能巧妙運(yùn)用長(zhǎng)按這一交互方式也能給用戶體驗(yàn)帶來(lái)十分神奇的效果。

一般來(lái)說(shuō)，長(zhǎng)按之后會(huì)出現(xiàn)多個(gè)操作選項(xiàng)，讓用戶再次點(diǎn)擊確認(rèn)。但是在一些特定場(chǎng)景下，用戶長(zhǎng)按的意圖非常明顯地就指向某一個(gè)操作選項(xiàng)，那么在用戶長(zhǎng)按后就可以跳過(guò)用戶確認(rèn)，直接幫助用戶完成這一操作，這樣就縮短了操作路徑，提升了用戶體驗(yàn)。

比如在微信群聊時(shí)，長(zhǎng)按某個(gè)群成員的頭像，就會(huì)在輸入框中自動(dòng)輸入【@XXX】從而達(dá)到快速@某人的效果，這就是一個(gè)典型的例子。這個(gè)操作比用戶自己輸入@，然后再去幾百人的群里找那個(gè)要@的人便捷了不止一點(diǎn)點(diǎn)，而多數(shù)情況下我們想要@的那個(gè)人往往就是近期在群里發(fā)過(guò)消息的人。

再比如，通常我們使用的相機(jī)App，拍照和攝像是獨(dú)立的，需要通過(guò)點(diǎn)擊來(lái)切換。然而，在微信的拍攝功能中，就將拍照和攝像完美地融合在了一個(gè)按鈕中。其實(shí)拍照和攝像本質(zhì)上不都一樣，只不過(guò)一個(gè)是瞬間另一個(gè)是長(zhǎng)時(shí)間罷了。而這恰恰不正是對(duì)應(yīng)著點(diǎn)擊和長(zhǎng)按這兩個(gè)交互方式嗎？

這樣別出心裁的交互設(shè)計(jì)，通過(guò)一個(gè)按鈕就將兩個(gè)操作行為巧妙結(jié)合在了一起，減少了用戶的操作步驟，實(shí)在是妙！

微信內(nèi)相機(jī)VS手機(jī)自帶相機(jī)

當(dāng)然，這不單單是長(zhǎng)按這一個(gè)交互方式的妙處，而是點(diǎn)擊和長(zhǎng)按這兩個(gè)交互方式的一種巧妙結(jié)合。沒(méi)有人規(guī)定每一種交互方式必須單獨(dú)使用，恰恰我倒覺(jué)得，利用多種交互方式進(jìn)行有效組合是更加可行且有效的方法。

除了剛剛提到的在拍攝功能上對(duì)長(zhǎng)按和點(diǎn)擊的結(jié)合使用，微信在語(yǔ)音輸入的交互設(shè)計(jì)時(shí)，將長(zhǎng)按與另一種交互方式進(jìn)行結(jié)合的設(shè)計(jì)更是讓人拍案叫絕，這個(gè)留在下文再提。

3. 擊

擊（雙擊）就是通過(guò)拇指與屏幕的某個(gè)區(qū)域，在一段時(shí)間內(nèi)連續(xù)發(fā)生2次短暫接觸的交互方式。也就是連續(xù)的兩次點(diǎn)擊，和PC上雙擊鼠標(biāo)左鍵的操作類似。

雙擊操作的效果在某種程度上與長(zhǎng)按類似，也起到擴(kuò)充某個(gè)區(qū)域操作的作用。在一些特定場(chǎng)景中，甚至雙擊和長(zhǎng)按的操作效果是一樣的。

雙擊操作最常見(jiàn)的操作效果是放大，無(wú)論是查看圖片或者是地圖，都可以通過(guò)雙擊來(lái)放大。再比如雙擊微信的聊天記錄就可以放大文字進(jìn)行全屏查看，也是起到了放大的效果。

當(dāng)然，雙擊不僅僅是放大！如果能巧妙地利用雙擊這個(gè)交互方式，在特定的場(chǎng)景下也是威力無(wú)窮的。比如：雙擊微信頂部，就可以快速返回到最上方的頁(yè)面；再比如：雙擊微信未讀消息的紅色提醒，就可以快速跳到下一個(gè)未消息。這幾個(gè)雙擊操作相對(duì)而言都比較隱蔽，但是在特定條件下用起來(lái)可真是少花不少力氣。用過(guò)的人，都知道其中之妙。

4. 滑

滑（滑動(dòng)）是就是使用拇指在屏幕上朝著特定的方向，進(jìn)行一次性摩擦的交互方式。對(duì)應(yīng)到PC上的操作，就類似于滑動(dòng)鼠標(biāo)中間的滑輪。不過(guò)，在觸屏上使用手指滑動(dòng)相比于使用鼠標(biāo)滑動(dòng)輪要更方便和靈活。

根據(jù)滑動(dòng)的方向不同，滑動(dòng)包括上滑、下滑、左滑、右滑。對(duì)于滑動(dòng)名稱可能存在兩種理解，比如左滑是指從左往右滑還是從右往左滑？我們可以從上滑考慮，通常的理解就是從下往上滑，那么類似的，我們也認(rèn)為左滑就是從右往左滑。

由于鼠標(biāo)的滑輪只能在一個(gè)方向上滾動(dòng)，因此也只能對(duì)應(yīng)一個(gè)方向上的操作效果，即通過(guò)前后滑動(dòng)滑輪實(shí)現(xiàn)上下滑動(dòng)或左右滑動(dòng)（通常為上下滑動(dòng)）。因而，使用鼠標(biāo)在PC操作，就會(huì)遇到一個(gè)比較麻煩的問(wèn)題，就是需要橫向操作頁(yè)面的時(shí)候使用滾輪是不夠的，還得借助頁(yè)面上的橫向滾動(dòng)條。使用滾動(dòng)條是一個(gè)不那么高效的交互方式，需要先將鼠標(biāo)位置移動(dòng)滾動(dòng)條上面（通常區(qū)域比較?。┤缓蟛拍苓M(jìn)行操作。

而到了觸屏設(shè)備上，使用手指滑動(dòng)就變得更加靈活了，上下左右各個(gè)方向都可以進(jìn)行滑動(dòng)。并且，滑動(dòng)的操作效果也不單單局限在瀏覽頁(yè)面上，滑動(dòng)可以產(chǎn)生諸多便捷的交互操作。

滑動(dòng)的第一個(gè)操作效果，和長(zhǎng)按、雙擊類似，也具有擴(kuò)展更多操作的作用，這一操作方式在iOS的設(shè)備中更加常見(jiàn)。比如iOS微信聊天列表通過(guò)左滑，就可以出現(xiàn)“標(biāo)為未讀”和“刪除”兩個(gè)擴(kuò)展功能。而在安卓版的微信上實(shí)現(xiàn)同樣效果的操作則是長(zhǎng)按，只是不同操作系統(tǒng)中的操作習(xí)慣不一樣，從而造成了不一樣的交互方式。在這類場(chǎng)景中，可以認(rèn)為左滑和長(zhǎng)按二者是可以互相替代的。

iOS微信左滑VS安卓微信長(zhǎng)按

滑動(dòng)的第二個(gè)操作效果是，可以實(shí)現(xiàn)快速切換。最典型的就是在全屏查看照片的場(chǎng)景，通過(guò)左右滑動(dòng)可以快速切換到上一張或下一張照片。還有像看小說(shuō)時(shí)，也可以通過(guò)左右滑動(dòng)快速切換到上一頁(yè)或下一頁(yè)，從而達(dá)到翻頁(yè)的效果。

當(dāng)然，滑動(dòng)也并非一定是全屏的切換，也可以作為“類全屏”的切換，即屏幕中少部分保持不變，其中的主體頁(yè)面切換。典型的例子如微信讀書的首頁(yè)，通過(guò)左右滑動(dòng)可以在不同的海報(bào)之間進(jìn)行切換。還有探探在切換不同的社交對(duì)象照片時(shí)，也同樣用到了滑動(dòng)（右滑喜歡，左滑不喜歡）。

微信讀書&探探

滑動(dòng)的第三個(gè)操作效果是頁(yè)面跳轉(zhuǎn)，最為常見(jiàn)的就是通過(guò)右滑返回上一頁(yè)面的例子。當(dāng)然這里有一種比較特殊的滑動(dòng)操作，邊緣滑動(dòng)，即必須從屏幕的邊緣開始的滑動(dòng)操作。有的App（比如微信）就需要邊緣滑動(dòng)才能返回，有的App（比如今日頭條）直接在頁(yè)面任意位置右滑就可以返回上一頁(yè)面。

通過(guò)右滑返回相比正常的返回操作（點(diǎn)擊左上角或左下上角的按鈕），是極其便捷的。通過(guò)手指找到處在特定位置的返回鍵是需要一定判斷的，而右滑從屏幕側(cè)邊的任意位置都是可以執(zhí)行的，是一種更加“傻瓜式”的交互方式。況且，現(xiàn)在手機(jī)屏幕越來(lái)越大，對(duì)于使用右手操作的人要使用大拇指跨過(guò)6點(diǎn)幾英寸的屏幕去點(diǎn)擊左上角的返回按鈕，著實(shí)是在“為難”用戶了。

滑動(dòng)這個(gè)交互方式的靈活使用，在提高交互體驗(yàn)上是能發(fā)揮巨大作用的。比如抖音在播放視頻時(shí)，就可以通過(guò)右滑快速進(jìn)入搜索頁(yè)面，通過(guò)左滑快速進(jìn)入當(dāng)前用戶的個(gè)人主頁(yè)。網(wǎng)易新聞的文章頁(yè)面，可以通過(guò)左滑快速進(jìn)入當(dāng)前文章的跟帖頁(yè)。這些便捷操作的共同之處在于，找到在某個(gè)頁(yè)面下用戶最有可能希望跳轉(zhuǎn)的頁(yè)面，通過(guò)左右滑動(dòng)幫助用戶快速實(shí)現(xiàn)操作意圖！

抖音右滑&左滑

網(wǎng)易新聞

滑動(dòng)第四個(gè)操作效果是關(guān)閉。典型的例子就是在多任務(wù)頁(yè)上，無(wú)論安卓還是iOS都可以在打開多個(gè)APP時(shí)進(jìn)入多任務(wù)頁(yè)，通過(guò)上滑就可以關(guān)閉某個(gè)特定APP。當(dāng)然，在App設(shè)計(jì)里，很多情況會(huì)讓用戶全屏查看照片或播放視頻，這時(shí)候左滑右滑切換的效果我們?cè)谇懊嬉呀?jīng)說(shuō)了，而下滑就往往就可以關(guān)閉全屏、返回到上一頁(yè)面，是不是很方便？

上面說(shuō)的這些，都是單次滑動(dòng)的效果，還有一類是可重復(fù)的滑動(dòng)操作，即可以向同一方向連續(xù)進(jìn)行多次滑動(dòng)操作。很自然的，我們就能想到上下滑動(dòng)查看頁(yè)面內(nèi)更多內(nèi)容的場(chǎng)景，當(dāng)下十分流行的feed，就是支持多次（甚至可以說(shuō)無(wú)限）不斷上滑進(jìn)行內(nèi)容加載的典型例子。

這種無(wú)限上滑的操作，還可以用一個(gè)更簡(jiǎn)單更通俗的字來(lái)形容：刷。刷微博、刷頭條、刷抖音，這是萬(wàn)物可“刷”的時(shí)代。

除了上下“刷”，左右“刷”也可以的，比如我們剛剛提到的多任務(wù)切換頁(yè)，通過(guò)左右滑動(dòng)就可以快速瀏覽當(dāng)前打開的全部App。不過(guò)在App內(nèi)的這樣的交互設(shè)計(jì)并不常見(jiàn)，我能想到的僅是相冊(cè)App里快速查看照片時(shí)有這種“左右刷”的交互方式。如果有某個(gè)App在業(yè)務(wù)上比較貼合，不妨考慮將這一交互方式利用起來(lái)，說(shuō)不定能起到意料之外的效果。

好了，關(guān)于滑動(dòng)已經(jīng)聊了夠多了，就不再展開了，不過(guò)還有一個(gè)我們?cè)谇拔牧粝碌囊粋€(gè)坑這里需要補(bǔ)上。我們?cè)谖闹兴e的很多例子，大多是僅僅運(yùn)用到某一種交互方式，我并不希望給大家造成這樣的錯(cuò)覺(jué)，再次強(qiáng)調(diào)一下多種交互方式結(jié)合的神奇威力。這里我們就要聊聊之前提到微信發(fā)語(yǔ)言的例子，使用微信發(fā)送語(yǔ)音，就是完美結(jié)合了上滑與長(zhǎng)按這兩種交互方式。

一般來(lái)說(shuō)發(fā)語(yǔ)音的交互流程應(yīng)該是這樣的：點(diǎn)擊開始錄音——確認(rèn)結(jié)束錄音——發(fā)送語(yǔ)音。

微信用一個(gè)按鈕做到了，將整個(gè)過(guò)程變成只有一個(gè)長(zhǎng)按操作，長(zhǎng)按開始錄音——松手結(jié)束并發(fā)送。更為巧妙的是，如果錄音出現(xiàn)問(wèn)題或中途不想發(fā)了，在長(zhǎng)按的過(guò)程中上滑就可以取消發(fā)送。通過(guò)將長(zhǎng)按和上滑這兩個(gè)交互方式巧妙地進(jìn)行組合，語(yǔ)音發(fā)送的整個(gè)操作過(guò)程就變得太方便，太連貫，太自然了。

微信發(fā)語(yǔ)音操作

5. 拉

拉（拉動(dòng)）就是使用拇指在屏幕上朝著特定的方向，持續(xù)摩擦一段距離的交互方式。拉的行為和滑很像，只不過(guò)持續(xù)的時(shí)間更久一些，拉動(dòng)就很難和PC上的鼠標(biāo)的簡(jiǎn)單操作對(duì)應(yīng)起來(lái)了。我們剛剛提到的在PC上使用鼠標(biāo)拖動(dòng)滾動(dòng)條查看橫向結(jié)果，倒是和拉動(dòng)有點(diǎn)類似。

說(shuō)到滾動(dòng)條，這也是拉動(dòng)在觸屏手機(jī)上的一個(gè)操作效果，比如查看比較長(zhǎng)的頁(yè)面，就可以通過(guò)拉動(dòng)頁(yè)面右側(cè)的滾動(dòng)條實(shí)現(xiàn)頁(yè)面的快速瀏覽。

得到App文稿頁(yè)

與滑動(dòng)類似，拉動(dòng)的也有操作方向，上拉或下拉，通常都是下拉。下拉的操作效果有很多，下拉刷新是最常見(jiàn)的一種。上文我們?cè)谟懻撋匣臅r(shí)候，提到了feed的，獲取歷史內(nèi)容就是通過(guò)不斷上滑來(lái)操作，而如果希望獲取最近內(nèi)容，就可以通過(guò)下拉來(lái)進(jìn)行刷新，重新請(qǐng)求一次最新的數(shù)據(jù)。

今日頭條

近幾年來(lái)，下拉還被賦予了一個(gè)更加神奇的作用，那就是拓展首頁(yè)。無(wú)論是為了便于用戶操作，還是提高不同功能的使用率，大多數(shù)APP都會(huì)將首頁(yè)充分利用起來(lái)，使得首頁(yè)已經(jīng)擁擠不堪，比如淘寶。下拉這個(gè)方式神奇地又為首頁(yè)創(chuàng)造了一個(gè)額外的空間，比如淘寶通過(guò)下拉就可以進(jìn)入淘寶二樓。

淘寶

此外，微信推出的重量級(jí)功能小程序，也是通過(guò)下拉首頁(yè)就可以進(jìn)入，操作起來(lái)比較方便。雖然這不是微信的發(fā)明，但是微信這么用確實(shí)是把下拉這個(gè)交互形式得到了巧妙的運(yùn)用。

后繼者，像支付寶和百度APP在推出自家的小程序后也都仿造微信使用了同樣的入口。不過(guò)由于百度APP首頁(yè)的feed的存在，剛剛我們提到了下拉刷新，這樣同一個(gè)頁(yè)面的下拉行為就能產(chǎn)生兩個(gè)操作結(jié)果，具體會(huì)產(chǎn)生哪一種操作結(jié)果，就看你拉的距離有多長(zhǎng)。這樣的交互設(shè)計(jì)，個(gè)人以為是容易給用戶造成困擾的，不值得推薦。

百度App下拉的2種操作效果

拉動(dòng)的操作效果除了開啟，也可以是關(guān)閉。比如：微信讀書在閱讀界面如果想要退出，就可以使用上拉這一操作快速完成操作。不過(guò)，雖然僅僅是上拉這一個(gè)簡(jiǎn)單的交互，微信讀書在細(xì)節(jié)設(shè)計(jì)上也做到了無(wú)微不至。

在我們上拉的過(guò)程中，頁(yè)面底部的圖形和文案會(huì)一直產(chǎn)生變化：圖形從最開始是一本打開的書漸漸合起來(lái)，逐漸合成只有一根豎線，然后變成向上的箭頭，最后變成向下的箭頭，與此同時(shí)文案由之前的“上拉退出閱讀”變成“松手退出閱讀”。

在這個(gè)過(guò)程的前半段，書合上的動(dòng)效是比較形象的，用戶很容易理解，但我認(rèn)為這屬于錦上添花，即使去掉也未嘗不可。然而，在箭頭由上變成向下，文案由“上拉”變成“松手”的這個(gè)變化卻是關(guān)鍵所在。

因?yàn)檫@是一個(gè)臨界點(diǎn)，給了用戶一個(gè)非常明確的操作提示。如果上拉的力度不夠，就會(huì)重新返回原來(lái)的閱讀界面，不會(huì)退出，用戶怎么知道該上拉多少呢？

這個(gè)箭頭和文案的變化就是關(guān)鍵的臨界點(diǎn)。這些看似簡(jiǎn)單的交互提示避免了用戶犯錯(cuò)，其實(shí)是相當(dāng)友好的交互設(shè)計(jì)。

微信讀書

我們剛剛已經(jīng)說(shuō)過(guò)：想用戶所想，幫助用戶快速實(shí)現(xiàn)，是運(yùn)用這些交互方式創(chuàng)造便捷交互體驗(yàn)的不二法門。比如在全屏觀看視頻的時(shí)候，用戶最有可能需要進(jìn)行的操作就是快進(jìn)/快退、音量增加/減小，運(yùn)用拉動(dòng)就可以巧妙地解決，上下左右四個(gè)方向的拉動(dòng)恰好對(duì)應(yīng)上述4項(xiàng)最常用的操作意圖。當(dāng)然，我們看到像愛(ài)奇藝等視頻App也確實(shí)都這么設(shè)計(jì)的。

下拉還能有很多神奇的玩法，只要遵循幫助用戶快速達(dá)成操作意圖的原則，就能創(chuàng)造出非常便捷的交互體驗(yàn)。

下面再舉兩例：

微信讀書在閱讀界面，下拉就可以添加書簽，這個(gè)創(chuàng)意真是不錯(cuò)！

微信讀書

QQ閱讀更是把下拉這一操作體驗(yàn)直接從線下搬到了線上，采用燈線下拉的方式來(lái)切換夜間模式，這樣既操作便捷，又形象有趣（關(guān)燈開燈和白天黑夜天然就具有對(duì)應(yīng)的關(guān)系）。

QQ閱讀

6. 拖

拖（拖動(dòng)）就是使用拇指在屏幕上摩擦，以改變某一元素相對(duì)位置的交互方式。對(duì)應(yīng)到PC上的鼠標(biāo)操作，類似于將鼠標(biāo)置于某原始上方再長(zhǎng)按鼠標(biāo)左鍵，然后通過(guò)移動(dòng)鼠標(biāo)將其拖動(dòng)到目標(biāo)位置。

在PC上使用拖動(dòng)的一個(gè)典型場(chǎng)景即整理文件，改變文件夾的位置，或?qū)⒁粋€(gè)文件放入某個(gè)特定文件夾都可以使用拖動(dòng)實(shí)現(xiàn)。在觸屏設(shè)備上，也有類似的應(yīng)用場(chǎng)景，也可以通過(guò)拖動(dòng)改變桌面上APP圖標(biāo)的位置，也可以將某個(gè)APP拖入一個(gè)APP文件夾中。

拖動(dòng)最顯而易見(jiàn)的操作效果就是改變位置，也就是將目標(biāo)元素快速移動(dòng)到我們希望的位置上。很自然的，在地圖相關(guān)應(yīng)用中，就會(huì)涉及到這一交互方式，比如使用滴滴叫車，就可以拖動(dòng)地圖將定位點(diǎn)快速移動(dòng)到我們想要上車的位置上。不過(guò)，這里我們會(huì)發(fā)現(xiàn)其實(shí)拖動(dòng)的不是定位針，而是地圖。

滴滴出行

對(duì)于圖片編輯的場(chǎng)景，我們有時(shí)需要在圖片上增加新元素，并且還需要讓這個(gè)新增的元素到達(dá)我們指定的位置。這時(shí)候又利用到拖動(dòng)這一交互方式了，比如在微信的圖片編輯狀態(tài)下，可以拖動(dòng)該元素將其放置到我們希望的位置上。

除了改變位置，拖動(dòng)還可以達(dá)到刪除的效果。還是剛剛微信圖片編輯的場(chǎng)景，將新增的元素拖動(dòng)到底部就可以刪除該元素，這和PC上將文件拖到垃圾桶里刪除的操作非常類似。

微信圖片編輯拖動(dòng)改變位置和刪除&小程序拖動(dòng)刪除

拖動(dòng)的第三個(gè)操作效果是排序。在某些APP中，存在多個(gè)有序元素，需要用戶自行確定元素的前后順序時(shí)，這時(shí)候拖動(dòng)又能派上大用場(chǎng)了。比如支付寶首頁(yè)的應(yīng)用管理，就可以使用拖動(dòng)來(lái)調(diào)整排序。

支付寶

拖動(dòng)不只這么簡(jiǎn)單，會(huì)玩的人總能玩出新花樣。安卓手機(jī)的需要用戶定期清理手機(jī)的內(nèi)存，這是一個(gè)很無(wú)趣的動(dòng)作，但是360安全衛(wèi)士就巧妙將這一行為設(shè)計(jì)成一個(gè)很有趣的方式來(lái)完成。用戶可以拖動(dòng)小人到屏幕底部橡皮筋上進(jìn)行彈射，將清理內(nèi)存變成一個(gè)類似于游戲的體驗(yàn)，原本無(wú)聊的機(jī)械式操作反而變得很有趣。

至少我本人以前手機(jī)裝360時(shí)，閑的無(wú)聊的時(shí)候就會(huì)多彈射幾次，可見(jiàn)這一設(shè)計(jì)之妙，而這核心的交互方式，就是拖動(dòng)。

7. 抹

抹（涂抹）就是使用拇指，在屏幕上無(wú)特定方向性地持續(xù)來(lái)回摩擦的交互方式。對(duì)應(yīng)到PC上的鼠標(biāo)操作，類似于長(zhǎng)按鼠標(biāo)左鍵任意移動(dòng)鼠標(biāo)的效果。

涂抹的主要效果有兩類：

• 一類是在屏幕原有的元素上根據(jù)摩擦的操作路徑增加元素，可以稱之為涂；
• 另一類是相反的效果，可以稱為抹，即根據(jù)摩擦的操作路徑去掉屏幕中相應(yīng)元素。

涂，比較典型的例子如手寫輸入，在屏幕上通過(guò)涂抹留下的痕跡輸入形成相應(yīng)的字符。再比如：現(xiàn)在很多人都會(huì)用手機(jī)對(duì)圖片進(jìn)行簡(jiǎn)單編輯，其中對(duì)圖片進(jìn)行模糊處理，使用的就是涂抹交互，被涂抹的區(qū)域就會(huì)變得模糊。本文中使用到的一些微信截圖，為了隱藏掉一些與內(nèi)容無(wú)關(guān)的信息，就是通過(guò)微信編輯圖片使用涂抹實(shí)現(xiàn)的。

抹，最常見(jiàn)的例子是在手機(jī)屏幕上模擬現(xiàn)實(shí)中刮卡動(dòng)作，很多抽獎(jiǎng)?lì)惖幕顒?dòng)都需要用戶在特定區(qū)別進(jìn)行涂抹，才能看見(jiàn)被遮擋的內(nèi)容，涂抹到一定程度后就會(huì)展現(xiàn)全部信息。

友寶微信頁(yè)

其實(shí)，就目前而言涂抹的應(yīng)用場(chǎng)景并不是很多。不過(guò)，在特定的場(chǎng)景中如果能發(fā)揮創(chuàng)造性，也是可以讓涂抹這這一交互方式發(fā)揮出更大價(jià)值的。比如：在手機(jī)密碼中，就有一種手勢(shì)密碼，通過(guò)涂抹在9個(gè)點(diǎn)之間串聯(lián)出特定的軌跡，這比輸入字符密碼在操作上更加便捷。這一場(chǎng)景就是對(duì)涂抹操作很巧妙的利用。因此，打開腦洞，發(fā)揮想象吧。

手勢(shì)密碼

8. 拍

拍（拍攝）就是使用攝像頭獲取影像并存儲(chǔ)在手機(jī)中的交互方式。

拍攝就包含了拍照和攝像兩個(gè)效果。拍照即保留一瞬間的畫面，得到一張圖片；而攝像則是保留下一段時(shí)間的畫面，得到一個(gè)視頻。

當(dāng)然，拍照和攝像并非對(duì)立，也存在“中間態(tài)”。蘋果手機(jī)的LIVE模式拍照，雖然得到的是一張圖片，但也包括之前短暫的動(dòng)態(tài)圖。另外，在全景模式下，就是使用錄像的方式來(lái)得到一張長(zhǎng)的全景圖。

而這不恰恰就是創(chuàng)新的最好的例子嗎？將看似無(wú)關(guān)甚至是對(duì)立的東西進(jìn)行結(jié)合，或許就能創(chuàng)造出一個(gè)全新的事物。

拍攝操作最初僅僅是為了記錄下特定的畫面或場(chǎng)景，不過(guò)拍照能力也越來(lái)越多被作為一種靈活的輸入方式，即通過(guò)拍照來(lái)快速將畫面中的文字轉(zhuǎn)化成電子文本。這被運(yùn)用在了很多場(chǎng)景中，比如拍照翻譯，拍照搜題等。

還有一個(gè)特定場(chǎng)景，這一交互方式也能大大提升輸入便捷性，即拍照識(shí)別銀行卡號(hào)，省去了用戶一個(gè)一個(gè)數(shù)字地進(jìn)行輸入的麻煩。

另外，由于圖片識(shí)別能力不斷加強(qiáng)，拍照也有了新的應(yīng)用場(chǎng)景。比如：拍照識(shí)別植物、動(dòng)物等，或者通過(guò)拍照來(lái)以圖搜圖找到類似的圖片等等，這些都給用戶帶來(lái)了極大的便捷。

百度App拍照識(shí)別&云閃付拍卡識(shí)號(hào)

9. 掃

掃（掃描）就是使用攝像頭獲取圖像，并從中讀取信息的交互方式。

其實(shí)掃和拍在很大程度上是類似的，細(xì)究的話區(qū)別在于操作過(guò)程是否點(diǎn)擊了拍攝按鈕。通常而言，掃是一個(gè)自動(dòng)的過(guò)程，只要攝像頭捕捉到了特定的信息就完成操作，而拍則需要用戶自己通過(guò)點(diǎn)擊拍攝按鈕來(lái)決定哪部分內(nèi)容應(yīng)該被記錄下來(lái)。

應(yīng)該說(shuō)對(duì)于掃這個(gè)交互方式在中國(guó)如此普及，微信的“掃一掃”功不可沒(méi)。與之相伴“飛入尋常百姓家”的還有二維碼，當(dāng)下的我們生活在一個(gè)被二維碼包圍的世界。

掃描的對(duì)象主要包括二維碼和條碼，當(dāng)然，還有微信針對(duì)小程序新增的小程序碼，抖音有自己的抖音碼等等。

隨著掃碼逐漸被大眾接受，掃碼不僅是掃碼關(guān)注，掃碼支付也慢慢興盛起來(lái)?，F(xiàn)如今，掃碼支付已經(jīng)成了線下消費(fèi)的主要支付方式，甚至偏遠(yuǎn)農(nóng)村的小商販也立著一個(gè)微信支付的牌子。

掃主要用于線上和線下互動(dòng)的場(chǎng)景中，運(yùn)用的場(chǎng)景已經(jīng)十分普遍了。不過(guò)，聰明人還是有的玩的。

這里說(shuō)一個(gè)“移花接木”的玩法。微信“掃一掃”里的第三個(gè)功能是掃描街景，通過(guò)掃描周圍環(huán)境就可以知道你所在的位置然后進(jìn)入街景地圖，可是事實(shí)上這里的掃描是假操作，實(shí)際上是通過(guò)GPS獲取用戶的具體位置的，不過(guò)套上一個(gè)掃描的外殼，進(jìn)入場(chǎng)景顯得更加自然，也是起到了不錯(cuò)的效果。

上述所提到的掃描都是使用后置攝像頭，當(dāng)然掃描也可以使用前置攝像頭。而使用前置攝像頭掃描的對(duì)象就不是二維碼，而是人臉了。通過(guò)掃描人臉可以進(jìn)行活體驗(yàn)證，以核驗(yàn)身份，而這有個(gè)更時(shí)髦的叫法：刷臉。刷臉支付、刷臉閘機(jī)等等交互場(chǎng)景已經(jīng)逐漸融入我們的日常生活。

支付寶

我們的智能設(shè)備除了支持掃描，還可以“被掃描”，即在手機(jī)上生成二維碼，讓其他設(shè)備來(lái)掃碼。先說(shuō)一個(gè)大家都比較熟悉的場(chǎng)景——微信掃碼加好友。加好友的雙方，一方需要出示自己的二維碼，另一方才能進(jìn)行掃描。

當(dāng)然這一交互方式也并不僅限于加好友。線下支付場(chǎng)景中對(duì)于一些小商販?zhǔn)穷櫩蛼呱碳业亩S碼支付，而像超市等大的店鋪更多是商家掃描顧客手機(jī)上的二維碼進(jìn)行支付。相比于掃碼支付，“被掃碼支付”時(shí)用戶只需出示手機(jī)二維碼，連輸入付款金額的操作都省了，更加便捷了。類似于上面提到的刷臉，這個(gè)就是“刷碼”了。

“刷碼”還被應(yīng)用在其他很多支付場(chǎng)景中，比如乘坐公交和地鐵，以往需要辦理和攜帶一張實(shí)體公交卡，現(xiàn)在直接用手機(jī)生成二維碼刷一下就OK啦。

“刷”是掃的延伸，是“被掃”。充分結(jié)合線下場(chǎng)景，利用“刷”這一交互方式，一定能夠創(chuàng)造出更多新奇而便捷的交互體驗(yàn)。

10. 搖

搖（搖晃）就是手握手機(jī)快速抖動(dòng)手機(jī)機(jī)身的交互方式。

和掃一樣，搖的普及也受益于微信。通過(guò)微信的搖一搖功能，特別是和2015年春晚合作，讓大眾都熟悉了這一交互方式。

微信搖一搖功能包括人、音樂(lè)、電視三個(gè)選項(xiàng)，如果選擇“搖人”就是匹配同時(shí)使用搖一搖功能的人，事實(shí)上這是一個(gè)陌生人交友的入口；選擇音樂(lè)或電視進(jìn)行搖一搖，則是在搖的同時(shí)收集周圍的聲音信息，從而識(shí)別出對(duì)應(yīng)的音樂(lè)或電視內(nèi)容。

由此觀之，搖其實(shí)是一個(gè)啟動(dòng)信號(hào)，在特定場(chǎng)景下告訴手機(jī)開始執(zhí)行相應(yīng)的操作（匹配人或匹配聲音）。

說(shuō)句題外話，為啥微信搖一搖的圖標(biāo)是一個(gè)左撇子？畢竟使用右手操作的人應(yīng)該更多，畫個(gè)右手不是更便于用戶理解嗎？

微信搖一搖

個(gè)人以為，搖是屬于形式大于內(nèi)容的交互方式。就本質(zhì)而言，搖并沒(méi)有傳達(dá)更多的信息，而僅僅是作為一個(gè)觸發(fā)方式。

比如，微信搖一搖里匹配人，完全可以用點(diǎn)擊代替，換成同一時(shí)間點(diǎn)擊該按鈕的人進(jìn)行匹配，也未嘗不可，不過(guò)有了搖一搖的操作就顯得更有儀式感，從這層面上說(shuō)，搖一搖還有一定的必要性。然而，搜音樂(lè)或電視使用搖一搖就顯得有點(diǎn)不和諧。因?yàn)閾u一搖動(dòng)作幅度較大，容易被周圍的人看見(jiàn)，特別是在人群中就太過(guò)顯眼了。

其中的區(qū)別在于，場(chǎng)景不同。搜人的場(chǎng)景，需求出發(fā)點(diǎn)是陌生人交友，正常情況應(yīng)該是獨(dú)自一人，通過(guò)搖手機(jī)是合適并且讓人更有神秘感。而對(duì)于搜音樂(lè)的場(chǎng)景，則是因?yàn)槁牭揭皇缀寐牭那樱ǘ鄶?shù)情況是在公開場(chǎng)合），想要知道歌曲名稱，在公開場(chǎng)合做出夸張的搖一搖的動(dòng)作就顯得不太和諧。

并且，有時(shí)候恰恰是用戶想要“作弊”知道歌曲名稱才會(huì)想要借助微信，如果用搖一搖豈不是“此地?zé)o銀三百兩”？

這種“浮夸”的操作風(fēng)格既是搖一搖最大的劣勢(shì)，也是最大的優(yōu)勢(shì)。當(dāng)然，在特定場(chǎng)景下，搖一搖的這個(gè)劣勢(shì)也是它最大的優(yōu)勢(shì)。比如：在和春晚合作發(fā)紅包就是用到了“搖一搖”，在熱鬧的除夕夜，使勁的搖晃手機(jī)吧，沒(méi)有人會(huì)覺(jué)得你另類，說(shuō)不定周圍的長(zhǎng)輩也被你奇怪的行為吸引而加入搶紅包隊(duì)列。自然，這是“搖一搖”大展身手的機(jī)會(huì)。

無(wú)論如何，搖一搖雖然曾經(jīng)也火過(guò)一把，但終究沒(méi)能像“掃一掃”一樣被廣泛而持久地使用。

不過(guò)，作為一種常見(jiàn)的交互方式，其也具有不可替代的價(jià)值，關(guān)鍵還是那句話，需要我們巧妙地加以利用。比如：在高德地圖中，就利用搖一搖的方式和語(yǔ)音助手結(jié)合起來(lái)，通過(guò)它來(lái)喚醒語(yǔ)音，在開車過(guò)程中主要精力集中于車況，在小小的手機(jī)屏幕上的任何交互方式都比不上搖一搖這個(gè)動(dòng)作更來(lái)得簡(jiǎn)單。

高德地圖

總結(jié)

不管哪種交互方式，本質(zhì)上都是用戶借助手機(jī)的硬件設(shè)備實(shí)現(xiàn)與智能手機(jī)的“溝通”。而這之中，手機(jī)屏幕毫無(wú)疑問(wèn)是智能機(jī)進(jìn)行交互最為重要的載體，沒(méi)有之一。這也是智能手機(jī)有別于傳統(tǒng)手機(jī)最明顯的特點(diǎn)。非智能機(jī)依賴的交互硬件更多的是鍵盤或觸控筆等。

其次，像拍和掃是基于攝像頭實(shí)現(xiàn)的交互方式。搖一搖則是依賴手機(jī)內(nèi)部的某類傳感器（陀螺儀）。當(dāng)然，硬件設(shè)備還有很多，如指紋識(shí)別、NFC、磁場(chǎng)傳感器等?；诓煌挠布O(shè)備還會(huì)有其他更多的交互方式。

本文中所探討的十種常見(jiàn)的交互方式總結(jié)如下：

很顯然，交互方式并非僅僅上述所列的這幾種。不過(guò)，我并不打算也不可能將每一種交互方式一一列全。舉一反三，我相信在詳細(xì)探討了這些交互方式之后已經(jīng)足夠了。

其實(shí)，系統(tǒng)地梳理和總結(jié)不同類型的交互方式只是一方面，本文還有一個(gè)更為核心的問(wèn)題需要回答：如何讓App擁有一個(gè)有趣的“靈魂”？

答案其實(shí)已經(jīng)在文中多次提到，這里最后再?gòu)?qiáng)調(diào)一次：以用戶為本，想用戶所想。在特定的使用場(chǎng)景中，找到用戶想要完成的操作目標(biāo)，然后運(yùn)用最恰當(dāng)?shù)慕换シ绞綆椭脩舯憬莸貙?shí)現(xiàn)。

在探討每一種交互方式時(shí)，我都不厭其煩地列舉了諸多富有創(chuàng)意的、帶來(lái)良好用戶體驗(yàn)的實(shí)際案例來(lái)傳達(dá)上述觀點(diǎn)。拋磚引玉，通過(guò)這些例子希望能給大家?guī)?lái)更多的思考和創(chuàng)意，從而能讓每一種交互方式發(fā)揮其更大的價(jià)值，創(chuàng)造更爽的交互體驗(yàn)，讓每個(gè)App都擁有一個(gè)更有趣的“靈魂”。

#專欄作家#

創(chuàng)想佳，微信公眾號(hào)：超級(jí)思想佳，人人都是產(chǎn)品經(jīng)理專欄作家。一個(gè)堅(jiān)定的互聯(lián)網(wǎng)愛(ài)好者、從業(yè)者和思考者。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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