交互设计原则

947 阅读10分钟

尼尔森十大交互设计原则

1、状态可见原则(Visibility of system status )

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

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

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

2:环境贴切原则(Match between system and the real world)

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

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

实例分析2: 比如新浪微博的中文版和国际版:微博的中文版和国际版的logo和内部页面风格、语言、结构布局包括交互方式也不一样;考虑到国外用户的使用,软件的语言默认为英文,当然还支持各种语言版本,可以根据所需在设置中调整,另外国际版界面的布局使用的设计风格完全遵守谷歌的设计规范,这就是环境贴切原则,如下图:

3、用户可控原则(User control and freedom)

用户常常会误触到某些功能,我们应该让用户可以方便的退出。这种情况下,我们应该把“紧急出口”按钮做的明显一点,而且不要在退出时弹出额外的对话框。很多用户发送一条消息、总会有他忽然意识到自己不对的地方,这个叫做临界效应;所以最好支持撤销/重做功能。 实例分析1: 邮箱的信息撤回功能,一般来说,相同系统内(比如网易邮箱、QQ邮箱)的邮件撤回,只要对方没有打开,发出去的邮件都是可以撤回的,并没有时间限制,用户也能够依此判断发出的信息是否已被对方阅读。

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

4、一致性原则(Consistency and standards)

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

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

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

②色彩一致性:产品所使用的主要色调应该是统一的,而不是换一个页面颜色就不同;

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

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

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

④反馈一致性:用户在操作按钮或者条目的时候,点击的反馈效果应该是一致的;

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

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

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

5、防错原则(Error prevention)

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

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

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

6、易取原则(Recognition rather than recall)

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

实例: 好记性不如烂笔头。尽可能减少用户回忆负担,把需要记忆的内容摆上台面。动作和选项应该是可见的,不应该让用户记住操作路径和目标位置。

7、灵活高效原则(Flexibility and efficiency of use)

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

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

8、优美且简约原则(Aesthetic and minimalist design)

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

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

9、容错原则(Help users recognize, diagnose, and recover from errors)

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

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

10、人性化帮助原则(Help and documentation)

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

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

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