做觸屏手機(jī)產(chǎn)品設(shè)計(jì)，要注意所有的可點(diǎn)擊元素都有足夠的點(diǎn)擊區(qū)域，但是這并不是說(shuō)你要把所有的按鈕圖標(biāo)鏈接都設(shè)計(jì)的足夠大，手機(jī)上的視覺(jué)焦點(diǎn)和操作焦點(diǎn)是不一樣的，操作焦點(diǎn)是可被放大或移動(dòng)的點(diǎn)擊區(qū)域。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),貴德企業(yè)網(wǎng)站建設(shè),貴德品牌網(wǎng)站建設(shè),網(wǎng)站定制,貴德網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,貴德網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

這里分享幾個(gè)點(diǎn)擊區(qū)域的小秘密，幫你解決操作準(zhǔn)確率的問(wèn)題。

一、擴(kuò)大操作焦點(diǎn)

iPhone自帶的控件NavigationBar上的Button、TabBar上的Item、ToolBar上的ButtonItem，實(shí)際的點(diǎn)觸區(qū)域都是被放大了的。

雖然iPhone導(dǎo)航欄上的操作按鈕僅有29px高，但是它的實(shí)際點(diǎn)觸區(qū)域比整個(gè)導(dǎo)航欄的高度還要高出5px左右，大概能達(dá)到44px+5px，這樣用戶就不用小心翼翼的去點(diǎn)擊返回按鈕了，按鈕點(diǎn)起來(lái)比看起來(lái)要大的多。

如果導(dǎo)航欄下邊區(qū)域還有按鈕，或者輸入?yún)^(qū)域，點(diǎn)擊下邊的按鈕經(jīng)常會(huì)觸發(fā)導(dǎo)航欄上的按鈕，這點(diǎn)很多開(kāi)發(fā)人員都可能遭遇過(guò)，我看到Cocochina上就有不少類似問(wèn)題，比如wyx遇到的問(wèn)題，比如dave遇到的問(wèn)題。

類似的，新浪微博的撰寫(xiě)微博界面也是個(gè)列子，當(dāng)用戶想編輯第一行的文字的時(shí)候，點(diǎn)擊文字經(jīng)常會(huì)誤觸頂部操作欄的取消或發(fā)送。隨享微博客戶端也是，頂部導(dǎo)航欄下邊有一排操作圖標(biāo)，還是比較容易引發(fā)誤操作的。

底部標(biāo)簽欄的可點(diǎn)擊區(qū)域也比視覺(jué)焦點(diǎn)要多出5個(gè)像素左右，標(biāo)簽切換是比較常見(jiàn)的操作，這樣一個(gè)小改動(dòng)幫用戶提升了標(biāo)簽切換的準(zhǔn)確率。

但是正因?yàn)閕Phone標(biāo)準(zhǔn)的TabBar的點(diǎn)擊區(qū)域是有擴(kuò)張的，所以如果你在TabBar上方放置可操作區(qū)域，都比較難以點(diǎn)擊，F(xiàn)oursquare和USA today等應(yīng)用最后都是采用自定義TabBar的方式規(guī)避問(wèn)題的。

關(guān)于和設(shè)置往往被做成半透明圖標(biāo)，浮動(dòng)在界面上，如果操作焦點(diǎn)=視覺(jué)焦點(diǎn)，那么用戶就只能杯具的削尖指頭去點(diǎn)了，還好這兩個(gè)按鈕的實(shí)際操作焦點(diǎn)要比視覺(jué)焦點(diǎn)大的多，保證了足夠準(zhǔn)確的點(diǎn)擊。

Android4.0規(guī)定的有效可觸摸的UI元素標(biāo)準(zhǔn)是48dp，一般來(lái)說(shuō)，48dp轉(zhuǎn)化為一個(gè)物理尺寸，約為9毫米。建議的目標(biāo)大小為7~10毫米，這一點(diǎn)與iPhone一致，這是一個(gè)用戶手指能準(zhǔn)確并且舒適觸摸的區(qū)域。

如果所示，你的UI元素可能小于48dp，圖標(biāo)僅有32dp，按鈕僅有40dp，但是他們的實(shí)際可操作焦點(diǎn)都達(dá)到了48dp的大小。

二、下移操作焦點(diǎn)

由于用戶在進(jìn)行各種操作的時(shí)候，需要確保自己準(zhǔn)確的點(diǎn)擊到了相應(yīng)的元素，所以一般情況下，右手持機(jī)的用戶，落點(diǎn)會(huì)偏右偏下，見(jiàn)下圖：

我們的UER把手機(jī)屏幕分成6*12個(gè)可點(diǎn)擊的焦點(diǎn)，從用戶的點(diǎn)擊落點(diǎn)監(jiān)測(cè)可以看到，右手持機(jī)的用戶有很大一部分點(diǎn)擊落點(diǎn)和視覺(jué)焦點(diǎn)是有很大偏差的，偏差具有一定的規(guī)律性。屏幕右下方格外明顯。

如果你的應(yīng)用是操作密集型，可以考慮調(diào)整有效點(diǎn)擊區(qū)域，整體往右往下偏移幾像素，準(zhǔn)確率會(huì)有所提升。

##此部分內(nèi)容希望有過(guò)類似研究的同學(xué)可以共同探討##

三、留白以規(guī)避誤點(diǎn)擊

當(dāng)然，仍然有很多情況，我們是無(wú)法用放大操作焦點(diǎn)或偏移操作焦點(diǎn)的方式來(lái)解決的，那就是當(dāng)兩個(gè)可操作元素確實(shí)離得比較近的時(shí)候。這時(shí)候，iPhone內(nèi)置的應(yīng)用會(huì)巧妙的采用留白排版方式以規(guī)避誤點(diǎn)擊。

比如iPhone系統(tǒng)的輸入框，如果框右邊有發(fā)送按鈕的話，我們可以發(fā)現(xiàn)右側(cè)是有個(gè)明顯的留白的，由于中英文字體差異，中文的留白略大于英文。這個(gè)留白，一方面是為了規(guī)避跟發(fā)送按鈕焦點(diǎn)太近的誤操作問(wèn)題，一方面是為了給滾動(dòng)條留足夠的空間。

而帶有全部刪除按鈕的輸入框，文字離全部刪除按鈕也會(huì)有適當(dāng)留白，規(guī)避切換光標(biāo)時(shí)可能引發(fā)的誤操作。

當(dāng)遇到焦點(diǎn)密集的問(wèn)題的時(shí)候，我們都是可以利用增加行間距、元素間距和留白的方式來(lái)解決可點(diǎn)擊區(qū)域問(wèn)題。

最后再啰嗦一句小圖標(biāo)元素大點(diǎn)擊區(qū)域的實(shí)現(xiàn)方式，方法1：UI提供帶透明點(diǎn)擊區(qū)域的圖標(biāo)，就是一張透明的圖，上面一個(gè)小圖標(biāo)；方法2：UI提供一個(gè)大點(diǎn)的透明的圖，覆蓋到圖標(biāo)上面，點(diǎn)到上面就執(zhí)行操作；方法3：程序人員自己去實(shí)現(xiàn)，方法請(qǐng)問(wèn)他們，嘿嘿。

分享題目：觸屏手機(jī)點(diǎn)擊區(qū)域的小秘密
URL分享：http://chinadenli.net/article14/cjehde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站建設(shè)、網(wǎng)站排名、響應(yīng)式網(wǎng)站、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)