尼尔森十大交互设计原则

前言：Jakob Nielsen（雅各布·尼尔森）的十大交互设计原则。它们被称为“启发式”，因为它们是广泛的经验法则，而不是特定的可用性指导原则。因此，我们不能把它上升为一种标准，而是应该当做一种经验来学习，然后跟现实中的设计结合来使用。接下来，作者通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法～

原则一：状态可见原则（Visibility of system status ） 系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解，

• 方法：在合适的时间给用户适当的反馈，防止用户使用出现错
• 案例：「今日头条」下拉刷新，下拉时：新年快乐、松开时：推荐中、加载完毕：8条更新
• 案例：「抖音」点击关注，页面中心出现成功关注动画
• 案例：「京东」订单页面，显示物流进度信息
• 案例：「钉钉」消息已读和未读
• 常见案例：toast、下载进度条提示、点击按钮变化等

原则二：环境贴切原则（Match between system and the real world）

软件系统应该使用用户熟悉的语言、文字、语句，或者其他用户熟悉的概念，而非系统语言。软件中的信息应该尽量贴近真实世界，让信息更自然，逻辑上也更容易被用户理解。

• 案例：「MD设计语言」让用户感知到从哪里来，到哪里去，以及每个动效都会复合现实世界中的重力规则
• 案例：「计算器」的设计与现实相差无几
• 案例：「新浪」中文版与国际版的风格、语言、结构布局、交互不一样。考虑国外用户使用情况

原则三：用户可控原则（User control and freedom）

用户常常会误触到某些功能，我们应该让用户可以方便的退出。这种情况下，我们应该把“紧急出口”按钮做的明显一点，而且不要在退出时弹出额外的对话框。很多用户发送一条消息、总会有他忽然意识到自己不对的地方，这个叫做临界效应；所以最好支持撤销/重做功能。

• 案例：「微信」长按消息，选择撤回、重新编辑
• 案例：「MD设计语言」谷歌相册内照片删除虎，底部出现带撤销按钮的提示

原则四：一致性原则（Consistency and standards）

对于用户来说，同样的文字、状态、按钮，都应该触发相同的事情，遵从通用的平台惯例；也就是，同一用语、功能、操作保持一致。软件产品的一致性包括以下五个方面：

• 方法：统一产品设计规范/交互规范。包括产品和跨平台产品之间的一致性

1. 结构一致性：保持一种类似的结构，新的结构变化会让用户思考，规则的排列顺序能减轻用户的思考负担；
2. 色彩一致性：产品所使用的主要色调应该是统一的，而不是换一个页面颜色就不同；
3. 操作一致性：能让产品更新换代时仍然让用户保持对原产品的认知，减小用户的学习成本；
4. 反馈一致性：用户在操作按钮或者条目的时候，点击的反馈效果应该是一致的；
5. 文字一致性：产品中呈现给用户阅读的文字大小、样式、颜色、布局等都应该是一致的；
6. 文案一致性：文案和字段是一致的

• 案例：「网易云音乐」页面主色与图表都是红色，标签与强调色也是红色。
• 案例：返回上一级都是通过nav返回按钮进行
• 案例：「QQ」所有信息列表打开方式都是从右到左，内页关闭都是从左至右。
• 案例：「微信」列表模块具体不同，但字体大小、颜色、布局样式都一样

原则五：防错原则（Error prevention）

比一个优秀错误提醒弹窗更好的设计方式，是在这个错误发生之前就避免它。可以帮助用户排除一些容易出错的情况，或在用户提交之前给他一个确认的选项。在此，特别要注意在用户操作具有毁灭性效果的功能时要有提示，防止用户犯不可挽回的错误。

• 方法：在用户选择动作发生之前
• 案例：手机号输入采用344间隔分开，易于用户对比检查
• 案例：「知乎」登录，没有填写手机密码之前，btn置灰不可点。输入后，btn变为可点状态
• 案例：「微信朋友圈」点击返回btn出现退提示框。操作后损失比较大

原则六：易取原则（Recognition rather than recall）识别好股记忆

通过把组件、按钮及选项可见化，来降低用户的记忆负荷。用户不需要记住各个对话框中的信息。软件的使用指南应该是可见的，且在合适的时候可以再次查看。

• 方法：减少用户记忆负担，在适当的实际给用户需要获取的信息
• 案例：输入验证码时候，系统自动识别，点击即可自动填充
• 案例：「安锋SDK」登录注册输入框内，未输入时显示如实账号/手机号/密码等文案
• 案例：「爱奇艺」APP更新新功能后，首次进去用引导来告知用户新功能用法
• 案例：「iOS」桌面图标下面的文字、导航栏图标下面的文字、根据用户特质来定义

原则七：灵活高效原则（Flexibility and efficiency of use）

系统可以同时满足有经验和无经验的用户。允许用户定制常用功能。中级用户的数量远高于初级和高级用户数，系统意味着为大多数用户设计，不要低估也不可轻视，保持灵活高效.

• 方法：提供灵活的操作和高效的获取信息能力。
• 案例：「支付宝」首页功能区可自定义常用应用
• 方案：「淘宝」对话框提供智能联想功能，输入关键字自动联想出相关句子，提高效率
• 案例：「微信小程序」列表页下拉后小程序页面可自定义常用程序
• 案例：「QQ」表情吧个人平时使用频率多的表情惊喜归类
• 案例：「iOS」控制中心、默认能满足大部分用户需求、但也可以让用户自己设置来满足不同经验用户的需求

原则八：优美且简约原则（Aesthetic and minimalist design）

对话中不应该包含无关紧要的信息。在段落中每增加一个单位的重要信息，就意味着要减少相应的其他信息。设计需要简洁明了，突出重点，弱化或剔除无关信息.类似「少即是多原则」

• 方法：每一个元素我们问一下：可以去掉吗？少了会有什么影响？如果没有就去掉吧
• 案例：设计风格由拟物到扁平再到轻拟物风格

原则九：容错原则（Help users recognize, diagnose, and recover from errors）

错误信息应该使用简洁的文字（不要用代码），指出错误是什么，并给出解决建议。也就是在用户出错时如何为出错的用户提供及时正确的帮助？即要帮助用户识别出错误，分析出错误的原因再帮助用户回到正确的道路上。如果真的不能帮助用户从错误中恢复，也要尽量为用户提供帮助让用户损失降到最低（提供详尽的说明和指导方向）。

• 方法：用户在使用产品过程中出现了问题，及时准确的告知用户出现问题的原因。
• 案例：「网易邮箱」注册时、输入邮箱已被使用时，先错误提示并提供其他类似未被注册账号选项。
• 案例：「Twitter」注册时，当用户输入错误、输入框边变红并在下方提示错误提示。输入正确、输入框后面有对勾圆圈

原则十：人性化帮助原则（Help and documentation）

即使系统不适用帮助文档是最好的，但我们也应该提供一份帮助文档。任何帮助信息都应该可以方便地搜索到，以用户的任务为核心，列出相应的步骤，但文字不要太多。

• 案例：「支付宝/知乎」登录页面的「帮助」入口
• 案例：「Axure RP8」顶部状态栏都有「帮助」入口
• 案例：「Insterinstagram」忘记密码页面,会提示输入账号或邮箱后,将会向用户发现登录链接,避免用户对于下一步的不可知