产品设计法则：菲茨定律（费茨法则）/ Fitts’ Law

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

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

1、一句话描述：

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

2、定律内容：

从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（上图中的 D与 W），用数学公式表达为时间 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浏览器的标签栏

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

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

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

例四、WEB设计中的应用

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

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

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

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

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

登陆按钮被设计的更大

4）、将动作分类 – 如果相关的操作按钮靠近彼此的话，则不仅可以在视觉上增强用户对它们相关性的认知，还可以减少光标在它们之间移动所需的距离和时间。

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

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

miui系统中的删除应用

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

反例：iPhone关机操作

参考文献：

腾讯CDC：菲茨定律与互联网设计 Fitts’Law

【交互设计】谈谈Hick定律（席克法则）_海旭Roy_新浪博客 Windows 设计规范中的鼠标交互；

【交互设计】谈谈Hick定律（席克法则）_海旭Roy_新浪博客 费兹定律Fitts’ Law与使用者介面设计；

【交互设计】谈谈Hick定律（席克法则）_海旭Roy_新浪博客 Google Chrome 与 Fitts Law，一个很好的实践；

【交互设计】谈谈Hick定律（席克法则）_海旭Roy_新浪博客 谈谈 Fitts 定律；

【交互设计】谈谈Hick定律（席克法则）_海旭Roy_新浪博客 费茨法则在交互设计中的应用（ Readlists）

When You Shouldn’t Use Fitts’s Law To Measure User Experience

——————————————————————————————————

注：文章写于2015年3月，引用的案例都比较老，但今天回顾都比较经典，搬到知乎专栏，希望对大家有帮助

---

兴宁区18946621670： 包装设计需要考虑哪些方面和要求? - ？
晋物抒彤： 包装设计首先需要考虑的是满足消费群体的需求,精致,美观,高端大气,上档次.一个完美的礼品让人送礼感觉心情很好,如果很普通的构造外表,当然有不同的看法.

兴宁区18946621670： 可靠性设计的基本原则? - ？
晋物抒彤： 可靠性设计遵循的基本原则 (1)必须将产品的可靠性要求转化成明确的、定量化的可靠性设计指标. (2)必须将可靠性设计贯穿与产品设计的各个方面和全过程. (3)设计所选用的线路、版图、封装结构,应在满足预定可靠性指标的情况下尽量...

兴宁区18946621670： 浅淡产品设计的基本原则有哪些 - ？
晋物抒彤： 1、需求原则:从需求产品的功能要求.以满足目标的产品,这是基本的起点也是所有的设计的需要.客观不用考虑产品积压,造成浪费.与客观需求是不同的时间,地点和变化,这种变化的需求设计,提升产品的基础.它看起来如设计上满足...

兴宁区18946621670： 旅游产品设计的原则有哪些 - ？
晋物抒彤： 旅游产品设计是指按照一定的规则,配置旅游资源和首层服务,把旅游服务加入其中;并以一定的主题、内容、形式和价格表示出来的过程. 设计旅游产品,有一套完整的方法.首先要能够选定旅游地的旅游价值点,这是一个旅游产品的核心...

兴宁区18946621670： 美的美的规律 - ？
晋物抒彤： 美感的本质是什么?为什么我们会对一些事物产生普遍性的美感,而另一些美感却因人而异?这其中有没有规律可循?如果有,我们是不是可以按照美感的本质和规律创造更多具有美感的东西? 其实,“美感”就是引导我们更好生存的一种“情...

兴宁区18946621670： 乔布斯的设计理念是什么?他设计产品的原则是什么? - ？
晋物抒彤： 众所周知,乔布斯是一个完美主义者,交付到他手中的产品原型都经过了上百次的修改与讨论.简洁、直观是其设计产品的原则.下面是苹果设计产品时遵循的原则:1,高品质设计都是包罗万象的,而且要有深度.2,公司的员工一定要了解产品,明白产品如何工作,给用户带去什么好处.3,苹果首席设计师乔纳森·艾夫说,心态要轻松放松,对错误保持好奇和兴趣.4,我们的产品是工具,我们不想它被设计局限阻碍.5,产品人员要意识到产品是他们本身的一个延伸.

兴宁区18946621670： 品牌设计需要遵循哪些原则 - ？
晋物抒彤： 品牌设计的核心原则包括以下几个方面: 1.站在客户角度,围绕客户的需求,制定合适的设计方案; 2.着点于客户品牌文化本质,不忘设计初心; 3.设计风格遵循简洁、清晰、概念; 4.设计只是是冰山一角,需要由点概面,体现企业品牌. 好的品牌设计对企业至关重要: 1.好的品牌设计可以增强企业品牌竞争力; 2.好的品牌设计能够减少企业消费群体的流失,稳定已有的客户群体; 3.好的品牌设计能够起到品牌延伸的作用,让消费者、用户更好地理解企业的品牌理念; 4.好的品牌设计可以增强企业的品牌影响力

兴宁区18946621670： 什么是产品设计法 - ？
晋物抒彤： 一个创造性的综合信息处理过程,通过线条、符号、数字、色彩等把产品显现人们面前.它将人的某种目的或需要转换为一个具体的物理形式或工具的过程,把一种计划、规划设想、问题解决的方法,通过具体的载体,以美好的形式表达出来.