前言
总结：向一个目标的移动时间取决于目标的大小和到目标的距离。
一、历史
保罗 · 菲茨（Paul Fitts）是一批最早理解人类的一部分失误应该归因于错误的设计，而非仅仅是人类认知局限的心理学家之一。他研究了二战期间飞机驾驶舱的设计，并认为许多被归因为人为失误而造成的损失实际上是设计的失误。
在 20 世纪 50 年代，他受到香农（Shannon）著名的信息论（information theory）的影响。（与之类似，当时的心理学家乔治 · 米勒（George Miller）将信息论中的信道容量（channel capacity）概念应用到人类记忆，并提出了著名的神奇数字 7 理论来解释人类的短时记忆容量。）而菲茨关注的是人类移动的 “容量”——在给定的时间内，人类能做多少次重复的动作。他就这类重复动作做了若干实验，实验成果之一就是菲茨定律——而它是人机交互领域最著名的定律之一。
二、菲茨定律
菲茨定律给定了一个指示物（例如鼠标指针，人类的手指或手）移到一个特定目标（如实体或电子的按钮，实体物体）从而与之交互（例如，点击或按动、抓取它等等）所需要的时间：
D 指的是与目标的距离，w 是目标的宽度（理论上，该宽度应沿移动方向来测量），a 和 b 则是根据指示物种类（鼠标、手指等）不同而变化的常数。
ID 值
被称作困难指数，单位是比特。因此，菲茨定律的另外一种形式是：
理论上，菲茨定律中使用的宽度应该按照移动方向的轴线来测量，但对于用户界面中常见的多数矩形目标，我们可以用其尺寸中的较小值来替代它，无论是宽度还是高度（斯科特 · 麦肯齐（Scott MacKenzie）和比尔 · 巴克斯顿（Bill Buxton）在 1992 年的研究中即是如此使用的）。
如果上述数学公式对你而言有点难以理解，我们总结了以下两个要点陈述：
- 目标距离越远，需要指示物移动的时间就越长。换句话说，人们可以更快接触到更近的目标。
- 目标越大，移动到它之上的时间就越短。换句话说，更大的目标会更好。
菲茨定律表明，移动到目标 A 的时间比移动到其他两个目标所需的时间要短。尽管目标 A 和 B 尺寸相同，光标到 A 的距离（D1）比到 B 的距离要短（D2），因此移到 A 会更快。目标 C 和光标的距离与目标 A 到光标的距离一样（D1），但是它更小，因此移动到 C 的时长比移动到 A 要长。
该等式中包含对数 log，这意味着移动时间并不随着参数增加而线性增长，而是以一个更慢的速率增加。因此，如果一个目标是另一个的两倍远，移动到该目标的时间会更长，但没有移动到另一个目标的两倍长那么久。这是因为移动的速率是先上升再下降的（我们在下一个部分会具体阐述），这意味着首先你会在距离目标较远的时候以一个更高的速度移动指示物，然后在接近时再降低速度。
我们接下来就会介绍该两成分模型的基本要点。
三、两成分模型
远在菲茨之前，早在 19 世纪末，人类移动研究领域的前驱之一，R. S. 伍德沃兹（R. S. Woodworth）就提出了基于上肢物理移动的两成分模型。该模型说明了所有目标导向的移动（例如，为了获取某物体而进行的活动，而非随意移动如就着音乐打拍子）可以分解为两个成分（该模型名称的由来）：
- 一次初始移动，快速、相对粗糙，为了将指示物移到目标的方向
- 一次最终移动，更慢，旨在确保准确率（例如，确保正确地获取该目标）
第一个阶段很大程度上取决于到目标的距离——移动的目的是将指示物尽快地移向目标的方向。而第二阶段的移动，则很大程度上取决于目标尺寸——指示物需要用更慢的速度来确保不移动过头而点击到目标之外的区域。目标越小，第二阶段上需要花的时间就越长。
四、UX 中的应用
4.1 最优化目标尺寸
4.1.1 更大的目标更好
菲茨定律最明显的含义是：把目标做得更大。菲茨定律清楚地指出了人们可以更快地点击、按动或悬停到更大的目标上。不仅如此，随着目标尺寸增加，错误率也会降低。
目标尺寸的参考原则通常由决定不同目标尺寸的理想错误率和识别出错误率趋于平缓的临界尺寸来确定。
4.1.2 给图标加上标签
我们已经多次强调，图标需要标签。文字标签不仅减少了图标的模糊度、让它更易于理解，还同时降低了移动到该特定目标的时间。为什么呢？这很简单：由图标和标签组成的目标会比仅仅一个图标要大，因此，根据菲茨定律，会更容易触及。（当然，这里的假设是你会让整个区域都可点击，避免犯只将图标作为可点击目标的设计错误。）
在尺寸上，只有图标作为目标会比用图表加上文字标签作为目标区域更小。
4.1.3 屏幕边缘的无穷大目标
在两成分模型中，在目标很大，以至于到无穷大的时候，第二次移动时间可以被降到极低。对于无穷大目标，你永远不会担心会 “过头”，因为指示物何时停止移动都没关系（然后，是在已经到达目标区域之后）。
对于无穷大目标，没有移动过头的风险：用户在接近目标时不需要放慢速度，所以所需移动时间很短。
到这里，你可能会问：在现实世界里，界面设计上何时会存在无穷大的目标？答案是屏幕边缘，只要是用鼠标作为指示物的情况下。实际上，屏幕边缘成为对鼠标指针而言自然的 “墙”——只要光标移动到边缘，它就不能越过它，无论它到达边缘的速度如何。
因此，理论上，为了到达放置在屏幕边缘的目标，用户并不需要像目标在屏幕中间那样放慢速度，因为没有过度移动的危险——指针会在到达屏幕边缘时自动停止。
操作系统的设计师已经利用了这个来自于菲茨定律的成果。在 MacOS 系统中，应用菜单放置在屏幕最上端的水平边缘。这保证用户可以轻松地访问该区域。在 Windows 系统中（至少在 Windows 8 之前），开始键放在屏幕底端最左侧。在这两个操作系统中，多个常用应用的图标都被放置在屏幕底侧的边缘。
在 MacOS 系统中，应用菜单栏被放在屏幕的最上端边缘，它是个无限边缘。这种放置安排最优化了用户到这个需要经常访问的区域的移动时间，因为菜单上的目标就是无穷大目标，用户不需要提前放慢速度来准确地访问它们。
在 Windows 系统中，任务栏中包含了许多常用应用，并在屏幕最下端。这个位置同样也最优化了移动时间，因为这些应用的图标成为了无穷大目标。
注意，这种边缘放置只在使用鼠标或轨迹球的 UI 上有优势，对于触摸屏而言并不存在优势。实际上，一项由丹尼尔 · 埃弗拉米（Daniel Avrahami）进行的研究发现，对于触摸屏设备而言，用户其实需要更长的时间才能接触到边缘上的物体。可能对于触摸屏而言，用户有可能因为过度移动而超过屏幕的边缘。
4.1.4 不要把目标放在一起
如果你把若干目标放得过近，就会存在用户意外地过度移动，从而选择了错误目标的风险。注意，当目标尺寸很小时，这更可能发生。
4.1.5 仅仅用填充并不足够
有时，设计师会填充特定目标，从而使有效的目标区域变大。然而，记住，即使填充可以帮助避免一些过度移动的错误，如果人们没有意识到一个目标的周围是填充、可点击的，他们可能还是会在接近目标时，比实际上需要的更谨慎、更慢地移动，为了确保他们不会超出目标所在区域。
被填充的目标往往是一个小的目标，周边存在着更大的、无形的可点击区域。如果人们没有意识到该目标周边是有填充的，他们还是会在接近该目标时放慢速度，确保他们点击了可见区域。
4.2 最优化到目标的距离
4.2.1 菜单设计
呈现若干条目的菜单形式会影响访问所有这些条目的移动时间。为了说明这一点，让我们来看这三种不同的菜单设计：线性菜单、矩形菜单（又称超级菜单，mega menu）和圆形菜单。
我们假定，当菜单打开时，指示物会在菜单名称或标签上。（这对于基于鼠标的界面而言，是真实的假定。即使人们有时会使用快捷键来打开菜单，菜单更常见的打开情境还是用鼠标完成的。）
从菜单名称到菜单元素的平均距离和菜单的类型有关：线性菜单比矩形菜单的效率更低，而矩形菜单的效率又比圆形菜单更低。
在线性菜单中，我们可以看到，菜单名称到第一个元素的距离是最短的、到最后一个元素的距离是最长的。因此，对于这样的菜单，可以考虑按照条目的使用频率来排序（最常访问的条目放在最上面）。
在矩形菜单中，元素在水平和垂直两个方向排布，因此，平均到一个特定菜单选项的距离比线性菜单要短。
最后，在圆形菜单中，所有的菜单选项都被放在一个围绕着菜单名称的圆圈中，因而到菜单名称的距离都相等。因此，访问所有这些选项的时间是相等的。（尽管圆形菜单有如此大的益处，它们在 UI 设计中很少被使用，因而用户对这种形式并不熟悉。）
即使对于表现最差的线性菜单而言，如果所有元素的访问频率相等，可以通过将菜单名称与菜单中间对齐来改善平均移动时间。这样最远的元素就是第一个和最后一个，而最近的是中间的选项。
线性菜单的平均移动时间可以通将菜单名称与菜单中部对齐来改善。
在移动端，一些情境化菜单以底部表单的形式出现，距离菜单标签很远。这种设计并不是最好的，因为它迫使用户浪费了更多的移动时间。理想情况下，这些选项应该就在标签旁边。
左图：谷歌邮箱 iOS 应用将情境化的 “更多” 菜单中的选项以底部表单的形式展现，和菜单标签距离很远。为了选择一个菜单选项，用户需要把他们的手指从菜单标签移动相对长的距离到选项上。右图：在邮箱 iOS 应用中，与删除图标相关的情境化菜单立刻出现在该图标边上，最小化了移动时间。
4.2.2 把相关的目标放得更近
如果你知道用户会以一个特定顺序点击一系列选项，将它们放得近一些（但不要太近——参考之前讨论的原则）来最小化它们之间的距离，从而最优化任务总用时。
例如，表格的提交键应该放在最后一个表单项边上。将提交键放在页面顶端、页面标题上的移动端设计，不仅与用户从上至下的自然工作流顺序相悖，还会导致移动时间变长，因为用户需要将他们的手指从位于屏幕底端的最后一个表单项移到屏幕的最上端。
左图：丝芙兰的 iOS 端应用把 Save（保存）键放在屏幕的右上角。用户的手指需要从最后一个表单项经过较长的距离移到保存键。右图：相反，Taxa 4x35，一个丹麦打车应用，将最主要的可执行按钮（Next）放在了屏幕最底端，和最后一个表单项（Select Destination）距离很近。
结论
菲茨定律阐述了移动到一个目标的时间取决于它的大小和它的远近。在你创建新的 UI 设计时，可以通过设计间距合适、大尺寸的目标，并将它们放置到与用户之前最可能处在的位置距离较近的地方来最优化这两个变量。
附录
参考文献
Avrahami, D. 2015. The Effect of Edge Targets on Touch Performance. CHI’15.
Elliott, D., Helsen, W. F., & Chua, R. (2001). A century later: Woodworth’s (1899) two-component model of goal-directed aiming. Psychological Bulletin, 127(3), 342–357. https://doi.org/10.1037/0033-2909.127.3.342
Fitts, Paul M. (June 1954). “The information capacity of the human motor system in controlling the amplitude of movement”. Journal of Experimental Psychology. 47 (6): 381–391. doi:10.1037/h0055392
I. Scott MacKenzie and William Buxton. 1992. Extending Fitts’law to two-dimensional tasks. In CHI’92. New York, NY, USA, 219–226. https://doi.org/10.1145/142750.142794
版权声明
本文版权属尼尔森诺曼集团（Nielsen Norman Group）所有。欢迎转发至朋友圈，如需转载，请邮件 Support@nngroup.com。未经授权的转载、翻译是侵权行为，版权方将保留追究法律责任的权利。
若有收获，就点个赞吧
0 人点赞
