交互原则：交互设计7大定律详解(上)

1 菲茨定律

一句话介绍：

菲兹定律证明了获取目标的时间和目标的大小、距离的相关性。

起源：

菲兹定律由心理学家Paul Fitt 于1954年提出，它是物理世界中人体运动的数学模型。这一定律提出之后，在很多领域都得到了应用，但是在人机交互领域的影响尤为深远，可以说是人机交互领域的第一条定律，它通常被用来解释鼠标（PC端）和手势（移动端）在界面中的移动规律。

这项定律尤其适合按钮等可点击、可选择、可交互的元素，目的：易于查找和选择。

作为一个数学模型，菲兹定律是有表达式的，表达式如下：

作为一个搞设计的文科生，我真的很努力尝试去弄懂这个公式的原理，并且求助了学理科的弟弟……

……

算了

我们直接看结论吧……

菲兹定律指出：离目标距离越近，所需的时间越短；目标尺寸越大，完成速度越快，时间就越短。

也就是说，预测点击一个目标的时间，取决于目标和当前位置的距离+目标的大小。

因此，菲兹定律在交互设计领域通常表现在以下几个方面——

大且近的目标元素让用户不需要做太精细的调整就可以轻易选中。小而远的按钮则意味着用户要将鼠标/手指移动比较长的一段距离，并且再进行精细的调整才能选中，这样不仅难以点击、且需要花费更多的时间。

这里的大指按钮的实际大小、也就是点击热区的大小，包含按钮留白区域的大小。网页设计里现在常见的设计方式就是大按钮，四周大量留白，比如UCAN的首页；

而移动端设计里通常会扩展宽度，使用各种通栏按钮，使用户操作更加容易和快捷，可点击图标也会放大可点击区域。

适用边界：并不能无限的放大

大小给可用性带来的加成是有限制的，如果把一个很小的按钮放大，它会变得更易于点击；但是如果按钮尺寸已经足够大，那么再放大尺寸，也并不会提高可用性和用户操作效率。

依据菲茨定律所言，距离目标越近，用户点击越快。所以我们通常会缩短当前交互元素和目标元素的距离，来提高用户的使用效率和交互体验。

·减少绝对距离

因为移动端用户通常为单手操作，也就是大拇指为主要操作工具，在现在大屏手机泛滥的情况下，屏幕很多地方是单手无法触及的，所以现在我们通常会把按钮和常用操作元素放在页面下方的易操作区域。

·减少相对距离

在两个或多个操作中，通过缩短可交互元素之间的距离来提高用户的使用效率。

比如确认删除操作，因为它是重要的负向操作，所以对于双重确认，相比于在当前列表区域确认删除（如下图微信），如果使用弹框，那么用户手势的移动距离相对会更长（如下图淘宝）。

比如Win10的设计中，Preview版关机是在弹窗右上角，正式版把关机按钮移到了左下，就是考虑到缩短点击”开始菜单-关机”的相对距离。

适用边界：并不是所有操作都需要缩短距离

这个是没有优劣之分，要权衡元素的功能，是要做快一点？还是慢一点儿？再根据需求选择相应的交互方式。

比如IOS系统的关机操作，就是把操作区放在页面顶部，增加用户的操作难度，让用户有一个思考确认的时间，而不是误操作了。

另外还有一些企业级的B端产品，通常也会权衡”效率“、”防错“、”安全“等多个因素，并不一定都会以效率为第一要素。

相关的内容或者交互元素要彼此靠近，可以在视觉上增强他们之间的相关性认知；对于可交互元素还可以减少鼠标在它们之间移动所需要的时间和距离。这条和格式塔原理的亲密性原则是有共通性的。

比如下图是Google Data Studio的看板，标题和日期范围应该是用户在页面上看到的第一组元素，也是必要元素。因此，就可以把想要强调和突出的内容，放在在这组关键信息之后。

适用边界：亲密性并不是唯一标准

相关的元素、操作区域放在一起固然可以提高操作效率，但是因为产品的同一页面内可能需要置入大量的、不同维度的信息，所以我们同时需要综合考虑结构明确、功能性、业务需求等多个因素对页面进行布局，在这些要素之间找到平衡。

因为屏幕的边角有一个隐形的“结界”，可以阻止用户鼠标因为大幅移动而超出目标区域范围，因此用户可以直接将鼠标大幅度移动到屏幕的边缘、角落，而不用进一步微调。

所以屏幕的边角适合放置菜单栏、按钮这样的元素，不管箭头移动多远，最终会停在屏幕的边缘并定位到菜单上。这个方法在window和MAC系统中都得到应用，Windows的关机键在屏幕左下角，两大系统都把dock栏放在屏幕的底端，菜单放在屏幕的顶部。

比如chrome浏览器比safari之类顺手，也是因为它把TAB栏放在了屏幕最顶部边界，用户使用效率比较高。

适用边界：要综合考虑屏幕尺寸

大家都知道Windows的菜单是在软件视窗顶部，而MAC固定在屏幕最顶端。在《人本界面》（英文名The humane Interface)一书中，作者经过一系列测试得出一个结论：

使用 MAC操作系统 时，用户点击某个菜单所需的平均时间要比Windows上快0.4秒，因为MAC的菜单利用了“无限的边界”，而windows需要更仔细的选择。

很多人把这个说法奉为圭臬，我却认为这个结论现在来说是存疑的。

因为这本书是00年出版的，当时的MAC最新款是Power Mac G4 Cube，长这样↓

而这台MAC的尺寸是10X8X8寸，在电脑大屏幕越来越普遍的现在，这因为无限边界带来的0.4秒优势，因为当前屏幕尺寸的增大、移动时间的增长，已经被抵消了。

如果再考虑到用户通常会自定义调整软件窗口的大小，并不都是全屏视图的话，我觉得菜单跟随软件窗口的处理反而更合适一些。