網(wǎng)上關(guān)于移動(dòng)APP設(shè)計(jì)或者是WebAPP的設(shè)計(jì)之觸摸目標(biāo)大小的定義很多，但是都不是很全。隨著最近手機(jī)網(wǎng)站的開發(fā)和設(shè)計(jì)，25學(xué)堂整理一些關(guān)于觸控目標(biāo)的大小的設(shè)計(jì)知識(shí)點(diǎn)。也算是給正在開發(fā)的app或觸屏版手機(jī)網(wǎng)站的同仁們一些簡(jiǎn)單的注意事項(xiàng)。同時(shí)給新手們分享一些在設(shè)計(jì)觸控控件時(shí)需要考慮的一些因素。

1、回顧下自各移動(dòng)終端平臺(tái)的設(shè)計(jì)指導(dǎo)方針（注意一下這些已經(jīng)不適用）

蘋果iPhone人機(jī)界面指南推薦的最小目標(biāo)大小為44px寬，44px高。

微軟的Windows手機(jī)用戶界面設(shè)計(jì)和交互設(shè)計(jì)指南建議一個(gè)最低目標(biāo)尺寸是26px乘以34px。

諾基亞的開發(fā)者指南建議，目標(biāo)尺寸應(yīng)不小于1cm×1cm平方或28×28像素。

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

總結(jié)：以上3個(gè)針對(duì)目前的移動(dòng)設(shè)計(jì)來(lái)說(shuō)都太小了，我們需要放大設(shè)計(jì)尺寸。

原因如下：

起初蘋果把44 X 44pixels定為觸控控件的最小尺寸是因?yàn)樵趇Phone 3的分辨率下，44 X 44pixels對(duì)應(yīng)的是人類食指指尖的平均大小—— 7 X7毫米（拇指為9毫米），但實(shí)際上，隨著分辨率的提高，44 X 44 pixels已經(jīng)達(dá)不到7毫米的大小了，所以現(xiàn)在設(shè)計(jì)控件時(shí)，44 X 44?pixels的原則需要被改變，按照分辨率換算出新的大小。

知識(shí)點(diǎn)補(bǔ)充：

1、iphone3的分辨率是：320*480 ?，3.5英寸的顯示屏（164ppi）的iPhone? 但是當(dāng)前主流的手機(jī)分辨率都大大的提高了。

所以：在iPhone4的屏幕尺寸下，目標(biāo)大小定義為88×88像素。

2、麻省理工學(xué)院的觸摸實(shí)驗(yàn)室研究人類的指尖觸覺(jué)，發(fā)現(xiàn)大多數(shù)成年人的食指平均寬度為1.6至2厘米（16–20毫米），轉(zhuǎn)換為45–57像素，手指的觸摸面積為10 – 14mm，指尖為8 – 10mm。這是比之前移動(dòng)設(shè)備給到的建議尺寸要更大。一個(gè)成人大拇指平均寬度為1英寸（2.5厘米），折算下來(lái)是72像素。

設(shè)計(jì)師需要注意的地方：

最小可用的UI目標(biāo)大小的手指元素是：

食指常用操作應(yīng)有7 × 7毫米1毫米的間距

拇指常用操作應(yīng)有8 × 8毫米2毫米的間距

各類型的表單組件應(yīng)該有5毫米的最小間距

界面UI元素之間應(yīng)有一個(gè)手指寬度的間距，如果間距太近，將使用戶很難選擇。

設(shè)計(jì)的時(shí)候可以按照以下幾個(gè)方面來(lái)準(zhǔn)備把握好觸控目標(biāo)大小。

1、可以根據(jù)按照分辨率換算出新的觸控目標(biāo)尺寸大小。

2、具體的觸控目標(biāo)尺寸需要測(cè)量你的屏幕的物理尺寸和觸摸目標(biāo)大小比例

探索到底多大的目標(biāo)用戶才可以觸摸。

3、由于移動(dòng)設(shè)備屏幕的局限性，手指大小能觸及的目標(biāo)目標(biāo)是最需要去考慮的。設(shè)計(jì)師面臨的挑戰(zhàn)就是如何定義出最常用的適用于移動(dòng)設(shè)備的可觸面 積大小。或許，較少的可觸目標(biāo)是一個(gè)合理的解決方案，但這個(gè)方案的前提一定是需要設(shè)計(jì)師精簡(jiǎn)導(dǎo)航內(nèi)容。

4、Google 已經(jīng)倡導(dǎo) Android 開發(fā)者使用 DIP（Density Independent Pixel）來(lái)取代 Px 和 DP 了。這樣的好處顯而易見(jiàn)，就是在任意尺寸的設(shè)備上都能得到相同大小的控件。

歡迎指點(diǎn)批評(píng)！