做觸屏手機產品設計，要注意所有的可點擊元素都有足夠的點擊區域，但是這并不是說你要把所有的按鈕圖標鏈接都設計的足夠大，手機上的視覺焦點和操作焦點是不一樣的，操作焦點是可被放大或移動的點擊區域。

這里分享幾個點擊區域的小秘密，幫你解決操作準確率的問題。

一、擴大操作焦點

iPhone自帶的控件NavigationBar上的Button、TabBar上的Item、ToolBar上的ButtonItem，實際的點觸區域都是被放大了的。

雖然iPhone導航欄上的操作按鈕僅有29px高，但是它的實際點觸區域比整個導航欄的高度還要高出5px左右，大概能達到44px+5px，這樣用戶就不用小心翼翼的去點擊返回按鈕了，按鈕點起來比看起來要大的多。

如果導航欄下邊區域還有按鈕，或者輸入區域，點擊下邊的按鈕經常會觸發導航欄上的按鈕，這點很多開發人員都可能遭遇過，我看到Cocochina上就有不少類似問題，比如wyx遇到的問題，比如dave遇到的問題。

類似的，新浪微博的撰寫微博界面也是個列子，當用戶想編輯第一行的文字的時候，點擊文字經常會誤觸頂部操作欄的取消或發送。隨享微博客戶端也是，頂部導航欄下邊有一排操作圖標，還是比較容易引發誤操作的。

底部標簽欄的可點擊區域也比視覺焦點要多出5個像素左右，標簽切換是比較常見的操作，這樣一個小改動幫用戶提升了標簽切換的準確率。

但是正因為iPhone標準的TabBar的點擊區域是有擴張的，所以如果你在TabBar上方放置可操作區域，都比較難以點擊，Foursquare和USA today等應用最后都是采用自定義TabBar的方式規避問題的。

關于和設置往往被做成半透明圖標，浮動在界面上，如果操作焦點=視覺焦點，那么用戶就只能杯具的削尖指頭去點了，還好這兩個按鈕的實際操作焦點要比視覺焦點大的多，保證了足夠準確的點擊。

Android4.0規定的有效可觸摸的UI元素標準是48dp，一般來說，48dp轉化為一個物理尺寸，約為9毫米。建議的目標大小為7~10毫米，這一點與iPhone一致，這是一個用戶手指能準確并且舒適觸摸的區域。
如果所示，你的UI元素可能小于48dp，圖標僅有32dp，按鈕僅有40dp，但是他們的實際可操作焦點都達到了48dp的大小。

二、下移操作焦點

由于用戶在進行各種操作的時候，需要確保自己準確的點擊到了相應的元素，所以一般情況下，右手持機的用戶，落點會偏右偏下，見下圖：

我們的UER把手機屏幕分成6*12個可點擊的焦點，從用戶的點擊落點監測可以看到，右手持機的用戶有很大一部分點擊落點和視覺焦點是有很大偏差的，偏差具有一定的規律性。屏幕右下方格外明顯。

如果你的應用是操作密集型，可以考慮調整有效點擊區域，整體往右往下偏移幾像素，準確率會有所提升。

##此部分內容希望有過類似研究的同學可以共同探討##

三、留白以規避誤點擊

當然，仍然有很多情況，我們是無法用放大操作焦點或偏移操作焦點的方式來解決的，那就是當兩個可操作元素確實離得比較近的時候。這時候，iPhone內置的應用會巧妙的采用留白排版方式以規避誤點擊。

比如iPhone系統的輸入框，如果框右邊有發送按鈕的話，我們可以發現右側是有個明顯的留白的，由于中英文字體差異，中文的留白略大于英文。這個留白，一方面是為了規避跟發送按鈕焦點太近的誤操作問題，一方面是為了給滾動條留足夠的空間。

而帶有全部刪除按鈕的輸入框，文字離全部刪除按鈕也會有適當留白，規避切換光標時可能引發的誤操作。

當遇到焦點密集的問題的時候，我們都是可以利用增加行間距、元素間距和留白的方式來解決可點擊區域問題。

最后再啰嗦一句小圖標元素大點擊區域的實現方式，方法1：UI提供帶透明點擊區域的圖標，就是一張透明的圖，上面一個小圖標；方法2：UI提供一個大點的透明的圖，覆蓋到圖標上面，點到上面就執行操作；方法3：程序人員自己去實現，方法請問他們，嘿嘿。