费茨定律:把重要的东西做得更大、更近。
刹车踏板比油门更大也更近,因为你需要它快。同一条定律决定了你的按钮是毫不费力还是别扭难按。
坐进任何一辆车,低头看。刹车踏板比油门大,位置也更近更低,所以你的脚能很快找到它。这不是造型上的选择。这是费茨定律,由心理学家 Paul Fitts 在 1954 年提出,它也在悄悄决定你的界面是什么手感。
定律很简单。够到一个目标所需的时间,取决于它有多远、有多大。更近更大就更快更好按。更远更小就更慢也更容易出错。我在设计面向两百多万人的界面时反复依赖这一条,因为它把”毫不费力”这种模糊感受变成了可以放置、可以衡量的东西。下面是怎么用它。
要点
- 击中目标的时间随距离增加、随尺寸缩小(Fitts,1954)。重要的动作应该又大又近。
- 一根手指需要至少 1 cm × 1 cm 的目标(Nielsen Norman Group),所以点击区在 Apple 平台上做 44pt,在 Material 上做 48dp,按 WCAG 2.5.5 做 44 CSS 像素。
- 把主要动作放在手已经在的地方。在手机上那是底部的拇指热区,不是右上角的一个链接。
- 让少用的和破坏性的动作更小、更分开,这样一次随手的点击不会变成后悔。
- 屏幕边缘会把光标卡死,贴边的目标相当于无限大。一个通栏的底部按钮毫不费力。
什么是费茨定律?
它是 1954 年提出的一个预测:指向某个东西要花多长时间。Paul Fitts 发现,移动到目标所需的时间取决于两件事:到它的距离,和它的尺寸。距离翻倍,时间变长。尺寸翻倍,时间变短。更近更大永远赢。
刹车踏板就是钢铁做的费茨定律。它比油门大,位置更近更低,因为你需要它的那一刻,你现在就需要。你的屏幕遵循同一条规则。你希望人们去做的那个动作,应该是最好按的目标,而布局要么在帮这只手,要么在跟它作对。
点击区该做多大?
大到能容下一根手指,而那比多数设计师画的要大。Nielsen Norman Group 建议可交互元素至少 1 cm × 1 cm,以免手指按错。比这更小的目标是在要求人去瞄准,而瞄准正是点击落空的地方。
各个平台看法一致,也给了你数字。
| 平台 | 目标尺寸 | 来源 |
|---|---|---|
| iOS 和 iPadOS | 44 × 44 pt,默认控件尺寸 | Apple 人机界面指南 |
| Android,Material Design | 48 × 48 dp,间隔 8 dp | Material Design 无障碍 |
| 网页,WCAG 2.5.5(AAA) | 44 × 44 CSS 像素 | WCAG 2.1,目标尺寸 |
拿不准的时候,44 是下限,不是目标。最重要的那个动作要做得更大。
主要动作该放在哪?
放在手已经在的地方。单手握着的手机上,那是屏幕底部横向的拇指热区,而不是顶角一个要人伸手又眯眼的小链接。把主 CTA 放在拇指落下的位置,它就不再像一次伸手。
这就是底部栏、通栏按钮和底部弹层统治移动设计的原因。它们不是潮流。它们是费茨定律用在拇指上的结果。目标离静止的手越近、越大,界面就越像在迎着用户走过来一半。
危险的动作怎么办?
故意让它们更难按到。这条规则是双向的,第二半才是好设计见功力的地方。删除、支付、永久确认。让这些更小、更分开,给它们一点距离,这样一次随手的点击不会变成一个你得撤销的后悔。
摩擦通常是敌人,但在这里它配得上位置。一个略小、略远,或者被第二步挡住的破坏性按钮,代价是零点几秒,省下的是偶尔的一场灾难。用尺寸和距离说出什么重要,也用它们低声提示什么该让人停一下。
为什么边缘和角落这么好按?
因为屏幕边缘会把你的光标或拇指卡死。你不可能冲过头。用费茨的话说,贴着边缘的目标在那个方向上等同于无限大,所以不看也能轻松按中。底部通栏按钮背后是这个道理,桌面端死死顶在角落的菜单也是。
把你手上的边缘用起来。钉在手机底部边缘、横贯整个宽度的主要动作,是你能做出的最好按的目标之一。屏幕的边框替你做了一半的活。
两分钟自查
这些都不需要重做设计。打开你的产品,找到主要动作。问它是不是最大、最近、最容易按中的那个。然后找到你最具破坏性的动作,确认它不是。如果答案反了,你今天下午的事有了。
尺寸和距离不是装饰。它们是界面告诉手什么重要的方式。做对了,产品会毫不费力,而没人说得出为什么。如果你想把它用在你正在做的东西上,告诉我那是什么。
常见问题
什么是费茨定律?
费茨定律是说,移动到一个目标所需的时间取决于到它的距离和它的尺寸。更近更大的目标更快也更好按中,所以重要的动作应该做得大,并且放在容易够到的地方。
怎样把费茨定律用在 UI 设计上?
把主要动作做大,放在手已经在的地方,比如手机屏幕底部的拇指热区。把少用的或破坏性的动作做小、分开放,让它们更难被误触。
为什么屏幕边缘适合放按钮?
边缘会卡住光标或拇指,所以贴边的目标在那个方向上相当于无限大。一个填满屏幕底边的按钮毫不费力就能按中,这就是费茨定律在替你工作。
参考来源
- 在 1954 年 doi.org
- Nielsen Norman Group nngroup.com
- Apple 人机界面指南 developer.apple.com
- Material Design 无障碍 m2.material.io
- WCAG 2.1,目标尺寸 w3.org