成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

觸屏手機點擊區(qū)域的小秘密

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

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

一、擴大操作焦點

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

navigationbar 觸屏手機點擊區(qū)域的小秘密

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

如果導航欄下邊區(qū)域還有按鈕,或者輸入區(qū)域,點擊下邊的按鈕經常會觸發(fā)導航欄上的按鈕,這點很多開發(fā)人員都可能遭遇過。

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

4 觸屏手機點擊區(qū)域的小秘密

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

5 觸屏手機點擊區(qū)域的小秘密

但是正因為iPhone標準的TabBar的點擊區(qū)域是有擴張的,所以如果你在TabBar上方放置可操作區(qū)域,都比較難以點擊,F(xiàn)oursquare和USA today等應用最后都是采用自定義TabBar的方式規(guī)避問題的。

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

1 觸屏手機點擊區(qū)域的小秘密

Android4.0規(guī)定的有效可觸摸的UI元素標準是48dp,一般來說,48dp轉化為一個物理尺寸,約為9毫米。建議的目標大小為7~10毫米,這一點與iPhone一致,這是一個用戶手指能準確并且舒適觸摸的區(qū)域。

如果所示,你的UI元素可能小于48dp,圖標僅有32dp,按鈕僅有40dp,但是他們的實際可操作焦點都達到了48dp的大小。

二、下移操作焦點

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

落點監(jiān)測 觸屏手機點擊區(qū)域的小秘密

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

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

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

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

liubai 觸屏手機點擊區(qū)域的小秘密

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

liubai2 觸屏手機點擊區(qū)域的小秘密

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

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

最后再啰嗦一句小圖標元素大點擊區(qū)域的實現(xiàn)方式,方法1:UI提供帶透明點擊區(qū)域的圖標,就是一張透明的圖,上面一個小圖標;方法2:UI提供一個大點的透明的圖,覆蓋到圖標上面,點到上面就執(zhí)行操作;方法3:程序人員自己去實現(xiàn),方法請問他們,嘿嘿。

責任編輯:佚名 來源: elya妞的博客
相關推薦

2019-07-22 09:46:28

WebSocketNginx服務器

2019-08-30 08:39:33

WebSocketNginx服務器

2011-12-09 17:41:56

2019-09-10 16:25:19

Python內存空對象

2016-01-08 14:23:55

2017-12-15 21:46:45

2018-08-15 08:47:20

2010-10-12 12:10:52

增強無線網絡信號

2010-05-13 00:03:44

2015-03-09 09:34:04

C語言函數(shù)指針

2013-11-25 10:43:32

谷歌微軟

2016-03-31 14:51:33

多云計算多云部署多云管理

2015-04-14 09:46:09

Apple Watch秘密

2023-12-12 08:50:22

MySQL隱式轉換varchar

2019-06-05 12:49:07

云辦公

2015-03-06 10:33:02

2015-11-27 10:13:19

數(shù)據(jù)中心

2021-06-10 05:17:52

QQ應用手機QQ

2020-06-30 09:25:49

無線路由器Wi-Fi網絡

2019-01-29 05:34:47

GitHub插件代碼
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 久久精品欧美一区二区三区不卡 | 亚洲精品一二三 | 精品一区二区久久久久久久网站 | 一区二区成人 | 日韩在线免费视频 | 中文字幕 亚洲一区 | 久久高清 | 午夜成人在线视频 | 日日噜噜噜夜夜爽爽狠狠视频, | 国产成人叼嘿视频在线观看 | 久久婷婷色| 精品电影| 国产精品乱码一二三区的特点 | 懂色av色香蕉一区二区蜜桃 | 亚洲午夜一区二区 | 一级片免费网站 | 成人精品久久日伦片大全免费 | 亚洲精品一二区 | 日韩一区二区三区在线 | 黄色成人免费在线观看 | 久久国产精品网 | av网站免费观看 | 丁香六月激情 | 久久最新 | 91久久精品国产91久久性色tv | 天天草天天射 | 99视频在线免费观看 | 日韩欧美国产精品一区 | 久久99视频精品 | 欧美精品一区二区免费 | 国产精品久久久久久久久免费高清 | 91精品国产一区二区三区动漫 | 在线看成人av | 五月婷婷在线视频 | 精品国产免费人成在线观看 | 一区在线免费视频 | 国产日产精品一区二区三区四区 | 色屁屁在线观看 | 日韩电影中文字幕 | 亚洲精品国产第一综合99久久 | 日本一区视频在线观看 |