扩大按钮的可点击区域提升网站用户体验

 2016-10-07 15:21

之前我在《自适应的椭圆》中曾经提到过一个网站,做了很多特殊的按钮式样。今天,我要来说说按钮的可点击区域,它关系到我们的用户体现效果。

如果你带用户体验感兴趣,那你可能听说过Fitts法则。它的由美国心里学家Paul Fitts于1954年首次提出的。根据这个公式,我们很容易地推导出:目标越大,越容易到达。因此,对于那些较小的、难以瞄准的控件来说。如果不能把它的视觉尺寸直接放大,将其可点击区域(俗称“热区”)向外扩张往往也可以带来可用性的提升。

随着触屏的不断普及,这一点变得愈发重要。没有人愿意对一个狭小的按钮尝试按很多次,但实际上,这样的无奈之举仍然每天都在发生。

+

我们现在有这样的一个按钮,移动你的鼠标慢慢接近它。你会发现,当鼠标到达背景色的时候指针会才变成“按下去”手的形状。

扩张热区最简单的方法就是为它设置一圈透明边框,因为鼠标对元素边框的交互也会触发鼠标事件,这一点是描边和投影有所不及的。但可以看到,这样的效果并不好:

+

原因在于背景在默认情况下蔓延到了边框的下层。我们用background-clip属性可以把背景控制在原来的区域之内:

+

border:10px solid transparent;
background-clip:padding-box;

这个用法很好用,但好景不长,当我们需要给按钮加上真正的边框效果时,你会发现按钮仅有的那道边框已经被我们挪用了,怎么办?很简单,可以用内嵌投影来模拟出一道(实色)边框:

+

与边框不同的是,box-shadow可以同时指定多层投影。因此,如果你真的需要多层投影,只要指定多个由逗号分隔的投影即可。但如果把内嵌投影和外部投影组合起来,将会得到一个怪异的效果,因为外部投影是绘制在border box外部的。

+

box-shadow:0 0 0 1px rgba(0,0,0,.3) inset,
        0 .1em .2em -.05em rgba(0,0,0,.5);

不过,一旦真的这样做,就会发现结果和我们期望的大相径庭。如果再绘制一层阴影,这个方法的局限就出现了:

+

而且,这个解决方案在其他地方也不够完美:边框会影响布局,在某些场景下我们还无法使用边框。

于是,我们决定放弃边框,然后修改用另外一个特性来实现:伪元素同样可以代表其宿主元素来影响鼠标交互。我们可以在按钮的上层覆盖一层透明的伪元素,并让伪元素在四个方向上都比宿主元素大出10px;

button{
    position:relative;
    ....
}
buttom::before{
    content:'';
    position:absolute;
    top:-10px;right:-10px;
    bottom:-10px;left:-10px;
}
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: