在飛鏢游戲中，紅心非常難以命中，原因在于紅心是整個(gè)鏢盤上最小的目標(biāo)。同樣，推及到觸控設(shè)備中時(shí)，我們的“目標(biāo)”大小該如何設(shè)定呢?
小按鈕比大按鈕更難于操控。當(dāng)設(shè)計(jì)移動(dòng)界面時(shí)，最好把可點(diǎn)擊目標(biāo)的尺寸做大一點(diǎn)，這樣更利于用戶點(diǎn)擊。但這個(gè)“大”究竟需要多“大”，才能方便大多數(shù)用戶呢?很多移動(dòng)開發(fā)者也非常想知道這個(gè)問題的答案，最后都在各平臺(tái)的UI設(shè)計(jì)規(guī)范中找到了答案。
(Image credit: ogimogi)
移動(dòng)平臺(tái)設(shè)計(jì)指導(dǎo)規(guī)范告訴了我們什么?
在蘋果的《iPhone人機(jī)界面設(shè)計(jì)規(guī)范》中指出，最小的點(diǎn)擊目標(biāo)尺寸是44 x 44像素。微軟的《Windows手機(jī)用戶界面設(shè)計(jì)和交互指南》中建議使用34 x 34像素的尺寸，最小也要26 x 26 像素。諾基亞開發(fā)指南中建議，目標(biāo)尺寸應(yīng)該不小于1cm x 1cm或者28 x 28 像素。
盡管這些指導(dǎo)規(guī)范給我們列舉了各平臺(tái)下可點(diǎn)擊目標(biāo)的尺寸標(biāo)準(zhǔn)，但是彼此的標(biāo)準(zhǔn)并不一致，更無法和人類手指的實(shí)際尺寸相一致，他們的建議尺寸比手指的平均尺寸要小，這會(huì)影響觸摸屏下對(duì)于點(diǎn)擊目標(biāo)的精準(zhǔn)度。
小的點(diǎn)擊目標(biāo)會(huì)導(dǎo)致大問題
可點(diǎn)擊目標(biāo)尺寸太小，對(duì)于用戶體驗(yàn)來說就非常糟糕，因?yàn)槿绻_的觸控。用戶需要調(diào)整手指的操作方式，從指心操作，變?yōu)橹讣獠僮鳎@樣才能操作尺寸較小的目標(biāo)。使用指心操作通常會(huì)整個(gè)覆蓋操作對(duì)象，讓用戶無法分辨他們所要操作的目標(biāo)，也無法收到操作過程中的視覺反饋，也就無法知曉，他們的操作是否有效。當(dāng)用戶不得不用指尖進(jìn)行操作時(shí)，又出現(xiàn)了一個(gè)新問題，這種操作方式非常的慢，而且很吃力，體驗(yàn)很差。
問題不僅這些，目標(biāo)的尺寸過小還會(huì)導(dǎo)致失誤的觸摸操作。因?yàn)槌叽缧。匀菀讚頂D在一起，用戶容易觸碰到附近的目標(biāo)，導(dǎo)致運(yùn)行結(jié)果非用戶所愿。手指太大，目標(biāo)尺寸太小，一根手指的寬度大概能覆蓋兩個(gè)目標(biāo)的寬度。如果不按壓到錯(cuò)誤的位置，就會(huì)導(dǎo)致錯(cuò)誤的操作。食指容易出錯(cuò)，但是拇指更容易出錯(cuò)。因?yàn)槟粗父蟆⒏孔尽Ｓ袝r(shí)候用戶會(huì)傾斜拇指，使用拇指的側(cè)邊進(jìn)行操作，但是目標(biāo)尺寸過小，依然失誤頻繁。
在移動(dòng)用戶的日常操作中，拇指的使用非常頻繁。有時(shí)用戶無法騰開兩只手操作，只能用一只手握住手機(jī)，用拇指和食指操作。在這種場(chǎng)景下，用戶的操作精度有限，就需要提高目標(biāo)尺寸來避免操作錯(cuò)誤，這就是所謂的友好的觸控體驗(yàn)。
食指操作下的平均像素寬度
MIT觸摸實(shí)驗(yàn)室的做了一項(xiàng)研究，以手指指尖作為調(diào)查，分析其感覺機(jī)能。研究發(fā)現(xiàn)，成年人的食指寬度一般是1.6——2 cm。轉(zhuǎn)換成像素就是45——57 px，這比那些指導(dǎo)書上建議的寬度都要寬。
45——57 px的目標(biāo)尺寸非常夠用，用戶可以將整個(gè)手指緊貼在目標(biāo)上。在操作的過程中，用戶也能看到目標(biāo)的邊緣。這樣用戶與控制對(duì)象之間的反饋與信息傳達(dá)變的非常清晰，用戶也能知曉他們的操作是否有效。因?yàn)槌叽绱螅ㄎ桓欤弦埔哺奖恪ＹM(fèi)茨法則中提到過，目標(biāo)越小，操作耗時(shí)就越長(zhǎng)。小目標(biāo)減慢了用戶的操作速度，因?yàn)樾枰脩艏芯θゾ珳?zhǔn)定位。手指大小的目標(biāo)則不一樣，這種目標(biāo)給予用戶足夠的空間操作，容錯(cuò)率也很高。
拇指操作情況下的像素寬度
也有很多用戶用拇指敲擊屏幕上的目標(biāo)。拇指比食指要寬，平均寬度大概在2.5cm，轉(zhuǎn)換成像素是72 px。
72像素的實(shí)際使用效果很棒，更容易定位、操作的舒適感更好。同樣可以看到操作目標(biāo)的邊緣。這意味著用戶不用費(fèi)力的調(diào)整手指，使用指尖去操作了。也不用傾斜拇指，用拇指?jìng)?cè)面點(diǎn)擊目標(biāo)。
手指大小的目標(biāo)尺寸很理想，但也有特殊情況
將目標(biāo)尺寸的大小，設(shè)置為跟手指大小相近，其中的好處不再贅述。但并不是適合所有的設(shè)計(jì)場(chǎng)景。在移動(dòng)設(shè)備上，空間有限。這就意味著，如果每個(gè)目標(biāo)的大小都很大，那么屏幕空間根本不夠，就需要不斷的翻頁，這在體驗(yàn)上很糟糕。你需要測(cè)量屏幕尺寸，然后計(jì)算比例，搞清楚“在這種尺寸的屏幕上，合適的、最大的目標(biāo)尺寸是多少?”倘若你按照手指大小進(jìn)行尺寸調(diào)整，整個(gè)界面的比例很糟糕;再次按照比例調(diào)整后，最大的目標(biāo)尺寸效果也不假，那么就只能使用指導(dǎo)規(guī)范上的建議尺寸了。
對(duì)于平板設(shè)備來說，情況就沒有手機(jī)那么復(fù)雜，因?yàn)槠桨宓目臻g更多。不用害怕沒有空間去放置點(diǎn)擊目標(biāo)，空間足夠，你可以非常悠然的通過提高尺寸來提高操作適用性。手機(jī)是最麻煩的，點(diǎn)擊目標(biāo)的尺寸非常不好拿捏。但正是因?yàn)槭謾C(jī)的空間有限，容易操作失誤，所以才需要設(shè)置真實(shí)手指大小的目標(biāo)尺寸。設(shè)計(jì)師的挑戰(zhàn)就在于，要想辦法，讓屏幕上大多數(shù)的目標(biāo)，尺寸都跟手指大小一致。但也有好處，這迫使設(shè)計(jì)師設(shè)計(jì)時(shí)更注重功能性、風(fēng)格更加極簡(jiǎn)。
為游戲應(yīng)用設(shè)計(jì)拇指大小的點(diǎn)擊對(duì)象
我們無法推測(cè)的問題是，用戶使用你的應(yīng)用時(shí)，是用食指操作更多?還是用拇指更多?因此，針對(duì)這一點(diǎn)，我們要非常細(xì)致的做調(diào)研，然后設(shè)置合理的目標(biāo)尺寸。 然而，如果你的應(yīng)用是一款游戲的話，大多數(shù)用戶會(huì)使用拇指。這就是為什么很多游戲應(yīng)用中，一些控件的尺寸一般有拇指那么大，這樣用戶就能更穩(wěn)固的雙手持握，更精準(zhǔn)的操作。
Gyro13 Steam Copter Arcade has larger touchscreen targets
結(jié)論
通過調(diào)整目標(biāo)尺寸的大小，結(jié)合實(shí)際的應(yīng)用情況，能夠有效的提高移動(dòng)端的適用性，同時(shí)提高用戶體驗(yàn)。不管你的應(yīng)用是游戲還是別的什么。觸摸屏上的目標(biāo)就是用來讓用戶點(diǎn)擊的。如果用戶需要去想“我該怎樣去點(diǎn)擊，才能完成精確的操作”，需要再交互前思考方法，需要調(diào)整操作方法，使用多種方法才能完成交互。這說明這款產(chǎn)品的交互設(shè)計(jì)是糟糕的。在這篇文章里，我拋出了個(gè)人的一些觀點(diǎn)，在觸摸即將成為操作方式的一統(tǒng)時(shí)代，如何打造友好的觸控體驗(yàn)?這是我們將要面臨的問題。期待更多的想法，以及更規(guī)范的標(biāo)準(zhǔn)。