2.4　交互设计七大定律和尼尔森十大原则

产品经理的核心工作是产品设计。产品设计的重点在于提升产品的用户体验，让用户喜欢并且坚持使用我们的产品。

提升产品的用户体验分两个维度。第一个维度是提升产品的可用性，即让产品确实能解决用户的需求“痛点”，这部分内容我会在第4 章中详细讲解。第二个维度是提升产品的易用性，即让产品对用户来说易于学习和使用、记忆负担小，且产品的使用满意度高。要想提升产品的易用性，需要仔细打磨产品交互，而交互设计七大定律和尼尔森十大原则就是在解决产品易用性的问题。

2.4.1　交互设计七大定律

在交互设计领域中有很多已经经过时间验证的定律，这些定律可以帮助产品经理在设计产品方案时有效地提升用户操作效率及用户满意度。下面分别介绍交互设计七大定律。

1.费茨定律

费茨定律是保罗·费茨博士提出的，在人机交互领域有广泛的影响。费茨定律指出，使用指点设备到达一个目标的时间，与当前设备位置和目标区域的距离（D）、目标大小（S）有关，如图2-12 所示。

从这个定义中我们可以得到以下两个结论。

（1） 操作的起始位置距离目标区域越远，到达目标区域的时间越长，操作效率就越低；反之，距离目标区域越近，操作效率就越高。

（2） 目标区域的面积越大，准确定位到目标区域的时间就越短；反之，目标区域越小，准确定位到目标区域的时间就越长。

可以看出，运用费茨定律可以帮助用户更快速地完成特定操作。

为了让大家更好地理解费茨定律，下面列举了几个产品设计中的例子。

（1） 按钮等可点击区域在合理的范围内越大，用户的操作效率越高。

图2-13 所示分别为美团和中国银行网页版的登录界面，可以看出，美团“登录”按钮的可点击区域更大，不管用户是用左手操作还是用右手操作，都更方便点击。

（2） 尽量缩短可操作区域与指点设备的距离。

如图2-14 所示，豆瓣App 的发动态按钮和“联系顾问”按钮都位于屏幕右下角。这是因为绝大多数用户习惯用右手操作，并且更习惯用右手大拇指操作，而在单手操作时这两个按钮的位置处于大拇指的正下方，大拇指的移动距离最短，操作效率最高。

图2-15 所示为快手App 视频播放界面的负反馈功能。当用户长按屏幕下方的区域时，紧邻用户长按区域出现负反馈选项；当用户长按屏幕上方的区域时，紧邻用户长按区域同样出现负反馈选项。即系统会判断用户手指与屏幕的接触位置，并将负反馈选项展示在距离用户手指最近的位置，这样可以大大提升用户下一步操作的交互效率。

2.7±2 法则

7±2 法则又叫米勒定律，是由美国心理学家乔治·米勒提出的。米勒发现人脑在短时记忆的情况下，最多能记忆的信息块约为7 个，并且由于个体差异性，这个数据会在7-2 与7+2 之间浮动，所以米勒把这个规律称为7±2 法则。

7±2 法则同样广泛应用于交互设计，下面列举几个例子。

PC 端网页的一级导航一般不会超过9 个，以人人都是产品经理网站为例，其一级导航为7 个，如图2-16 所示。

移动端网页的一级导航一般不超过5 个，如微信App 的一级导航为4 个，微博App 的一级导航为5 个，如图2-17 所示。用户打开App 是想快速地找到特定的内容，一般这种需求比较迫切，所以一定要让用户快速地找到他们想看到的内容。

3.奥卡姆剃刀原理

奥卡姆剃刀原理是由奥卡姆提出的。借用《通用设计法则》的解释：“该原理是指不必要的元素会降低设计的效率，而且增加未预期后果发生的概率”。简单来说就是“如无必要，勿增实体”，所以奥卡姆剃刀原理又称简单有效原理。

奥卡姆剃刀原理在交互设计上给产品经理的启示：主流程要尽量简化，核心节点的功能要重点突出，旁支流程及次要内容如果没有必要，就可以不增加。

将奥卡姆剃刀原理应用得比较好的是谷歌搜索。用户使用谷歌搜索的主要目的是搜索他们想知道的内容，所以用户的核心路径是输入搜索词—搜索—浏览相关内容，从图2-18 中可以看到用户的主流程非常简洁，搜索框位于界面中央，图片、登录等非核心功能位于不显眼的界面右上角。

谷歌搜索界面非常简洁、高效。相反，复杂的界面承载的内容太多，容易分散用户的视觉注意力，会极大地影响用户的使用效率。

奥卡姆剃刀原理在交互设计上的另一个应用是尽量减少用户完成特定操作的步骤，让用户简单、有效地完成操作。

我们来对比京东App 和支付宝App 的话费充值流程。京东App 的话费充值流程：第一步，设置充值金额；第二步，点击立即充值按钮；第三步，在京东收银台页上点击银行卡支付按钮，如图2-19 所示。在不更改支付方式的前提下总共需要3 步。

支付宝App 的话费充值流程相对简洁：第一步，设置充值金额；第二步，点击“立即付款”按钮，如图2-20 所示。完成话费充值流程仅需两步。

当然，必须说明的是，奥卡姆剃刀原理不是肯定简单的设计就一定是好的，而是在不影响功能使用的情况下，尽可能地去掉多余的元素。产品经理在做产品设计时，首先要保证功能的可用性，其次才是易用性。

4.接近法则

要想理解接近法则，就必须先知道格式塔理论。

格式塔理论是1912 年由韦特海墨提出的，它包括接近法则、相似法则、封闭法则、对称法则等，其中在交互设计中使用最广泛的是接近法则。

接近法则是指用户在意识上会把相互靠近的对象当成一个整体。在图2-21所示的平面上有12 个圆圈，由于圆圈之间的距离关系不同，用户在意识上会将这12 个圆圈分为3 组，这就是接近法则。

接近法则在交互设计中广泛应用：对于界面中相似的功能，要进行分组布局；对于关联度比较弱的功能，则要通过留白、分割线等各种方式使其保持距离，这样可以引导或者影响用户的操作行为。

如图2-22 所示，根据功能间的相似关系，可将微信App 的“发现”界面中的功能分为7 组，可将淘宝App 的“我的淘宝”界面首屏的功能分为5 组，这样信息层次更明显。

豆瓣App 中的发帖人头像、帖子标题、点赞数、评价数、转发数等内容都是一个帖子的基础信息，所以它们是一个整体，在交互设计上一定要把关联度强的信息放到一起。喜马拉雅App 也采用了同样的逻辑，如图2-23 所示。

5.希克定律

希克定律是指一个人面临的选择越多，他所需要做出决策的时间就越长。具体到产品的交互设计上就是，给用户的选择越多，用户做出决策的时间就越长。

所以，在不影响用户选择的情况下，如何减少选项以降低用户的决策成本成为产品设计的目标。

为了更好地理解希克定律，我们来看下面的例子。

淘宝App 的放弃付款弹窗只给了用户“放弃”和“继续付款”两个选择，京东App 的退出登录弹窗也只给了用户“取消”和“确定”两个选择，极大地缩短了用户的决策时间，如图2-24 所示。

6.特斯勒定律

特斯勒定律是1984 年由拉里·特斯勒提出的，该定律认为：每个过程都有其固有的复杂性，存在一个临界点，超过了这个临界点就不能再简化了，只能将固有的复杂度从一个地方转移到另一个地方。因此，这个定律也叫复杂度守恒定律。如图2-25 所示，复杂度在向用户端偏移和向系统端偏移时都存在一个临界点。

在了解特斯勒定律在互联网行业中的应用之前，让我们先设想一个场景：如果开发一个功能可以有效地降低程序的使用难度，那么需要程序员花两周的时间去开发这个功能；如果不开发这个功能，那么每个用户需要额外花10 秒的时间。作为产品经理，你会如何选择？

相信你已经有了自己的答案。其实互联网思维就是用户体验至上，产品经理做的大多数事情都是在不断地降低用户复杂度，比较典型的例子就是个性化推荐算法。

在个性化推荐算法出现之前，用户想找到自己喜欢的内容，需要搜索、筛选，还不一定能找到。个性化推荐算法就是在降低用户的操作复杂度，它根据每个用户的浏览喜好进行智能推荐。用户打开App 就能看到自己关心或者喜欢的内容，这种体验是非常好的。但是，对系统来说这需要大量的服务器及超强的技术能力才可以实现，而且为了提高个性化推荐算法的准确率，需要不断地迭代和优化算法。

这就是一个通过技术手段不断地降低用户复杂度，将复杂度转移到系统本身，提升用户体验的典型案例。

7.新乡重夫：防错原则

新乡重夫：防错原则与尼尔森十大原则中的防错原则有异曲同工之妙。该原则认为用户在使用产品过程中的大部分错误操作是产品设计疏忽造成的，不能将问题归结到用户身上。

因此，在产品设计中一定要有必要的防错机制，特别是当用户的某些操作可能导致毁灭性的结果时，一定要提示用户和再次向用户确认。

例如，闲鱼App 的发布商品界面，当用户未编辑完而点击“返回”按钮时，会出现是否保存的提示，如图2-26 所示。因为这时用户点击“返回”按钮可能是误操作，如果不提示用户将内容保存到草稿箱，就可能导致用户之前编辑的内容丢失，而用户想重新发布商品就必须重新编辑，这样就会给用户造成很大的损失，这其实是防错原则的体现。

又如，京东App 的订单删除功能，当用户点击“删除”按钮时会出现提示，如果删除订单可从电脑端的订单回收站中恢复，如图2-26 所示。如果不提供回收站恢复功能，就可能导致用户由于误操作将订单删除，而不能对商品申请售后服务，这样会给用户造成极大的影响。

2.4.2　尼尔森十大原则

交互设计七大定律是经过时间验证的、交互设计领域的指导原则，而尼尔森十大原则被称为“启发式”的经验法则，是从大量的设计经验中总结而来的。虽然不能将尼尔森十大原则上升为一种标准，但是可以把它作为一种经验来学习，并配合七大定律来更好地指导产品设计工作。

那么，尼尔森是谁？

尼尔森是毕业于丹麦技术大学的人机交互博士 ，拥有70 多项美国专利（主要涉及让互联网更容易使用的方法），并于2006 年被纳入美国计算机学会人机交互学院，被赋予人机交互实践的终身成就奖 。同时，他还被纽约时报称为“Web易用性大师”。

尼尔森早在1995 年就提出了尼尔森十大原则，这十大原则如下。

（1） 状态可见原则（Visibility of System Status）。

（2） 环境贴切原则（Match between System and the Real World）。

（3） 用户可控原则（User Control and Freedom）。

（4） 一致性原则（Consistency and Standards）。

（5） 防错原则（Error Prevention）。

（6） 易取原则（Recognition Rather than Recall）。

（7） 灵活高效原则（Flexibility and Efficiency of Use）。

（8） 易扫原则（Aesthetic and Minimalist Design）。

（9） 容错原则（Help Users Recognize，Diagnose，and Recover From Errors）。

（10）人性化帮助原则（Help and Documentation）。

下面详细讲解这十大原则。

1.状态可见原则

状态可见原则是指系统应该让用户知道发生了什么，并在适当的时间内做出适当的反馈。这项原则非常好理解，它是指对于用户的每次操作，系统都要给一个反馈，否则用户会感到困惑。类似于人与人之间的交流，我们在与他人交流时，肯定希望得到对方的回应。用户与系统之间的交互也是一样的道理。

例如，用户在京东App 上领取优惠券，如果领取成功，系统就会提示领取成功，如图2-27 所示；如果领取失败，系统就会提示领取失败。

又如，今日头条App 的下拉刷新功能使用的是下拉刷新的交互方式。当用户下拉界面时，在顶部的导航栏与内容区之间会出现“推荐中”的动态提示，如图2-28 所示。在加载完毕之后会出现“今日头条推荐引擎有8 条更新”的文字提示，如图2-29 所示。这一系列提示就是状态可见原则的体现。

2.环境贴切原则

环境贴切原则是指系统的一切表现和表述都应尽可能贴近用户所在的环境。《iPhone 人机交互指南》中提到的隐喻与拟物化就是对这个原则很好的实践。图2-30 中的图标的设计就采用了拟物化的设计方法，第一个图标是写东西、记笔记，第二个图标是垃圾桶，第三个图标是文件夹，第四个图标是照相机，这些事物用户都认识，所以用户的认知成本很低。

在电商出现之前，人们去超市购物通常会推一个购物车，把自己想要的东西都放进去，然后一起结账。在电商出现之后，人们看到购物车图标（见图2-31）会感觉很亲切，不用思考也知道这个购物车图标是什么意思。

此外，文案部分还应使用通俗易懂或者约定俗成的文字。例如，如果产品的目标用户是老年人，那么文案要使用老年人的常用语；如果产品的目标用户是小学生，那么文案要使用小学生的常用语。

3.用户可控原则

用户可控原则是指为了避免用户的误操作，系统应提供撤回和重做功能，让用户有掌控感。该原则针对的是用户容易发生误操作的场景。

例如，你正在使用Word 写PRD，你家的猫突然跳到键盘上，导致PRD 中出现错误的内容，这时撤回功能就非常好用。

又如，我在与他人使用微信App 聊天时，我发了一条消息或者一个表情，我突然觉得不合适，这时我可以长按这条消息或者这个表情，在出现的选择框中选择“撤回”，如图2-32 所示。使用撤回功能可以避免由于一时没想好错发消息或者表情，而给对方或者自己造成困扰的情况。

4.一致性原则

对用户的预期来说，同样的文字、状态、按钮，都应该触发相同的事情，这就是一致性原则。软件产品的一致性包括以下5 个方面。

1）结构一致性

结构一致性是指保持一种类似的结构，新的结构变化会让用户思考，而规则的排列顺序能减轻用户的思考负担。

例如，微信App“发现”界面中的每个条目都采用了统一的“图标+文字信息”的结构样式，图2-33 所示。这样可以让用户快速了解朋友圈、扫一扫、摇一摇、看一看、搜一搜、附近的人、购物、游戏、小程序等功能都是做什么的，这就是结构一致性的体现。

2）色彩一致性

色彩一致性是指产品所使用的主要色调应该是统一的，而不是同一款产品使用多种色调。

例如，网易云音乐App 的图标颜色、主标签颜色及界面的主色均为红色，如图2-34 所示。整个App 在色彩上保持了很好的一致性，这就是色彩一致性的体现。

3）操作一致性

操作一致性是指类似的功能要保持操作一致，降低用户的学习成本。

例如，知乎App 的关注功能分为关注个人和关注专栏两个，但它们本质上都是关注功能，所以知乎App 按照操作一致性原则设计了这个功能。在关注前都是蓝色背景、白色文案，在关注之后文案变为“已关注”，同时背景色变为灰色，如图2-35 所示。

4）反馈一致性

反馈一致性是指用户在操作按钮或者条目时，反馈效果应该是一致的。

例如，手机QQ 中的信息都采用了列表式结构，不管用户点击哪个条目，下一级界面都是自右向左滑出的，如图2-36 所示，这就是反馈一致性的体现。

5）文字一致性

文字一致性是指产品中呈现给用户阅读的文字的大小、样式、颜色、布局等都应该是一致的。

图2-37 所示的是微信App 几个关键界面的字体，框中的文字的大小、颜色、布局都相同，这样让整个App 看起来很舒服，这就是文字一致性的体现。因此，在做视觉设计时，尽量使用统一风格的文字。

5.防错原则

防错原则是指通过系统的设计、重组或特别安排，防止用户出现不可修正的错误。

首先，如果某些操作暂时还不能进行（如没有达到特定时间或者满足特定条件），就将其置灰或者隐藏，不要在用户点击后才提醒用户不能操作。

例如，在使用手机号登录的过程中，在手机号没有输入完成之前，“获取验证码”按钮是置灰的，如图2-38 所示；如果输入的11 位数字不是手机号，如567 8123 5678，那么“获取验证码”按钮也是置灰的。只有当11 位手机号输入完成，并且符合手机号规则时，“获取验证码”按钮才会变为可点击状态。

其次，如果某些内容用户不能选择，就将其置灰或者隐藏，不要在用户点击后才告知用户这些内容不能选择。

如图2-39 所示，淘宝用户想购买iPhone 7，在尺寸选择5.5 寸，套餐类型选择官方标配，版本类型选择美国之后，存储容量就只有128GB 这一个选项可以选择了，32GB 选项是不能选择的（没有这款型号或者没货等原因导致的），所以32GB 选项置灰了，变为不可点击状态，这就是防错原则的体现。

6.易取原则

易取原则是指通过把组件、按钮及选项可见化，来降低用户的记忆负荷。

软件的使用指南是可见的，而且在合适的时候可以再次查看，不需要让用户记忆所有内容才可以正确操作。简单来说，就是不要让用户去记住怎么操作，在用户想知道怎么操作的时候软件的使用指南要直接告诉用户。

图2-40 所示的是腾讯视频App 的锁定功能引导，当用户频繁在横屏和竖屏之间切换时，用户有很大概率是想锁定横屏观看视频，这时腾讯视频App 告诉用户点击屏幕即可锁定屏幕，是不是有一种雪中送炭的感觉呢？这就是易取原则的体现。

7.灵活高效原则

灵活高效原则是指通过一定的设计来满足不同水平的用户的个性化需求，以达到灵活且高效的目的。

例如，绝大多数产品都有新手引导功能，新用户需要通过这个功能来了解一款产品，但是老用户不需要这个功能，所以在新手引导功能中提供一个跳过功能，对老用户是比较友好的。

又如，支付宝App 具有编辑应用功能，用户可以根据自身喜好自定义其支付宝App 首页的应用，如图2-41 所示。这样用户就可以根据自身喜好定制适合自己的应用分布方式，这就是灵活高效原则的体现。

8.易扫原则

在这个用户的时间极度碎片化的时代，用户浏览一个界面的动作不是读、不是看，而是扫。用户在一个界面上的浏览轨迹类似于一个F 形，如图2-42 所示，这同样也是尼尔森F 模型提到的理论。

易扫意味着要突出重点，任何不相关的信息都会让原本重要的信息更难被用户察觉，所以要弱化和剔除不相关的信息。

iPhone 中自带的软件（iOS 11 设计规范）中的标题字体都比较大，界面的设计风格非常简洁。如图2-43 所示，段落中的标题和正文的区别很明显，这就是易扫原则的体现。

9.容错原则

容错原则是指如果用户出现错误，并且这个错误无法自动修正，就要提供详尽的说明文字和指导方向，帮助用户识别错误、分析错误的原因并回到正确的道路上。

图2-44 为网易邮箱PC 端的注册界面，当用户输入错误时，界面上不但会出现提示，还会出现相应的修改建议，这样可以有效地提高注册成功率，是一种相当好的用户体验，也是容错原则的体现。

10.人性化帮助原则

人性化帮助原则是指当用户需要帮助时，适当地给予用户帮助入口，不要让用户在遇到问题时不知道怎么办。

例如，淘宝App 和知乎App 登录界面中都有帮助入口，这样用户在忘记密码或者账号出现问题时可以寻求帮助，如图2-45 所示。

交互设计能力对产品经理来说特别重要，尤其是在没有交互设计人员的公司中，所有的交互设计工作都是由产品经理完成的，所以产品经理必须具备交互设计能力。

锻炼自己的交互设计能力的一种实用的方法：用交互设计七大定律和尼尔森十大原则进行案例分析。例如，下载并安装应用商店排名前100 的App，并对其逐一进行分析：哪些App 的交互设计做得好？它们分别满足了哪些交互设计定律和原则？哪些App 的交互设计做得不好？它们违反了哪些交互设计定律和原则？如果让你来优化，你会怎么做？可以拿自己的分析案例与其他产品经理、设计师进行探讨，在交流中互相学习和提升。

另外，本节内容对于学习第3 章和第4 章的内容也具有一定的指导意义。