隨著(zhù)互聯(lián)網(wǎng)的發(fā)展，國內設計知識的沉淀是越來(lái)越深，許多設計師已經(jīng)慢慢培養起新的設計理念，如「基于交互模式的設計」、「公司業(yè)務(wù)驅動(dòng)的設計」等等。用一句話(huà)來(lái)概括的話(huà)，我會(huì )說(shuō)：如今的設計師已經(jīng)培養起與用戶(hù)使用場(chǎng)景共情的思維模式了（稍微有點(diǎn)拗口，俗話(huà)說(shuō)就是站在場(chǎng)景角度來(lái)設計產(chǎn)品）。
而手勢交互，通常會(huì )被大多數人所遺忘。然而這些人都沒(méi)意識到，移動(dòng)APP開(kāi)發(fā)產(chǎn)品的設計是建立在手勢交互的基礎上的。
手勢熱區的誤區糾正
按照正常的手機觸控熱區圖來(lái)說(shuō)，我們應該把重要功能放在用戶(hù)容易點(diǎn)擊的區域。但是大部分設計師在這個(gè)過(guò)程中往往沒(méi)有真正將其運用到位。 我之所以得出這個(gè)結論，是因為在這次功能測試中，也遇到了同樣的問(wèn)題。所以我測試了其他公司的一些產(chǎn)品，果然有類(lèi)似問(wèn)題存在。
正常來(lái)說(shuō)，大部分設計師基本都是在一張 375x667 的畫(huà)板上開(kāi)始設計界面的。所以假如設計師是按照這個(gè)熱區來(lái)設計界面中功能位置的話(huà)，重要功能應該是放置在「易操作區域」附近的（如下圖）。
注：本文所有熱區均已右手為基礎繪制。
這時(shí)候問(wèn)題來(lái)了，因為大部分設計師是直接導出 @x3 倍圖來(lái)適配 plus，所以當在大尺寸設備上操作的時(shí)候，當初把功能控制在 @x1 倍圖的熱區，在大屏上就不適用了。（如下圖）
所以當有用戶(hù)反饋當前頁(yè)面操作起來(lái)很吃力的時(shí)候，我就沒(méi)辦法理解，直到自己嘗試使用了之后才發(fā)現問(wèn)題。最后只好單獨再在大屏設備上優(yōu)化設計方案。
這里再給大家普及一個(gè)知識：大部分人誤以為，手指在屏幕上的熱區是永恒不變的，但其實(shí)手指熱區會(huì )根據設備的變大而縮小。因為手掌支撐設備的重心靠后走了，所以拇指操控屏幕的范圍也就變小了。詳情見(jiàn)下圖。(提示：這里的熱區圖都是我自己隨意畫(huà)的，如果想學(xué)習的最好找些比較規范的資料。)
雖然以上情況更多出現在單手持機的場(chǎng)景，但是雙手情況下，也是類(lèi)似。我們在設計的過(guò)程中，首先要考慮單手容易操作的前提，然后再考慮雙手，原因是：
1.市場(chǎng)上小屏手機還是占以主導地位；
2.單手如果沒(méi)問(wèn)題，雙手問(wèn)題也不會(huì )太大（當然不是絕對）。
內容在上，操作在下
許多人設計 Ａpp，但是沒(méi)人研究過(guò) App 為什么要這么設計。我說(shuō)的為什么如此設計不是狹義上的功能設計，而是廣義的產(chǎn)品設計。
正是上面那個(gè)問(wèn)題，讓我在跟朋友討論的過(guò)程中開(kāi)始延伸思考，為什么起初要把標簽欄放底下呢？關(guān)于這個(gè)問(wèn)題，當初我也是問(wèn)了許多人，而基本都只是說(shuō)這是官方設計規范。（路人甲：廢話(huà)，這還用他們說(shuō)?。。?！我也知道?。。。。?/span>
通過(guò)翻閱多方資料，我發(fā)現在工業(yè)設計領(lǐng)域有一條重要的基本設計原則：內容在上，操作在下。
或許在電腦上操作的時(shí)候，你意識不到這個(gè)問(wèn)題，即鼠標的點(diǎn)擊，跟這條設計原則的關(guān)系其實(shí)不大。而當操作涉及到手指的時(shí)候，問(wèn)題就開(kāi)始顯現出來(lái)了。
智能手機以及平板電腦的普及，讓我們慢慢開(kāi)始依賴(lài)手勢的作用。比如我現在每天大部分生產(chǎn)力工作都是使用 iPad Pro + Smart Keyboard 來(lái)完成，如寫(xiě)文、腦圖、看書(shū)等等（原型還是在電腦上畫(huà)的）。而手勢涉及的操作原則是非常多的，這里提到的「內容在上，操作在下」就是其一。
操作在下意味著(zhù)使用者在操作過(guò)程中，手指始終處于界面下方，而內容在上面，就不會(huì )出現手指遮擋內容的情況。
如下圖的鍵盤(pán)操作提示：
基于此，相信你也知道為什么標簽欄在下方而不是上方了吧？
下面再來(lái)兩個(gè)例子詳細說(shuō)明一下：
1.為什么 iOS 要把返回放在上面而不是下面呢？
一是返回按鈕如果放在下面，用戶(hù)會(huì )輕易點(diǎn)擊，而放在上面用戶(hù)需要打破目前聚焦于內容的狀態(tài)才能點(diǎn)擊返回；
二是將標簽攔與工具欄全部置于下方，會(huì )容易導致發(fā)生誤操作（如 Android 設備），所以我們在設計的過(guò)程中要視情況而做合理的布局調整。
2.為什么 iOS 設計規范建議將「編輯」按鈕放置在界面右上方的位置呢？
界面右上角的位置對拇指來(lái)說(shuō)顯然是不友好的。然而，這樣做的原因也是顯而易見(jiàn)的：編輯功能會(huì )讓數據發(fā)生變化。將這類(lèi)控件放在難以操作的位置上（與左上角的返回是一個(gè)道理），就是一種防御性的設計策略，可以在一定程度上避免因為太容易產(chǎn)生誤操作而導致的破壞性的結果。
所以 iPhone 其實(shí)是打破了原有的設計理念，在原來(lái)的基礎上做了創(chuàng )新，這就是其優(yōu)秀之處。
操作路徑與操作效率
當傳統的確認彈窗逐漸被手勢操作取代，大家就應該察覺(jué)到：以往從電腦遷移倒移動(dòng)設備上的交互行為已逐漸被改善。
曾經(jīng)我們在移動(dòng)設備上選擇刪除某項數據，都會(huì )彈出警告框，詢(xún)問(wèn)我們是否確認刪除。雖然這種方式會(huì )打斷我們的操作行為，但久而久之，用戶(hù)已經(jīng)對此交互方式習以為常，或者說(shuō)免疫了。且這種彈框的方式始終被認為是不好的一種交互手段。所以側滑刪除，已經(jīng)被更多產(chǎn)品功能用來(lái)取代彈框。
也許很多人沒(méi)思考過(guò)底層原因，或者僅僅只是覺(jué)得其相比彈框顯得更友好。其實(shí)這個(gè)行為是基于手勢交互做了相應的優(yōu)化，讓用戶(hù)操作起來(lái)更加方便。
到了這里，我再舉個(gè)所有人都熟悉的例子，就是輪播圖了。
輪播圖最早出現于網(wǎng)頁(yè)端，后來(lái)被大量商家模仿，以至于到移動(dòng)端還備受各產(chǎn)品設計人員的歡迎。但其實(shí)很多人對輪播圖的使用方法都是錯誤的。
下面我來(lái)告訴你輪播圖與手勢的關(guān)系。試想：你的輪播圖有 6 張 Banner，你要翻到第 4 張，無(wú)論是往前翻還是往后翻都要產(chǎn)生 3 次交互行為。而大部分產(chǎn)品的用戶(hù)在界面停留的時(shí)間不會(huì )這么久，更不會(huì )看完你 Banner 的內容。甚至有研究表明，除了第一張 Banner 的點(diǎn)擊率有 83% 之外，其余的點(diǎn)擊率都非常低。
有人說(shuō)可以點(diǎn)擊下面的原點(diǎn)指示器做跳轉，這么小的點(diǎn)，你覺(jué)得點(diǎn)擊它現實(shí)么？所以手勢交互與輪播圖是相互矛盾的一種設計方式。
所以當運營(yíng)策劃了一個(gè)活動(dòng)，而你就往頂部的輪播圖里塞，這個(gè)行為就已經(jīng)注定這個(gè)活動(dòng)的用戶(hù)參與度是很低的了。除了個(gè)別電商產(chǎn)品，他們以賣(mài)廣告位給商家作為盈利點(diǎn)，但即便如此，我相信這個(gè)廣告位除了第一張圖的點(diǎn)擊量稍高外，其他圖片的點(diǎn)擊量相對于產(chǎn)品本身的用戶(hù)體量而言還是很低的。這也是為什么部分產(chǎn)品把輪播圖規則改為用戶(hù)進(jìn)入首頁(yè)隨機展示輪播圖頁(yè)面，而不是強制指定于顯示第一張的原因。
如果你的產(chǎn)品有很多活動(dòng)是在同時(shí)期進(jìn)行的，那么我給部分產(chǎn)品的建議是放一個(gè)活動(dòng)主題入口，如下圖。（當然，這要視情況而定，并不是通用的。）
另外，如果你的產(chǎn)品頂部 Banner 僅僅只是展示位，那么我建議不要浪費空間，把它利用起來(lái)?？梢宰銎放菩麄?、可以做產(chǎn)品推廣、可以做數據展示等等。這一點(diǎn)，我覺(jué)得「大眾點(diǎn)評」的設計方式就很棒。想了解的，可以去親自體驗下。
小結
很多人一直在做移動(dòng)端的產(chǎn)品設計，但是很少會(huì )去理解其背后的原理。而了解這些原理，能夠幫助你更好的設計產(chǎn)品。我個(gè)人還是主張具體問(wèn)題具體分析，這里只是給各位一個(gè)思考的路徑，至于具體設備、情況、功能，還是要基于當下情況來(lái)做詳細解析。
以上知識是我早期學(xué)習并總結的一小部分內容，長(cháng)期存儲于我的個(gè)人筆記中，更多的是用來(lái)自我總結。這次分享給各位，希望能有所幫助。
如果你覺(jué)得有用，可以點(diǎn)個(gè)贊，后面我會(huì )持續輸出。
來(lái)源：UI中國，成都軟件開(kāi)發(fā)
