Web 平台 API / ✦ UX 交互模式 · 那些有名字的交互细节 / Fitts's Law:目标越大越近,越快越准 待审核 6 / 7
hit-target · 点击热区

Fitts's Law:目标越大越近,越快越准

「指向一个目标有多难」是可以量化的。费茨定律 (Fitts's Law) 把完成一次指向的耗时写成 MT=a+blog2(D/W+1)MT = a + b \cdot \log_2(D/W + 1):距离 DD 越大、目标宽度 WW 越小,那个对数项(称作 Index of Difficulty,简记 ID)越大,点击越慢、越易点偏。它给 UI 两条准则:常用目标要大要近;以及视觉尺寸和点击热区可以解耦——图标尺寸偏小,热区却该撑大。

图 0-1 · 实测的指向耗时与 ID 的关系。可反复点击不同距离、不同大小的目标,看均值如何跟着 ID 走。

多点几次会看到实测均值大致跟着 ID 走:目标越小越远,越慢。这条规律有两个常被忽视的推论。其一,屏幕的四角与四边是「无限大」的目标——指针撞上边界就停住,等效 W=W = \infty,所以 macOS 的全局菜单栏贴在屏幕顶边、Windows 的开始按钮在角上。其二,也是最实用的:把热区 (hit target) 撑得比视觉大。

图 0-2 · 两个 ✕ 视觉尺寸相同、热区差一倍的命中率对照。可连续点击,看两侧的漏点次数如何拉开。

撑大热区而不动视觉,用透明 padding 或伪元素覆盖:

.icon-btn {
  width: 20px; height: 20px;     /* 视觉只有 20px */
  position: relative;
}
.icon-btn::before {              /* 热区撑到 44px, 透明 */
  content: "";
  position: absolute;
  inset: -12px;                  /* 四周各外扩 12px */
}

注 · 移动端的 44×44pt (Apple HIG) 与 48dp (Material) 最小点击区,正是这条定律的工程化落地:手指比鼠标钝得多,视觉再精致,热区也不能小于这个值。和 Safe Triangle 一样,它们都在补偿指针不精确这件事——只不过一个补路径,一个补落点。