在很多案例中,带您学习经典的尼尔森十大互动设计原则
浏览:462 时间:2022-4-20

Jakob Nielsen(Jacob· Nielsen)的十大互动设计原则。它们被称为“启发式”,因为它们是广泛的经验法则而不是具体的可用性指南。因此,我们无法将其提升到标准,但应该学习经验,然后将其与现实世界的设计结合使用。接下来,作者用一些具体的例子深入分析了尼尔森十大交互设计原则在设计中的应用。

I.雅各布尼尔森简介(Jacob·尼尔森)

雅各布尼尔森(Jacob·尼尔森)是博士。在哥本哈根丹麦技术大学的人机交互。他拥有79项美国专利,主要涉及使互联网更易于使用的方法。 2000年6月,尼尔森入选斯堪的纳维亚互动媒体名人堂。 2006年4月,他被纳入美国计算机协会人机交互研究所,并被授予人机交互实践终身成就奖。他还被纽约时报称为“网络可用性大师”,被Internet Magazine称为“Easy King”。

2.深入分析尼尔森十大互动设计原则

原则1:系统状态的可见性

系统应该让用户一眼就能知道现在发生了什么,也就是说,让用户快速了解他所处的状态,了解过去,目前的目标和未来。一般方法是给用户正确的时间。适当的反馈可防止用户使用错误。

案例1:

例如,今天标题的下拉刷新功能:标题页面的刷新功能使用下拉刷新交互模式。当用户下拉页面时,当用户释放页面中间时,页面状态栏和内容区域中间会出现“新年快乐”提示。将出现一个动态提示“推荐”,并在加载过程中出现文本提示“今日头条推荐引擎有8个更新”。这一系列技巧就是我们所说的动态可见性原理,如下所示:

案例2:

例如,Anxin记得在加班时注意并取消循环功能:当用户点击关注按钮时,页面中间会出现“跟随成功”的提示,并在停留2S后消失。与此类似,操作后的提示也是一种状态可见原理,如下图所示:

原则2:系统与现实世界的匹配

软件系统应使用用户熟悉的语言,文本,语句或其他熟悉的概念,而不是系统语言。软件中的信息应尽可能接近现实世界,使信息更自然,逻辑上更容易被用户理解。

案例1:

例如,计算机的软件界面设计:现在我们手机中的计算器软件设计界面与我们实际使用的计算器的风格基本相似。下图的左侧是我们实际使用的计算器。第二个和第三个是锤子手机和Apple X自己的计算器软件的接口。它非常相似,因此设计可以使用户快速入门并且易于操作。因为现实生活中的用户已经熟悉计算器的使用,这就是环境合规的原则。

案例2:

例如,新浪微博Android的中文版和国际版:微博的中文和国际版本的徽标和内部页面样式,语言和结构布局包括不同的交互方法。考虑到使用外国用户,软件的语言默认为英语,当然支持各种语言版本,可根据需要在设置中进行调整。此外,国际版界面的布局采用的设计风格完全符合谷歌的设计规范,这是环境相关的原则。见下图:

原则3:用户控制和自由

用户经常会错误地触摸某些功能,我们应该让用户轻松退出。在这种情况下,我们应该使“紧急退出”按钮更加明显,并且在退出时不会弹出额外的对话框。许多用户发送消息,总会有一个地方突然意识到他不对。这称为关键效果,因此最好支持撤消/重做功能。

案例1:

例如,微信聊天中的退出功能:当两个人在微信上聊天时,我发了一条消息或表情,突然觉得不合适。我可以长按此消息或表达式,选择在出现的选择框中退出,然后重新编辑传输,以避免误解消息并可能给对方或我自己造成麻烦。这是用户可控制的原理,见下图:

案例2:

例如,Google照片会在删除照片后删除照片:使用Google照片时,我们会对照片执行某些操作,例如删除照片。当我在Google相册中删除照片时,它会在底部显示一个提示框,并且框后面会有一个撤销提示,这也是用户可控制原则的体现。见下图:

原则4:一致性和标准

对于用户,相同的文本,状态和按钮应按照常见的平台约定触发相同的操作。也就是说,相同的术语,功能和操作是一致的。软件产品的一致性包括以下五个方面:

1.结构一致性

保持类似的结构,新的结构变化将允许用户思考,而规则的顺序可以减少用户的思维负担。

情况下:

例如,微信每个模块的布局:微信中的每个模块都有统一的“图标+文字信息”结构样式,让用户快速了解朋友圈,扫一扫,摇一摇,看一看,搜索一下,附近的人,漂流瓶,购物,游戏和小程序等,这是结构一致性的体现,如下图所示:

2.颜色一致性

产品中使用的主色调应该是均匀的,而不是改变页面,颜色会有所不同。

情况下:

例如,网易云音乐的颜色:网易云音乐图标的颜色和界面的主色都是红色的,有些标签和强调的文字颜色都是红色。除了图片的有效信息外,整个界面还以灰色,白色和红色显示。界面保持良好的一致性。这是颜色一致性的原则,如下所示:

3.运营一致性

它仍然可以保持用户对原始产品的了解,并在产品更新时降低用户的学习成本。

情况下:

例如,在Android版的微信,支付宝和Nail APP中,返回操作的左上角:他们在三个Android版本的应用程序中返回上一级操作,都是通过左上角按钮进行的​​,当然,通过Android物理的返回键,这是操作一致性的体现,如下图所示:

4.反馈一致性

当用户操作按钮或项目时,点击的反馈效果应该相同。

情况下:

例如,移动QQ信息列表的Android版本打开:它的信息是一个列表结构,无论你点击哪一行,从右到左刷下一级界面,点击左上角的后退按钮角落将被拉回右侧,体验相当一致。这是反馈一致性的体现,如下:

5.文本一致性

产品呈现给用户的尺寸,样式,颜色,布局等应该是一致的。

情况下:

例如,微信的几个关键界面的字体:下图,我用红色框起的条目部分的文字,三个主要界面不同,但字体大小,颜色和布局样式是相同的,以便可以在视觉上查看整个APP。这很舒服,这是字体的一致性。因此,我们尝试在进行视觉设计时使用相同的文本样式。

原则5:防止错误(

设计窗口比设置好错误提醒更好的方法是在发生此错误之前避免它。它可以帮助用户排除一些容易出错的情况,或者在用户提交之前给他一个确认选项。这里,重要的是要注意,当用户操作具有破坏性效果的功能时,会提示防止用户产生无法修复的错误。

案例1:

例如,Android版本的登录操作:当用户登录时,底部的登录按钮显示为灰色,在填写手机号码和密码之前无法点击。仅填写其中两个,并且底部的登录按钮已完成。将变为可点击,即蓝色。这是为了防止用户犯更多错误,这也反映了错误预防原则,如下所示:

案例2:

例如,当Android版的微信发送一个朋友圈时,单击后退按钮上的按钮弹出窗口:弹出框方法会增加不可逆操作的难度。当用户发送动态的一半时,由于误操作或其他退出当前状态,使用弹出窗口是一个不错的选择。因为用户的操作会使内容编辑之前的辛苦工作无法删除,并且想重新发布只能从头开始,给用户造成的损失比较大。这是错误预防原则的另一种表现形式,如下所示:

原则6:承认而不是回忆

通过可视化组件,按钮和选项来减少用户的内存负载。用户无需记住每个对话框中的信息。应该可以看到软件使用指南,并在适当时再次查看。

案例1:

例如,在Google相册中,删除照片操作:使用类似垃圾桶的“图标”来删除该功能,这对用户有一定的认知负荷,并且用户没有后果和后果点击“删除”。明确。因此,删除后必须有弹出提示。此弹出窗口清楚地说明了删除的影响,后续帮助说明以及操作选项。弹出框的外观非常好,可以减少用户前后的内存。这是易于遵循原则的体现,如下所示:

案例2:

例如,更新了Android版iQiyi之后,新功能指南:更新应用程序后,当用户触发这些功能时,会出现以下类型的掩码类型提示,提示用户所在的功能是和功能。 。这种做法将出现在许多应用程序中,这也反映了易于访问的原则,请参见下图:

原则7:灵活性和使用效率

汽车节流阀通常对新手用户不可见,对于主人来说,他们可以快速地与汽车互动。这样的系统可以满足有经验和没有经验的用户。允许用户自定义常用功能。

案例1:

例如,Android版支付宝的编辑应用功能:支付宝主页的应用可以根据自己的喜好进行定制,包括定义常用应用,排序,删除,添加等。通过这种方式,用户可以根据自己的个人兴趣定制自己的应用程序分发。这称为用户自定义功能,这是一种灵活高效的原则,如下所示:

案例2:

例如,Android版QQ聊天常用表达模块:Android版QQ聊天界面表情符号弹出窗口将有一个“通用表达”模块,它分类个人的常用频率或最常用的表达方式。当用户使用它时,他们可以快速找到他们喜欢或常用的表达方式,提高聊天效率,并且体验得非常好。这也是灵活高效原则的体现,如下所示:

原则8:审美和简约设计

会话内容应删除不相关或几乎不需要的信息。任何不相关的信息将使得用户更难以感知原始重要信息。

案例1:

Apple的手机附带的软件(iOS11设计规范):在新版Apple手机自带的字体标题中放大,界面设计风格简洁。在Apple附带的音乐软件中,段落中标题和文本之间的区别是显而易见的。标题显然很大,身体部分相对较小。这是美丽简约原则的体现,如下图所示:

案例2:

例如,Android版的网易云音乐和QQ音乐播放页面:网易云音乐和QQ音乐播放界面,从上面的视觉和功能布局都相当不错。美观简洁,功能清晰,用户体验好,它也是一种美观简单的原理,如下图所示:

“帮助用户识别,诊断并从错误中恢复”

错误消息应使用简明文本(不要使用代码),指出错误是什么,并提供解决方案建议。也就是说,如何为用户犯错误时犯错误的用户提供及时正确的帮助?也就是说,为了帮助用户识别错误,分析错误原因,然后帮助用户返回正确的路径。如果您真的无法帮助用户从错误中恢复,请尝试帮助用户最大限度地减少用户的损失。

案例1:

例如,网易邮箱PC的注册界面:当用户在网易163计算机上注册邮箱时,不仅会在输入错误发生时出现错误提示,而且会给出相应的建议以帮助用户进行正确的选择,从而避免用户出现更多。大错误和提高注册效率,这是一个非常好的用户体验和容错原则的反映,如下所示:

案例2:

例如,Twitter注册页面上的错误消息:注册Twitter帐户时,第一步是输入姓名和手机号码。当用户输入正确的一个时,输入框后面会出现一个绿色的复选标记圆圈,提示用户输入正确的圆圈。下一步是。当用户输入错误时,输入框将变为红色,并在下方显示红字错误消息,以便用户可以清楚地知道用户输入错误和错误原因,以便用户知道如何修改它,这也是容错的。该原理的一个实施例,如下所示:

原则10:帮助和文档

即使系统不使用帮助文档是最好的,我们也应该提供帮助文件。任何帮助信息都应该易于搜索,以用户的任务为核心,以及相应的步骤,但不要过多的文本。

案例1:

例如,淘宝APP和APP登录页面的帮助门户:有必要在重要功能的入口处提供相应的帮助条目,以解决用户在操作功能期间遇到问题或反馈问题的问题,并且不要让用户当你遇到问题时,你不知道该怎么做。见下图:

案例2:

例如,mac上的一些流行的大型软件:原型工具Axure RP 8软件,图像编辑软件Photshop CC和Mac上的Safari浏览器,顶部状态栏上有一个“帮助”条目,这也反映了帮助文档。必要性。因此,无论何种产品,都应该为用户提供帮助,以解决用户操作过程中遇到的问题,如下图所示:

总结

以上是我对雅各布尼尔森(Jacob·尼尔森)十大互动设计原则的理解,并学到了很多设计经验和技巧,希望对大家有所帮助。