如果对用户体验感兴趣，那你很可能听说过 Fitts 法则。它是由美国心理学家 Paul Fitts 于 1954 年首次提出的。Fitts 法则认为，人类移动到某个目标区域所需的最短时间是由目标距离与目标宽度之比所构成的对数函数。
如果要用数学公式把它表达出来，通常就是：

T 表示所需时间，D 是从起点到目标中心的距离，W 是目标区域的宽度，而 a 和 b都是常数。
根据这个公式，我们可以很容易地推导出：目标越大，越容易到达。因此，对于那些较小的、难以瞄准的控件来说，如果不能把它的视觉尺寸直接放大，将其可点击区域（热区）向外扩张往往也可以带来可用性的提升。随着触屏的不断普及，这一点变得愈发重要。没有人愿意对一个狭小的按钮尝试点按很多次，但实际上这样的无奈之举仍然每天都在发生。

未扩大可点击区域按钮

<!--Html-->
<button>+</button>

<!--CSS-->
button {
    position: relative;
    padding: .3em .5em;
    background: #58a;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .3);
    box-shadow: 0 .1em .2em -.05em rgba(0, 0, 0, .5);
    color: white;
    font: bold 150%/1 sans-serif;
    cursor: pointer;
 }

未扩大可点击区域按钮.jpg

扩大可点击区域按钮

button:before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px
}

扩大可点击区域后的按钮