在這篇文章，我將分享一些我了解到的拇指區(qū)域的知識和如何將這些知識用到導航，卡片和滑動手勢中。

如果有一件事可以經(jīng)得住時間的考驗，那便是在移動端關于拇指的位置設計了?！蹦粗竻^(qū)域“在Stevenhoober研究中作為一個術語被我們認識，它是移動界面的設計和開發(fā)中的一個重要因素。

試問你曾經(jīng)使用過一個簡單到不需要使用拇指就能操作的手機網(wǎng)站或者手機應用嗎？可能你曾經(jīng)非常艱難的去點擊到一個重要的菜單，像這樣的情況顯然是因為很少考慮拇指區(qū)域。

正像之前提到的，steven hoober在《手機界面設計》中研究指出了拇指區(qū)。這是我第一次遇見在開發(fā)中的一個需要著重考慮的拇指的概念。沿著steven hoober的研究，Josh Clark 在他的《為了觸摸設計》一書中記錄了關于人們?nèi)绾问褂盟麄兊脑O備的更深入的研究。使用steven hoober和Josh Clark 的拇指如何在設備上交互的研究，我使用元素在不同位置的線框圖做了用戶測試。測試了導航在屏幕的底部和頂部，不同位置的按鈕的卡片和在拇指區(qū)以內(nèi)或者之外的手勢區(qū)。測試結果驗證了steven hoober和Josh Clark 的研究，并且提供了在設計中什么是有效的什么是無效的真實依據(jù)。我也將分享關于我們測試的關于設計元素的一些發(fā)現(xiàn)。讓我們開始吧。

拇指VS觸屏

擁有相對獨立的拇指是美妙的！除了使得我們比水母更酷以外，拇指也是我們?nèi)绾瓮謾C設備觸屏進行交互的關鍵。steven hoober的研究指出超過49%的人們用一只手使用它們的智能手機，并且依靠大拇指來承擔這個重任。Josh Clark更進一步斷定75%的交互是拇指驅(qū)動的。用這種對手的位置的理解，我們可以推斷出拇指活動的特殊區(qū)域在支持大多數(shù)智能手機。我們定義這些區(qū)域為易于觸及的，難以觸及的和介于兩者之間的三個部分。

我們?yōu)樽笫钟沂值挠脩衾L制了拇指區(qū)圖，重疊區(qū)域展示了大多數(shù)用戶最好觸及的區(qū)域。

關鍵是為用戶拇指區(qū)域去設計，這里為更好地做出設計決策，創(chuàng)造人性化的體驗和更少陷入困惑提供了一個框架。通過用戶測試和實驗，我發(fā)現(xiàn)了一些工作中每天都使用這些知識的方法。

導航的問題

我們都記得這一幕，手機導航是一個底部tab切換菜單，這不是好看的但他可以很好完成任務。今天，我們看到了無數(shù)導航設計的例子，什么是最適合拇指區(qū)使用的的呢？然而我了解到的用戶自然反應是首先陷入思考。問問題；“我使用的應用有一個很長的鏈接列表嗎？”我是否需要混合菜單？ 什么和我的網(wǎng)頁設計比較搭呢？去問這些問題將會幫助你決定什么位置放導航觸發(fā)器什么位置放選擇工具。

如果你的應用有一個很長的鏈接列表，你很可能會用覆蓋全屏的菜單.這種類型的菜單為您提供足夠的空間組織列表,社交按鈕和其他有用的內(nèi)容。他可以在臺式電腦和移動設備上自由適配，同時這種菜單提供了一個在拇指區(qū)內(nèi)排列點擊的選項。

huge在移動端使用覆蓋全屏的菜單：

huge使用覆蓋全屏的菜單

相反，如果你的app沒有長的鏈接列表，一個標簽菜單會更適合。這種樣式的菜單根據(jù)設計可以放在屏幕的頂部或者底部，并且可以提供重要的預定，消息和清單信息。

airbnb手機APP使用標簽導航，放在了屏幕底部，更容易接受預定，消息，列表的重要信息。

airbnb的手機APP有一個固定的導航

如果你有一個大型的網(wǎng)站，混合菜單將會更有效果。因為混合菜單將會變得更復雜，所以基于APP內(nèi)容的重要性去設計菜單鏈接的順序是有效的方法。

標簽（直譯為粘合）菜單很適合普通的訪問鏈接，而全屏菜單和抽屜菜單更適合重要的鏈接而不是頻繁使用的鏈接。

看下facebook的APP：

如上圖，F(xiàn)acebook的手機APP結合了大量的修改后的菜單和抽屜。

Facebook的混合菜單是基于內(nèi)容大小的。在屏幕的中間部分，我們可以看到有兩個標簽菜單，各自都包含了對于用戶有價值的鏈接。頂部的標簽菜單在伸展區(qū)域，在頁面中很淺顯看起來很舒服。底部的標簽菜單被設計成更易于點擊的熱門鏈接。通過手機用戶數(shù)據(jù)，利用拇指區(qū)域嘗試做好的設計,Facebook正在使用標簽菜單。下次當你正在使用你朋友的郵箱時，記得這些決策，這會幫助你設計更好的使用體驗。記住除去在拇指區(qū)域使用重要的導航，被放在拇指區(qū)域以外的鏈接也是可以讓用戶接收的。通常我們會將經(jīng)常使用的鏈接放在拇指區(qū)域，不是經(jīng)常使用的鏈接放在難以觸及的區(qū)域。

保持友好的卡片

下面，我們一起探討：一個好的卡片設計怎么為你的app使用？

卡片模式一直被廣泛使用?？ㄆ强焖俚?，簡單的，可被預知的。他們將大量的信息分解成小信息，使得他們?nèi)菀自诤线m的時間出現(xiàn)合適的內(nèi)容。我們經(jīng)常使用卡片去：發(fā)送，保存，完成，關閉等等操作。

ponch 天氣預報的卡片設計

我們經(jīng)在這個例子里我們看到這個ponch,天氣預報的APP。這一個很好的使用卡片放置一個可點擊的鏈接：天氣預報不需要拇指點擊，因此他被設計在了不易點擊的區(qū)域。而主要的任務項-分享按鈕-被放在了易于點擊區(qū)域。一方面，ponch 將搜索位置和使用當前位置的鏈接放在難以點擊的區(qū)域。這是可以接受的：用戶不會經(jīng)常使用這些功能，因為APP會記住你最近一次打開時候的位置。另一方面，很多時候卡片模式不會被使用在拇指區(qū)域。一個最直接的例子是esty這個APP，在結帳,etsy為用戶提供一個表單彈窗用以填入送貨信息:

乍一看，這種卡片的用法看似合理和專業(yè)的。深入的研究后,我們看到的缺點。第一個問題是取消按鈕在左上角。這個取消按鈕是用來關閉彈窗卡片的還是取消結賬的呢？（如果我感到困惑，那么我確信其他人會和我一樣困惑）,關閉X鍵在拇指區(qū)域的邊緣，使得用戶很難點擊到它。

這是一個兩難的選擇：增加一個關閉按鈕在卡片的頂部拐角是一個普遍的設計思路，但他會影響到拇指區(qū)域的標題。如果你去打破拇指區(qū)域去滿足用戶期望，尋找一種替代性的解決方案。我會建議你增加一個關閉按鈕在卡片底部，由于在傳播簡短語句時卡片是最好的，我們可以限制在卡片上的內(nèi)容的長度。卡片設計一直被沿用，通過拇指區(qū)域去進行設計來確保更多的元素是簡單易用的，而不是讓人困惑的是一個好方法。為了避免跟風，相反要把以用戶為中心的設計原則貫穿在整個APP的設計和開發(fā)中。

手勢和動作

手勢：點擊，雙擊，滑動，拖拽，捏合，按。這些都是智能手機最表象的東西。手勢使得我們可以通過觸覺去使用產(chǎn)品。你可能會猜到我們將在拇指區(qū)域使用手勢。然而最重要的是，要讓用戶自然地使用手勢。這似乎是顯而易見的,但要真正實現(xiàn)一個舒適的體驗,重要的是要預測手勢應該發(fā)生的位置。

我們專注在滑動的交互。通過使用滑動軌跡的插件，我發(fā)現(xiàn)了一些有趣的手勢滑動數(shù)據(jù)。

在上面這個圖中，圓圈代表點擊，箭頭代表滑動。測試的數(shù)據(jù)顯示用戶經(jīng)?；瑒幽硞€地方從邊緣到中間的位置，并且是斜著的。同時我也發(fā)現(xiàn)用戶通常會在拇指區(qū)域的舒適區(qū)滑動。最初，在這個需要在拇指區(qū)滑動手勢的測試前，我誤認為用戶會水平滑動，那是因為我的設計規(guī)范中沒有提供足夠的空間去滑動。后來像大多數(shù)手機端的設計，我考慮滑動時拇指需要的空間。發(fā)現(xiàn)合適的滑動區(qū)域的尺寸是長寬至少要45個像素。

通過以上描述，我們可以總結出，當有足夠的空間防止誤觸時，在易于點擊的區(qū)域去設計手勢操作是很好的。

• 一個最好的滑動手勢的例子是谷歌的inbox APP
• 一個google的inbox app 在合適的位置使用了滑動手勢，同時也有合適的空間

這里有這些明智的決策：

1. 保證滑動手勢在難以觸及的區(qū)域之外
2. 給出足夠的點擊區(qū)域，
3. 允許每一個郵件區(qū)域的元素中從任何地方都可以滑動

有了這些，手勢操作會是自然舒適的，也使得電子郵箱的管理更加的快速簡單。

堅持到底 Google！

總結

我們能學到什么呢？希望你可以理解為什么拇指區(qū)域是很重要的。記住這些點：

1. 移動設備和語言會改變，但是只要有觸摸屏，拇指區(qū)域就仍是設計的關鍵部分；
2. 當重要的鏈接被放在易于點擊的區(qū)域，而不重要的鏈接被放在難以觸及的區(qū)域時，導航設計是適合拇指使用的；
3. 當內(nèi)容和動作很適合拇指區(qū)域，卡片設計有著很好的優(yōu)勢；
4. 當我們在考慮一個人如何在玻璃屏幕上滑動時，決定使用滑動手勢區(qū)域?qū)唵我子谩?/li>

我是小北，廣美交互專業(yè)的童鞋，今天分享的是我翻國外設計師的一篇文章，希望我們可以一起學習前人經(jīng)驗，一起進步。當然，后面我也會分享一些我個人的設計案例給大家，希望對大家有所幫助！

翻譯：史亮，校對：郜蕾

來源：http://www.jianshu.com/p/78f9202e00fe

本文由 @我是小北?授權發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉載。