來自各移動平臺的設(shè)計指導(dǎo)方針

蘋果iPhone人機界面指南推薦的最小目標(biāo)大小為44px寬，44px高。微軟的Windows手機用戶界面設(shè)計和交互設(shè)計指南建議一個最低目標(biāo)尺寸是26px乘以34px。諾基亞的開發(fā)者指南建議，目標(biāo)尺寸應(yīng)不小于1cm×1cm平方或28×28像素。

雖然這些指南給到了觸摸目標(biāo)的一般測量建議，但彼此不同，也與人體實際手指大小不一致。事實上，他們建議的尺寸比用戶平均手指尺寸小得多，從而導(dǎo)致用戶在觸摸移動設(shè)備時產(chǎn)生目標(biāo)定位不精準(zhǔn)的問題

太小的可觸目標(biāo)會導(dǎo)致大問題

小的可觸目標(biāo)會讓用戶在使用時非常麻煩，因為他們需要更精準(zhǔn)的定位。用戶需要調(diào)整他們的手指，從指墊調(diào)整到指尖，讓自己能清晰的擊中目標(biāo)。當(dāng)用戶用手指墊操作時，會覆蓋整個目標(biāo)，以至于他們完全看不到交互反饋，而用指尖操作時，卻能看到部分的交互反饋。那么，用戶在使用設(shè)備時，切換指尖與手指墊，無疑降低了他們的操作效率。

不僅如此，小的觸摸目標(biāo)會導(dǎo)致操作錯誤。當(dāng)幾個小觸摸目標(biāo)彼此靠得比較近時，用戶會不小心觸到鄰近的目標(biāo)而引發(fā)意外操作。而拇指觸屏?xí)r導(dǎo)致的錯誤會更明顯，因為它的尺寸是最大的。所以有時用戶會傾斜拇指，讓其側(cè)身去觸及屏幕目標(biāo)，這是一個很不必要的操作。

用拇指交互， 在移動設(shè)備中其實很常用，因為大多數(shù)用戶在使用時并非兩手都處于閑暇狀態(tài)，很多用戶會覺得用一只手再加一個大拇指，這樣操作是最方便的。用戶不希望為了去擊中一個目標(biāo)，而使原先使用一個手的情況變成使用兩只手，又或是原先喜歡用大拇指的情況變成去使用其他手指，可見，目標(biāo)太小，給用戶的操作帶去的麻煩會有多大。

平均食指像素寬度

麻省理工學(xué)院的觸摸實驗室研究人類的指尖觸覺，發(fā)現(xiàn)大多數(shù)成年人的食指平均寬度為1.6至2厘米（16–20毫米），轉(zhuǎn)換為45–57像素，這是比之前移動設(shè)備給到的建議尺寸要更大。

觸摸目標(biāo)45–57像素，允許用戶的手指緊貼目標(biāo)且又能讓用戶看到目標(biāo)的邊緣，這為他們提供了清晰的交互反饋，幫助用戶判斷擊中目標(biāo)的準(zhǔn)確性，也提升用戶擊中目標(biāo)的效率。這與費茨定律一致， 就是擊中目標(biāo)的時間與目標(biāo)的大小成反比，即目標(biāo)越小，擊中時間就越長，因為它會耗費用戶額外的注意力。一個手指大小的目標(biāo)，為用戶提供了足夠的空間去擊中它，而不必擔(dān)心精準(zhǔn)度。

平均拇指像素寬度

很多用戶會用食指去激活目標(biāo)，但也有很多用戶喜歡用大拇指。用拇指大的區(qū)別是，它比食指寬。一個成人大拇指平均寬度為1英寸（2.5厘米），折算下來是72像素。

因此用戶在用拇指擊中一個72px寬的目標(biāo)時是很愉悅的，既能快速精準(zhǔn)定位，又能獲得交互反饋，更不需要為了擊中目標(biāo)去傾斜拇指，這樣的話，一只手，一個拇指足以完成操作。

一項針對“大拇指與觸屏設(shè)備交互”的研究中顯示，用戶操作的出錯率會隨著目標(biāo)尺寸的變大而降低。用戶無須為擊中目標(biāo)去切換手指的角色。

單純講手指的尺寸是比較理想化的，在實際運用中有時并不可行

如果我們完全按照上述的手指尺寸去設(shè)計的話，在很多場景的運用是不可行的。如在移動設(shè)備中，你的工作區(qū)間其實是很小很有限的。這就意味著，當(dāng)你有幾個手指大小的目標(biāo)擠入移動設(shè)備屏幕中時，屏幕大小是不足以支撐這些目標(biāo)的。然而，當(dāng)你適當(dāng)縮減尺寸，結(jié)合進屏幕時，才會顯得更合理些。 你需要測量你的屏幕的物理尺寸和觸摸目標(biāo)大小探索到底多大的目標(biāo)用戶才可以觸摸。

使用手指大小的可觸目標(biāo)在平板電腦上的應(yīng)用比移動設(shè)備要容易得多，因為平板有更大的屏幕空間。你可以自由地使用這些尺寸，而不必恐懼這些尺寸是否占據(jù)了太多空間。然而，移動設(shè)備屏幕的局限性，手指大小能觸及的目標(biāo)目標(biāo)是最需要去考慮的。設(shè)計師面臨的挑戰(zhàn)就是如何定義出最常用的適用于移動設(shè)備的可觸面積大小?；蛟S，較少的可觸目標(biāo)是一個合理的解決方案，但這個方案的前提一定是需要設(shè)計師精簡導(dǎo)航內(nèi)容。

文章原址：http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/

via：淘寶UED