你曾经用你的智能手机或平板电脑浏览过一个网站,发现在一些网站上,这些链接是如此的小,如此紧密的包装,几乎不可能点击正确的按钮?

我肯定去过那里,每次都同样令人沮丧。随着智能手机和平板电脑使用的增加,有足够大的目标区域与之互动的重要性也是如此。但它不仅对移动浏览很重要。事实上,它也有利于桌面用户。

菲茨定律

菲茨定律是交互设计中的经典经验法则。这个定律可以用一种相当复杂的数学方法来表达,但简而言之,它指出目标越大越近,点击它越来越容易


这不是火箭科学,但它仍然强调了,不仅有足够大的目标,但也要明智地定位它们。

如果你想更多地了解菲茨定律,有一个很好的解释粒子树

为触摸而设计

对于触摸设备,比如智能手机和平板电脑,一个足够大的触控目标比桌面更重要。鼠标指针是一种精密仪器,点击面积只有1 x 1像素,人的手指更像是大锤。人类食指垫的有效尺寸为1.6到2厘米,在屏幕上转换为大约45-57像素。

当你试图点击智能手机上的小链接时,你可能已经经历了挫折。很难达到正确的目标,这不是你希望人们在你的网站上拥有的体验。

图像信用: 索查基信息

推荐的接触目标尺寸

苹果iOS人机界面指南指出,触摸目标应该至少大44 x 44点。(他们使用点而不是像素的原因是点可以同时用于标准显示器和视网膜显示器)。

微软的Windows Phone用户界面设计和交互指南建议触摸目标的大小应为34像素,绝对最小为26像素。诺基亚的开发者指南规定touch的目标尺寸至少为1 x 1厘米。

实际上,我认为诺基亚有最好的指导方针,因为它的最小尺寸是厘米。我的意思是44个像素在不同的屏幕和设备上可能非常不同。想想iPad和iPad Mini。它们都有相同数量的像素,但在iPad mini上,44×44像素的点击区域要小得多。

你没有的尺寸可以在太空中弥补

另一个有趣的方面是,如果你确实需要相对较小的接触目标,你可以通过增加目标之间的空间来部分补偿。这样做可以减少错过目标的机会。

规则是:目标越小,差距越大

如果你绝对需要小点击目标,你可以通过增加它们之间的空间来节省一天的时间。

在实践中

已经够了,我想你明白为什么有足够大的点击/触摸目标很重要。问题是,在实践中是如何做到的?

首先要认识到的是可点击区域可能在对象可见区域之外。

常规链接

对于列表中的链接,增加可点击区域的最简单方法,是增加填充。列表项上不应该有内边距,而应该在链接本身上有内边距。在本例中,我只是向链接添加了10个像素的填充。观察它如何显著地增加其可点击区域(淡红色背景表示可点击区域)。

Li A填料:10px;}

复选框和Radiobuttons

对于复选框和单选按钮,通常很小,诀窍是把它们放在一个标签内,并在标签上加上一个慷慨的填充物。通过连接复选框和标签身份证件以及对于属性,标签的整个区域是可单击的,并切换复选框。

HTML

CSS

标签{display: block padding: 10px;}

没有这种特殊处理,单击区域只是复选框的可见部分,而在增强版本中,整个标签都是可单击的。在这种情况下,这个小的调整导致了超过50倍的点击面积。

总结

在这个多设备体验的新的勇敢世界中,满足触摸和鼠标输入比以往任何时候都更重要。一个简单的方法是提供足够大的点击目标。它不仅有利于触摸设备用户,也有利于桌面用户。

本文展示了一些简单的技术。当然,还有其他一些元素可以应用到这些元素中,但我将由您来决定。

参考文献

在线的

注意:这篇文章是对这篇文章的改写使单击区域舒适地变大我以前发表过的代码绘制蓝图