業(yè)內(nèi)有很多人覺得手勢交互沒必要拿出來深究，覺得用戶使用產(chǎn)品的過程中，自然而然就會去使用拇指，進(jìn)行手勢操作。但這種說法，就跟「用戶心理模型」類似。當(dāng)然，對于用戶來說沒必要深究手勢交互，但作為設(shè)計師，如果不了解其背后的邏輯，那么就無法解決產(chǎn)品設(shè)計背后的一些問題。

所以我們今天，好好聊一聊手勢交互這件事。你會發(fā)現(xiàn)，原來你以往觀察或以為的設(shè)計問題，都是手勢交互在作祟。

手勢的意義

我們以前經(jīng)常聽到「以用戶為中心做產(chǎn)品設(shè)計」這句話，意思是產(chǎn)品需依附于目標(biāo)用戶的真實場景來設(shè)計。與此同時，其實還有一句話在提醒著交互設(shè)計師如何做產(chǎn)品設(shè)計，就是「以觸摸屏為中心做產(chǎn)品設(shè)計」。

為什么呢？因為用戶從始至終都是在跟觸摸屏做接觸，不管換了什么設(shè)備，他們都是要通過屏幕與產(chǎn)品進(jìn)行交互的。

我們可以在這里思考一下手勢的意義。

手勢的出現(xiàn)改變了什么？可以回想一下 iPhone 4 發(fā)布的時候，當(dāng)看到這樣一臺屏幕上沒有任何按鍵的設(shè)備，是不是會覺得不可思議？鍵盤，電話接聽按鍵等都消失不見了。

人們在使用 iPhone 這樣的產(chǎn)品時，不再需要去強行記憶任何固體按鍵。觸摸屏與手勢的結(jié)合，幫助我們隱藏不必要的元素，幫助用戶聚焦于內(nèi)容，在有限的物理空間獲得更多的信息。

所以用戶通過觸摸屏與產(chǎn)品進(jìn)行交互，跟通過鍵盤按鍵與屏幕進(jìn)行交互是完全不同的。手勢交互更自然且更。

手勢操作對我們來說如此自然和直觀的主要原因是因為它們類似于與真實對象進(jìn)行直接交互。譬如你用遙控器控制電視上的按鍵，需要通過上下左右這樣的操作來定位指示器，而觸摸屏直接就可以通過手指點擊內(nèi)容進(jìn)行操作。這是完全不同的概念。

綜上所述，我們能知道，手勢的三個要素：簡潔、易用、直觀。

所以我們通過一些常見的手勢行為，就可以在產(chǎn)品界面上很輕松的完成任務(wù)。

常見的手勢行為：

• 點擊：單指短暫觸摸表面；
• 雙擊：單指快速兩次觸摸表面（通常是縮放）；
• 拖動：沿表面移動而不會破壞接觸；
• 捏/展開：用兩根手指觸摸表面以移入（捏合）或移出（展開）；
• 按下：單指觸摸表面并按?。?
• 滑動：快速手勢，不需要觸摸目標(biāo)。

當(dāng)然，我們經(jīng)常也會遇到一些背離手勢交互的產(chǎn)品設(shè)計，雖然也是點擊、拖動等等，但操作起來總是不那么順心。這里面有一個關(guān)鍵點就是，手勢直觀性。

有數(shù)據(jù)表明，蘋果的 3D Touch 使用率非常低，就是因為直觀性太差，用戶不知道通過這個操作能帶來什么結(jié)果，且使用它需要長按，經(jīng)常會同時呼出「卸載」，那么效率也就會降低。久而久之，用戶就不去使用了。

正面例子如下圖，滑動與文案結(jié)合。

這樣一看，用戶馬上就能知道這個操作行為如何觸發(fā)，緊接著就產(chǎn)生行動，然后會反饋結(jié)果。

這也是手勢交互的核心：觸發(fā)，行動，反饋。

對比 3D Touch，觸發(fā)沒有提示，行動后時常有兩種反饋結(jié)果，相比起來就不那么友好了。

除了上面聊的這些，手勢交互還能從另一方面來提升效率，就是拇指操作區(qū)域。

拇指驅(qū)動設(shè)計

我們都知道，現(xiàn)在手機屏幕越來越大，甚至比最早屏幕大了一倍以上。但是很多設(shè)計師并沒有轉(zhuǎn)換思維，跟進(jìn)這個趨勢的變化。

這里給大家普及一個知識：大部分人誤以為，手指在屏幕上的熱區(qū)是永恒不變的，但其實手指熱區(qū)會根據(jù)設(shè)備的變大而縮小。因為手掌支撐設(shè)備的重心靠后走了，所以拇指操控屏幕的范圍也就變小了。如下圖。

結(jié)果是，手機屏幕變大，雙手持機的用戶變多，但依然還有 75％ 的用戶是使用拇指來觸摸屏幕的。因此，術(shù)語「拇指驅(qū)動設(shè)計」應(yīng)運而生。

我們上面說到，在使用一些產(chǎn)品的時候，經(jīng)常會遇到使用起來不順心的情況，然后說了「手勢直觀性」的概念。但這里，還有個更重要的原因，就是「拇指操作區(qū)域」。

拇指操作區(qū)域被分為三塊內(nèi)容，分別是：易于觸達(dá)，難以觸達(dá)，以及介于兩者之間的區(qū)域。

看下圖。

所以在設(shè)計界面時，要注意界面的主要操作元素是否處于用戶易于觸達(dá)的范圍之內(nèi)。

如果你仔細(xì)觀察并思考過，也會發(fā)現(xiàn)，iOS 的產(chǎn)品界面中，「返回」按鈕就位于「難以觸達(dá)」的區(qū)域。原因是產(chǎn)品人員本身也不想用戶返回或退出，而是讓用戶聚焦于當(dāng)前頁面，想要返回，那就需要付出一點成本，什么成本？操作成本。

有人會說，由于 iOS 可以從手機的左邊緣向右側(cè)輕掃以獲得返回效果，因此在大多數(shù) iOS 產(chǎn)品中，返回都不需要太大的操作成本。但是，并不是所有 iPhone 用戶都知道這一點，也不是所有產(chǎn)品都支持這一特性的。而且手勢交互的進(jìn)化本來也就是為了提升用戶操作的效率，所以本質(zhì)上他們并不矛盾，只是相比以前，我們現(xiàn)在的操作更快了。并且「右滑」返回，本身在手勢操作中相比「點擊」也是更具操作成本的。

當(dāng)了解了手勢的一些意義，以及拇指操作區(qū)域?qū)τ诋a(chǎn)品設(shè)計的重要性之后，我們就可以通過一些案例來做一個全局分析了。

1. 內(nèi)容在上，操作在下

許多人設(shè)計 App，但是沒人研究過 App 為什么要這么設(shè)計。

比如，為什么起初要把標(biāo)簽欄放底下呢？關(guān)于這個問題，當(dāng)初我也是問了許多人，而基本都只是說這是官方設(shè)計規(guī)范。這相當(dāng)于是一句廢話。

通過翻閱多方資料，我發(fā)現(xiàn)在工業(yè)設(shè)計領(lǐng)域有一條重要的基本設(shè)計原則：內(nèi)容在上，操作在下。

比如在使用電腦的時候，操作在下意味著使用者在操作過程中，手指始終處于界面下方，而內(nèi)容在上面，就不會出現(xiàn)手指遮擋內(nèi)容的情況。

如下圖的鍵盤操作提示：

基于此，相信你也知道為什么標(biāo)簽欄在下方了吧？

另外，為什么 iOS 設(shè)計規(guī)范建議將「編輯」按鈕放置在界面右/左上方的位置呢？

界面右/左上角的位置對拇指來說顯然是不友好的。然而，這樣做的原因也是顯而易見的：編輯功能會讓數(shù)據(jù)發(fā)生變化。將這類控件放在難以操作的位置上（與左上角的返回是一個道理），就是一種防御性的設(shè)計策略，可以在一定程度上避免因為太容易產(chǎn)生誤操作而導(dǎo)致的破壞性的結(jié)果。

通過這一小段之前聊過的內(nèi)容，你們會發(fā)現(xiàn)，手勢與拇指操作其實在驅(qū)動著產(chǎn)品設(shè)計。下面我們來聊個大的案例。

漢堡包菜單的消失解析

漢堡包菜單，也就是側(cè)邊欄導(dǎo)航，F(xiàn)acebook 早期測試顯示側(cè)邊欄導(dǎo)航讓用戶使用率降低了一半。

我們一起來看看市面上給出的三類說法。

1. 可見性太低

默認(rèn)狀態(tài)下，用戶是看不見側(cè)邊欄的，除非點擊了側(cè)邊欄的彈出按鈕。所以這種情況下，里面的功能都是用戶腦袋里已知的，但很可能都想不起來。比如，現(xiàn)在你回想一下知乎底部 5 個標(biāo)簽分別是什么？或者微信右上角「+」里面有哪些功能？是不是要想一會兒，才能記起來？甚至還是想不起來。

之前我在文章里寫過，用戶對于功能的使用一定是「所見即所得」，而不是「心向往之」。用戶只會注意自己看到的信息，而不是憑借記憶或想象來使用產(chǎn)品。

底部標(biāo)簽欄就很好的解決了漢堡包菜單的「可見性」問題。

2. 效率較低

效率較低主要在于操作頻率，大家看下面兩組圖的對比。

第一張圖，當(dāng)用戶從首頁進(jìn)入到個人信息頁面，只需要兩步；而第二張圖，則要三步。

這里多一步看起來似乎影響不大，但如果現(xiàn)在要從個人信息頁面到「標(biāo)簽 3」的話，第一張圖也只需要兩步，第二張圖還是需要三步，當(dāng)頻繁去使用這樣的產(chǎn)品后，用戶的整體效率就會下降，體驗也會隨之降低。

3. 與平臺模式?jīng)_突

大家應(yīng)該知道，在 iOS 的操作頁面中，通過手勢可對 tab 進(jìn)行左右切換，而側(cè)邊欄除了通過點擊菜單按鈕展開之外，也可以通過右滑彈出。這里面有什么沖突呢？看下圖。

當(dāng)頁面聚焦在「標(biāo)簽 2」時，右滑除了能回到「標(biāo)簽 1」，同樣也很可能會切出側(cè)邊導(dǎo)航欄。

這樣的手勢沖突，導(dǎo)致頁面層級與功能導(dǎo)航的優(yōu)先級混亂了。

無論是導(dǎo)航還是控件，當(dāng)它們組成一個頁面后，它們的操作就會有優(yōu)先級。比如下面這個例子。

如果你對標(biāo)紅的分段控件比較熟悉，就知道，它是可通過屏幕滑動進(jìn)行切換的。但是在「短信」里，它是不能通過滑動屏幕進(jìn)行切換的，因為用戶可對單條信息進(jìn)行左滑做刪除或其他操作。所以當(dāng)頁面操作模式存在矛盾時，我們會將子層級操作優(yōu)先于父層級操作。

譬如你進(jìn)入朋友圈，是不能馬上回到首頁的，這時候頁面層級較深，產(chǎn)品人員要將用戶聚焦于頁面本身，如果直接能返回到首頁，頁面層級和產(chǎn)品架構(gòu)就會混亂。

類似的例子還有很多，我這里就不繼續(xù)列舉了。

所以從「短信」的例子可以看出，當(dāng)控件與控件之間的手勢發(fā)生沖突時，我們要考慮優(yōu)先級，將內(nèi)容優(yōu)先于頁面來處理。那么回到上面的例子，分段控件與漢堡包菜單的手勢發(fā)生沖突時，很明顯我們要優(yōu)先分段控件的操作，而禁止掉漢堡包菜單的右滑手勢。結(jié)果就是，效率又低了。

4. 小結(jié)

這三類，如果你認(rèn)真思考里面的關(guān)系，其實就會發(fā)現(xiàn)，它們的共通點就是與拇指的聯(lián)系過于被動或直接被切斷了。

• 第一個「可見性太低」的例子，菜單被隱藏，拇指不能直接與菜單產(chǎn)生關(guān)系，并且距離過遠(yuǎn)，拇指難以觸達(dá)。
• 第二個「效率太低」的例子，用戶需要通過拇指來回操作，導(dǎo)致效率降低，這就跟使用遙控器控制電視機一樣，用戶無法直接觸達(dá)內(nèi)容。
• 第三個「手勢沖突」的例子，其實就很清晰了，就是說標(biāo)簽欄的優(yōu)先級可能會被頁面的其它控件所取代，那么拇指就無法直接對其產(chǎn)生作用，從而禁止當(dāng)前頁面的手勢交互行為。

它們的核心點就是拇指與觸摸屏的關(guān)系。

如果你現(xiàn)在還不能深刻理解漢堡包菜單的劣勢，那就想一下去看一下現(xiàn)在的產(chǎn)品，其中「我的」、「個人中心」或「更多」其實都是變相的漢堡包菜單。

在「我」這個標(biāo)簽頁里，這一系列功能列表，無非就是另一種模式的漢堡包菜單，只是這里呈現(xiàn)的都是不重要的功能，并不影響用戶使用這個產(chǎn)品?；叵胍幌拢闶遣皇呛苌?，甚至從來沒用過這里的某幾個功能？再跟手勢結(jié)合，就會發(fā)現(xiàn)，「我」所處區(qū)域并不是容易點擊的區(qū)域，這就是它效率低下的原因了?，F(xiàn)在能懂了么？

彈框的操作路徑

當(dāng)傳統(tǒng)的確認(rèn)彈窗逐漸被手勢操作取代，大家就應(yīng)該察覺到：以往從電腦遷移到移動設(shè)備上的交互行為已逐漸被改善。

我曾經(jīng)寫過一篇文章，叫「取消按鈕的設(shè)計邏輯」，講了「左取消，右行進(jìn)」這個原理。意思就是當(dāng)我們在設(shè)計彈框的時候，用戶已經(jīng)習(xí)慣這樣的操作路徑，所以不要輕易更換位置以混淆用戶的認(rèn)知。再從手勢的角度來說，就是右邊更容易點擊。

后來有同學(xué)說到，但是有些特殊場景，譬如刪除資料，而產(chǎn)品人員不希望用戶刪除，于是把刪除放在左邊，取消放在右邊。畢竟右邊更容易點擊，所以位置換了會比較合理。

這是錯的！

我們不能通過改變用戶使用產(chǎn)品的常識來將產(chǎn)品人員的想法置于用戶之上。當(dāng)用戶已經(jīng)形成「左取消，右行進(jìn)」的認(rèn)知之后，違反這樣的一致性，去換位置是很危險的。所以出現(xiàn)了 action sheet，來解決一些產(chǎn)品關(guān)于 alert 無法解決的問題。

如圖。

大家要記住的是，當(dāng)頁面邏輯與手勢操作產(chǎn)生邏輯沖突時，我們不是去否定以前已經(jīng)被驗證且正確的內(nèi)容，而是通過創(chuàng)新，來解決這個沖突。這就是拇指驅(qū)動設(shè)計的一種方式。

包括我們以前在移動設(shè)備上選擇刪除某項數(shù)據(jù)，都會彈出警告框，詢問我們是否確認(rèn)刪除。這種方式會打斷我們的操作行為，久而久之，用戶已經(jīng)對此交互方式習(xí)以為常，或者說免疫了，但這種彈框的方式始終被認(rèn)為是不好的一種交互手段。所以側(cè)滑刪除，已經(jīng)被更多產(chǎn)品功能用來取代沒必要彈框的操作。

也許很多人沒思考過底層原因，或者僅僅只是覺得其相比彈框顯得更友好。其實這個行為是基于手勢交互做了相應(yīng)的優(yōu)化，讓用戶操作起來更加方便。

Banner

到了這里，我再舉個所有人都熟悉的例子，就是輪播圖了。

輪播圖最早出現(xiàn)于網(wǎng)頁端，后來被大量商家模仿，以至于到移動端還備受各產(chǎn)品設(shè)計人員的歡迎。但其實很多人對輪播圖的使用方法都是錯誤的。

下面來看輪播圖與手勢的關(guān)系。

試想：你的輪播圖有 6 張 Banner，你要翻到第 4 張，無論是往前翻還是往后翻都要產(chǎn)生 3 次交互行為。而大部分產(chǎn)品的用戶在界面停留的時間不會這么久，更不會看完你 Banner 的內(nèi)容。以至于有研究表明，大部分產(chǎn)品里，除了第一張 Banner 的點擊率能達(dá)到 83% 之外，其余的點擊率都非常低。

有人說可以點擊下面的原點指示器做跳轉(zhuǎn)，這么小的點，你覺得點擊它現(xiàn)實么？所以手勢交互與輪播圖是相互矛盾的一種設(shè)計方式。

所以當(dāng)運營策劃了一個活動，而你就往頂部的輪播圖里塞，這個行為就已經(jīng)注定這個活動的用戶參與度是很低的了。除了個別電商產(chǎn)品，他們以賣廣告位給商家作為盈利點，但即便如此，我相信這個廣告位除了第一張圖的點擊量稍高外，其他圖片的點擊量相對于產(chǎn)品本身的用戶體量比較而言還是很低的。這也是為什么部分產(chǎn)品把輪播圖規(guī)則改為用戶進(jìn)入首頁隨機展示輪播圖頁面，而不是強制指定于顯示第一張的原因。

畢竟輪播圖在頂部，用戶需要通過拇指長時間的在「延伸區(qū)域」進(jìn)行操作，那么使用率自然就降低了。

如果你的產(chǎn)品有很多活動是在同時期進(jìn)行的，那么我給部分產(chǎn)品的建議是放一個活動主題入口，如下圖。（當(dāng)然，這要視情況而定，并不是通用的。）

搜索框的變化

我們現(xiàn)在看到的搜索框基本都是放在屏幕頂部。

為什么呢？

市面上對這個問題的解釋是這樣的：用戶已經(jīng)被現(xiàn)在的產(chǎn)品訓(xùn)練得在界面的頂部必須看到一個搜索框，設(shè)計師打破這個常規(guī)就要承擔(dān)風(fēng)險。

看完這篇文章，你就已經(jīng)知道，對于用戶來說，由于屏幕頂部離拇指很遠(yuǎn)，處于難以觸達(dá)的區(qū)域，在體驗上很不好。所以搜索框成了認(rèn)知上應(yīng)該在頂部，但操作體驗上又不應(yīng)該在頂部的一個設(shè)計。

但是回想一下，會發(fā)現(xiàn)大多數(shù) App 的主要內(nèi)容都是位于易于觸達(dá)的區(qū)域。所以當(dāng)看到高德地圖把搜索框移動到下面來之后，就能知道，拇指驅(qū)動設(shè)計的概念被越來越多的人認(rèn)識到其重要性。

地圖類產(chǎn)品把搜索框移到下面來的首創(chuàng)應(yīng)用不是高德，應(yīng)該是 Lyft。

瞧，拇指驅(qū)動設(shè)計，多酷~

總結(jié)

《上癮》里有句話：當(dāng)人們不由自由地做出下一個舉動時，新的習(xí)慣就會成為他們?nèi)粘Ｉ畹囊徊糠帧?

當(dāng)手勢充分地發(fā)揮了作用，輔助用戶操作或?qū)崿F(xiàn)功能，它就成了用戶不可分割的一部分。

今天通過對手勢意義的解讀，以及拇指驅(qū)動設(shè)計的解析，再加上這些案例的拆解，我相信你能更好地理解為什么手勢交互這么重要了。

交互設(shè)計師對于「觸摸屏」，必須有深刻的認(rèn)識，才能理解設(shè)計背后的邏輯。

如果這篇文章對你有幫助，記得點個贊，后面我好持續(xù)輸出。

文章來源：優(yōu)設(shè)