交互设计师必懂的尼尔森十大原则

开通VIP,畅享免费电子书等14项超值服

首页

好书

留言交流

下载APP

联系客服

2020.08.29

来源:MicroUX

尼尔森JakobNielsen

尼尔森是一位人机交互学博士,于1995年1月1日发表了「十大可用性原则」。1995年以来,他通过自己的Alertbox邮件列表以及useit.com网站,向成千上万的Web设计师和App设计师阐述了易用性方面的知识,尽管他的一些观点可能带来争议,至少在互联网设计师眼中,他是易用性领域的顶尖领袖。2006年4月,并被纳入美国计算机学会人机交互学院,被赋予人机交互实践的终身成就奖。他还被纽约时报称为“Web易用性大师”,被InternetMagazine称为“易用之王”。

十大可用性原则的内容:

1、状态可见原则

2、环境贴切原则

3、可控原则

4、一致性原则

5、防错原则

6、协助用户记忆原则

7、灵活高效原则

8、审美和简约原则

9、容错原则

10、人性化帮助原则

一、状态可见原则

例如:刷新提示、新页面加载提示、支付提示、下载提示。

对用户操作的适当反馈是用户界面设计的最基本准则。让用户了解当前状态、位置、是否成功、进度如何,减少不确定性;并引导他们在正确的方向上交互,而不是浪费精力在重复操作上。反馈有:

就拿小说类批量订阅列表来说,起点通过明显的线面和颜色区分选中和未选中的章节;而长佩我买的时候是需要反应一下:免费不可选中是浅灰色、未选中是深灰色,选中是绿色……但是初始状态时深灰色看起来像是选中??

进度通常有页面加载进度、下载进度、视频播放进度等

因为网络空间中用户无法像物理空间那样感知到自己的位置,所以我们需要在视觉上进行提醒,以免用户迷失。

比如标签栏、导航栏通过选中状态来定位当前所在页面,阅读、看视频、听音乐时系统会记录当前的位置,下次打开后继续。

反馈可以通过元素的颜色位置、文字、声音和震动,甚至动效去表达变化。

比如京东,通过产品图缩小-加入购物车的动效来反馈“商品已加入购物车”,直观形象。

案例一

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

案例二

二、环境贴切原则

环境贴切原则简单来讲就是让功能操作符合用户的日常使用场景,遵循现实世界的惯

这里的语言不仅仅包括文案层面的语言,还包括产品的设计语言(图形、配色和风格)。

产品使用的语言应该使目标用户能够清晰理解的。如果用户不能理解,他们会感到被忽视和受挫败,许多人将选择其他产品完成目标。

模仿现实世界的产品或者使用映射,能够利用人们现有的知识,降低学习成本,使他们轻松快速的理解界面。

比如计算器的软件界面设计基本上跟我们现实中使用的样式差不多,下图左一是现实中是使用的计算器,左二、三依次为锤子手机和苹果X自带计算器软件的界面,真的是很相似,这样设计能让用户很快上手,易于操作,因为现实生活中用户已经很熟悉计算器的使用方法了,这就是环境贴切原则:

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

三、可控原则

用户要能对当前的情况很好地了解和掌控,足够自由。例如:iPhone的Home键,音乐播放的控制,APP页面跳转的控制等等。这种情况下,我们应该把“紧急出口”按钮做的明显一点,而且不要在退出时弹出额外的对话框。很多用户发送一条消息、总会有他忽然意识到自己不对的地方,这个叫做临界效应;所以最好支持撤销/重做功能。

谷歌相册删除照片之后的撤销功能:在使用谷歌相册的时候,我们会对照片做一些操作,比如照片的删除,当我在谷歌相册中删除一张照片的时候,它会在底部出现一条提示框,框内后边就会出现撤销的提示,这也是可控原则的体现

四、一致性原则

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

结构一致性

色彩一致性

产品所使用的主要色调应该是统一的,而不是换一个页面颜色就不同;例如网易云音乐的颜色:网易云音乐的图标颜色与界面的主色均为红色,包括其中一些标签和强调的文字颜色都是红色,整个界面除了图片的有效信息外,都通过灰、白、红色来呈现,界面保持了很好的一致性

操作一致性

反馈一致性

文字一致性

五、防错&防呆原则

比出现错误信息提示更好的是更用心的设计防止这类问题发生。在用户选择动作发生之前,就要防止用户容易混淆或者错误的选择。特别要注意在用户操作具有毁灭性效果的功能时要有提示,防止用户犯不可挽回的错误。

六、协助用户记忆原则

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

比如谷歌相册中的删除照片操作:用一个类似垃圾桶的“图标”标识删除功能,对于用户来讲是有一定的认知负荷的,且点击“删除”之后用户对于造成的后果及影响也不清楚,因此,删除之后出现弹窗提示很有必要,此弹窗清除的写明了删除之后的影响、后续的帮助说明以及操作的选项,弹出框的出现很好的减少了用户前后的记忆负荷,这就是易取原则的体现,如下图:

比如安卓版爱奇艺更新后的新功能引导:更新完APP之后,当用户触发到这些功能时,会出现下图类型的遮罩类的提示,这些提示告诉用户功能所在的地方以及功能的作用;这种做法在很多APP中都会出现,这也是易取原则的一种体现,看下图:

七、灵活高效原则

好的产品需要同时兼顾新用户和资深用户的需求。对新用户来说,需要功能明确、清晰,对于老用户需要快捷高效使用高频功能。不可迎合某一种用户,把不必要的信息占据重要部分。

1.提供快捷入口

在首页放置常用功能,或者提供自定义入口,比如猿题库的自定义科目

2.允许用户重复操作

对用户频繁使用的功能,提供重复操作入口或者模板。比如美团外卖,可以直接选择再来一单

3.提供默认选项通过提供系统默认选项,而减少用户多余的操作。比如美团、携程等当地服务类产品,会默认选择当前定位的城市;购物会选择默认收货地址等

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

八、:审美和简约原则

对话中不应该包含无关紧要的信息。在段落中每增加一个单位的重要信息,意味着要减少相应的弱化一些其他信息,无论交互还是视觉都应该注意这条原则。

在新版本的苹果手机中自带的软件中标题都属于字体放大,界面简洁的设计风格;在自带音乐软件中,段落中的标题和正文区别是很明显的,标题明显很大,而正文部分相对较小

九、容错原则

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

例如Twitter注册页面的错误提示:用户在注册Twitter账号时,第一步要输入名字和手机号码,当用户输入正确的时候,输入框后边会有绿色的对勾圆圈,提示用户输入正确,可以进入下一步操作了,而当用户输入错误的时候,输入框会变为红色并且在下方出现红色字的错误提示,这样让用户很清楚的知道用户输入错误以及错误的原因,这样用户就知道怎么修改了

十、人性化帮助原则

即使系统不适用帮助文档是最好的,但我们也应该提供一份帮助文档。任何帮助信息都应该可以方便地搜索到,以用户的任务为核心,列出相应的步骤,但文字不要太多。

比如mac上一些常用的大型软件:原型制作工具AxureRP8软件、图像编辑软件PhotshopCC以及mac上的Safari浏览器,在顶部状态栏上都有有一个“帮助”的入口,也体现了帮助文档的必要性,所以,不管是什么样的产品都要给用户提供一个帮助的入口,用来解决用户操作过程中遇到的问题

THE END
1.设计师灵感来源!9个经典的APP界面设计案例三、9个经典的APP界面设计案例 了解了APP界面设计的工具,接下来给大家分享8个优秀的APP设计案例。如果想要使用案例对应的模板,点击进入这个资源社区:https://www.mockplus.cn/example/rp,就能一键复用设计模板啦! 1、NFT艺术平台APP设计 这是一套NFT艺术平台的UI模板,界面风格简约,按钮主要使用了渐变的设计,突出未来https://www.douban.com/note/867079159/
2.生产流程图设计模板软件零代码企业数字化知识站综上所述,Lucidchart作为一款功能强大、操作简便的生产流程图设计模板软件,在提高生产效率、减少错误、优化资源管理等方面具有显著优势。无论是其直观的界面、丰富的模板库、强大的协作功能,还是其数据导入与导出、自动化功能、集成第三方工具、权限管理与安全性、用户支持与培训资源、定制化解决方案、案例分析与成功故事、https://www.jiandaoyun.com/blog/article/459297/
3.AltiumDesigner20电路设计与仿真从入门到精通Altium Designer 20作为新一代的板卡级设计软件,以Windows的界面风格为主,同时,Altium Designer 20独一无二的DXP技术集成平台也为设计系统提供了所有工具和编辑器的兼容环境,友好的界面环境及智能化的性能为电路设计者提供了优质的服务。 Altium Designer 20有什么特点?如何安装Altium Designer 20?PCB的总体设计流程有哪https://www.epubit.com/bookDetails?id=UBbf365ac27387
4.36个最优App背景设计素材和案例分享所以,设计师背景设计的过程中,也需考虑产品或软件特色,选择一种合适的背景设计风格,烘托气氛,优化用户体验。 当然,也可适时添加一定的视觉特效(例如这个案例里添加的烟雾特效),增强App界面的视觉魅力,提升App用户的留存率和活跃度。 2.Mobile Phone Background https://maimai.cn/article/detail?fid=1384919521&efid=hev73ISeHIOX6Gp-xJdZvA
5.数据加密原理分析及解密工具开发在一起案件中的应用4.2设计解密工具的窗口界面 在本案中,笔者选用C#作为编程语言,选择Microsoft Visual Studio作为开发工具。Visual Studio可以很方便地进行窗口应用程序的开发,其特点是运行速度快,具有可视化的界面编辑器,并且与Windows的兼容性比其他开发工具要好。解密工具命名为TFCrack。 https://jzx.jxga.edu.cn/news-show-1122.html
6.软件设计专项方案案例.doc软件设计专项方案案例.doc 原文免费试下载 想预览更多内容,点击免费在线预览全文 免费在线预览全文 软件设计方案 用户界面设计规范 用户界面:又称人机界面,实现用户和计算机之间通信,以控制计算机或进行用户和计算机之间数据传送系统部件。 GUI:即图形用户界面,一个可视化用户界面,它使用图形界面替换正文界面。本系统坚持https://max.book118.com/html/2024/0417/7111152156006065.shtm
7.十大必备界面设计工具,让你的设计更出彩!Gui Design Studio是一款界面设计工具,适用于界面原型设计员和界面原型开发员使用。它可以帮助用户快速将产品构思文档化,并创建各种原型。该软件支持所有基于Windows平台下的软件,可以快速绘制个性化屏幕、窗口及控件。 除了基本的界面设计功能外,Gui Design Studio还拥有多种高级功能。例如,在画基于web形态的原型时,大多数https://app.zol.com.cn/jiqiao/69907.html
8.常用的软件设计开发工具有哪些?软件设计工具是指专门用于支持软件设计过程的应用程序或工具,它可以帮助软件开发人员在构造可行软件设计方案时减轻工作负担,并帮助他们提高软件质量。主要的设计工具类型包括建模工具,原型设计工具,图形设计工具,框架设计工具,模式设计工具,组件设计工具,文档设计工具和图形用户界面(GUI)设计工具等。 http://www.apppark.cn/mobile/news_t_42514.html
9.基于Java实现的绘图软件工具设计javacad软件基于Java实现的绘图软件工具设计 演示视频 基于Java设计的绘图工具 01. 题目要求 做一个简单的绘图工具,以CAD的方式操作,能放置直线、矩形、圆和文字,能选中图形,修改参数,如颜色等,能拖动图形和调整大小,可以保存和恢复。功能请参考视频演示。 要求上传: https://blog.csdn.net/newlw/article/details/126906934
10.《界面设计》复习资料19.Sketch自带根据官方规范设计的IOS和Material Design组件库。20.Sketch专门为网页、移动端设计提供优化和支持。21.Sketch是一款能同时满足交互和视觉设计需求的工具。22.使用Sketch自带的Symbol可以很容易地在高、低保真原型图中进行切换。23.Sketch 对于团队说是一款效率很高的设计工具,意味着能快速推进团队创意到具体方https://www.wjx.cn/xz/260641939.aspx
11.(精品)软件实习报告15篇1.3开发技术、环境与工具 技术:JSP、Java、JavaScript、jquery、ajax、HTML、CSS、struts、hibernate; 工具:MyEclipse、Tomcat、PS、Dreamweaver、notepad++。 2.软件设计 2.1系统架构 2.2关键模块流程 2.3数据库设计 2.4界面设计 采用当下流行的简约风格 登陆界面 https://www.unjs.com/fanwenku/500224.html
12.ui设计公司界面设计公司高端ui软件界面设计UIPower是国内高端ui设计公司,ui解决方案专家,在北京、上海、深圳均设有分公司。一直专注ui设计、软件界面设计、交互设计、界面设计、三维可视化、大数据可视化大屏等服务。https://www.uipower.com/index.html
13.Qt软件开发全周期的各阶段工具软件开发生命周期各阶段的所有基本工具:规划、设计、开发、测试和部署https://www.qt.io/zh-cn/
14.MasterGo莫高设计专业级在线 UI 设计工具,自动布局、素材填充等智能功能,让设计过程更简单,繁琐的操作不再成为障碍,让你更专注于设计细节。 开始了解界面设计 → “ MasterGo 的 UI 界面设计一贯保持较好的易用性、美观性,其功能覆盖涉及多个角色环节,是在线产品设计工具本土化的标杆。” https://www.mastergo.com/
15.测评10款交互流程图软件,第一款“按头”安利!交互流程图软件Pixso除了提供各种设计工具外,交互流程图软件Pixso还内置了海量免费资源设计素材、模板、案例。据数据显示,Pixso目前有3000+免费开源素材。其中,包括流程图模板、插画素材、矢量图标、3D图标以及emoji表情。 高保真的原型,让交互生动化 交互流程图软件Pixso向设计师提供了高保真的交互原型,无缝完成从设计到原https://pixso.cn/designskills/jiaohuliuchengturuanjian/
16.网站界面设计:7个优秀的网站UI视觉设计的作品案例—艾艺本文将透过这些网站案例,来聊一下优秀的网站UI视觉设计台前幕后的事情。 今天,艾艺搜集了几个Tubik Studio 内的设计师作品,它们是不同业务目标下的产物,这些UI设计作品从配色到动效,无疑都是相当惊艳的。今天,我们透过这些网站案例,来聊一下优秀的UI视觉设计台前幕后的事情。 https://www.adinnet.cn/bloginfo/2020_09/blog_5005.html
17.工具UI中国,前身为iconfans.com。是专业的界面设计师交流、学习/展示平台.同时也是UI设计师人才流动的集散地,会员均为一线UI设计师,覆盖主流互联网公司.我们希望借助互联网的力量打造国内最专业的UI设计平台,为UI设计师做最好的服务,提高UI设计行业价值!https://tool.ui.cn/
18.报表设计器界面功能介绍亿信华辰文档中心本文档为ABI版本的报表设计器界面功能介绍。2.报表设计器介绍2.1界面概览 报表设计器界面分为5大块:菜单栏、工具面板、参数面板区、报表设计区和属性面板。2.2菜单栏介绍 菜单栏包含设计器所有的管理功能。1)菜单项 菜单项中包括功能:文件 文件中包括功能:https://help.esensoft.com/doc-view-505.html