手指友好型設(shè)計(jì) – 為了更好的點(diǎn)擊而設(shè)計(jì)

0 評(píng)論 6547 瀏覽 3 收藏 7 分鐘

玩飛鏢的時(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

 

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!