Fitts’ Law / 菲茨定律（费茨法则）

 Fitts’ Law / 菲茨定律（费茨法则）

补充一张雅虎ued绘制的关于Fitts’ Law的Q版小漫画，先初步了解下：

 

Fitts’ Law / 菲茨定律（费茨法则）

Fitts’ Law / 菲茨定律（费茨法则）

一、一句话描述：

任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。

二、定律内容：

从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（上图中的 D与 W），用数学公式表达为时间 T = a + b log2(D/W+1)。

 

解读：

 

T = a + b log2(D/W+1)

T = a + b log2(D/W+1)

T=移动设备所需时长；a,b是经验常量，D=设备起始位置和目标位置的距离；W=目标的宽度大小。

两点含义：

1)、设备当前位置和目标位置的距离D越长，所用时间越长；

2)、目标的大小W越大，所用时间越短。

理解：

目的地明确的移动能够细分为两个部，以移动光标为例：

第一步、首先是一个大幅度的移动将光标移向与目标大体相同的方向和区域；

第二步、紧接着是一系列精细的小幅度微调来将光标精肯定位在目标中心。

小实验帮助理解Fitts’ Law：举起你的手臂并试着用手指指向远处的一个小物体，例如远处墙上的一个电灯开关。开始你的手臂可能会往开关的位置大幅的移动并且颇有可能稍微过头了一点。接下来你会作一些微小的调整动做直至你的手指正好对准目标开关的中心。如今你能够试着指向一个更大的物体 – 好比说电视或一面墙壁。这一次你也会以大幅度的手臂动做来使手指指向目标方向， 但由于目标体积很大因此通常状况下你只须要作不多（甚至不须要任何)的微调。

三、菲茨定律的启示：

1）、按钮等可点击对象须要合理的大小尺寸。

2）、屏幕的边和角很适合放置像菜单栏和按钮这样的元素，由于边角是巨大的目标，它们无限高或无限宽，你不可能用鼠标超过它们。即无论你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。（下文结合案例解释）

 

3）、出如今用户正在操做的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏能够被打开得更快，由于不须要移动到屏幕的其余位置。

四、典型应用及案例：

菲茨定律虽然在不少领域都获得了应用，但其在人机交互（HCI）和设计领域的影响却最为普遍和深远的。

例1、油门和刹车：增大目标大小、减少与目标的距离来提升效率。

咱们从平常生活中体会下费茨法则的应用：

汽车上的刹车踏板和油门踏板：它们相距很近（D小），而且刹车踏板要比油门踏板大不少（W大），那么它们为何没有被设计成相距很远，或者将二者的大小颠倒过来呢？使用经验告诉咱们，这样的设计可使得驾驶员可以以最短的时间把脚从油门踏板移动到刹车踏板上，从而达到以最快的速度准确制动的目的（D小，W大，时间短）。

可能去过电玩大世界的人会有这样的疑问，电玩大世界中那些赛车的油门和刹车踏板大小恰好与常规的相反，这又是为何？这也正是应用费茨法则的高明之处，由于游戏中咱们须要的是更快的速度去超越对手，所以你会更加容易的去踩到油门，争取更多的时间，并且你人身安全不会受到威胁，由于刹车踏板就明显变小了。

例2、window和mac系统菜单设计：增大目标大小以缩短定位时间（边缘无限大）。

两大主流OS中又有很是好的案例：Mac OS X默认将底栏（Dock)放到了屏幕的最下方；这样的话底栏就变得“无限可选中”，由于用户不能将光标移到底栏下方因此在向底栏方向作出大幅度移动后光标始终是落在底栏上的。

 

Mac OS X默认将底栏（Dock)放到了屏幕的最下方

 

屏幕边缘，W无限大，T近似等于0 

在Windows中，开始菜单在屏幕的左下角，这个角落是“无限可选中”的，由于无论用户朝左下角方向作多大幅度的摆动，光标老是会停在开始菜单按钮的上方。（另外一个案例：QQ右上角吸附隐藏，光标移动到右上角弹出）

 

Windows7，开始菜单在屏幕的左下角

 

屏幕角落，W无限大

 

这方面最经典的例子是 Windows 操做系统和MAC操做系统中的应用程序菜单区域(menu bar)位置的设计。实际测试和理论计算结果都代表，在使用 MAC操做系统 时，用户点击某个菜单所需的平均时间要比Windows上快0.4秒（《The humane Interface》Jef Raskin ）。注：随着屏幕愈来愈大、双屏的出现，因为移动距离的变长，移动时间的对比不太强烈。

 

MAC OS 的 menu bar位于顶部边缘

 

windows os 的menu bar 位于title bar下方 

另外一个对比案例：IE浏览器和chrome浏览器的便签栏设计

 

IE浏览器的便签栏 

 

chrome浏览器的标签栏 

例3、鼠标右击菜单设计：缩短当前位置到目标区域的距离。

右键菜单技术（或上下文菜单）是采起这种思路的一个很好的例子。为了弹出这种菜单，用户只要将鼠标指针移动到须要对其进行操做的某个对象所占据的区域中并单击右键便可。而在通常状况下，这个移动的距离要远小于将鼠标指针移动到应用程序主窗口顶部的下拉菜单区域。

 

右键菜单缩短了光标的移动距离D,提升了效率 

例4、WEB设计中的应用

网页设计师最大的遗憾之一就是不能利用浏览器的边角和边缘做为可“无限可选中”的区域。不过设计师仍然能够按照菲茨定律在设计上作一些优化。

1）、放大连接点击区域。在连接文字周围放置可点击的填充区域，这样用户想要点击的连接文本会有更大的容错性。

2）、当您有几个放置在一块儿的可点击目标或连接时，把它们的体积增大或增长他们之间空白区域的大小。搜索结果中的网页导航连接一般都有不好的可用性。例如，下图所示的搜索结果页面的底部，用户能够经过点击连接文字为“1”，“2”到“10”跳转到特定的页面。这里的问题在于这些超连接的可点击区域过小，只有一个数字加一个“o”的大小，所以很难快速将鼠标指针准确移动到它们上面。在某些状况下，这种设计可能会带来很大的使用困难。例如，鼠标灵敏度低难以定位，又或者，一些老年用户或者存在运动机能障碍的用户在精确控制鼠标方面有困难。这些都将致使用户更难于点击某个想要浏览的页面的连接。

 

搜索结果页面的底部页码连接

3）、将用户最有可能点击（或最想要）的按钮放大。例如，将”登录”按钮设计的更大：

 

登录按钮被设计的更大

4）、将动做分类 – 若是相关的操做按钮靠近彼此的话，则不只能够在视觉上加强用户对它们相关性的认知，还能够减小光标在它们之间移动所需的距离和时间。

例4、移动端设计中的应用

移动端交互设计中也有不少案例应用了Fitts' Law，举一个Android系统中删除应用的例子，用户拖拽想要删除的应用到顶部删除，顶部W无穷大，增长了用户操做效率和精准度。

 

 miui系统中的删除应用

Fitts' Law鼓励减小距离，增长目标大小以提高用户效率，但反过来应用也会有意想不到的效果，好比iPhone关机，不采用按钮点击，而采用滑动操做，这样虽然减低了用户操做效率，但增长用户操做时间能够起到警示用户谨慎操做的目的。

 

反例：iPhone关机操做 

做者：Mr汤进er 连接：https://www.jianshu.com/p/36b610bac7a2 來源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。