2019-11-28 資深UI設計者
業內有很多人覺得手勢交互沒必要拿出來深究，覺得用戶使用產品的過程中，自然而然就會去使用拇指，進行手勢操作。但這種說法，就跟「用戶心理模型」類似。當然，對于用戶來說沒必要深究手勢交互，但作為設計師，如果不了解其背后的邏輯，那么就無法解決產品設計背后的一些問題。
所以我們今天，好好聊一聊手勢交互這件事。你會發現，原來你以往觀察或以為的設計問題，都是手勢交互在作祟。
我們以前經常聽到「以用戶為中心做產品設計」這句話，意思是產品需依附于目標用戶的真實場景來設計。與此同時，其實還有一句話在提醒著交互設計師如何做產品設計，就是「以觸摸屏為中心做產品設計」。
為什么呢？因為用戶從始至終都是在跟觸摸屏做接觸，不管換了什么設備，他們都是要通過屏幕與產品進行交互的。
我們可以在這里思考一下手勢的意義。
手勢的出現改變了什么？可以回想一下 iPhone 4 發布的時候，當看到這樣一臺屏幕上沒有任何按鍵的設備，是不是會覺得不可思議？鍵盤，電話接聽按鍵等都消失不見了。
人們在使用 iPhone 這樣的產品時，不再需要去強行記憶任何固體按鍵。觸摸屏與手勢的結合，幫助我們隱藏不必要的元素，幫助用戶聚焦于內容，在有限的物理空間獲得更多的信息。
所以用戶通過觸摸屏與產品進行交互，跟通過鍵盤按鍵與屏幕進行交互是完全不同的。手勢交互更自然且更。
手勢操作對我們來說如此自然和直觀的主要原因是因為它們類似于與真實對象進行直接交互。譬如你用遙控器控制電視上的按鍵，需要通過上下左右這樣的操作來定位指示器，而觸摸屏直接就可以通過手指點擊內容進行操作。這是完全不同的概念。
綜上所述，我們能知道，手勢的三個要素：簡潔、易用、直觀。
所以我們通過一些常見的手勢行為，就可以在產品界面上很輕松的完成任務。
常見的手勢行為：
當然，我們經常也會遇到一些背離手勢交互的產品設計，雖然也是點擊、拖動等等，但操作起來總是不那么順心。這里面有一個關鍵點就是，手勢直觀性。
有數據表明，蘋果的 3D Touch 使用率非常低，就是因為直觀性太差，用戶不知道通過這個操作能帶來什么結果，且使用它需要長按，經常會同時呼出「卸載」，那么效率也就會降低。久而久之，用戶就不去使用了。
正面例子如下圖，滑動與文案結合。
這樣一看，用戶馬上就能知道這個操作行為如何觸發，緊接著就產生行動，然后會反饋結果。
這也是手勢交互的核心：觸發，行動，反饋。
對比 3D Touch，觸發沒有提示，行動后時常有兩種反饋結果，相比起來就不那么友好了。
除了上面聊的這些，手勢交互還能從另一方面來提升效率，就是拇指操作區域。
我們都知道，現在手機屏幕越來越大，甚至比最早屏幕大了一倍以上。但是很多設計師并沒有轉換思維，跟進這個趨勢的變化。
這里給大家普及一個知識：大部分人誤以為，手指在屏幕上的熱區是永恒不變的，但其實手指熱區會根據設備的變大而縮小。因為手掌支撐設備的重心靠后走了，所以拇指操控屏幕的范圍也就變小了。如下圖。
結果是，手機屏幕變大，雙手持機的用戶變多，但依然還有 75％ 的用戶是使用拇指來觸摸屏幕的。因此，術語「拇指驅動設計」應運而生。
我們上面說到，在使用一些產品的時候，經常會遇到使用起來不順心的情況，然后說了「手勢直觀性」的概念。但這里，還有個更重要的原因，就是「拇指操作區域」。
拇指操作區域被分為三塊內容，分別是：易于觸達，難以觸達，以及介于兩者之間的區域。
看下圖。
所以在設計界面時，要注意界面的主要操作元素是否處于用戶易于觸達的范圍之內。
如果你仔細觀察并思考過，也會發現，iOS 的產品界面中，「返回」按鈕就位于「難以觸達」的區域。原因是產品人員本身也不想用戶返回或退出，而是讓用戶聚焦于當前頁面，想要返回，那就需要付出一點成本，什么成本？操作成本。
有人會說，由于 iOS 可以從手機的左邊緣向右側輕掃以獲得返回效果，因此在大多數 iOS 產品中，返回都不需要太大的操作成本。但是，并不是所有 iPhone 用戶都知道這一點，也不是所有產品都支持這一特性的。而且手勢交互的進化本來也就是為了提升用戶操作的效率，所以本質上他們并不矛盾，只是相比以前，我們現在的操作更快了。并且「右滑」返回，本身在手勢操作中相比「點擊」也是更具操作成本的。
當了解了手勢的一些意義，以及拇指操作區域對于產品設計的重要性之后，我們就可以通過一些案例來做一個全局分析了。
1. 內容在上，操作在下
許多人設計 App，但是沒人研究過 App 為什么要這么設計。
比如，為什么起初要把標簽欄放底下呢？關于這個問題，當初我也是問了許多人，而基本都只是說這是官方設計規范。這相當于是一句廢話。
通過翻閱多方資料，我發現在工業設計領域有一條重要的基本設計原則：內容在上，操作在下。
比如在使用電腦的時候，操作在下意味著使用者在操作過程中，手指始終處于界面下方，而內容在上面，就不會出現手指遮擋內容的情況。
如下圖的鍵盤操作提示：
基于此，相信你也知道為什么標簽欄在下方了吧？
另外，為什么 iOS 設計規范建議將「編輯」按鈕放置在界面右/左上方的位置呢？
界面右/左上角的位置對拇指來說顯然是不友好的。然而，這樣做的原因也是顯而易見的：編輯功能會讓數據發生變化。將這類控件放在難以操作的位置上（與左上角的返回是一個道理），就是一種防御性的設計策略，可以在一定程度上避免因為太容易產生誤操作而導致的破壞性的結果。
通過這一小段之前聊過的內容，你們會發現，手勢與拇指操作其實在驅動著產品設計。下面我們來聊個大的案例。
漢堡包菜單，也就是側邊欄導航，Facebook 早期測試顯示側邊欄導航讓用戶使用率降低了一半。
我們一起來看看市面上給出的三類說法。
1. 可見性太低
默認狀態下，用戶是看不見側邊欄的，除非點擊了側邊欄的彈出按鈕。所以這種情況下，里面的功能都是用戶腦袋里已知的，但很可能都想不起來。比如，現在你回想一下知乎底部 5 個標簽分別是什么？或者微信右上角「+」里面有哪些功能？是不是要想一會兒，才能記起來？甚至還是想不起來。
之前我在文章里寫過，用戶對于功能的使用一定是「所見即所得」，而不是「心向往之」。用戶只會注意自己看到的信息，而不是憑借記憶或想象來使用產品。
底部標簽欄就很好的解決了漢堡包菜單的「可見性」問題。
2. 效率較低
效率較低主要在于操作頻率，大家看下面兩組圖的對比。
第一張圖，當用戶從首頁進入到個人信息頁面，只需要兩步；而第二張圖，則要三步。
這里多一步看起來似乎影響不大，但如果現在要從個人信息頁面到「標簽 3」的話，第一張圖也只需要兩步，第二張圖還是需要三步，當頻繁去使用這樣的產品后，用戶的整體效率就會下降，體驗也會隨之降低。
3. 與平臺模式沖突
大家應該知道，在 iOS 的操作頁面中，通過手勢可對 tab 進行左右切換，而側邊欄除了通過點擊菜單按鈕展開之外，也可以通過右滑彈出。這里面有什么沖突呢？看下圖。
當頁面聚焦在「標簽 2」時，右滑除了能回到「標簽 1」，同樣也很可能會切出側邊導航欄。
這樣的手勢沖突，導致頁面層級與功能導航的優先級混亂了。
無論是導航還是控件，當它們組成一個頁面后，它們的操作就會有優先級。比如下面這個例子。
如果你對標紅的分段控件比較熟悉，就知道，它是可通過屏幕滑動進行切換的。但是在「短信」里，它是不能通過滑動屏幕進行切換的，因為用戶可對單條信息進行左滑做刪除或其他操作。所以當頁面操作模式存在矛盾時，我們會將子層級操作優先于父層級操作。
譬如你進入朋友圈，是不能馬上回到首頁的，這時候頁面層級較深，產品人員要將用戶聚焦于頁面本身，如果直接能返回到首頁，頁面層級和產品架構就會混亂。
類似的例子還有很多，我這里就不繼續列舉了。
所以從「短信」的例子可以看出，當控件與控件之間的手勢發生沖突時，我們要考慮優先級，將內容優先于頁面來處理。那么回到上面的例子，分段控件與漢堡包菜單的手勢發生沖突時，很明顯我們要優先分段控件的操作，而禁止掉漢堡包菜單的右滑手勢。結果就是，效率又低了。
4. 小結
這三類，如果你認真思考里面的關系，其實就會發現，它們的共通點就是與拇指的聯系過于被動或直接被切斷了。
它們的核心點就是拇指與觸摸屏的關系。
如果你現在還不能深刻理解漢堡包菜單的劣勢，那就想一下去看一下現在的產品，其中「我的」、「個人中心」或「更多」其實都是變相的漢堡包菜單。
在「我」這個標簽頁里，這一系列功能列表，無非就是另一種模式的漢堡包菜單，只是這里呈現的都是不重要的功能，并不影響用戶使用這個產品。回想一下，你是不是很少，甚至從來沒用過這里的某幾個功能？再跟手勢結合，就會發現，「我」所處區域并不是容易點擊的區域，這就是它效率低下的原因了。現在能懂了么？
當傳統的確認彈窗逐漸被手勢操作取代，大家就應該察覺到：以往從電腦遷移到移動設備上的交互行為已逐漸被改善。
我曾經寫過一篇文章，叫「取消按鈕的設計邏輯」，講了「左取消，右行進」這個原理。意思就是當我們在設計彈框的時候，用戶已經習慣這樣的操作路徑，所以不要輕易更換位置以混淆用戶的認知。再從手勢的角度來說，就是右邊更容易點擊。
后來有同學說到，但是有些特殊場景，譬如刪除資料，而產品人員不希望用戶刪除，于是把刪除放在左邊，取消放在右邊。畢竟右邊更容易點擊，所以位置換了會比較合理。
這是錯的！
我們不能通過改變用戶使用產品的常識來將產品人員的想法置于用戶之上。當用戶已經形成「左取消，右行進」的認知之后，違反這樣的一致性，去換位置是很危險的。所以出現了 action sheet，來解決一些產品關于 alert 無法解決的問題。
如圖。
大家要記住的是，當頁面邏輯與手勢操作產生邏輯沖突時，我們不是去否定以前已經被驗證且正確的內容，而是通過創新，來解決這個沖突。這就是拇指驅動設計的一種方式。
包括我們以前在移動設備上選擇刪除某項數據，都會彈出警告框，詢問我們是否確認刪除。這種方式會打斷我們的操作行為，久而久之，用戶已經對此交互方式習以為常，或者說免疫了，但這種彈框的方式始終被認為是不好的一種交互手段。所以側滑刪除，已經被更多產品功能用來取代沒必要彈框的操作。
也許很多人沒思考過底層原因，或者僅僅只是覺得其相比彈框顯得更友好。其實這個行為是基于手勢交互做了相應的優化，讓用戶操作起來更加方便。
到了這里，我再舉個所有人都熟悉的例子，就是輪播圖了。
輪播圖最早出現于網頁端，后來被大量商家模仿，以至于到移動端還備受各產品設計人員的歡迎。但其實很多人對輪播圖的使用方法都是錯誤的。
下面來看輪播圖與手勢的關系。
試想：你的輪播圖有 6 張 Banner，你要翻到第 4 張，無論是往前翻還是往后翻都要產生 3 次交互行為。而大部分產品的用戶在界面停留的時間不會這么久，更不會看完你 Banner 的內容。以至于有研究表明，大部分產品里，除了第一張 Banner 的點擊率能達到 83% 之外，其余的點擊率都非常低。
有人說可以點擊下面的原點指示器做跳轉，這么小的點，你覺得點擊它現實么？所以手勢交互與輪播圖是相互矛盾的一種設計方式。
所以當運營策劃了一個活動，而你就往頂部的輪播圖里塞，這個行為就已經注定這個活動的用戶參與度是很低的了。除了個別電商產品，他們以賣廣告位給商家作為盈利點，但即便如此，我相信這個廣告位除了第一張圖的點擊量稍高外，其他圖片的點擊量相對于產品本身的用戶體量比較而言還是很低的。這也是為什么部分產品把輪播圖規則改為用戶進入首頁隨機展示輪播圖頁面，而不是強制指定于顯示第一張的原因。
畢竟輪播圖在頂部，用戶需要通過拇指長時間的在「延伸區域」進行操作，那么使用率自然就降低了。
如果你的產品有很多活動是在同時期進行的，那么我給部分產品的建議是放一個活動主題入口，如下圖。（當然，這要視情況而定，并不是通用的。）
我們現在看到的搜索框基本都是放在屏幕頂部。
為什么呢？
市面上對這個問題的解釋是這樣的：用戶已經被現在的產品訓練得在界面的頂部必須看到一個搜索框，設計師打破這個常規就要承擔風險。
看完這篇文章，你就已經知道，對于用戶來說，由于屏幕頂部離拇指很遠，處于難以觸達的區域，在體驗上很不好。所以搜索框成了認知上應該在頂部，但操作體驗上又不應該在頂部的一個設計。
但是回想一下，會發現大多數 App 的主要內容都是位于易于觸達的區域。所以當看到高德地圖把搜索框移動到下面來之后，就能知道，拇指驅動設計的概念被越來越多的人認識到其重要性。
地圖類產品把搜索框移到下面來的首創應用不是高德，應該是 Lyft。
瞧，拇指驅動設計，多酷~
《上癮》里有句話：當人們不由自由地做出下一個舉動時，新的習慣就會成為他們日常生活的一部分。
當手勢充分地發揮了作用，輔助用戶操作或實現功能，它就成了用戶不可分割的一部分。
今天通過對手勢意義的解讀，以及拇指驅動設計的解析，再加上這些案例的拆解，我相信你能更好地理解為什么手勢交互這么重要了。
交互設計師對于「觸摸屏」，必須有深刻的認識，才能理解設計背后的邏輯。
如果這篇文章對你有幫助，記得點個贊，后面我好持續輸出。
文章來源：優設