菲茨定律(Fitts’s Law)

2026年4月10日
研学小组
研学小组
美叶研学官方内容开发小组
已累计原创 93 篇文章查看全部

用手机点一个小小的"×"关闭按钮,手指落下去,没点中,旁边的内容被误触了。重新对准,再点一次,这次才关掉。同样的操作,换成一个足够大的按钮,一下就点中了,干净利落。

两个场景里你的操作意图完全相同,动作也一样,唯一的差别是目标的大小。但感受和效率完全不一样。

这不是偶发事件,而是人类运动系统的基本规律在界面上的直接体现。1954 年,心理学家保罗·菲茨把这个规律量化成了一个数学模型,后来被命名为 Fitts 定律(Fitts's Law)。

一. Fitts 定律是什么

菲茨的研究从一个简单的问题出发:当人类用手指或工具去指向一个目标时,这个动作需要多长时间,由什么决定?

通过大量实验,他发现决定因素只有两个:目标距离当前位置有多远,以及目标有多大。目标越远、越小,到达它所需的时间越长;目标越近、越大,到达它越快越容易。这个规律可以用数学公式精确描述,预测结果和实验数据高度吻合。

不需要记住公式的细节,但公式传达的一个关键信息需要我们深刻理解,那就是目标大小对操作难度的影响,是对数级的,不是线性的

什么意思?如果把一个 10px 的按钮放大到 20px,操作效率的提升非常显著;如果把一个 50px 的按钮放大到 60px,提升幅度就小得多,尽管两次都放大了 10px。越小的目标,每放大一点,效果越明显。越大的目标,继续放大带来的收益越来越少,最终接近一个上限。

这个非线性关系,得到一个最直接的结论,那就小按钮是最值得优先放大的。如果你的界面里有一个 20px 的主要操作按钮和一个 48px 的次要操作按钮,把 20px 的按钮放大带来的操作体验改善,远大于继续放大那个 48px 的按钮。


二. 距离和大小

Fitts 定律同时涉及距离和大小两个变量,但在真实的界面设计场景里,这两个因素的权重并不对等。

1. 目标大小,通常比距离更值得优先关注。

原因是两者的变化范围不对称。距离在大多数界面操作里是有限的——屏幕就这么大,元素之间的距离不会差得太离谱。但目标大小的变化空间很大:一个图标可以是 16px,也可以是 44px,相差近三倍,对操作效率的影响也是三倍以上。

设计师对目标大小有直接控制权,调整按钮大小是一个随时可以做的决定。调整布局以减少距离,往往需要更大范围的改动,成本更高。因此在大多数情况下,从目标大小入手,是应用 Fitts 定律的优先方向。

2. 距离在某些特定场景下变得很重要

当用户需要在两个操作之间频繁来回切换时,移动距离的成本会快速积累。文字编辑器里的撤销和重做按钮,如果相隔很远,用户每次来回操作都要移动很长的距离;如果紧挨在一起,这个成本就几乎消失了。同样的逻辑适用于任何需要频繁交替的操作组合:对齐方式的切换按钮、字体加粗和斜体的切换、表单里相关联的两个输入字段。

距离也决定了误操作的风险。两个功能相反的按钮放得太近——比如确认和删除——用户在快速操作时很容易误触另一个。有意拉开危险操作和常用操作之间的距离,是用 Fitts 定律来控制操作风险,而不只是提升效率。


三. 屏幕边缘

Fitts 定律有一个在界面设计里特别重要的推论,但很多设计师并没有意识到它:屏幕的边缘和角落,是操作效率最高的位置。

理解这个推论需要想清楚一件事:当光标移动到屏幕边缘时,它不会继续向外移动,会自然停在边缘上。用户不需要精确控制停止的位置,只需要往那个方向移动,光标就会自动到达边缘。

在 Fitts 定律的模型里,这相当于把边缘的目标宽度设置成"无限大"——用户不需要瞄准,目标永远接得住光标。"无限大"的目标,到达时间趋近于最小值。这意味着放在屏幕边缘的操作元素,在操作效率上有着天然的优势。

macOS 的菜单栏放在屏幕顶部边缘,正是对这个原理的刻意利用。用户只需要把光标往上扫,不需要瞄准,菜单栏永远在那里。如果菜单栏放在屏幕内部——比如窗口的顶部——用户就需要精确控制光标停在菜单栏的高度范围内,操作成本立刻上升。这也是为什么 macOS 即使在大屏显示器上,菜单栏依然是全局的、固定在屏幕顶部边缘,而不是每个窗口各自有一条。

Pro 会员文章
开通美叶 Pro 会员,即可阅读此篇文章的全部内容,同时可阅读全站 Pro 会员文章
开通美叶 Pro

0 人收藏了本文

奥卡姆剃刀(Occam's Razor)奥卡姆剃刀(Occam's Razor)
什么是渐进披露(Progressive Disclosure)?什么是渐进披露(Progressive Disclosure)?
什么是损失厌恶(Loss Aversion)?什么是损失厌恶(Loss Aversion)?
感知延迟(Perceptual Latency)感知延迟(Perceptual Latency)
什么是多赫蒂阈值(Doherty Threshold)?什么是多赫蒂阈值(Doherty Threshold)?
干扰理论(Interference Theory)干扰理论(Interference Theory)
双重编码理论(Dual Coding Theory)双重编码理论(Dual Coding Theory)
上下文依赖效应 (Context Effect)上下文依赖效应 (Context Effect)