在交互设计中很多时候我们呈现了最终的效果，但是却不知细致的过程究竟是如何，或许只是依葫芦画瓢，并没有理论支撑。下面七大交互设计定律详解，助力设计过程。

一、费茨定律

二、米勒定律（7±2法则）

三、希克定律

四、接近法则

五、泰斯勒定律（复杂性守恒定律）

六、奥卡姆剃刀原理

七、新乡重夫：防错原则

一、费茨定律

费茨定律是人机交互和人体工程学活动的数学模型，由保罗·费茨在1954年提出。它预测了从任意位置移动到一个目标区域所需的时间。由位置的距离（D）和目标大小（W）两个主要因素决定。

T：代表完成移动所需的平均时间

A：代表光标开始/停止时间

B：代表光标移动速度

D：代表从起点到目标中心的距离

W：代表目标的尺寸

简单来说就是指：

1. 起始位置离目标区域的距离越远，移动到目标区域的时间就越长，

2. 如目标区域的面积越大，起始位置到目标区域的时间就越短。

3. 速度越快、目标越小，错误率越大，因为速度代替了准确度。

【生活中的“费茨定律”】

汽车上的刹车踏板和油门踏板相距很近，并刹车踏板的面积要比油门踏板大，这样驾驶员能在相对最短的时间内把脚从油门踏板移动到刹车踏板上，从而快速制动，确保安全。

相反，如果如果刹车踏板和油门踏板距离较远，刹车踏板又较小，那么从油门踏板切换到刹车踏板时间就会变长，且不容易踩中刹车踏板，发生安全隐患的风险就会急剧升高。

设计起源于生活，善于发现生活中的“美”～

【界面中的“费茨定律”】

费茨定律在产品界面设计中是可以提高 用户在使用中的效率指标，帮助用户更快速的完成某个操作或任务流。

如QQ的登录界面（图2），输入框比普通的输入框更大，能更好的点击。登录按钮的面积恰好比大拇指端的面积大一些，且整个按钮的所在位置刚好在拇指的容易触达区域（图1），此按键的目标区域（W）于触达的距离（D）均是最佳的。

如果把按键放在更下方，只点击登录按钮的确更容易触碰。但是从操作流程上是输入完成之后再点击登录，那么整个触达距离（D）更长，反应时间也随之变长。即运用费茨定律时需要考虑业务流程。

二、米勒定律（7±2法则）

7±2法则是1956年由 乔治·米勒 所提出的，根据乔治·米勒的研究，人的短时记忆能力广度为5-9个信息块，超过了该范围就容易出错。这说明大脑短时记忆容量约为“7”，并在7+2与7-2之间浮动，因此把这个记忆容量规律称为“7±2法则”。

信息长度越短，越容易记忆，反之则记忆难度越高

如下图 字段（1），字符为1、3、5、7，小于7个容易短时间看完且短暂记住。如字段（2），字符大于9个时，记忆难度先行加深，浏览时间更长，更不容易记住，只能记住其中几个或是开头和结尾几个字符。

如下图a、b两串同样的字符，先看a这一串字符，能记住几个？再看b这串字符，又能记住几个？ 我们将b字符进行分段，运用7+2法则，将一长串字符进行分段记忆，那么是否更加容易记忆。

【生活中的“7±2法则”】

这样的例子很多，也源于我们生活。如银行卡号、手机号等等，都是进行了分段处理，控制在尽量少的字符以内，便于识别、记忆。

【界面中的“7±2法则”】

PC端的导航和选项卡通常都不会超过9个，如导航导航功能分类很多，则可以通过聚合的方式聚合一部分，但是聚合的那部分也需运用米勒定律（7±2法则）控制数量。

• 移动端中tab栏中数量一般保持在2-5个，最少不低于2个，最多不高于7个；

• 侧拉栏的列表最多一般也不会超过9个，如果大于9个，一般就会进行分类，通过分隔条、分割线、卡片就行分割，保证每一个小区块内的数量小于9个；

• 选项卡分类的数量一般是4-6个，如更多便会进行折叠，点击折叠的内容可查看全部。如未进行折叠，那么也进行了滑动的处理，始终保持一屏内显示7个以内的数量，滑动查看更多。

[加餐]：—— 系列位置效应/序列效应

关于记忆还存在一种影响因素，一个物体在序列中的位置也影响我们对它的记忆。

包含有2种：

a.首因/初始效应：相对中间位置，我们对一个系列最前面的物体的记忆力更清晰；

b.近时效应：相对于中间位置，我们更容易对序列末尾的物体记忆更清晰。因为一个系列最后几项还存在工作记忆里，能够较为轻松取得。

举个例子：

1.就像我们看小说的时候，内容几千章、几百上千万字，除了精彩部分能记住。同时也能清晰的记住小说的开头和结尾。

2.如下图文字，“约翰 是一个.....的人”，第一句和第二句给人完全是两个不同的感觉。第一句，我们首先会看到，约翰是一个聪明、勤奋...的人，因为首先出现了聪明、勤奋二字，那么就会给人友好的感觉。第二句，首先出现了嫉妒、固执，那么便会给人造成一种厌恶的感觉。这即是首因效应。

总结：在界面设计中、列举项目时、演讲时等等，把最重要的放在前面或者后面（而不是中间），以达到最大的想象效果。

三、希克定律

希克定律是一种心理物理学定律。用户所面临的选择数量越多，做出选择所花费的时间就越长。在人机交互的界面中选项越多，意味着用户做出决策的时间越长。

在设计时需考虑“在不妨碍用户选择的情况下，如何提供较少的选项”。多而乱的选项会延长用户做决策的时间，甚至对一些“选择困难户”来说，会直接导致任务流失败。某些功能之间必定存在某些联系，即可以对同类进行分组，没必要全部展示。这样不仅可以减少用户的选择，每一个组的使用率也会增加。

【生活中的“希客定律”】

如家喻户晓的电视遥控器

图（1）大量的按键，用户需要去思考每一个按键代表的是什么功能，且每一个按键较小，易造成误操作。

图（2）保留了核心功能，上下左右、音量加减、确定、返回等，其它功能集中在菜单按钮内，所有功能按键一目了然，用户能清晰知道按键功能。且按键进行了增大设计，减少用户误操作。

【页面中的“希客定律”】

抛开我们已有的印象，支付宝和数字人民币产品的定位，只看页面所指向的功能。左边的支付宝和右边的数字人民币在用户使用时候，数字人民币的思考成本会更低，内容更少、功能突出，决策时间将会更短。

四、接近法则

根据格式塔的心理学理论 ：当观察者看到彼此临近（空间/时间）的元素时，人的意识会认为该临近的元素之间是相关的。

如下图

1.第一眼习惯性的会把左边看成一个整体，右边是另外一个整体。而不是把圆形和方形分别看成一个整体。越是临近的元素，越容易被看成相似的一个组，人的大脑第一反应会通过距离的远近来进行判别。

2.接近法则的“权重”非常大，甚者可抵消其他法则，比如为上图（1）、图（2）添加颜色，甚至改变形状，得到如下图（3）、图（4），我们仍会把接近图形当成一个组：

（格式塔理论是心理学中为数不多的理性主义理论之一，在设计中还有几个比较常用的法则：相似性、连续性、封闭性、对称性等，关注我，在后续文章陆续解读哟～）

2.页面中的“接近法则”

界面中同样也运用了接近法则，通过距离、留白、色块来区分各类不同的组。如下图，目的是在视觉上通过不同组的划分来区分各个功能板块的关联。使页面更清晰明了，用户在使用时易懂板块之间的关联及层级关系。

[加餐]：上图carben\雪球，不仅运用了接近法则，还运用了相似性、连续性、封闭性等原理进行页面构图。如carben中的第一个组，我的订单，其中icon运用了相似性，全是线性图标，且图标大小几乎一致、颜色一致。整个组运用卡片的形式进行了封闭，使其构成独立模块。

接近法则运用的目的：在视觉上通过组与组的区分，来划分功能模块之间的关联性，让界面变得更加清晰，同时帮助用户在浏览页面时，能够清楚的看到到各个内容模块之间的关联性，就是视觉信息的划分和分组展示。

五、泰斯勒定律（复杂性守恒定律）

泰斯勒定律又称复杂性守恒定律，该定律认为每一个过程都有其固有的复杂性，这个复杂性存在一个临界点，在临界点之间都可以简化，超过了这个临界点便不能再简化。

整体复杂度：即一个功能有一个整体的复杂度，不管是简单，还是复杂都会存在。

复杂度可移动区间：一个复杂的功能直到在临界点之前均可以进行简化，且不会影响整个功能

固有复杂度：在临界点之后便成为固有复杂度，临界点之后便不能对该功能进行简化，如果再进行简化则会应该该功能的使用/用户体验。

【页面中的“泰斯勒定律”】

如电视遥控器：

1.最初的电视遥控器按键多，使用复杂。

2.经过优化后，功能仍然是之前的功能，但是按键减少，操作更好用。

3.到现阶段的遥控器已经设计成了极简风格，功能没变，按键更少，核心功能更加好用，其它功能也能从相应的入口进入。从而减少使用者思考成本，提高效率。但是如果再进行简化，则会适得其反，核心功能不再能体现，反而引起用户焦虑，用户在思考该按哪个键，从哪里进入。

总结：从整体上讲，功能的复杂性是没有变化的，只是从一个地方移动到另外一个地方。

如遥控器中的很多按钮所指向的功能，只是将很多不是核心功能的按钮进行了合并，但是并没有删除它。但这化繁为简的背后是为了更好的提升用户体验，但产品、设计、开发或许会更多的付出，这或许也是一种守恒吧。即实际工作中也需要合理权衡复杂性守恒的原理的使用。

六、奥卡姆剃刀原理

“如不必要，不要增加实体数目”——奥卡姆的威廉（William of Ockham，14世纪哲学家）

“在其它条件相等的情况下，需要较少的就是最好的、有价值的”——罗伯特·葛罗泰斯特（Robert Grosseteste，12世纪教士、学者）

“自然在最简单的状况下运作”——亚里士多德（Aristotle）

奥卡姆剃刀原理的核心思想为：“如无必要，勿增实体。即简单有效原理”。一些不必要的元素会降低设计的效率，而且增加不可预测后果的发生概率。不管是实体、视觉、认知上，多余的负担都会削弱表现效能。多余的设计元素，有可能会造成失败或其它问题。

举个实际例子：

1+1和（1+3）/ \sqrt{2*2} 都可以得到2的结论，第一种情况我们只需说明加法的算法即可，但第二种情况加减乘除以及根号的算法都需要说明，如果都能得出2这个结论，没必要搞些花里胡哨的，能1+1就直接1+1。

这个个动图，酷友们应该都看见过。两个人决斗，A和B，A舞了半天大刀，准备进攻。B便看了半天，当A开始进攻时，B的激光长剑，一剑KO了A。结论：一切花里胡哨都是空的。

[加餐]：“如无必要、勿增实体”。奥卡姆剃刀原理的实行是有一个前提的，便是：“如无”，如果没有必要才不用增加实体，如果有必要则该加还是要加。

七、新乡重夫：防错原则

用户在界面中发生的错误大部分是由产品设计或者开发过程中的疏忽导致的，而不能认为是用户的操作疏忽导致的。所以我们可以通过改变产品体验设计把过失率降到最低。一款好的产品是不会让用户进行思考的。当看见一个页面时，可不言而喻、一目了然，自我解释。（推荐一本书《Don‘t make me think》）

在设计中非常有必要考虑防错机制，避免用户多次重复操作。如某些操作不可挽回，则需要有强提示和强确认，防止用户犯不可挽回的错误。

如在录入表单中，前端与后端及时检测录入信息的有效性和正确性，而不是让用户填写完所有表单再点击提交按钮之后，再来验证对错。如提交表单后再全部一起验证，这种反馈相对迟钝，虽然不会影响主体流程，但导致用户不能及时发现错误，而进行更改。而需要重新回过头再录入、再提交、再报错，这样会严重影响使用效率。

应从三个维度细分“防错原则”

1.操作前：提醒防错

a.精简的文字说明，提醒用户易犯错的地方

用户首次进入进行引导的作用，那么引导和提示的位置应较为突出，让用户能容易感知。

b.当结果不可逆时，询问用户让其知道操作后果

用户操作前给予正确的引导，减少用户操作发生用户的可能。通常分为若提示和强提示，若提示即文字说明、气泡浮窗等；强提示一般会中断用户的操作，弹窗询问、弹窗+输入框的形式。

c.前置填充默认值

某些选项给用户提供前置默认值，尤其是用户需要做重复的操作，或者是某些必须开启/关闭的状态，亦或需要精确数字的时候，先提供一个默认值，然后让用户再修改它们。

d.选项优于输入

能让用户选择的就不让用户输入，宁可让他点击完成任务，也不让他输入完成任务，因为输入比点击的失误概率要大的多，操作成本也相对较高。

2.操作中：实时感知

a.用户在选项中输入后值后，当输入的值失去焦点，前端实时判断输入的值是否正确，如错误便及时提示。

b.用户在选项中输入后值后，当输入的值失去焦点/字符长度符合，前端实时判断输入的值是否正确，如错误便toast提示。

3.操作后：及时反馈&友好引导

每个阶段的操作需进行及时的反馈，不管是正确or错误。有一种因素叫“心理犯错”，是用户对自己操作不自信的表现，如不及时告诉他操作结果，可能会给用户造成一定的心理焦虑。

及时反馈能避免用户误操作的可能性，提高完成任务的效率。反馈不仅要指出有错，还要指出错在哪里，反馈文案需准确、友好（文案呈现方式最好是和用户聊天的形式，而非是在审问用户）。

总结：

这七大设计交互定律虽被认为是标准，但从实际项目出发，它们只起到了参考和启发的作用。作为设计师的我们：

1、不能照本宣科，任何法则只是辅助和理论依据的作用，法则会让设计更加有理有据，每一条法则背后都蕴含着对设计的思考。

2、不能按图索骥，法则是死的，人是活的，不能死磕法则，每个法则之间其实也是有关联性的，需结合实际项目灵活运用。

3、不要迷恋任何设计法则，因为最终落地的东西是需要考虑商业性和实用价值。某些设计方案或许违背了相应的设计理论，但却符合产品的现状和用户层次。即这种情况需考虑实际落地和利益最大化。

最后希望各位小伙伴们掌握更多的设计法则、模型，不仅仅是专业的展示，更是工作效率的提升。