UI交互设计教程分享：提高界面交互体验的“葵花宝典”

​本次分享的是在界面设计中最长实用也最容易被忽略的十个原则，就是尼尔森十大可用性设计原则，这是十分基础且重要的原则。原则是死的，如何正确的结合到实际运用中才是关键。接下来我会通过对每一个原则的理解和现在移动端产品和结合进行分析，希望可以更深入的记住他们。

什么是尼尔森

尼尔森（Jakob Nielsen）是一位人机交互学博士，于1995年1月1日发表了「十大可用性原则」。1995年以来，他通过自己的 Alertbox 邮件列表以及useit.com 网站，向成千上万的 Web 设计师传授 Web 易用性方面的知识，尽管他的一些观点可能带来争议，至少在 Web 设计师眼中，他是 Web 易用性领域的顶尖领袖。

十大原则解析与案例

一、状态可见原则

用户在手机上的任何操作，上下滑动刷新，点击跳转，页面都应该即时给出馈。“即时”是指，页面响应时间小于用户能忍受的等待的间。

案例1_改变颜色状态：

如下图微信中点赞的样式，手指触碰到按钮时，颜色加深，通过改变颜色告知用户目前按钮的状态已被激活。

案例2_形状改变：

如下图网易云音乐中，当我们点击添加关注时，界面会中关注标签的状态会及时更新为“对号”展示给用户，通过点击后的形状的改变告知用户操作已完成。这种状态可见性可以清晰的让用户感受到页面即时给出的反馈。

案例3_添加动效：

如下图，当我们下拉界面刷新时，界面上方会出现动画加载的效果。这种状态可见性是最明显的，可以清晰的让用户感受到页面即时给出的反馈。

上面是关于状态可见性原则在产品中的常见案例，当然除了这三个还有很多，例如点击列表时，界面横滑时等。我们在设计实际界面中，一定要谨记设计出对应的可见状态，避免用户使用时以为操作无效。

二、环境贴切原则

简单的说就是产品设计符合真实世界中用户的使用习惯和思考逻辑，尽可能贴近用户所在的环境(年龄、学历、文化、时代背景)，而不要使用第二世界的语言，应该使用易懂和约定俗成的表达。

案例1_产品风格定位：

如下图DaDaBaby和TutorABC同是学英语的产品，由于产品所对应用户的年龄，学历，文化不同，界面的风格也会发生改变。DaDaBaby是针对幼儿学英语，所以界面风格活泼可爱，颜色鲜艳；而TutorABC是针对成年人学英语，界面简洁，严肃。这就是产品风格的环境贴切。

案例2_产品换肤：

如下图优酷为视频类产品和饿了么为外卖类产品，虽然他们的定位不同，但是在世界杯期间，都替换了界面的皮肤，例如优酷底部标签栏的图标，饿了么中间分类入口的图标。这就是环境贴切原则的体现。在特殊的时间里我们也可以通过改变界面的皮肤增加产品与当下环境的贴切性。

上面是关于环境贴切原则的案例，我们在设计界面时必须知道产品的使用人群，产品的类型，例如商务类产品和娱乐类产设计出来就会截然不同。这是产品风格的环境贴切。除了产品大方向要贴切，我们也可通过一些特殊的节日改变产品的皮肤，让用户在短时间内加强和产品的共通性。

三、撤销重做原则

给用户更多自主操作权，当用户在使用产品过程中产生错误的操作时，应提供用户更多的解决方案，比如撤销或重做等功能。

案例：

如下图微信中我们需要考虑到用户的出错的情况，例如在用微信拍照时，如果效果不够理想就可选择左侧的撤销按钮，在未发送情况下进行重新拍照；另外一种情况就是发送后也可以通过长按当前发送的图片，在出现的功能菜单中选择撤回。

上面是撤回重做原则的案例，我们在做界面时要根据不同阶段以及产品给用户添加该功能，如果是一次性考试类型的产品就不适合加入该功能，需要用户填写时更加小心谨慎。

四、一致性原则

产品的功能操作、模块样式、页面布局、信息提示、颜色运用的一致性，避免用户突然跳转后感觉在另一个产品中的错觉，影响用户对产品的整体体验。

案例1：主色调一致

如下图鲨鱼记账，从产品的LOGO到闪屏界面再到里面的主页界面、图标、按钮等颜色都用的是统一的黄色作为主色，加深用户对品牌色的记忆。

案例2：交互一致

产品或者系统内部的交互方式应该一致，这会让用户对产品产生信赖感和控制感。例如下图微信会遵循在不同系统中的交互方式，iOS系统中删除列表的交互方式是向左滑动。而在Android系统中则是长按需要删除的列表。这就是遵照已有的系统交互方式交互的一致性。

一致性原则除了上面说的还有语言的统一，功能的统一等等。对于我们来说，设计上的统一是必须要做的，但是往往我们在追求视觉效果的时候却忽略了这些细节的问题。

五、防错原则

比出现错误信息提示更好的是更用心的设计防止这类问题发生。在用户选择动作发生之前，就要防止用户容易混淆或者错误的选择。对产品进行不同的操作、重组或特别安排，防止用户出错。

案例：

如下图马蜂窝的选择日期功能，为了防止用户错误的选择错误，把当天日期之前的日期都设定为不可选择。再比如很多表单页，当内容信息未填写完时，按钮为灰色不可点击的样式。避免用户在未填写完之前就点击提交按钮。

六、易取原则

尽量减少用户对操作目标的记忆负荷，动作和选项都应该是可见的。用户不必记住一个页面到另一个页面的信息。系统的使用说明应该是可见的或者是容易获取的。

案例：

为了让大家更好的理解什么是易取原则，我更改了京东的弹窗界面，（如下图）京东到家为发现新版本的弹窗提示，在弹窗描述中告知用户需要通过去App Store进行操作更新，点击确定后返回首页。导致用户需要记住路径和方法，然后再去操作，如果流程复杂，用户需要反复切换确认。​

接下来我们在看看正确的姿势是什么。（如下图）当选择立即下载时会自己跳到App Store的更新界面，只要点击更新即可，不需要用户记录整个过程。当更新完成后，App Store中的更新按钮变成打开按钮，可以直接打开京东到家的首页，这个流程不需要用户提取任何记忆。

七、灵活高效原则

中级用户的数量远高于初级和高级用户数。为大多数用户设计，不要低估，也不可轻视，保持灵活高效。

案例：

这个原则就是告诉我们每个产品针对的用户不可能是所有用户，都会有自己的适用人群，我们需要针对主要的用户去设计，而不能仅仅为了一小部分用户进行极端设计，满足大部分用户的使用需求才是最重要。

八、易扫原则

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

案例：

如下图网易新闻的详情页，很多设计师对于这类纯文字的界面总是不削一顾，感觉没有什么难度，也不需要什么设计，那么我在左侧放置了一篇无设计，只是文字排列的一个界面。右侧则是网易新闻的设计界面，可以明显看出，左侧的界面找不到重点内容和标题，没有主次。而右侧的界面通过文字变化，段与段的间距等设计手段让用户在读文时可以很容易的扫视通篇的主要内容。

九、容错原则

帮助用户从错误中恢复，将损失降到最低。如果无法自动挽回，则提供详尽的说明文字和指导方向，而非代码，比如404。

案例：

为了避免造成用户的损失，我们需要在重要事件中给出合理的文字说明和指导，比如有道云笔记中告诉用户“文件删除后将无法恢复”，就给用户一次思考的时间，避免一时误删，造成损失。iPhone自带的备忘录给用户的容错空间更大，删除后可以在30天内找回。另外，对于容错程度的大小还是取决于产品用户群的需要，并不是越大越好。

十、人性化帮助原则

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

案例：

如下图对于初次使用产品的用户来说，可能不知道表单里面需要填写什么，如果没有帮助性文档的提示，很容易出现错误。因此我们可以增加一些填写前的文档帮助，如每日优鲜的截图。还有在我们刚下次一款产品时，如DaDaBaby的截图，会提供帮助界面，帮用户在最短的时间内了解产品的主要功能及用法。

如果在使用产品时存在一些使用户困惑的敏感信息时，我们需要对其进行提醒说明，甚至要做出教学类的界面进行辅助。

总结

十大原则很容易记住，但我们的目的绝对不是简单地记住它，我们要在实际设计中有效的运用才是关键，无论是产品、交互还是设计，在设计产品方面如果拿捏不准都可以回想一下这是个原则，也许会有很大的帮助。

编辑：千锋UI设计

来源：UI中国