设计理论--深度解析尼尔森十大交互设计原则

小伙伴们大家好

今天我将结合实际案例来深入解析尼尔森十大交互设计原则，希望对大家有所帮助。

本文共3929字，需要阅读时间约10分钟~

Jakob Nielsen（雅各布·尼尔森）是毕业于哥本哈根的丹麦技术大学的人机交互博士，他拥有79项美国专利，主要涉及让互联网更容易使用的方法。他于1995年提出了“十大可用性原则”。这些原则对于设计师是非常重要的理论基础，如何在实际工作中来正确的运用呢？下面我们结合实例来了解一下。

一、状态可见原则（Visibility of system status ）

定义：系统状态的可见性是指系统状态传达给用户的程度。针对用户的任何操作，系统都应该在合理时间内给予一定的反馈。在什么页面，做了什么，接下来需要做什么，怎么做，系统应该明确的告诉用户，让用户对自己的行为有所了解，有一定的心理预期，防止发生操作错误。

案例一  进程状态反馈

用过hellofont与字魂两款字体软件的应该会有很明显的感受，尤其是网络不好的情况，前者下载一款字体时没有任何进度提示，只有当下载成功后前面的图标会显示成点亮的对号状态，而后者点击某一款字体后便会有下载进度，这便是状态可见原则的体现，实时对用户行为进行反馈，让用户无需多余的思考。

用户在进行了操作后，如果产品没有任何反应，用户会缺乏安全感，会认为是我操作错了还是产品出现问题了？所以，根据心理预期，产品要对用户每一步给出明确的反馈，需要告知用户当前行为是否操作正确、正在进行中还是已经完成，如图：

案例二    饿了么订单状态实时反馈

在饿了么下单后，在订单页第一个位置就会显示当前订单的状态，通过地理位置来告知用户“正在准备中”“正在送货”以及配送员距离你多少米的显示，下雨天，地图上则会以下雨的样式展现，体验非常细腻，使用时就像是跟一个知心的朋友聊天一样，对每一步都及时并清晰的进行反馈告知，不需要用户消耗多余的时间去猜测。

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

产品设计应该遵循现实世界中人们的使用习惯和思维方式，尽可能使用通俗易懂的词语和已习惯的交互方式，针对不同人群不同风俗应该制定不同的设计方案。

案例一  设计样式贴切现实生活

如下图2-1-ios13系统工具图标，指南针模拟的是现实指南针的样式，同理，计算器、watch、钱包、设置、时钟等都工具类的图标都与现实生活中常用工具样式极为相似，如下图2-2的左右对比。这样的设计让人们非常容易接受并使用，降低了用户学习成本。

案例二  产品设计贴切现实环境

用户环境不同，产品的设计也会不同。例如vipkid家长版与教师版，家长版针对的是国内用户，所以是中文界面，而教师版针对教师群体，是国外的教师，所以界面就贴合国外的用户而设计。

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

在产品交互中，允许用户有更多的自主操控权，如果用户误操作了一些功能，则应给用户提供一些解决方案，比如撤销/重做功能。

案例一  

使用饿了么app，如果用户近期不想吃这家外卖，但是又不小心兑换了红包，则可以在红包卡劵的页面撤销兑换，避免了用户因为自己的操作错误而带来损失。

案例二

微信聊天界面，用户误操作发送给朋友的信息，可以支持右键撤回，企业微信也有相同功能，给了用户更多的自主操控权，这也是用户可控原则的体现。

四、一致性和标准原则（Consistency and standards）

产品的功能结构、排版样式、颜色搭配、交互操作、反馈术语需要保持一致，以防用户以为使用的不是同一款产品。一些交互方式和样式则需要遵循现有规范，以便用户能够预期到将要发生什么和如何来操作页面。

案例一  视觉一致

以淘宝为例，如5个tab的页面，头部颜色比较统一，都是浅灰色；页面中的标签、价格、提示、底部tab、按钮等颜色都与淘宝logo的主色一致，界面中较好的保持了一致性的原则，如下图：

案例二  操作行为一致

比如页面的跳转方式，点击功能入口，从右到左滑出页面，点击左上角的返回icon，由左到右滑回上一个页面。如下图：

例如ios微信的聊天界面，右下角的添加功能模块中，所有的小功能页面都是由下到上弹出页面，交互方式上保持了统一性，符合用户的心理预期，使用时候就不会很突兀。

五、防错原则（Error prevention）

用户在操作过程中出现错误是不可避免的，而优秀的产品应该在用户出现错误之前通过页面细节的设计来避免发生，这样会比发生后再告知用户更友好，不会给用户增加心理负担。

知识点1：给用户一个约束

案例：天猫商品选项中，无货的尺码则不会显示，这样用户看到无货便会去寻找其他合适的商品；又比如飞猪旅行中选择日期，过期的日期不可选择，这些都是给用户限定了一个可选择的范围，防止用户选择无效商品后带来的失落感。

知识点2：为用户提供建议

案例：如百度搜索，在输入文字时，下方会出现与文字相关的词语，而用户文字输入错误并搜索后，百度并不会不给出结果，而是通过大数据来判断用户想要搜索的内容，并给出搜索建议，如下图：

知识点3：善意提醒

案例：如唯品会正在支付中，退出支付页面时，会弹出弹窗提示“放弃支付吗”，提醒订单会在30分钟后取消，在用户可能会出现错误或重要操作退出时给用户一个善意的弹窗提醒，防止用户因不当操作造成损失。如下图：

六、易取原则（Recognition rather than recall）

产品设计应该最大程度地减少用户的记忆负担，让信息、操作按钮、选项尽量清晰可见。不需要用户记住一页到另一页的路径或者信息，而且产品的使用指南应该清晰可见。

案例一  历史记录

搜索功能中的历史记录功能，如饿了么，点击搜索，出现「历史搜索」以及最下方的根据你的浏览推荐模块，用户无须特意记住自己之前搜的店铺，优秀的产品就会帮你记住并推荐你想要的，这也是易取原则的体现，如下图：

案例二  登录

如网易云音乐的登录流程，如果注册过的用户，下次登录时直接识别当前手机号码，并且可以「一键登录」，流程非常简化，用户不需要记住密码或者一步步发验证码，极大程度减轻了用户的记忆负担，这也是易取原则的很好体现。

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

一款产品服务的用户往往并不是单一的角色，例如有新手用户、付费用户、专家级用户、活跃用户、普通用户等，这也导致了用户诉求和需求的个性化，所以产品的内容设计上需要分层次去满足不同的用户，灵活高效去运营。

案例一  回顶部功能

如每日优鲜首页上滑一段内容后，底部tab首页icon会切换为「回顶部」，灵活设计产品功能，方便了需要返回顶部的用户，如下图：

案例二 功能个性化定制

如美团、支付宝金刚区个性化编辑功能，用户可以根据自身需求与喜好来编辑功能的显示与顺序，常用功能靠前，不常用功能删除，提高了用户的使用效率，如下图：

京东-我的频道，也是灵活高效原则的一个很好体现，用户根据使用频率来定制专属频道，增强了用户自身的存在感，提升用户体验，如图：

八、美学和简约设计原则（Aesthetic and minimalist design）

页面内容在于精而不在于多，由于手机屏幕的大小限制，产品应该突出重点，去除弱化不相关或不常用的信息，让用户更加专注于重要信息。

案例：

以饿了么与美团外卖的金刚区为例，功能比较多，排版上并没有大小一致依次排列下去，而是选出最重要的五个功能设计成大图标放在第一排，而次要不常用的则缩小弱化，大小形状对比突出重要内容，如下图：

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

当用户出现错误时，能够为用户提供明确清晰的解决方案，把用户的损失降到最低。

案例：

如网易邮箱，用户删掉邮件，会有Snackbar弹出，右侧有撤销选项，如果用户误删则可以点击撤销，如图：

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

用户在初次使用一款产品时，有些功能通常会不清楚怎么使用，所以产品需要给用户提供一些文档帮助，并且容易被用户找到，文字要简短清晰，帮助用户快速去了解产品和如何去使用。

案例一  新手引导

如口碑App，初次下载后会有功能引导的页面，通过提供文档说明来帮助用户快速了解如何使用产品，如图：

案例二  表单填写中的提示

如知乎中的资料编辑页面，在页面顶部会有展示说明，填写资料处会有备注文档，指导用户如何填写，这都是人性化帮助的一种体现，如图：

重点回顾

1、状态可见原则：针对用户的任何操作，系统都应该在合理时间内给予一定的反馈。

2、环境贴切原则：产品设计应该遵循现实世界中人们的使用习惯和思维方式，有针对性地去设计产品内容。

3、用户可控原则：用户有更多的自主操控权利，针对用户的错误，提出清晰的解决方案。

4、一致性和标准原则：产品的功能结构、排版样式、颜色搭配、交互操作、反馈术语都需要保持一致。

5、防错原则：在用户犯错之前给予用户一些合理的建议。

6、易取原则：尽可能减少用户的记忆负担。

7、灵活高效原则：产品的内容设计上需要分层次去满足不同的用户。

8、美学和简约设计原则：突出重点，去除弱化不常用的信息，让用户更加专注于重要信息。

9、容错原则：把用户的错误损失降到最低。

10、人性化帮助原则：必要页面给用户提供文档帮助。

以上便是我对尼尔森十大交互设计原则的理解，我从中学到了许多，希望对你也能有帮助~

谢谢阅读，我们共同进步~ 笔芯~

参考文献：

https://www.nngroup.com/articles/ten-usability-heuristics/

参考书籍：《UI那些事儿》 

本文首发于公众号【胖小魚设计小栈】，欢迎大家关注。下期再见~