触屏手机点击区域的小秘密

移动开发 移动应用
做触屏手机产品设计,要注意所有的可点击元素都有足够的点击区域,但是这并不是说你要把所有的按钮图标链接都设计的足够大,手机上的视觉焦点和操作焦点是不一样的,操作焦点是可被放大或移动的点击区域。

这里分享几个点击区域的小秘密,帮你解决操作准确率的问题。

一、扩大操作焦点

iPhone自带的控件NavigationBar上的Button、TabBar上的Item、ToolBar上的ButtonItem,实际的点触区域都是被放大了的。

navigationbar 触屏手机点击区域的小秘密

虽然iPhone导航栏上的操作按钮仅有29px高,但是它的实际点触区域比整个导航栏的高度还要高出5px左右,大概能达到44px+5px,这样用户就不用小心翼翼的去点击返回按钮了,按钮点起来比看起来要大的多。

如果导航栏下边区域还有按钮,或者输入区域,点击下边的按钮经常会触发导航栏上的按钮,这点很多开发人员都可能遭遇过。

类似的,新浪微博的撰写微博界面也是个列子,当用户想编辑第一行的文字的时候,点击文字经常会误触顶部操作栏的取消或发送。随享微博客户端也是,顶部导航栏下边有一排操作图标,还是比较容易引发误操作的。

4 触屏手机点击区域的小秘密

底部标签栏的可点击区域也比视觉焦点要多出5个像素左右,标签切换是比较常见的操作,这样一个小改动帮用户提升了标签切换的准确率。

5 触屏手机点击区域的小秘密

但是正因为iPhone标准的TabBar的点击区域是有扩张的,所以如果你在TabBar上方放置可操作区域,都比较难以点击,Foursquare和USA today等应用最后都是采用自定义TabBar的方式规避问题的。

关于和设置往往被做成半透明图标,浮动在界面上,如果操作焦点=视觉焦点,那么用户就只能杯具的削尖指头去点了,还好这两个按钮的实际操作焦点要比视觉焦点大的多,保证了足够准确的点击。

1 触屏手机点击区域的小秘密

Android4.0规定的有效可触摸的UI元素标准是48dp,一般来说,48dp转化为一个物理尺寸,约为9毫米。建议的目标大小为7~10毫米,这一点与iPhone一致,这是一个用户手指能准确并且舒适触摸的区域。

如果所示,你的UI元素可能小于48dp,图标仅有32dp,按钮仅有40dp,但是他们的实际可操作焦点都达到了48dp的大小。

二、下移操作焦点

由于用户在进行各种操作的时候,需要确保自己准确的点击到了相应的元素,所以一般情况下,右手持机的用户,落点会偏右偏下,见下图:

落点监测 触屏手机点击区域的小秘密

我们的UER把手机屏幕分成6*12个可点击的焦点,从用户的点击落点监测可以看到,右手持机的用户有很大一部分点击落点和视觉焦点是有很大偏差的,偏差具有一定的规律性。屏幕右下方格外明显。

如果你的应用是操作密集型,可以考虑调整有效点击区域,整体往右往下偏移几像素,准确率会有所提升。

三、留白以规避误点击

当然,仍然有很多情况,我们是无法用放大操作焦点或偏移操作焦点的方式来解决的,那就是当两个可操作元素确实离得比较近的时候。这时候,iPhone内置的应用会巧妙的采用留白排版方式以规避误点击。

liubai 触屏手机点击区域的小秘密

比如iPhone系统的输入框,如果框右边有发送按钮的话,我们可以发现右侧是有个明显的留白的,由于中英文字体差异,中文的留白略大于英文。这个留白,一方面是为了规避跟发送按钮焦点太近的误操作问题,一方面是为了给滚动条留足够的空间。

liubai2 触屏手机点击区域的小秘密

而带有全部删除按钮的输入框,文字离全部删除按钮也会有适当留白,规避切换光标时可能引发的误操作。

当遇到焦点密集的问题的时候,我们都是可以利用增加行间距、元素间距和留白的方式来解决可点击区域问题。

最后再啰嗦一句小图标元素大点击区域的实现方式,方法1:UI提供带透明点击区域的图标,就是一张透明的图,上面一个小图标;方法2:UI提供一个大点的透明的图,覆盖到图标上面,点到上面就执行操作;方法3:程序人员自己去实现,方法请问他们,嘿嘿。

责任编辑:佚名 来源: 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

2010-10-12 12:10:52

增强无线网络信号

2018-08-15 08:47:20

2010-05-13 00:03:44

2013-11-25 10:43:32

谷歌微软

2015-03-09 09:34:04

C语言函数指针

2015-04-14 09:46:09

Apple Watch秘密

2016-03-31 14:51:33

多云计算多云部署多云管理

2023-12-12 08:50:22

MySQL隐式转换varchar

2019-06-05 12:49:07

云办公

2015-11-27 10:13:19

数据中心

2015-03-06 10:33:02

2021-06-10 05:17:52

QQ应用手机QQ

2020-06-30 09:25:49

无线路由器Wi-Fi网络

2019-01-29 05:34:47

GitHub插件代码
点赞
收藏

51CTO技术栈公众号