如果對(duì)用戶體驗(yàn)感興趣，那你很可能聽(tīng)說(shuō)過(guò) Fitts 法則。它是由美國(guó)心理學(xué)家 Paul Fitts 于 1954 年首次提出的。Fitts 法則認(rèn)為，人類移動(dòng)到某個(gè)目標(biāo)區(qū)域所需的最短時(shí)間是由目標(biāo)距離與目標(biāo)寬度之比所構(gòu)成的對(duì)數(shù)函數(shù)。
如果要用數(shù)學(xué)公式把它表達(dá)出來(lái)，通常就是：

T 表示所需時(shí)間，D 是從起點(diǎn)到目標(biāo)中心的距離，W 是目標(biāo)區(qū)域的寬度，而 a 和 b都是常數(shù)。
根據(jù)這個(gè)公式，我們可以很容易地推導(dǎo)出：目標(biāo)越大，越容易到達(dá)。因此，對(duì)于那些較小的、難以瞄準(zhǔn)的控件來(lái)說(shuō)，如果不能把它的視覺(jué)尺寸直接放大，將其可點(diǎn)擊區(qū)域（熱區(qū)）向外擴(kuò)張往往也可以帶來(lái)可用性的提升。隨著觸屏的不斷普及，這一點(diǎn)變得愈發(fā)重要。沒(méi)有人愿意對(duì)一個(gè)狹小的按鈕嘗試點(diǎn)按很多次，但實(shí)際上這樣的無(wú)奈之舉仍然每天都在發(fā)生。

未擴(kuò)大可點(diǎn)擊區(qū)域按鈕

<!--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;
 }

未擴(kuò)大可點(diǎn)擊區(qū)域按鈕.jpg

擴(kuò)大可點(diǎn)擊區(qū)域按鈕

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

擴(kuò)大可點(diǎn)擊區(qū)域后的按鈕