设计师都需要知道的设计原则和定律（一）——费茨法则

从今天开始持续分享设计原则和定律，优秀设计师绝对不能错过的只是干活，我不允许你还不知道，赶紧关注我，持续更新中···

很多设计师在做设计前可能会找很多的参考，发现哪一个参考设计得还不错不经过任何的思考就直接开抄，但是你真的抄明白了吗？

我们对于为什么要这么设计进行思考了吗？这样照抄下来真的适合我们的产品吗？我们如何说服他人同意自己的方案？

除了分析别人为什么要这么设计之外，我们更重要的是要知道这样设计的原理是什么，通过了解设计原理我们才能更好的将原理运用到自己的设计中，而不是直接照搬别人的设计。

设计师除了要掌握一门手艺活，还要拥有海量的知识做储备，不然你永远只能算得上一个“美工”。

从今天开始我将通过学习和整理来分享有关设计中的交互心理知识，我会通过四个方面（理论基础、深度解析、举例说明、自我总结）去进行知识的梳理和总结。

在文章开始前我想引用交互设计之父阿兰·库珀的一句话，“除非有更好的选择，否则就遵从标准”。

一、什么是费茨法则？

1954年，当时担任美国空军人类工程学部门主任的保罗·费茨（Paul M. Fitts）博士，对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行了研究，提出了著名的Fitts定律。

该定律指出，使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。

二、费茨法则解析

1、费茨法则公式

1.1 T ：用户击中目标所需的时间（时间）

费茨法则中研究的关键是指、点设备执行动作的运动时间，试图找到一个相关因素来提高执行一个选中动作的效率，研究的是一个指向性的操作。

完成操作的需要的时间与什么因素相关是费茨法则所研究的问题，通常我们进行一次目的地明确的指点动作可以细分为两个部分：

① 首先一个大幅度的移动，将指点设备移向与目标大致相同的方向和区域

② 紧接着是一系列精细的小幅度微调，来将指点设备精确定位在目标中心

你现在就可以做一个小实验来观察这一过程：

举起你的手臂并试着用手指指向远处的一个小物体，例如远处墙上的一个电灯开关

开始你的手臂可能会往开关的位置大幅的移动而且很有可能稍微过头了一点

接下来你会做一些微小的调整动作直至你的手指正好对准目标开关的中心

——引自 Ashley Towers

上面这个例子中，你要准确对准电灯开关这一系列动作所消耗的时间，就是费茨定律要研究的关键指标；

而在人机界面交互中，我们在研究优化用户体验时，通常也希望能帮助用户快速而精准地完成一系列指点操作

但费茨法则也有它的适用范围局限性，不是任何场景都可以去强行套用，关于费茨定律有一点需要注意：

费茨法则主要用于表现指、点动作的概念模型，指点设备可以是鼠标、手，甚至脚（油门与刹车设计中也包含了费茨法则的奥义）

1.2 D ：目标距离用户的远近（起始点到目标中心的距离）

根据公式，时间（T）与距离（D）成正相关，即起始点与目标区域越近，那么指点动作的时间越短，有效触及目标的可能性越高。

那么是不是我们设计控件时，将元素位置都尽量贴近就合理的了呢？并不是！！！

首先是把元素位置都挤在一起，影响设计视觉风格，在“Less is More”留白美学盛行的当下，盲目减少元素与元素之间的间距肯定是不可取的

其次因为距离越小，有效触及目标的可能性越高，不注意把控元素与元素之间的间距，也很可能导致用户产生误触，反而降低了用户的点击效率，以分页控件来举个例子：

第一个分页间距虽小，但是也导致用户微调的时间增加了，误触的可能性也随之增大了

第二个虽然分页间距没有多大的改进，但可点击区域（热区）增大了，还是能够减少用户误触可能性的

第三个不论是分页间距、热区大小、视觉风格上，都是在三版之中可行性最高的。

这么看来，热区大小果然也是费茨定律中不可忽略的因素之一

1.3 W ：目标区域大小（目标在移动轴方向上的宽度）

依然用到 Ashley Towers 指电灯开关的例子

现在我要你试着指向一个更大的物体，比如说显示器或者是墙壁，这次你也会以大幅度的手臂动作来使手指指向目标方向

但因为目标体积很大，所以一般情况下你只需要做很少（甚至不需要任何）的微调，这意味着增加目标区域的有效可触区域，可以显著提高用户点击效率

但在UI设计中，不要为了让用户方便选中，而盲目放大目标的区域大小

当按钮的尺寸大到一个的临界点时，点击准确率就趋于一个平衡值了，再增大按钮并不能提升体验，反而可能影响视觉构图效果

在保证可观的视觉构图的前提下，我们可以通过技巧来增大可点击区域，例如在设计选框时，除了选框本身可点击，也可以扩大点击区域到文字标签上

2、边缘目标无限大

因为屏幕有边界的原因，鼠标会在屏幕边界停止，因此边界的宽度可以认为是无穷大

用户可以快速精准的进行操作，因为鼠标很容易到达边界，且不需要过多调整

Mac OS系统的菜单栏默认放在屏幕下方，当然也可以自己设置在左边或右边，总之都是在边界上，这样的设计就是运用的“边缘无限大”

因为用户的鼠标在移动到最下方后，鼠标不会再继续往下移动，光标会一直在菜单栏上

使用户可以不需要过多的调整，用更少的时间完成选择

当然，在win系统中也有“边缘无限大”的例子，比如左下角的开始菜单栏，虽然它躲在角落，但是选中它的速度比放在屏幕正中间更容易，因此用户只需要把鼠标潇洒的往左下角一挥，就能快速精准的让光标达到开始菜单按钮上

但是在Win11系统更新后“开始菜单栏”由左下角移动到了任务栏的中心位置（有点Mac的感觉），同样还是运用到了“边缘无限大”

还有一个经典的例子

Windows 操作系统和MAC操作系统中的应用程序菜单区域(menu bar)位置的设计

实际测试和理论计算结果都表明，在使用 MAC操作系统 时，用户点击某个菜单所需的平均时间要比Windows上快0.4秒（来源《The humane Interface》Jef Raskin ）

注：随着屏幕越来越大、双屏的出现，由于移动距离的变长，移动时间的对比不太强烈

三、设计中费茨法则的运用

1、日常生活中的设计运用

1.1 油门与刹车

汽车上的油门踏板与刹车踏板距离（D）很小，而且刹车踏板比油门踏板（W）要大很多，当驾驶员在驾驶车辆在替换油门或刹车时（T）所花的时间时最少的

这样运用费茨法则使得驾驶员能够在最短的时间把脚从油门踏板移动到刹车踏板上，从而达到最快速的精准制动的目的

2、UI设计中的设计运用

2.1 表单填写中的按钮设计

在填写的信息较少时，可以将按钮设计在最后一个字段的下方，因为表单自带从上往下的填写属性，当用户将信息填写到最后一个字段时鼠标刚好在最下方，这时按钮设计在这个附近就减少了用户移动鼠标的时间

但是，当浏览器一屏的高度无法将字段展示完时，把按钮继续设计在最下方就不是那么适用了

如果继续把按钮设计在下方可能会导致用户在填写一半需要操作时找不到按钮，或是知道按钮在哪需要花更多的时间去操作，这时可以将按钮设计在浏览器下方固定住，让按钮始终展示在浏览器底部

2.2移动端表单中的按钮设计

根据数据显示超过50%的用户都习惯单手使用手机，使用大拇指进行交互，那么移动端的表单按钮设计除了像web端的需要考虑用户填写顺序，还要考虑“屏幕热区”和按钮的大小，所以在设计时我们应该尽可能的将按钮设计在“屏幕热区”，然后将按钮在不影响美观的情况下做大一些

2.3 编辑朋友圈中的图片删除（边缘无限大）

在进行朋友圈编辑时，移除照片的操作不需要我们手动的点击删除按钮，我们只需要将照片拖动到屏幕的底部就可以将其删除

四、总结

回顾前面分析总结的知识，其实费茨法则主要与两个因素有关，一个是“距离”，指、点设备到目标中心的距离，一个是“大小”，目标区域的大小，还有一个引申出来“边缘无限大”的概念

1、关于“距离”

指、点设备离目标越近，操作的速度越快，所以在进行设计时，显眼的位置不一定就是方便用户操作的位置，优秀的设计一定是指、点设备离目标更近，或者是指、点设备经过一番操作后刚好在需要点击目标附近的位置

2、关于“大小”

在设计时，我们应该尽量将目标设计得大一些，但不是越大越好

大小达到一个峰值时，点击效率就不会再改变了，所以尽可能的做大，但也不要盲目做大，还是要考虑美观

3、边缘无限大

屏幕的边缘是个好地方，适合放菜单栏和按钮这样的元素，由于边角的目标很大，鼠标不可能超越他们，无论移动多远，鼠标最终会停在屏幕边缘