玩飛鏢的時(shí)候，靶心是最難射中的位置，因?yàn)榘行氖钦麄€(gè)靶面上面積最小的部分。越是小的目標(biāo)，就越是難以達(dá)到。這個(gè)準(zhǔn)則在移動(dòng)設(shè)備的觸摸屏幕上同樣適用。

眾所周知，對(duì)于觸屏設(shè)備用戶(hù)來(lái)說(shuō)，面積小的目標(biāo)比面積大的目標(biāo)更難操縱。所以，在設(shè)計(jì)移動(dòng)設(shè)備界面的時(shí)候，觸控目標(biāo)一定要充分的大，足以讓用戶(hù)操作 自如。但是多大才算充分呢？多大才是對(duì)于大多數(shù)用戶(hù)最合適的尺寸呢？各大移動(dòng)設(shè)備開(kāi)發(fā)者已經(jīng)認(rèn)識(shí)到這個(gè)問(wèn)題，最常見(jiàn)的做法是在各大廠商的用戶(hù)界面設(shè)計(jì)文檔 中尋找答案。

那么，設(shè)計(jì)文檔怎么說(shuō)？

Apple的IPhone Human Interface Guidelines推薦觸控目標(biāo)的最小尺寸是44*44 pixels。Google的Android Design說(shuō)7-10mm是比較理想的尺寸。Microsoft的Windows Phone UI Design and Interaction Guide推薦的最小觸控目標(biāo)尺寸為7*7mm（26*26px），理想的尺寸為9*9mm（34*34px）。Nokia的開(kāi)發(fā)指南建議目標(biāo)尺寸應(yīng)該不小于10*10mm（28*28px）。

雖然每個(gè)設(shè)計(jì)文檔都給出了大體的合適尺寸，但是我們可以看到各個(gè)設(shè)計(jì)文檔都有所不同。實(shí)際上，有些他們所推薦的尺寸是遠(yuǎn)小于用戶(hù)手指尺寸的，而正是這些誤差導(dǎo)致了用戶(hù)在操作過(guò)程中的種種問(wèn)題。

小目標(biāo)，大問(wèn)題

如果觸控目標(biāo)太小的話，用戶(hù)需要付出額外的精力來(lái)進(jìn)行精確的點(diǎn)擊。用戶(hù)需要不斷的調(diào)整他們的手指來(lái)點(diǎn)擊目標(biāo)并獲得反饋。有的人習(xí)慣用指腹，這樣可以 覆蓋整個(gè)目標(biāo)區(qū)域，但如此以來(lái)就很難在點(diǎn)擊的同時(shí)看到按鈕的內(nèi)容，也看不到點(diǎn)擊的反饋。而有些人用指尖，這樣可以在點(diǎn)擊的同時(shí)獲得視覺(jué)反饋。如果用戶(hù)需要 多次嘗試才能到達(dá)目標(biāo)的話，就會(huì)影響任務(wù)操作的順暢，耗費(fèi)了不必要的精力，并且增加了用戶(hù)的挫折感。

除此之外，小的觸控目標(biāo)還很容易導(dǎo)致誤操作。當(dāng)小的按鈕被組合在一起的時(shí)候，用戶(hù)很容易因?yàn)槟繕?biāo)太小而點(diǎn)擊到鄰近的按鈕，從而觸發(fā)了其他動(dòng)作。這樣 的誤操作在用戶(hù)使用大拇指進(jìn)行操作時(shí)尤為明顯。有些用戶(hù)為了在點(diǎn)擊的同時(shí)看到反饋甚至將手指?jìng)?cè)過(guò)來(lái)進(jìn)行點(diǎn)擊，其實(shí)，這完全是可以避免的。

對(duì)于用戶(hù)來(lái)說(shuō)，很多時(shí)候他們只有一只手來(lái)操作設(shè)備，單手握持設(shè)備的時(shí)候，大概就只能用拇指進(jìn)行點(diǎn)擊操作了。我們的設(shè)計(jì)不能因?yàn)橛脩?hù)用的是拇指而不是食指而出現(xiàn)更難點(diǎn)擊的情況，更不能導(dǎo)致他們的誤操作。

食指的平均寬度

MIT的一項(xiàng)研究指出，大多數(shù)成年人的食指寬度為16-20mm，換算后大約為45-57px，在設(shè)計(jì)文檔中，只有Apple的44px還比較接近。

如果觸控目標(biāo)的寬度能夠達(dá)到45-57px，那么操作起來(lái)就很舒適了，并且在進(jìn)行點(diǎn)擊的時(shí)候，按鈕的邊緣是可見(jiàn)的，這樣點(diǎn)擊的反饋也能很好的體現(xiàn)出來(lái)。用戶(hù)點(diǎn)擊和拖放目標(biāo)的速度也能大大提高。根據(jù)費(fèi)茨定律，目標(biāo)越小，達(dá)到目標(biāo)的時(shí)間越長(zhǎng)。小的目標(biāo)需要用戶(hù)付出額外的精力去精確的點(diǎn)擊它，增加目標(biāo)的寬度就不用擔(dān)心這些問(wèn)題了。

拇指的平均寬度

有的用戶(hù)喜歡用食指進(jìn)行操作，而用拇指的用戶(hù)更是大有人在。兩者最大的不同在于拇指更寬。一個(gè)成年人的拇指寬度大概是25mm，換算之后大約是72px。

對(duì)于拇指用戶(hù)來(lái)說(shuō)，72px寬的觸控區(qū)域能夠很好的進(jìn)行定位，同時(shí)也能看到目標(biāo)的邊緣和角落，從而獲得反饋信息。

Microsoft Research的一項(xiàng)研究發(fā)現(xiàn)，觸屏用戶(hù)的誤操作數(shù)量隨著點(diǎn)擊目標(biāo)的增大而減小，用戶(hù)點(diǎn)擊目標(biāo)的速度也隨之變快。

雖然增大目標(biāo)的尺寸有諸多好處，但在某些情況下也有例外。大家都知道，移動(dòng)設(shè)備的空間是很有限的，如果一味的增大按鈕目標(biāo)的尺寸，移動(dòng)設(shè)備尤其是手 機(jī)的屏幕肯定會(huì)不夠用。所以在設(shè)計(jì)的時(shí)候，我們必須解決屏幕大小和點(diǎn)擊目標(biāo)大小之間的沖突和矛盾，在屏幕允許的情況下盡可能的使用充分大的按鈕目標(biāo)，如果 實(shí)在不行，我們還有設(shè)計(jì)指南的推薦尺寸可用。

游戲中的應(yīng)用

另一個(gè)我們需要考慮的問(wèn)題是用戶(hù)什么時(shí)候用食指，什么時(shí)候用拇指。如果是在游戲當(dāng)中的話，用戶(hù)會(huì)更傾向于使用拇指進(jìn)行操作，想想PSP，NDS。所以，游戲應(yīng)用中的控制區(qū)域最好要適合拇指的寬度。同樣，觸控目標(biāo)的大小要既能舒適的控制，又能看到目標(biāo)的反饋。

毫無(wú)疑問(wèn)，讓移動(dòng)應(yīng)用中的觸控區(qū)大小與用戶(hù)手指尺寸相匹配大大提高了應(yīng)用的可用性。如果用戶(hù)在使用移動(dòng)應(yīng)用的時(shí)候還要特別花注意力來(lái)進(jìn)行點(diǎn)擊操作，那么其用戶(hù)體驗(yàn)必將大打折扣。

源地址：http://www.uedreamer.com/?p=258