经典交互设计原则图文解析-技术圈

作者 | 薛老板

排版 | 薛小助

所谓的“用户体验”，其实用户可感知的就是前端的交互设计，所以交互设计一定是互联网人的必备技能。

总结的比较系统，互联网产品设计参考最多的是：尼尔森可用性原则。

尼尔森的十大可用性原则是我们秋招笔试出题过程中经常考察的知识点，也是做产品经理之后做产品设计与提升用户体验设计的重要参考标准，值得深入研究与运用。

尼尔森（Jakob Nielsen）是毕业于哥本哈根，丹麦技术大学的人机交互博士，于1995年1月1日发表了「十大可用性原则」。同时，他拥有79项美国专利,专利主要涉及让互联网更容易使用的方法。尼尔森在2006年4月,并被纳入美国计算机学会人机交互学院，被赋予人机交互实践的终身成就奖。可以看出来还是很牛的。

接下来我们就来看看这十大原则分别是什么：

状态可见原则

首先，系统应该让用户知道发生了什么，在适当的时间内做出适当的反馈。这条很简单，就是指用户的每次操作，你都得给他个反馈，成功了就告诉他成功了，失败了就告诉他失败了。

比如京东领优惠，如果成功了会弹个提示“领取成功，感谢您的参与”，当然如果领取失败也会弹一个类似的提示

还比如今日头条的下拉刷新功能：头条页面的刷新功能使用的是下拉刷新的交互方式，当用户下拉页面时，页面状态栏跟内容区中间会出现“推荐中”的动态提示，加载完毕之后中间出现一条“今日头条推荐引擎有18条更新”的文字提示；这一系列的提示就是我们所说的状态可见原则，如下图：

其次，状态可见原则还指用户在产品上的任何操作，不论是单击、滚动还是按下键盘，页面应即时给出反馈。“即时”是指，页面响应时间小于用户能忍受的等待时间。

如果反应时间有点慢，也请用进度条or等待or下载等动效或其他形式告诉用户当下的情况；千万别让用户在懵逼的一直等，不知道发生了什么。

比如我就见过一个产品的加载页面是两个卡通动物聊天的形式，还挺有意思的，不知不觉就加载完了，这样让等待过程变的可以忍受。

这都属于状态可见原则的范畴。

环境贴切原则

环境贴切原则是指：系统的一切表现和表述，应该尽可能贴近用户所在的环境（包括：年龄、学历、文化、时代背景）。

《iPhone人机交互指南》里提到的隐喻与拟物化就是对这一个原则很好的实践，比如下面这些图标的设计就是很好的拟物化。

还比如电商里的购物车，在电商出现之前，我们去超市买东西就会进门推一个购物车，然后把想要的东西都放进去，然后一起结账。电商出现之后，大家看到购物车图标会感觉很亲切，不用思考也知道这个购物车是什么意思。

此外，文字叙述部分还应该使用易懂和约定俗成的表达。说的直白一些，就是3个字：说人话。

比如你们的目标用户群体是老年人，那你的表述要按照他们的常用语去叙述；如果你的目标用户群体是小学生，那你就要换一套表述方法了。

用户可控原则

用户可控原则是指：为了避免用户的误操作，系统应提供撤销和重做功能。这种针对的就是那种容易发生误操作的场景。

比如我们正在word里写PRD，这时候你的猫跳到键盘上，噼里啪啦打了一堆火星文，这时候撤销功能就很好用了；

还比如微信聊天中的撤回功能：两个人在微信中聊天的时候，我发了一条消息或者表情，突然觉得不合适，我可以在长按这条消息或者表情，在出现的选择框中选择撤回，然后重新编辑发送，来避免一时没想好而错发消息可能给对方或者自己造成困扰。

还比如一些机器设备的reset按钮，重启按钮等等。

这都是遵循用户可控原则做的设计。

一致性原则

对于用户的预期来说，同样的文字、状态、按钮，都应该触发相同的事情；这就是一致性原则，也就是，同一用语、功能、操作保持一致。

软件产品的一致性包括以下五个方面。

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

例如微信每个模块的条目布局：微信中每个模块的条目都有统一的“图标+文字信息”的结构样式，能让用户快速了解朋友圈、扫一扫、摇一摇、看一看、搜一搜、附近的人、漂流瓶、购物、游戏及小程序等功能都是做什么的，这就是结构一致性的体现。

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

例如网易云音乐的颜色：网易云音乐的图标颜色与界面的主色均为红色，也包括其中一些标签和强调的文字颜色都是红色，整个界面除了图片的有效信息外，都通过灰、白、红色来呈现，界面保持了很好的一致性，这就是色彩一致性原则，如下图：

操作一致性：能让产品更新换代时仍然让用户保持对原产品的认知，减小用户的学习成本；

比如知乎的关注功能，关注分为关注个人和关注专栏，但本质上都是关注功能，所以知乎按照操作一致性原理设计了这个功能。关注前都是蓝色背景白色文案，点击之后文案变为“已关注”，同时背景色变为灰色。

这就是操作一致性的体现，如下图：

反馈一致性：用户在操作按钮或者条目的时候，点击的反馈效果应该是一致的；

比如手机QQ信息列表的打开方式：它的信息都是列表式结构，不管你点击哪一行条目，下一级界面都是由右往左滑出，点击顶部左上角的返回按钮会从左往右滑回，体验相当一致；这就是反馈一致性的体现，如下动图：

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

例如微信几个关键界面的字体：下图我用红色框框起来的条目部分的文字，三个主界面不尽相同，但是，字体大小、颜色、布局的样式都一样，这样让整个APP视觉上看起来很舒服，这就是字体一致性，因此，我们在做视觉设计的时候尽量使用统一风格的文字。

防错原则的定义是：通过系统的设计、重组或特别安排，防止用户出错。

首先，如果某些操作不能进行，那就置灰或隐藏，不要在用户点击后才提醒不能操作。

比如在手机号登录过程中，手机号没有输入完成，获取验证码按钮是置灰的；如果输入的11位不是手机号，比如567 8123 5678，也是置灰的。

只有当11位手机号输入完成，并且符合手机号规则时，获取验证码按钮才会变为可点击状态。

其次，如果有某些内容不能选择，就置灰或者隐藏，不要等用户点击完成时才告知不能使用。

比如淘宝这个我想买个手机，选择了5.5寸，套餐选择官方标配，版本选择美国之后，存储容量就只有128G可以选择了，32G的是没有的，所以置灰了，变为不可点击状态。

这就是防错原则。

易取原则

易取原则是指：通过把组件、按钮及选项可见化，来降低用户的记忆负荷。软件的使用指南应该是可见的，且在合适的时候可以再次查看，不需要让用户记忆才可以正确操作。

比如腾讯视频的锁定功能引导：当你切换横屏和竖屏的时候，在屏幕中间会提示“点击锁定”，还包含新推出的播放中长按快进快退功能，这些提示告诉用户功能所在的地方以及操作方法，不需要用户凭记忆来操作；这就是易取原则的一种体现，看下图：

7

灵活高效原则

产品的用户总是会分为新手小白用户、熟练用户，灵活高效原则就是指通过一定的设计来满足不同水平的用户需求，允许用户定制常用功能。

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

还比如支付宝中的编辑应用功能：支付宝首页的应用是可以根据自身喜好自定义的，包括定义常用应用、排序、删除、新增等等；这样用户可以根据自己的个人兴趣定制自己适合的应用分布方式，这就叫做用户定制常用功能，也就是灵活高效原则的一种体现，如下图：

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

苹果手机中自带的软件（IOS11设计规范）：在新版本的苹果手机中自带的软件中标题都属于字体放大，界面简洁的设计风格；还有苹果自带的音乐软件中，段落中的标题和正文区别是很明显的，标题明显很大，而正文部分相对较小，这就是优美简约原则的体现，如下图：

如果错误无法自动挽回，则提供详尽的说明文字和指导方向，帮助用户识别出错误，分析出错误的原因再帮助用户回到正确的道路上。

比如网易邮箱PC端的注册界面：用户在网易163电脑端注册邮箱时，在输入出错时不但会出现错误的提示，还会给出相应的建议，帮助用户进行正确的抉择，这样就避免用户出现更大的失误并且提高了注册的效率，这是一种相当好的用户体验，也是容错原则的一种体现，如下图：

帮助原则是指：当用户需要帮助的时候，适当的给于帮助入口，不要让用户遇到问题不知道怎么办。

当然，最好的系统设计是不需要提示用户就能知道怎么操作，但是在一些比较重要的入口还是需要提供必要的帮助入口的。

例如淘宝APP和知乎APP登录页面的帮助入口：这个场景下用户可能忘记密码了，或者账号出现问题了需要找客服申诉等等，这时候提供一个帮助入口可以避免用户遇到问题后手足无措。

以上，就是对尼尔森十大原则根据我自己的理解的解析，希望对你有所帮助。

训练交互能力的一个超级实用办法是：用尼尔森十大交互原则进行案例分析，例如把应用商店排名前100的APP下载安装，进行尼尔森十大交互原则的分析。

哪些做的好，哪些交互还有问题，如果是你来设计，你会如何优化，可以拿自己的分析案例和产品同事、设计师同事进行探讨，在交流中互相学习提升。

以上就是我们在做交互设计的时候需要时刻考虑的交互规范。

经典交互设计原则图文解析

7灵活高效原则产品的用户总是会分为新手小白用户、熟练用户，灵活高效原则就是指通过一定的设计来满足不同水平的用户需求，允许用户定制常用功能。

帮助原则是指：当用户需要帮助的时候，适当的给于帮助入口，不要让用户遇到问题不知道怎么办。

7

灵活高效原则

产品的用户总是会分为新手小白用户、熟练用户，灵活高效原则就是指通过一定的设计来满足不同水平的用户需求，允许用户定制常用功能。