交互设计原则

尼尔森十大交互设计原则

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

系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解本身处于何种状态、对过去发生、当前目标、以及对将来去向有所了解，通常的方法是在合适的时间给用户适当的反馈，防止用户使用出现错误。

实例分析1： 好比微博的下拉刷新功能：微博页面的刷新功能使用的是下拉刷新的交互方式，当用户下拉页面时，页面状态栏跟内容区中间会出现“下拉刷新/释放更新”的提示，当我松开页面中间会出现“加载中”的动态提示，加载完毕以后中间出现一条“更新了XX条微博”的文字提示；这一系列的提示就是咱们所说的动态可见原则，以下图：

实例分析2： 好比房天下房源详情页的收藏子功能：当用户点击收藏按钮以后，页面中间会出现一个“收藏成功”的弹窗，而且弹窗底部为以后须要前往的页面进行方向性的指引，操做以后的提示也是状态可见原则的一中，当用户取消收藏以后，页面中间会出现一个“已取消收藏”的提示，停留3S以后消失，以下图：

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

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

实例分析1： 网易云音乐的播放界面，仿照黑胶唱片的样式，播放暂停也是仿照唱片的针杆，这就是环境贴切原则：

实例分析2： 好比新浪微博的中文版和国际版：微博的中文版和国际版的logo和内部页面风格、语言、结构布局包括交互方式也不同；考虑到国外用户的使用，软件的语言默认为英文，固然还支持各类语言版本，能够根据所需在设置中调整，另外国际版界面的布局使用的设计风格彻底遵照谷歌的设计规范，这就是环境贴切原则，以下图：

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

用户经常会误触到某些功能，咱们应该让用户能够方便的退出。这种状况下，咱们应该把“紧急出口”按钮作的明显一点，并且不要在退出时弹出额外的对话框。不少用户发送一条消息、总会有他突然意识到本身不对的地方，这个叫作临界效应；因此最好支持撤销/重作功能。 实例分析1： 邮箱的信息撤回功能，通常来讲，相同系统内（好比网易邮箱、QQ邮箱）的邮件撤回，只要对方没有打开，发出去的邮件都是能够撤回的，并无时间限制，用户也可以依此判断发出的信息是否已被对方阅读。

实例分析2： 谷歌日历内容的保存和删除也都带有撤回功能。

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

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

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

实例： 例如钉钉微信等聊天软件每一个模块的条目布局：钉钉中每一个模块的条目都有统一的“图标+文字信息”的结构样式，能让用户快速了解软件功能都是做什么的，这就是结构一致性的体现，以下图：

②色彩一致性：产品所使用的主要色调应该是统一的，而不是换一个页面颜色就不一样；

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

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

实例： 好比微信、支付宝、qq和淘宝等APP中左上角的返回操做：它们应用内返回上一级操做，都是经过顶部左侧的返回按钮进行的，这就是操做一致性的体现，以下图：

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

实例： 好比安卓版手机QQ信息列表的打开方式：它的信息都是列表式结构，无论你点击那一行条目，下一级界面都是由右往左滑出，点击顶部左上角的返回按钮会从左往右滑回，体验至关一致；这就是反馈一致性的体现，以下动图：

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

实例： 例如手机QQ几个关键界面的字体：下图红色框框起来的条目部分的文字，三个主界面不尽相同，可是，字体大小、颜色、布局的样式都同样，这样让整个APP视觉上看起来很舒服，这就是字体一致性，所以，咱们在作视觉设计的时候尽可能使用赞成风格的文字。

五、防错原则（Error prevention）

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

实例分析1： 当用户登陆时，在没有填写完手机号码和验证码前，底部的登陆按钮是置灰不可点击的，只有两项都填写完整底部的登陆按钮才会变为可点击状态，也就是变成绿色的，这就是为了防止用户犯更多错误，也是防错原则的一种体现，以下图：

实例分析2： 微信发朋圈动态时，点击返回按钮出现的提示弹窗：弹出框方式会增长不可逆操做的难度，当用户发一条动态一半的时候，由于误操做或者其它退出当前状态的时候，使用弹窗是个不错的选择，由于用户这个操做会让以前辛苦编辑的内容删除找不回，想要再发只能从头开始，对用户形成损失比较大；这就是防错原则的另一种体现，以下图：

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

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

实例： 好记性不如烂笔头。尽量减小用户回忆负担，把须要记忆的内容摆上台面。动做和选项应该是可见的，不该该让用户记住操做路径和目标位置。

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

这个原则就是告诉咱们每一个产品针对的用户不多是全部用户，都会有本身的适用人群，咱们须要针对主要的用户去设计，而不能仅仅为了一小部分用户进行极端设计，知足大部分用户的使用需求才是最重要。中级用户的数量远高于初级和高级用户数。为大多数用户设计，不要低估，也不可轻视，保持灵活高效，为大多数用户设计，兼容少部分特殊用户。汽车油门—新手用户经常看不见，并且对于高手来讲能够经过它快速与汽车互动。这样的系统能够同时知足有经验和无经验的用户。容许用户定制经常使用功能。

实例： 最多见的应用就是手机界面的编辑应用功能，能够根据自身喜爱自定义的，包括经常使用应用分组、排序、删除、命名等等；这样用户能够根据本身的我的兴趣定制本身适合的应用分布方式，这就叫作用户定制经常使用功能，也就是灵活高效原则的一种体现。还有QQ里会出现最近用的表情做为快捷回复，搜狗输入法里会优先显示你常打的关键词等。

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

对话中的内容应该去除不相关的信息或几乎不须要的信息。任何不相关的信息都会让本来重要的信息更难被用户察觉。

实例： 互联网用户浏览网页的动做不是读，不是看，而是扫。易扫，意味着突出重点，弱化和剔除无关信息。

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

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

实例： 好比表单填写，当用户输入正确的时候，输入框后边会有绿色的对勾圆圈，提示用户输入正确，能够进入下一步操做了，而当用户输入错误的时候，输入框会变为红色而且在输入框右侧出现红色字的错误提示，这样让用户很清楚的知道用户输入错误以及错误的缘由，这样用户就知道怎么修改了，这也是容错原则的一种体现，以下图：

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

帮助性提示最好的方式是：一、无需提示；二、一次性提示；三、常驻提示；4；帮助文档。

实例分析1： 对用户容易产生困惑的敏感信息进行提醒。

实例分析2： 即便系统不适用帮助文档是最好的，但咱们也应该提供一份帮助文档。任何帮助信息都应该能够方便地搜索到，以用户的任务为核心，列出相应的步骤，但文字不要太多。好比一些经常使用的大型软件：在顶部状态栏上都有有一个“帮助”的入口，也体现了帮助文档的必要性，因此，无论是什么样的产品都要给用户提供一个帮助的入口，用来解决用户操做过程当中遇到的问题，以下图：