设计法则： 4个步骤带你了解菲茨定律（费茨法则）.docxVIP

设计法则： 4个步骤带你了解菲茨定律（费茨法则） 补充一张雅虎ued绘制的关于Fitts’ Law的Q版小漫画，先初步了解下： Fitts’ Law / 菲茨定律（费茨法则） Fitts’ Law / 菲茨定律（费茨法则） 1. 一句话描述 任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。 2. 定律内容 从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（上图中的 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：举起你的手臂并试着用手指指向远处的一个小物体，例如远处墙上的一个电灯开关。开始你的手臂可能会往开关的位置大幅的移动而且很有可能稍微过头了一点。接下来你会做一些微小的调整动作直至你的手指正好对准目标开关的中心。现在你可以试着指向一个更大的物体 – 比如说电视或一面墙壁。这一次你也会以大幅度的手臂动作来使手指指向目标方向， 但因为目标体积很大所以一般情况下你只需要做很少（甚至不需要任何)的微调。 3. 菲茨定律的启示 1）按钮等可点击对象需要合理的大小尺寸。 2）屏幕的边和角很适合放置像菜单栏和按钮这样的元素，因为边角是巨大的目标，它们无限高或无限宽，你不可能用鼠标超过它们。即不管你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。（下文结合案例解释） 3）出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快，因为不需要移动到屏幕的其他位置。 4. 典型应用及案例 菲茨定律虽然在很多领域都得到了应用，但其在人机交互（HCI）和设计领域的影响却最为广泛和深远的。 例一：油门和刹车：增大目标大小、减小与目标的距离来提高效率。 我们从日常生活中体会下费茨法则的应用： 汽车上的刹车踏板和油门踏板：它们相距很近（D小），并且刹车踏板要比油门踏板大很多（W大），那么它们为什么没有被设计成相距很远，或者将两者的大小颠倒过来呢？使用经验告诉我们，这样的设计可以使得驾驶员能够以最短的时间把脚从油门踏板移动到刹车踏板上，从而达到以最快的速度准确制动的目的（D小，W大，时间短）。 可能去过电玩大世界的人会有这样的疑问，电玩大世界中那些赛车的油门和刹车踏板大小刚好与常规的相反，这又是为什么？这也正是应用费茨法则的高明之处，因为游戏中我们需要的是更快的速度去超越对手，因此你会更加容易的去踩到油门，争取更多的时间，而且你人身安全不会受到威胁，因为刹车踏板就明显变小了。 例二：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浏览器的标签栏 例三：鼠标右击菜单设计：缩短当前位置到目标区域的距离。