来源:网络 作者:佚名
在看文之前，提一个问题，大家可以思考一下：
为什么风靡一时的「汉堡包导航」在APP上不再受欢迎？
”交互设计7大定律“应该是各种交互原则中大家都比较耳熟能详的名字了，但是这种说法是出自哪里呢？
我查了各种资料，发现”交互设计7大定律“最早出自12年极客公园的一篇文章，虽然优设和人人都是产品经理都有转载，不过原文已经删除了；我又在google上查找英文，并也没有搜索到相关的概念。
因此推测”交互设计7大定律“这种说法，是国内的相关从业人员，为了方便记忆和整理，对已有的交互设计定律进行组合后的一种称呼。
而交互设计领域也是在不断发展的，理论都是在设计心理学、认知心理学、行为设计、行业经验的基础上测试和总结出来的，也一直在不断探索、修正中前进，涌出现了越来越多的 “原则”和”定律”，已经远不止7条，lawsofux网站就整理了19条交互设计原则，大家感兴趣可以去看一下哦~
lawsofux.com
虽然”7大定律“这种说法已经不足以概括现有的交互理论，但是因为它已经成了一种既有的叫法和习惯，因此我们在文中依旧沿用这样的称呼，重点是介绍相关的7条理论概念，并且在本次文章会以辩证的视角去看这几条定律，不止总结规律，还会提出每条适用的边界，enjoy~
1 菲茨定律一句话介绍：
菲兹定律证明了获取目标的时间和目标的大小、距离的相关性。
起源：
菲兹定律由心理学家Paul Fitt于1954年提出，它是物理世界中人体运动的数学模型。这一定律提出之后，在很多领域都得到了应用，但是在人机交互领域的影响尤为深远，可以说是人机交互领域的第一条定律，它通常被用来解释鼠标（PC端）和手势（移动端）在界面中的移动规律。
这项定律尤其适合按钮等可点击、可选择、可交互的元素，目的：易于查找和选择。
作为一个数学模型，菲兹定律是有表达式的，表达式如下：
作为一个搞设计的文科生，我真的很努力尝试去弄懂这个公式的原理，并且求助了学理科的弟弟……
……
算了
我们直接看结论吧……
菲兹定律指出：离目标距离越近，所需的时间越短；目标尺寸越大，完成速度越快，时间就越短。
也就是说，预测点击一个目标的时间，取决于目标和当前位置的距离+目标的大小。
因此，菲兹定律在交互设计领域通常表现在以下几个方面——
1 放大可点击元素的尺寸大且近的目标元素让用户不需要做太精细的调整就可以轻易选中。小而远的按钮则意味着用户要将鼠标/手指移动比较长的一段距离，并且再进行精细的调整才能选中，这样不仅难以点击、且需要花费更多的时间。
这里的大指按钮的实际大小、也就是点击热区的大小，包含按钮留白区域的大小。网页设计里现在常见的设计方式就是大按钮，四周大量留白，比如UCAN的首页；
而移动端设计里通常会扩展宽度，使用各种通栏按钮，使用户操作更加容易和快捷，可点击图标也会放大可点击区域。
适用边界：并不能无限的放大
大小给可用性带来的加成是有限制的，如果把一个很小的按钮放大，它会变得更易于点击；但是如果按钮尺寸已经足够大，那么再放大尺寸，也并不会提高可用性和用户操作效率。
依据菲茨定律所言，距离目标越近，用户点击越快。所以我们通常会缩短当前交互元素和目标元素的距离，来提高用户的使用效率和交互体验。
·减少绝对距离
因为移动端用户通常为单手操作，也就是大拇指为主要操作工具，在现在大屏手机泛滥的情况下，屏幕很多地方是单手无法触及的，所以现在我们通常会把按钮和常用操作元素放在页面下方的易操作区域。
·减少相对距离
在两个或多个操作中，通过缩短可交互元素之间的距离来提高用户的使用效率。
比如确认删除操作，因为它是重要的负向操作，所以对于双重确认，相比于在当前列表区域确认删除（如下图微信），如果使用弹框，那么用户手势的移动距离相对会更长（如下图淘宝）。
比如Win10的设计中，Preview版关机是在弹窗右上角，正式版把关机按钮移到了左下，就是考虑到缩短点击”开始菜单-关机”的相对距离。
适用边界：并不是所有操作都需要缩短距离
这个是没有优劣之分，要权衡元素的功能，是要做快一点？还是慢一点儿？再根据需求选择相应的交互方式。
比如IOS系统的关机操作，就是把操作区放在页面顶部，增加用户的操作难度，让用户有一个思考确认的时间，而不是误操作了。
另外还有一些企业级的B端产品，通常也会权衡”效率“、”防错“、”安全“等多个因素，并不一定都会以效率为第一要素。
3 相关元素靠近相关的内容或者交互元素要彼此靠近，可以在视觉上增强他们之间的相关性认知；对于可交互元素还可以减少鼠标在它们之间移动所需要的时间和距离。这条和格式塔原理的亲密性原则是有共通性的。
比如下图是Google Data Studio的看板，标题和日期范围应该是用户在页面上看到的第一组元素，也是必要元素。因此，就可以把想要强调和突出的内容，放在在这组关键信息之后。
适用边界：亲密性并不是唯一标准
相关的元素、操作区域放在一起固然可以提高操作效率，但是因为产品的同一页面内可能需要置入大量的、不同维度的信息，所以我们同时需要综合考虑结构明确、功能性、业务需求等多个因素对页面进行布局，在这些要素之间找到平衡。
4 屏幕的边缘和角落无限大因为屏幕的边角有一个隐形的“结界”，可以阻止用户鼠标因为大幅移动而超出目标区域范围，因此用户可以直接将鼠标大幅度移动到屏幕的边缘、角落，而不用进一步微调。
所以屏幕的边角适合放置菜单栏、按钮这样的元素，不管箭头移动多远，最终会停在屏幕的边缘并定位到菜单上。这个方法在window和MAC系统中都得到应用，Windows的关机键在屏幕左下角，两大系统都把dock栏放在屏幕的底端，菜单放在屏幕的顶部。
比如chrome浏览器比safari之类顺手，也是因为它把TAB栏放在了屏幕最顶部边界，用户使用效率比较高。
适用边界：要综合考虑屏幕尺寸
大家都知道Windows的菜单是在软件视窗顶部，而MAC固定在屏幕最顶端。在《人本界面》（英文名The humane Interface)一书中，作者经过一系列测试得出一个结论：
使用MAC操作系统 时，用户点击某个菜单所需的平均时间要比Windows上快0.4秒，因为MAC的菜单利用了“无限的边界”，而windows需要更仔细的选择。
