從「手勢交互」出發，分析產品設計背後的原理

開頭還是老土的書籍推薦。

這周不知不覺讀了 4 本書，每本都讀得很細。基本是每天 6 點起床讀 1 小時，午休時間再讀 1 小時，晚上下班讀 2-4 小時，所以一天下來就讀了 4-6 小時了。加上白天還要工作，所以基本算是零社交了吧。但是！今年我打算放開自我，注重社交的！看來還是不適應，得慢慢來了……

在閱讀的 4 本書籍中，《美國種族簡史》這本書讓我對美國的前世今生有了一個更詳細的認識。尤其是美劇中常提到的「地獄的廚房」，原來是美籍愛爾蘭人的聚居地。雖然原先也知道，但是這會兒才了解緣由。

包括《錯誤的行為》，讓我更清楚的認識到原來產品設計是會影響用戶的神經末梢的。

主要也就是推薦以上這兩本。廢話不多說，本期文章是我早期在工作中解決問題後總結的，用 @大J 的話說就是：你這篇內容好乾！

嗯，分享給你們。

隨著互聯網的發展，國內設計知識的沉澱是越來越深，許多設計師已經慢慢培養起新的設計理念，如「基於交互模式的設計」、「公司業務驅動的設計」等等。用一句話來概括的話，我會說：如今的設計師已經培養起與用戶使用場景共情的思維模式了（稍微有點拗口，俗話說就是站在場景角度來設計產品）。

而手勢交互，通常會被大多數人所遺忘。然而這些人都沒意識到，移動產品的設計是建立在手勢交互的基礎上的。

手勢熱區的誤區糾正

按照正常的手機觸控熱區圖來說，我們應該把重要功能放在用戶容易點擊的區域。但是大部分設計師在這個過程中往往沒有真正將其運用到位。 我之所以得出這個結論，是因為在這次功能測試中，也遇到了同樣的問題。所以我測試了其他公司的一些產品，果然有類似問題存在。

正常來說，大部分設計師基本都是在一張 375x667 的畫板上開始設計界面的。所以假如設計師是按照這個熱區來設計界面中功能位置的話，重要功能應該是放置在「易操作區域」附近的（如下圖）。

註：本文所有熱區均已右手為基礎繪製。

這時候問題來了，因為大部分設計師是直接導出 @x3 倍圖來適配 plus，所以當在大尺寸設備上操作的時候，當初把功能控制在 @x1 倍圖的熱區，在大屏上就不適用了。（如下圖）

所以當有用戶反饋當前頁面操作起來很吃力的時候，我就沒辦法理解，直到自己嘗試使用了之後才發現問題。最後只好單獨再在大屏設備上優化設計方案。

這裡再給大家普及一個知識：大部分人誤以為，手指在屏幕上的熱區是永恆不變的，但其實手指熱區會根據設備的變大而縮小。因為手掌支撐設備的重心靠後走了，所以拇指操控屏幕的範圍也就變小了。詳情見下圖。(提示：這裡的熱區圖都是我自己隨意畫的，如果想學習的最好找些比較規範的資料。)

雖然以上情況更多出現在單手持機的場景，但是雙手情況下，也是類似。我們在設計的過程中，首先要考慮單手容易操作的前提，然後再考慮雙手，原因是：1.市場上小屏手機還是占以主導地位；2.單手如果沒問題，雙手問題也不會太大（當然不是絕對）。

內容在上，操作在下

許多人設計 Ａpp，但是沒人研究過 App 為什麼要這麼設計。我說的為什麼如此設計不是狹義上的功能設計，而是廣義的產品設計。

正是上面那個問題，讓我在跟朋友討論的過程中開始延伸思考，為什麼起初要把標籤欄放底下呢？關於這個問題，當初我也是問了許多人，而基本都只是說這是官方設計規範。（路人甲：廢話，這還用他們說啊！！！我也知道啊！！！）

通過翻閱多方資料，我發現在工業設計領域有一條重要的基本設計原則：內容在上，操作在下。

或許在電腦上操作的時候，你意識不到這個問題，即滑鼠的點擊，跟這條設計原則的關係其實不大。而當操作涉及到手指的時候，問題就開始顯現出來了。

智能手機以及平板電腦的普及，讓我們慢慢開始依賴手勢的作用。比如我現在每天大部分生產力工作都是使用 iPad Pro + Smart Keyboard 來完成，如寫文、腦圖、看書等等（原型還是在電腦上畫的）。而手勢涉及的操作原則是非常多的，這裡提到的「內容在上，操作在下」就是其一。

操作在下意味著使用者在操作過程中，手指始終處於界面下方，而內容在上面，就不會出現手指遮擋內容的情況。

如下圖的鍵盤操作提示：

基於此，相信你也知道為什麼標籤欄在下方而不是上方了吧？

下面再來兩個例子詳細說明一下：

1.為什麼 iOS 要把返回放在上面而不是下面呢？

• 一是返回按鈕如果放在下面，用戶會輕易點擊，而放在上面用戶需要打破目前聚焦於內容的狀態才能點擊返回；
• 二是將標籤攔與工具欄全部置於下方，會容易導致發生誤操作（如 Android 設備），所以我們在設計的過程中要視情況而做合理的布局調整。

2.為什麼 iOS 設計規範建議將「編輯」按鈕放置在界面右上方的位置呢？

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

所以 iPhone 其實是打破了原有的設計理念，在原來的基礎上做了創新，這就是其優秀之處。

操作路徑與操作效率

當傳統的確認彈窗逐漸被手勢操作取代，大家就應該察覺到：以往從電腦遷移倒移動設備上的交互行為已逐漸被改善。

曾經我們在移動設備上選擇刪除某項數據，都會彈出警告框，詢問我們是否確認刪除。雖然這種方式會打斷我們的操作行為，但久而久之，用戶已經對此交互方式習以為常，或者說免疫了。且這種彈框的方式始終被認為是不好的一種交互手段。所以側滑刪除，已經被更多產品功能用來取代彈框。

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

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

輪播圖最早出現於網頁端，後來被大量商家模仿，以至於到移動端還備受各產品設計人員的歡迎。但其實很多人對輪播圖的使用方法都是錯誤的。

下面我來告訴你輪播圖與手勢的關係。試想：你的輪播圖有 6 張 Banner，你要翻到第 4 張，無論是往前翻還是往後翻都要產生 3 次交互行為。而大部分產品的用戶在界面停留的時間不會這麼久，更不會看完你 Banner 的內容。甚至有研究表明，除了第一張 Banner 的點擊率有 83% 之外，其餘的點擊率都非常低。

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

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

如果你的產品有很多活動是在同時期進行的，那麼我給部分產品的建議是放一個活動主題入口，如下圖。（當然，這要視情況而定，並不是通用的。）

另外，如果你的產品頂部 Banner 僅僅只是展示位，那麼我建議不要浪費空間，把它利用起來。可以做品牌宣傳、可以做產品推廣、可以做數據展示等等。這一點，我覺得「大眾點評」的設計方式就很棒。想了解的，可以去親自體驗下。

小結

很多人一直在做移動端的產品設計，但是很少會去理解其背後的原理。而了解這些原理，能夠幫助你更好的設計產品。我個人還是主張具體問題具體分析，這裡只是給各位一個思考的路徑，至於具體設備、情況、功能，還是要基於當下情況來做詳細解析。

以上知識是我早期學習並總結的一小部分內容，長期存儲於我的個人筆記中，更多的是用來自我總結。這次分享給各位，希望能有所幫助。

如果你覺得有用，可以點個贊，後面我會持續輸出。

END.