大家好炒考，我是小北，廣美交互專業(yè)的童鞋霎迫，又過去一周了斋枢，今天繼續(xù)分享一篇我翻譯的國外設(shè)計(jì)師的文章，希望我們可以一起學(xué)習(xí)前人經(jīng)驗(yàn)知给，一起進(jìn)步瓤帚，當(dāng)然后面我也會(huì)分享一些我個(gè)人的設(shè)計(jì)案例給大家，希望對(duì)大家有所幫助！
如果有一件事可以經(jīng)得住時(shí)間的考驗(yàn)缘滥，那便是在移動(dòng)端關(guān)于拇指的位置設(shè)計(jì)了轰胁≮酥鳎”拇指區(qū)域“在Stevenhoober研究中作為一個(gè)術(shù)語被我們認(rèn)識(shí)朝扼，它是移動(dòng)界面的設(shè)計(jì)和開發(fā)中的一個(gè)重要因素。
試問你曾經(jīng)使用過一個(gè)簡(jiǎn)單到不需要使用拇指就能操作的手機(jī)網(wǎng)站或者手機(jī)應(yīng)用嗎霎肯？可能你曾經(jīng)非常艱難的去點(diǎn)擊到一個(gè)重要的菜單擎颖，像這樣的情況顯然是因?yàn)楹苌倏紤]拇指區(qū)域。
在這篇文章观游，我將分享一些我了解到的拇指區(qū)域的知識(shí)和如何將這些知識(shí)用到導(dǎo)航搂捧，卡片和滑動(dòng)手勢(shì)中。
正像之前提到的懂缕，steven hoober在《手機(jī)界面設(shè)計(jì)》中研究指出了拇指區(qū)允跑。這是我第一次遇見在開發(fā)中的一個(gè)需要著重考慮的拇指的概念。沿著steven hoober的研究搪柑，Josh Clark 在他的《為了觸摸設(shè)計(jì)》一書中記錄了關(guān)于人們?nèi)绾问褂盟麄兊脑O(shè)備的更深入的研究聋丝。使用steven hoober和Josh Clark 的拇指如何在設(shè)備上交互的研究，我使用元素在不同位置的線框圖做了用戶測(cè)試工碾。測(cè)試了導(dǎo)航在屏幕的底部和頂部弱睦，不同位置的按鈕的卡片和在拇指區(qū)以內(nèi)或者之外的手勢(shì)區(qū)。測(cè)試結(jié)果驗(yàn)證了steven hoober和Josh Clark 的研究渊额，并且提供了在設(shè)計(jì)中什么是有效的什么是無效的真實(shí)依據(jù)况木。我也將分享關(guān)于我們測(cè)試的關(guān)于設(shè)計(jì)元素的一些發(fā)現(xiàn)。讓我們開始吧旬迹。
拇指VS觸屏
擁有相對(duì)獨(dú)立的拇指是美妙的火惊！除了使得我們比水母更酷以外，拇指也是我們?nèi)绾瓮謾C(jī)設(shè)備觸屏進(jìn)行交互的關(guān)鍵奔垦。steven hoober的研究指出超過49%的人們用一只手使用它們的智能手機(jī)屹耐，并且依靠大拇指來承擔(dān)這個(gè)重任。Josh Clark更進(jìn)一步斷定75%的交互是拇指驅(qū)動(dòng)的宴倍。用這種對(duì)手的位置的理解张症，我們可以推斷出拇指活動(dòng)的特殊區(qū)域在支持大多數(shù)智能手機(jī)。我們定義這些區(qū)域?yàn)橐子谟|及的鸵贬，難以觸及的和介于兩者之間的三個(gè)部分俗他。
我們?yōu)樽笫钟沂值挠脩衾L制了拇指區(qū)圖，重疊區(qū)域展示了大多數(shù)用戶最好觸及的區(qū)域
關(guān)鍵是為用戶拇指區(qū)域去設(shè)計(jì)阔逼，這里為更好地做出設(shè)計(jì)決策兆衅，創(chuàng)造人性化的體驗(yàn)和更少陷入困惑提供了一個(gè)框架，通過用戶測(cè)試和實(shí)驗(yàn)，我發(fā)現(xiàn)了一些工作中每天都使用這些知識(shí)的方法羡亩。
導(dǎo)航的問題
我們都記得這一幕摩疑，手機(jī)導(dǎo)航是一個(gè)底部tab切換菜單，這不是好看的但他可以很好完成任務(wù)畏铆。今天雷袋，我們看到了無數(shù)導(dǎo)航設(shè)計(jì)的例子，什么是最適合拇指區(qū)使用的的呢辞居？然而我了解到的用戶自然反應(yīng)是首先陷入思考楷怒。問問題；“我使用的應(yīng)用有一個(gè)很長(zhǎng)的鏈接列表嗎瓦灶？”我是否需要混合菜單鸠删？ 什么和我的網(wǎng)頁設(shè)計(jì)比較搭呢？去問這些問題將會(huì)幫助你決定什么位置放導(dǎo)航觸發(fā)器什么位置放選擇工具贼陶。
如果你的應(yīng)用有一個(gè)很長(zhǎng)的鏈接列表刃泡，你很可能會(huì)用覆蓋全屏的菜單.這種類型的菜單為您提供足夠的空間組織列表,社交按鈕和其他有用的內(nèi)容。他可以在臺(tái)式電腦和移動(dòng)設(shè)備上自由適配碉怔，同時(shí)這種菜單提供了一個(gè)在拇指區(qū)內(nèi)排列點(diǎn)擊的選項(xiàng)烘贴。
huge在移動(dòng)端使用覆蓋全屏的菜單：
相反，如果你的app沒有長(zhǎng)的鏈接列表眨层，一個(gè)標(biāo)簽菜單會(huì)更適合庙楚。這種樣式的菜單根據(jù)設(shè)計(jì)可以放在屏幕的頂部或者底部，并且可以提供重要的預(yù)定趴樱，消息和清單信息馒闷。
airbnb手機(jī)APP使用標(biāo)簽導(dǎo)航，放在了屏幕底部叁征，更容易接受預(yù)定纳账，消息，列表的重要信息
如果你有一個(gè)大型的網(wǎng)站捺疼，混合菜單將會(huì)更有效果疏虫。因?yàn)榛旌喜藛螌?huì)變得更復(fù)雜，所以基于APP內(nèi)容的重要性去設(shè)計(jì)菜單鏈接的順序是有效的方法啤呼。
標(biāo)簽（直譯為粘合）菜單很適合普通的訪問鏈接卧秘，而全屏菜單和抽屜菜單更適合重要的鏈接而不是頻繁使用的鏈接。
看下facebook的APP
Facebook的混合菜單是基于內(nèi)容大小的官扣。在屏幕的中間部分翅敌，我們可以看到有兩個(gè)標(biāo)簽菜單，各自都包含了對(duì)于用戶有價(jià)值的鏈接惕蹄。頂部的標(biāo)簽菜單在伸展區(qū)域蚯涮，在頁面中很淺顯看起來很舒服治专。底部的標(biāo)簽菜單被設(shè)計(jì)成更易于點(diǎn)擊的熱門鏈接。通過手機(jī)用戶數(shù)據(jù)遭顶，利用拇指區(qū)域嘗試做好的設(shè)計(jì),Facebook正在使用標(biāo)簽菜單张峰。下次當(dāng)你正在使用你朋友的郵箱時(shí)，記得這些決策棒旗，這會(huì)幫助你設(shè)計(jì)更好的使用體驗(yàn)喘批。記住除去在拇指區(qū)域使用重要的導(dǎo)航，被放在拇指區(qū)域以外的鏈接也是可以讓用戶接收的嗦哆。通常我們會(huì)將經(jīng)常使用的鏈接放在拇指區(qū)域谤祖，不是經(jīng)常使用的鏈接放在難以觸及的區(qū)域。
保持友好的卡片
下面老速，我們一起探討一個(gè)好的卡片設(shè)計(jì)怎么為你的app使用⊥怪鳎卡片模式一直被廣泛使用橘券。卡片是快速的卿吐，簡(jiǎn)單的旁舰，可被預(yù)知的。他們將大量的信息分解成小信息嗡官，使得他們?nèi)菀自诤线m的時(shí)間出現(xiàn)合適的內(nèi)容箭窜。我們經(jīng)常使用卡片去：發(fā)送，保存衍腥，完成磺樱，關(guān)閉等等操作。
我們經(jīng)在這個(gè)例子里我們看到這個(gè)ponch,天氣預(yù)報(bào)的APP婆咸。這一個(gè)很好的使用卡片放置一個(gè)可點(diǎn)擊的鏈接：天氣預(yù)報(bào)不需要拇指點(diǎn)擊竹捉，因此他被設(shè)計(jì)在了不易點(diǎn)擊的區(qū)域。而主要的任務(wù)項(xiàng)-分享按鈕-被放在了易于點(diǎn)擊區(qū)域尚骄。一方面块差，ponch 將搜索位置和使用當(dāng)前位置的鏈接放在難以點(diǎn)擊的區(qū)域。這是可以接受的：用戶不會(huì)經(jīng)常使用這些功能倔丈，因?yàn)锳PP會(huì)記住你最近一次打開時(shí)候的位置憨闰。另一方面，很多時(shí)候卡片模式不會(huì)被使用在拇指區(qū)域需五。一個(gè)最直接的例子是esty這個(gè)APP鹉动，在結(jié)帳,etsy為用戶提供一個(gè)表單彈窗用以填入送貨信息:
乍一看，這種卡片的用法看似合理和專業(yè)的警儒。深入的研究后,我們看到的缺點(diǎn)训裆。第一個(gè)問題是取消按鈕在左上角眶根。這個(gè)取消按鈕是用來關(guān)閉彈窗卡片的還是取消結(jié)賬的呢？（如果我感到困惑边琉，那么我確信其他人會(huì)和我一樣困惑）,關(guān)閉X鍵在拇指區(qū)域的邊緣属百，使得用戶很難點(diǎn)擊到它。
這是一個(gè)兩難的選擇：增加一個(gè)關(guān)閉按鈕在卡片的頂部拐角是一個(gè)普遍的設(shè)計(jì)思路变姨，但他會(huì)影響到拇指區(qū)域的標(biāo)題族扰。如果你去打破拇指區(qū)域去滿足用戶期望，尋找一種替代性的解決方案定欧。我會(huì)建議你增加一個(gè)關(guān)閉按鈕在卡片底部渔呵，由于在傳播簡(jiǎn)短語句時(shí)卡片是最好的，我們可以限制在卡片上的內(nèi)容的長(zhǎng)度砍鸠±┣猓卡片設(shè)計(jì)一直被沿用，通過拇指區(qū)域去進(jìn)行設(shè)計(jì)來確保更多的元素是簡(jiǎn)單易用的爷辱，而不是讓人困惑的是一個(gè)好方法录豺。為了避免跟風(fēng)，相反要把以用戶為中心的設(shè)計(jì)原則貫穿在整個(gè)APP的設(shè)計(jì)和開發(fā)中饭弓。
手勢(shì)和動(dòng)作
手勢(shì)：點(diǎn)擊双饥，雙擊，滑動(dòng)弟断，拖拽咏花，捏合，按阀趴。這些都是智能手機(jī)最表象的東西昏翰。手勢(shì)使得我們可以通過觸覺去使用產(chǎn)品。你可能會(huì)猜到我們將在拇指區(qū)域使用手勢(shì)舍咖。然而最重要的是矩父，要讓用戶自然地使用手勢(shì)。這似乎是顯而易見的,但要真正實(shí)現(xiàn)一個(gè)舒適的體驗(yàn),重要的是要預(yù)測(cè)手勢(shì)應(yīng)該發(fā)生的位置排霉。
我們專注在滑動(dòng)的交互窍株。通過使用滑動(dòng)軌跡的插件，我發(fā)現(xiàn)了一些有趣的手勢(shì)滑動(dòng)數(shù)據(jù)
在上面這個(gè)圖中攻柠，圓圈代表點(diǎn)擊球订，箭頭代表滑動(dòng)。測(cè)試的數(shù)據(jù)顯示用戶經(jīng)彻迮ィ滑動(dòng)某個(gè)地方從邊緣到中間的位置冒滩，并且是斜著的。同時(shí)我也發(fā)現(xiàn)用戶通常會(huì)在拇指區(qū)域的舒適區(qū)滑動(dòng)浪谴。最初开睡，在這個(gè)需要在拇指區(qū)滑動(dòng)手勢(shì)的測(cè)試前因苹，我誤認(rèn)為用戶會(huì)水平滑動(dòng)，那是因?yàn)槲业脑O(shè)計(jì)規(guī)范中沒有提供足夠的空間去滑動(dòng)篇恒。后來像大多數(shù)手機(jī)端的設(shè)計(jì)扶檐，我考慮滑動(dòng)時(shí)拇指需要的空間。發(fā)現(xiàn)合適的滑動(dòng)區(qū)域的尺寸是長(zhǎng)寬至少要45個(gè)像素胁艰。
通過以上描述款筑，我們可以總結(jié)出，當(dāng)有足夠的空間防止誤觸時(shí)腾么，在易于點(diǎn)擊的區(qū)域去設(shè)計(jì)手勢(shì)操作是很好的奈梳。
一個(gè)最好的滑動(dòng)手勢(shì)的例子是谷歌的inbox APP
一個(gè)google的inbox app 在合適的位置使用了滑動(dòng)手勢(shì)雇毫，同時(shí)也有合適的空間赶舆。
這里有這些明智的決策：
1-保證滑動(dòng)手勢(shì)在難以觸及的區(qū)域之外
2-給出足夠的點(diǎn)擊區(qū)域绞铃，
3-允許每一個(gè)郵件區(qū)域的元素中從任何地方都可以滑動(dòng)
有了這些贝次，手勢(shì)操作會(huì)是自然舒適的，也使得電子郵箱的管理更加的快速簡(jiǎn)單野芒。
堅(jiān)持到底 Google缕允！
總結(jié)
我們能學(xué)到什么呢旁趟？希望你可以理解為什么拇指區(qū)域是很重要的艰匙。記住這些點(diǎn)：
1-移動(dòng)設(shè)備和語言會(huì)改變，但是只要有觸摸屏抹恳，拇指區(qū)域就仍是設(shè)計(jì)的關(guān)鍵部分员凝。
2-當(dāng)重要的鏈接被放在易于點(diǎn)擊的區(qū)域，而不重要的鏈接被放在難以觸及的區(qū)域時(shí)奋献，導(dǎo)航設(shè)計(jì)是適合拇指使用的健霹。
3-當(dāng)內(nèi)容和動(dòng)作很適合拇指區(qū)域，卡片設(shè)計(jì)有著很好的優(yōu)勢(shì)
4-當(dāng)我們?cè)诳紤]一個(gè)人如何在玻璃屏幕上滑動(dòng)時(shí)瓶蚂，決定使用滑動(dòng)手勢(shì)區(qū)域?qū)?huì)更簡(jiǎn)單易用糖埋。
翻譯：史亮
校對(duì)：郜蕾
用時(shí)：編輯2時(shí)10分，校對(duì)25分
日期：2016-11-14 （日） 2：38
“原文地址：https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/?utm_source=wanqu.co&utm_campaign=Wanqu+Daily&utm_medium=ios#learning-from-the-best
譯文僅用于學(xué)習(xí)交流窃这，如有其它用途請(qǐng)聯(lián)系原作者瞳别， 譯文轉(zhuǎn)載請(qǐng)注明本人簡(jiǎn)書鏈接！
stay foolish ,stay hungry!
