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