让设计更有说服力的20条经典原则：菲茨定律

简介说明

1. 理论表述

任意一点移动到目标中置所需的时间，与目标距离相关，与目标小负相关。

2. 研究背景

1954 年，Paul Morris Fitts 根据息类比提出一个假，该假能够量化「移动目标选择任」这个操作的难度「1」。虽然该假还未涉及人机交互中的体参数，却给了后来的交互研究人员极大的启发。

我们常看到的 Shannon 公式（即面那公式）由约克学教授 Scott Mackenzie  1992 提出的一菲茨公式的变体「2」，该变体被广泛应用于需指针操作的人机交互系统当中。作交互设 UI 设的理论基础，它简洁明了阐述了时间 T 目标距离 D 以及目标小 W 之间的函数关系：因以 2 底的指数函数递增函数，所以，T 与 D 相关（D 越 T 越），与 W 负相关（W 越 T 越小）。

设计案例

人们出一移动指针的操作通常需两：

• 将指针快速移动至目标大致所在的域；
• 精细调节指针的置以达到可点击的区域。

菲茨定律所包含的点内容：

• 指针当前位置与目标间的距离 D 越长，需时间越长；
• 目标的宽度 W 越大，所需间越短。

综合两者来看，菲茨定律 D 在第步起更为明显作用，而 W 则主要影响第步。所以菲茨定律所带我们启示，主要也是从这两入手。

1. 需要连续操作的控件尽可能接近

案例1：系统右键菜单，微信弹出菜单

典型的例子就单，无论 PC/Mac 中的右键单还微信聊天页里面的加键都遵循这一原则。作用户，点击这类按钮之后一会后续的任务操作，所以这些任务都被安排了距离所点击区域近的单中。

案例2：夸克 Safari 的 url 输入框置比较

另外一个例是浏览器的搜索栏输入框，现在已经有一些浏览器（比如简搜索、夸克）会将输入框以及一些其更常用操作置于底部，这是因为正常握持机，大拇指离底部更近，所以需要进行点击操作的话底部的输入框操作起来更方便，也更快。

2. 可点击的按钮尽可能大

这一点在现今的 APP 中做得已经非常位了。

案例3：哈罗出行

作为哈罗单车租操作的入口，页面中的「开锁」按钮做得足够大，户可轻易快速地点击到这个使频率最大的按钮。登录（就是开始）按钮是一样的道。

3. 边角的利用

还有一个较特殊的就是对于边角的利，无论是在 Windows 还是在 MacOS 中，边角总是有一些较重要的操作，如 Windows 的「开始菜单」（在左角），MacOS 的 Dock 栏（在）及顶状态栏，包括 Mac 特有的触发角。

案例4：MacOS 触发角设置

为什么微软和苹不约而地选择了在屏幕最边放这些权相高组件或者操作呢？在硬件设备边是个极其特殊存在，由于指针再怎么移动都不可能越屏幕边界，能留在边界上，所以边界于用户操作来说是「限可触发」，这有什么意义呢？这意味着于隐性存在目标来说，W 趋于限大。

既然 W 趋于限大，根据公时 T 趋于常量 a。

结论是论指针距离目标物多远，所需要花费时都已经到了理论最小值，轻松高效。而在移动 APP 样有边应用，比如最近拿了 Google Play 设计大奖 Drops。

案例5：Drops

创新的互将屏幕底边充分的用来，只要将单词移到底部，就代表用户已经住个单词。注意整个底部是以触的，而不仅仅是脑袋个圆形区域。来「移动」个操对「按钮」来说更加繁琐，但是在 Drop 的应用场下样的移动反而没有得烦，滑来相当带劲。

4. 菲茨定律的逆向应用

菲茨定律给我们的启示通常是正向的，是以缩短用户的操时间为主要目标，但也有一场需要反其道而行之。比果遇到需要用户谨慎的操时，以逆向运用菲茨定律，增加操的复度。

案例6：iPhone 关机和微信删除聊天窗

iPhone 的滑动关机延了用户关机操作的时间，以提醒用户此操作不可逆，需谨慎操作。微信也同理，甚至还缩小了删除按钮的小，以达到警示的目的。

另一个典型就是弹出窗口的关闭按钮。

案例7：Luckin Coffee 的弹出窗

弹出窗口里一般都包含了发商的推广、广告、运营活动，所以发商会希望用户花尽多的时间去注意到它们的内，这时候鸡贼的发商会把关闭按钮得又小又远（远离视觉中），让用户花多的时间去寻找点击它们，效果拔群。

注意事项

注点1：D 不能过短

过短的间距不仅无法提升操作效率，反而会造成视觉压力从而降低用户体验。

反面案例1：唯物魔改版

按照菲茨定律魔改的唯物登录页面，应操作得更迅捷方，然而实际上除了视觉上成额外的拥挤感、破坏画面负空间构成之外，我尝试着点了一觉得十分逼仄挤手，过缩减按钮间的间距并合。

注意点2：W 过分大

大尺寸的点击目标确实够有效地降低户操作成本，但是过分大的目标会很直接地破坏画面的平衡，浪屏幕空间。并且按钮的可性与尺寸并是呈线性系，当按钮已经足够大时，再增大就没有么体验上的升了，如图示。

反案例2：KEEP 魔改版

与唯物类似，当按钮大到一定程度之，对画面造成恐怖的破坏效果。

总结

• 尽可能缩短续操作所相关按钮的间距，尽可能做大需要频繁点击的按钮（但都不要过）。
• 注意屏幕四四角交互中的价。
• 逆向运用菲茨定律以延长用户在当前页面的时间，或对用户的下一步操出警示。

参考资料

1. Fitts, Paul M. The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 1954, 47 (6): 381–391.
2. Scott MacKenzie. Fitts’ Law as a Research and Design Tool in Human-Computer Interaction. Human-Computer Interaction, 1992, Volume (7): 91-139.
3. IDF INSTRUCTOR (2016). Fitts’s Law: The Importance of Size and Distance in UI Design. 
4. Mrer. (2017). 产品设计法则：菲茨定律（费茨法则）/ Fitts’ Law.
5. bozhongtao (2012). 菲茨律与互联网设 Fitts’Law.

欢迎关注作者的公众号：「超人的话亭」