Fitts's Law:目标越大越近,越快越准
「指向一个目标有多难」是可以量化的。费茨定律 (Fitts's Law) 把完成一次指向的耗时写成 :距离 越大、目标宽度 越小,那个对数项(称作 Index of Difficulty,简记 ID)越大,点击越慢、越易点偏。它给 UI 两条准则:常用目标要大要近;以及视觉尺寸和点击热区可以解耦——图标尺寸偏小,热区却该撑大。
多点几次会看到实测均值大致跟着 ID 走:目标越小越远,越慢。这条规律有两个常被忽视的推论。其一,屏幕的四角与四边是「无限大」的目标——指针撞上边界就停住,等效 ,所以 macOS 的全局菜单栏贴在屏幕顶边、Windows 的开始按钮在角上。其二,也是最实用的:把热区 (hit target) 撑得比视觉大。
撑大热区而不动视觉,用透明 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 一样,它们都在补偿指针不精确这件事——只不过一个补路径,一个补落点。