一篇文章读懂交互设计7大定律（上）

产品壹佰 • 5年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

作者：h梓暄微信公众号：UXD笔记

在交互设计领域有很多经过时间检验过的定律及法则来作为设计的指导原理，它能够帮助产品设计者对界面上的各种视觉元素进行合理评估，从而发现一些使用过程中的可用性问题，还可以根据这些法则从界面的维度来改善操作效率和使用满意度。

一篇文章读懂交互设计7大定律（上）

我们在产品设计的过程中会经历非常多的决策阶段，大到一个功能流程的闭环设计，小到思考一个元素的最合理布局，在这些场景中，我们首选的解决方案当然是更适合当前功能特性和使用场景的方案，如果没有合适的方案或者在几种方案面前犹豫不决时，一般都会选择遵守设计规则和接近设计规则的那个方案，这些所谓的规则也是交互设计的基础理论和方法论，我们能否在工作中信手沾来并且灵活运用它呢？同时也为了将来能够掌握“舌战群猿”这门高级技能，我们还是要从打牢基础开始。今天就让我们回到起点，聊一聊交互设计的7大定律。

一、费茨定律

费茨定律是人机交互和人体工程学中人类活动的模型，它预测了从任意位置快速移动到一个目标位置所需的时间由2个位置的距离（D）和目标大小（S）有关。

一篇文章读懂交互设计7大定律（上）

此处有2个参数条件：

距离（D）： 既起始位置离目标位置距离越远，我们到达目标位置所花费的时间就越长。反之，离目标位置越近，我们所花费的时间就越短；

目标大小（S）： 即目标面积越大，我们定位到目标的所花费的时间就越短。反之，目标面积越小，精准定位到目标上的时间就越长。

1.生活中的“ 费茨定律 ”

汽车上的刹车踏板和油门踏板相距很近，并且刹车踏板的物理面积要比油门踏板大，这样可以使驾驶员能在相对最短的时间内把脚从油门踏板移动到刹车踏板上，从而最快最准确的触发刹车踏板，确保事故的发生率和减少事故的损伤。

这也就是为什么右脚正确的姿势是脚跟始终在刹车踏板下，加速时，以脚跟为轴，脚掌向右旋转至油门位置并轻踩油门，目的都是为了在最短的时间、最自然的行为下，快速触发安全操作。

一篇文章读懂交互设计7大定律（上）

相反，动漫城里那些赛车游戏的刹车踏板比油门踏板小很多，而且距离远，这又是为什么？这也正是应用费茨定律的高明之处，因为游戏中我们需要更快的速度去超越对手，在踩下油门踏板的那一刻，要让玩家达到用户体验的“爽”点，因此你会更容易踩到油门踏板，而且人身安全不会受到威胁。

这就是菲茨定律在不同场景下所起到的不同作用。设计起源于生活，在我们的界面设计中也是相同的道理。

2.界面中的“ 费茨定律 ”

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

（1）距离目标位置尽量缩短，相关操作保持亲密性

a. 多数产品在设计页面模态弹窗引导用户进行操作行为时，都会将操作控件放在固定的页面位置（一般居中或者处于页面底部）。但“抖音”的设计却让人眼前一亮：系统会判断用户进行触发时，手指与屏幕的接触位置，并将模态弹窗的操控按钮显示在离用户手指最近的位置。

随用户手部活动区域变化而灵活变更位置，使用户在进行手势交互的过程中操作动作能始终在手部的舒适区域内进行，是应对大屏时代十分友好的体验设计，也是该定律运用的比较好的设计点之一：既起始位置到目标位置的距离

b. 比如QQ的登录界面，登录按钮的面积恰好比大拇指端的面积大一些（考虑到拇指点击的舒适感），而且按钮所在的位置无论是唤起键盘或未唤起键盘，始终都保持在拇指可触的舒适位置，所以根据前面的参数条件，此按钮的面积（S）及触达距离（D）均是最佳。

假设把登录按钮放在屏幕下方，虽然说拇指默认悬停的位置在屏幕的下方，此时距离登录按钮理论上是最近的，但是还要考虑后续场景：一是键盘唤起、二是与输入框的亲密性，因此有效触发登录按钮的行为是发生在后续场景中，所以放在距离输入框最近的位置才合理。

c. 除了移动端之外，在PC端做后台表单设计时，我们经常把决策性按钮紧跟在表单下方，距离表单最近的位置，这也是为了缩短光标移动的距离，使操作项（要输入的表单）和决策项（提交/取消按钮）更具有关联性。

但是，该页面的内容过多时，则会把决策性按钮适配到第二屏以下，这样的做法也不友好，也就违背了该定律，所以PC端单页面长表单的决策按钮设计一般有2种处理方式：

思考：

那是不是所有的交互方式都需要考虑最近的距离呢？答案是否定的，正如前面电玩城刹车踏板的例子，菲茨定律的作用可以走向另一个极端。在界面设计中，可以有意识的将一些操作放在死角处，既相对不容易点击到、感知到的地方，这就是为了延长用户的感知时间，感知时间长即操作完成时间长，操作成本也就越高，从而减少误操作的可能性。

（2）目标尺寸大小要合适

a. 目标可点击热区在合适的范围之内，越大越容易精准点击，越小则容易误操作和点击无效。在iOS人机交互指南中也规定了最小点击热区为44*44，就是为了保证每次点击都能够得到有效的反馈，防止因为操作热区过小而导致难以点击。这里可能有朋友会说“移动端当中存在文字按钮，这种是不是字号要放大呢？”，你多虑了，字号根据设计规范去设定就好，文字也可以让开发同学把点击热区放大，但是字号不变，这是2种不同的交互方式，一个是元素可见，一个是元素可触。

b. 说到点击热区，就不得不提拇指在手机屏幕上的移动范围，根据研究表明，人们在使用手机的时候， 75%的交互操作都是由拇指驱动的，而拇指默认悬停的位置恰好在屏幕下方，所以这里依然要考虑菲茨定律的作用，如果目标位置超过了拇指舒适的移动范围，操作成本就会无形中增加，比如手机在手掌中向右倾斜才能接近大拇指、需要拿出慵懒的左手才能点击到...

（3）屏幕的边界“无限大”，更容易触达

边界是非常明显的目标位置，它固定在屏幕边缘，在物理上限制了鼠标光标不能超过它们，不管你鼠标移动了多远，光标最终还是在屏幕的边缘蠢蠢欲动。所以可以利用设备屏幕的特点，将鼠标非常快速移动到边缘或角落，而不用进一步微调才能触发他，同时也不必担心鼠标滑过了操作区域，因为他会被屏幕边界挡住，这里就可以把屏幕边缘看作“无限大”，虽然位置在边角，但也可以快速触达。

屏幕的边边角角很适合放置菜单栏、按钮组及一些辅助性操作，比较有代表性的就是Mac系统的边界交互，他们把显示器边角和触控板的交互发挥到了极致，据说苹果公司已经为这个设计申请了专利。

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

米勒定律（7±2法则）是交互设计中一个常用的定律。1956年美国心理学家乔治·米勒对短时记忆能力进行了定量研究，他发现人的短时记忆能力广度为7±2个信息块，记忆信息超过了该范围就容易出错。这说明人的大脑短时记忆容量约为“7”，并在7+2与7-2之间浮动，因此心理学家把这个神奇的记忆容量规律称为“7±2法则”。

由7±2法则我们可以得出，一般人接受新事物的记忆容量最多不会超过9。为了方便理解这个法则，我们做个示范，请读一遍下面的随机字母，然后移开眼睛回忆一下，看看你还能想起几个？

通常会想起5~9个，即7±2个，这个有趣的现象就是7±2效应。

米勒定律（7±2法则）适用于生活中的方方面面，比如设计一个相对复杂的任务：通过减少每个组块中元素的数量（不超过9个），当用户使用你的界面时，确保用户的大脑可以最大限度地记住这些内容，当项目列表变得很长时，可读性和易读性会变得很弱，就需要用户花费额外的时间来阅读或搜索。

1.生活中的“ 米勒定律 ”

这个法则不仅仅可以用于移动端和PC端的设计中，在生活中很多场景也可以用到，比如电话号、银行卡号、身份证号，我们总是喜欢把一长串数字拆分开来读写，目的就是降低记忆成本，提高信息的易读性，从而达到视觉防错的作用。

2.界面中的“ 米勒定律 ”

在交互设计中，我们可以经常利用米勒定律，来减少用户的认知负荷，提高信息的易读性，毕竟信息设计也是提高用户体验的重要一环。界面中的“米勒定律”主要强调的是信息与信息之间的组合模式。

除此之外，米勒定律还强调了在设计过程中预见性和适当规划的重要性，当你在不断为产品添加更多功能时，产品界面必须能够适应这些新功能，而又不会破坏原有的视觉基础，毕竟重建产品需要花费大量的时间和资源。

（1）分段记忆，信息分层

a. 设计源自于生活，我们生活中的记忆方式也映射到了界面设计中，也就是 把手机号码分为3-4-4的规则来记忆。我们可以做一个对比，数字A是没有分段的数字，数字B是通过空格分段隔开的数字，让你在3秒之内记住这串数字，你感觉哪组数字更利于你的记忆呢？很明显是数字B利于阅读和记忆。

就连我自己给别人发电话号码，或手写的时候也会分段隔开一段距离，用户体验无处不在（该死的职业病）。

b. 分段记忆还可以用于文章排版，长文本很多人阅读起来非常痛苦，尤其是纯文字的、排版脏乱差的长文本，之所以看起来非常痛苦，是因为段与段之间没有留白，整个界面缺少呼吸感，信息与信息之间没有整合，所以阅读起来有较大的记忆负担，看的时候还经常串行，最后嘛也没记住。

写到这里相信大家也能感受得到，我通过公众号发布的文章，大段与大段、小段与小段之间都有留白，而且选择了舒适的字号、字间距及行间距，这些都是我在预览模式下检查了好几遍才定出的一套规则，同时重点文字都会通过颜色对比突出展示，目的就是为了帮助读者记忆和提高易读性，并且配图都会美化一下。阅读，也是一种体验。

（2）导航和选项卡通常不要超过9个

网页设计的一级导航通常不要超过9个，如果导航和选项卡内容过多时，可以通过聚合按钮来包容其他次要入口或子入口，这个做法在PC端最为常见，其设计原理也同席克定律。移动端的标签栏一般不超过5个、选项卡一般不超过7个，如果有更多的选项可以左滑查看其他，或者点击右边的“聚合按钮”查看更多。

用户使用导航是快速找到自己想要的内容，这种诉求一般非常急切，如果还不能快速的找到自己想要看的内容，很有可能会流失掉。所以，简化产品导航使它尽可能的少于九个会让用户对于产品的内容一目了然。

（3）系列位置效应

系列位置效应描述了一个物体在序列中的位置影响我们对它的记忆，主要有2种：

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

新近效应：相对中间位置，我们更容易对序列末尾的物体记忆更清晰。

也可以理解为我们的大脑倾向于回忆起列某件事的起始和结尾，最不容易回忆起中间的内容。生活中也有同样的效应，很多事情随着时间的流逝只记住了开头和结果，中间的过程最容易遗忘，你还记得与初恋的情书内容吗？肯定想不起来了吧，但开始怎么追他的、结果怎样，这些却历历在目。这种记忆特性也会映射到界面设计中。

比如商品详情页，它的阅读体验和产品重要信息从什么时候真正开始？又到什么时候结束呢？设计师应该如何布局详情页的开始和末尾内容呢？这些都是用户体验设计人员在设计时必须搞明白的关键问题。下面以Apple官网举栗子，整个详情页可以分为三大部分：开头、中间、结尾。

三、席克定律

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

我们在做设计时，应该思考 “在不妨碍用户选择的情况下，如何提供较少的选项” 。多而乱的选项会延长用户做决策的时间，甚至对一些“选择困难户”来说，会直接导致任务流失败。全部的选项没必要平铺出来，选项与选项之间一定有着某种联系，所以也可以对选项进行同类分组和多层级分布，这样用户使用效率相对会更高（排除选项均是独立和业务要求的场景）。

席克定律虽然给设计带来的是克制，但也不能用于极端场景，妨碍用户选择，以“强奸”的方式强迫用户遵照产品目标去选择，比如某产品退押金的流程设计，从发现退款按钮到“好像申请成功”的过程，你是不是暗自吐槽过？当然这里是站在用户角度去看待这个设计，如果站在产品角度去审视它，会发现它是一个产品、交互、UI三者配合非常棒的案例。

1.生活中的“ 席克定律 ”

下图有两个电视遥控器，在你第一次使用它们做出开/关机、切换频道、加减音量这些主要操作时，你会觉得哪个使用起来更效率？感知程度更强？很显然是图2，连老人用户都可以快速学会并做出正确的操作行为，而图1却需要我们花时间去研究这些按钮在什么位置，去看手指有没有对准按钮，因为它们太多太小了，甚至一些图标我都不明白是什么意思，有些按钮可能永远都不会去点击。

这就是席克定律在遥控器上的作用，虽然这个案例也可以套用在其他理论上，比如交互设计四策略（删除、组合、隐藏、转移），这就和我们做功能设计一样，功能层级也需要细分出：核心功能、辅助功能、边缘功能等，而核心功能一定是进入到产品内第一个发现的功能，且操作频率最高、能够解决用户主要诉求的功能，所以它的视觉优先级往往是最突出的，而在电视遥控器中，开/关机、切换频道、加减音量就是核心功能。

2.界面中的“ 席克定律 ”

在人机交互领域中，我们通常是如何运用席克定律来帮助用户增强感知和节约选择时间的呢？

（1）减少选项并提供默认值，方便用户选择

选项越多，用户决策的时间就越长，减少用户思考的时间就是减少操作时间和学习成本，优秀的用户体验就是让设备变的更聪明，让用户“不思考”就做出正确选择。这里的“不思考”就是无意识的行为惯性，比如常规的单选/复选框，用户一看就知道圆形是单选、方形是复选，根本不用思考就能通过薄弱的感知进行选择，因为这些早已植入他们的认知里。除此之外，我们还可以针对用户不同的使用场景精简选项，方便决策和降低误操作的概率。对于一个小模块来说，一般可选项不要超过9个，9个以上就存在一定的记忆负担，对于超过9个的，可以用一些交互来约束用户的行为，比如“展开/收缩”、分页、分步等等，这里在下面的“7±2法则”中会详细介绍。

（2）选项分类分层，信息区分主次

在菜单栏的设计过程中，我们可以将被选项进行同类分组和多级分层的设计，这样使用效率会更高，其次重点信息和推荐信息需要和普通信息在视觉上做区分，要有一个明显的对比，这样才能抢占视觉并在第一时间感知到。

如下图，试想如果把所有城市依次平铺在界面上，不依照热门、历史、国内/海外、首字母来分类，用户可能在选择地区上要花费很长时间，甚至是无从下手，直接进行搜索，而搜索的实际也是辅助功能。同时，我们做分步分层设计时，也应该合理的控制结构的广度与深度，因为每增加一个层级就意味着用户选择的成本增加，而广度太广又会导致用户在浏览上花费较多的时间。

（3）分步完成，分步显示

a.分解复杂流程：让用户一步步操作，而不是全部堆到用户眼前，这就是为什么强调一个页面只做一件事的原则，通过分步完成一个任务流，在操作感知上要比填写一大堆信息的压力要更低，同时还能降低其他信息给用户带来的干扰，帮助他们将注意力聚焦在该步骤当中。

爱彼迎中大部分录入项都是采用分步分页来完成的：

b.场景细分：当用户填写表单时，先展示较少的可填项，当填完最后一项或选择“其他”时，再展开剩余的表单，目的也是为了减轻大量表单给用户感知上带来的压力，由此来达到场景细分的目的。在录入场景中，能将信息整合为选项的，就千万别让用户输入，因为输入的时间成本较高，且容易出错，开放的输入条件也不利于统计一些数据，所以通过固定的选项来约束用户的行为。

四、接近法则（亲密性）

我们通常把位置相对靠近的事物当成一个整体：

同样都是圆，在视觉呈现上你会认为哪些是一组的呢？

接近法则的“权重”非常大，大到可以抵消其他法则，比如为上面的圆形添加颜色，甚至改变形状，我们也会把接近图形当成一个组：

接近法则也是格式塔理论中我们最为熟悉、最常用的一种法则，它描述的是观察者看到彼此邻近（空间或时间）的物体时，会将它们视为一个整体。在界面设计中，对信息的组织已经离不开这个法则了，他在界面中所体现的就是把相关的信息块组合在一起，不太相关的分离开，增强与区分元素之间的关联性，所强调的是空间和位置。接近法则产生于群组，它可以减少信息设计的复杂性，对引导用户的视觉流、便于用户对界面的解读起到至关重要的作用。