你有沒有遇到過一款APP讓你用的很不舒服？你的拇指必須要伸得老遠才能夠得到菜單，或者頁面里元素太多導致你經常誤操作。這些都是因為交互設計師在設計的時候沒有考慮拇指的感受，或者更學術化點說，沒有考慮到“拇指法則”。

“拇指法則”是資深交互設計大神Steven Hoober在2013年對1300名手機用戶的調查研究后提出來一個新名詞。他通過研究發(fā)現，49%的用戶都是單手拿著手機，使用拇指進行操作。甚至某些大屏手機使我們不得不進行雙手持握的時候，多數人也還是傾向于使用自己的拇指。Josh Clark在另一項研究中也得出了類似的結論，他指出：75%的手機交互都是由拇指完成的。因此我們也可以說，對觸摸屏手機進行交互設計，主要針對的就是拇指。

人類的拇指遠比猿類靈活有力，使人類擁有了準確的抓握能力，最終發(fā)展出使用工具的能力 。然而在手機操作中，拇指的可操作區(qū)域是有限的。如果我們竭盡全力，拇指可以在整個手機屏幕上進行操作（大屏手機除外），但是這也會影響用戶使用的舒適度。

上圖就是手指在手機的活動范圍熱圖，我們通過到拇指距離將其分為Natural區(qū)（容易操作），Stretching區(qū)（拇指需要伸直才能操作）和Hard區(qū)（拇指比較難操作）。這個手指活動熱圖可以在我們產品原型圖設計時提供很多幫助，比如將一些用戶經常用到的功能放到Natural區(qū)或Stretching區(qū)，一些用戶不怎么使用的模塊可以放到Hard區(qū)。

導航菜單

我們都記得曾經有一段時間手機的導航功能是通過下拉列表來實現的，用戶通過點擊列表里的相應的鏈接進入特定的頁面。這種設計雖然不好看，但是卻很實用。最起碼它實現了導航的基本功能：告訴用戶“他們在哪兒？”以及“他們能去哪兒？”?，F如今新的設計理念不斷涌入到導航設計中，那么哪種導航模式最適合我們的拇指呢？

如果使用一個長的鏈接列表來做導航菜單的話，那么全屏菜單這個模式可能會更加適合一些。因為所有的列表項都處于拇指容易操作的區(qū)域，而且元素都足夠大也不會發(fā)生誤操作的情況。

當然，我們也可以將導航菜單欄放在頂部或者底部，這種設計模式也可以提供多條鏈接。比如新浪微博，將用戶主要使用的功能都放在底部欄中，用戶可以很容易的進行操作。

如果你的網站內容比較多，混合模式的導航菜單可能會更加適合。網易云采用的就是混合模式的菜單布局，我們可以看到底部和頂部各有一個菜單欄，頂部菜單欄處于Stretching區(qū)，拇指可以相對容易的進行操作。而“發(fā)現音樂”，“我的音樂”，“朋友”和“帳號”這四個用戶使用頻率更高的功能被放在Natural區(qū)，拇指可以很方便的進行操作。

友好式卡片設計

卡片式設計現在大行其道，被廣泛應用?？ㄆ皆O計可以快速直接的將信息展示出來，比如新消息，天氣，日程等信息直接在卡片上呈現。接下來我們將通過兩個例子來看“拇指法則”在卡片設計中應用。

在上面這款天氣類APP中，我們可以看到“城市搜索”和“使用當前位置”被放在頁面最頂部的Hard區(qū)，這是因為系統(tǒng)會記住你上次打開應用時的位置。而我們一般只關注自身所在地的天氣情況，所有以上的兩個功能我們很少會用到。那么一款天氣類APP肯定希望可以得到推廣以贏得更多的用戶，所有將“分享”按鈕放在Natural區(qū)來誘導客戶將其分享到朋友圈。

看完好的例子，接下來再看一個反面典型，這是一個電商APP的購買流程頁面，點擊“添加新的收貨地”會彈出一個表單。這個頁面乍一看沒什么問題，但是仔細一觀察就會發(fā)現問題。首先，頁面左上方的“取消”鏈接會給人帶來誤解，如果我點擊它那么是整個購買流程被取消還是“添加新的收獲地”這個操作被取消？還有表單右上方的關閉按鈕位于Hard區(qū)的邊緣，拇指很難進行直接有效的操作。這時最好的方法就是縮減表單內容，讓關閉按鈕可以下降到Natural區(qū)。我們要知道卡片式設計最吸引人之處就是其可以在很小屏幕區(qū)域內展示盡量多的內容，卡片的本身也對信息進行了歸類整理的作用，使用戶看的一目了然。如果我們一味著追求設計感而使卡片內容過于臃腫這無異丟掉了卡片固有短小精悍的精髓。

手勢

在上圖中，圓圈代表點擊，剪頭代表滑動。研究數據表明，用戶習慣于由邊緣向中間滑動和由上向下滑動。而且大部分滑動操作都是在Natural區(qū)完成。

我以前誤以為滑動的時候是完全水平方向的，這讓我在設計過程中給單個元素的滑動高度過小，因為我沒有考慮用戶向下滑動的距離。這樣就導致了用戶在滑動過程中會觸碰到下面的其他元素。最后我經過多次的實驗發(fā)現一個的滑動手勢的完成最少是45*45像素。

谷歌的Inbox就是一個很好的例子。

總結

1、移動端設備不斷在變化，新的技術也不斷涌現。但是只要是觸摸屏這種交互模式還在，那么拇指就是設計環(huán)節(jié)中必須要考慮的一個因素。

2、友好式卡片設計意味著重要的功能（或者你希望用戶操作）要位于拇指容易操作的區(qū)域，不重要的功能可以放在拇指不容易操作的區(qū)域。

3、讓滑動手勢盡量遠離拇指難以觸碰的范圍，?提供足夠大的點擊區(qū)域，避免誤操作。

本文由 @王M爭 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。