发布时间：2021-5-12 分类： 电商动态
Jakob Nielsen（Jacob· Nielsen）的十大互动设计原则。它们被称为“启发式”，因为它们是广泛的经验法则而不是具体的可用性指南。因此，我们无法将其提升到标准，但应该学习经验，然后将其与现实世界的设计结合使用。接下来，作者用一些具体的例子来深入分析尼尔森十大交互设计原则在设计中的用法〜
1.雅各布尼尔森简介（Jacob·尼尔森）：
雅各布尼尔森（Jacob·尼尔森）是博士。在哥本哈根丹麦技术大学的人机交互。他拥有79项美国专利，主要涉及使互联网更易于使用的方法。 2000年6月，尼尔森入选斯堪的纳维亚互动媒体名人堂，并于2006年4月被纳入美国计算机协会人机交互研究所，并被授予人机交互实践终身成就奖。他还被纽约时报称为“网络可用性大师”，被“互联网杂志”称为“易用之王”。
其次，深入分析了尼尔森十大互动设计原则：
原则1：系统状态的可见性
系统应该让用户一眼就能知道现在发生了什么，也就是说，让用户快速了解他所处的状态，了解过去，目前的目标和未来。一般方法是给用户正确的时间。适当的反馈可防止用户使用错误。
案例1：
例如，今天标题的下拉刷新功能：标题页面的刷新功能使用拉动式点击刷新交互模式。当用户下拉页面时，页面状态栏和内容区域中间会出现“新年快乐”的消息，当我发布时，在页面中间，会出现动态提示建议。加载完成后，列表中间会显示一条消息;今天的标题推荐引擎有8个更新”文字提示;这一系列技巧就是我们所说的动态可见性原理。如下图所示：
案例2：
例如，Anxin记得在加班时注意并取消圈功能：当用户点击注意按钮时，页面中间会出现“跟随成功”提示，并在停留2S后消失;同样，操作后的提示也是状态可见性的原则。一，如下图所示：
原则2：系统与现实世界的匹配
软件系统应使用用户熟悉的语言，文本，语句或其他熟悉的概念，而不是系统语言。软件中的信息应尽可能接近现实世界，使信息更自然，逻辑上更容易被用户理解。
案例1：
例如，计算机的软件界面设计：现在我们手机中的计算器软件设计界面与我们实际使用的计算器的风格基本相似。左下图是我们实际使用的计算器，第二个，三个锤子手机和Apple X自己的计算器软件之间的接口非常相似。这种设计允许用户快速入门并且易于操作，因为在现实生活中，用户已经熟悉计算器的使用，这是环境适当的原则：
案例2：
例如，新浪微博Android的中文版和国际版：微博标识的中文版和国际版，内页风格，语言和结构布局包括不同的交互方式;考虑到国外用户的使用，该软件的语言默认为英文，当然也支持各种语言版本，可根据需要在设置中进行调整，而国际版界面的布局风格完全在按照谷歌的设计规范，这是环境相关的原则，见下图：
原则3：用户控制和自由
用户经常会错误地触摸某些功能，我们应该让用户轻松退出。在这种情况下，我们应该使“紧急退出”按钮更加明显，并且在退出时不会弹出额外的对话框。许多用户发送消息，总有一个地方突然意识到他不对。这被称为临界效应;所以最好支持undo/redo功能。
案例1：
例如，微信聊天中的退出功能：当两个人在微信上聊天时，我发了一条消息或表情，突然觉得不合适，我可以长按此消息或表达，选择退出出现的选择框，然后重新编辑和发送，以避免误解消息一段时间，可能给对方或自己造成麻烦，这是用户可控制的原则，见下图：
案例2：
例如，Google相册会在删除照片后删除照片：使用Google相册时，我们会对照片执行某些操作，例如删除照片。当我在Google相册中删除照片时，它会在底部显示提示。 Box，框后面会有一个撤销提示，这也是用户可控原理的体现，见下图：
原则4：一致性和标准
对于用户，相同的文本，状态和按钮应按照常见的平台约定触发相同的操作;也就是说，相同的语言，功能和操作是一致的。软件产品的一致性包括以下五个方面：
（1）结构一致性：保持相似的结构，新的结构变化将允许用户思考，规则的顺序可以减少用户的思维负担;
情况下：
例如，微信每个模块的布局：微信中的每个模块都有统一的“图标+文字信息”结构，可以让用户快速了解朋友圈，扫视，摇动，看看，搜索，搜索，所有东西都是附近的人，漂流瓶，购物，游戏和小程序，这是结构一致性的体现，如下图所示：
（2）颜色一致性：产品中使用的主要色调应该是均匀的，而不是改变页面的颜色;
情况下：
例如，网易云音乐的颜色：网易云音乐的图标颜色和界面的主色都是红色的，有些标签和强调的文字颜色都是红色。除了图片的有效信息外，整个界面为灰色和白色。呈现红色，界面保持良好的一致性。这是颜色一致性的原则，如下所示：
（3）操作一致性：允许用户在产品更新时保持对原始产品的了解，降低产品的学习成本;
情况下：
例如，在Android版的微信，支付宝和Nail APP中，返回操作的左上角：他们在三个Android版本的应用程序中返回上一级操作，都是通过左上角按钮进行的，当然，通过Android物理的返回键，这是操作一致性的体现，如下图所示：
（4）反馈一致性：当用户操作按钮或项目时，点击的反馈效果应该是一致的;
情况下：
例如，Android版的手机QQ信息列表打开：它的信息是一个列表结构，无论你点击哪一行，界面的下一级从右向左滑动，点击左上角的后退按钮将左侧滑回右侧，体验非常一致;这是反馈一致性的体现，如下：
（5）文本一致性：产品中显示的文字的大小，样式，颜色，布局等应保持一致;
情况下：
例如，微信的几个关键界面的字体：下图，我用红色框起的条目部分的文字，三个主要界面不同，但字体大小，颜色和布局样式是相同的，以便可以在视觉上查看整个APP。这很舒服，这是字体的一致性，所以我们尝试在进行视觉设计时使用同意样式文本。
原则5：防止错误（
设计窗口比设置好错误提醒更好的方法是在发生此错误之前避免它。它可以帮助用户排除一些容易出错的情况，或者在用户提交之前给他一个确认选项。这里，重要的是要注意，当用户操作具有破坏性效果的功能时，会提示防止用户产生无法修复的错误。
案例1：
例如，Android版本的登录操作：当用户登录时，底部的登录按钮显示为灰色，在填写手机号码和密码之前无法点击。只有两个填写在登录按钮的底部。它将变为可点击和蓝色。这是为了防止用户犯更多错误。它也反映了错误预防原则，如下所示：
案例2：
例如，当Android版的微信是动态的时，点击后退按钮上的按钮弹出窗口：弹出方法会增加不可逆操作的难度。当用户发送动态的一半时，由于误操作或其他退出当前状态而使用它。弹出窗口是一个不错的选择，因为用户的操作将删除以前硬编辑的内容，并且只想从头开始重新发布，给用户造成很大的损失;这是错误预防原则的另一种表现形式。 ，如下图所示：
原则6：承认而不是回忆
通过可视化组件，按钮和选项来减少用户的内存负载。用户无需记住每个对话框中的信息。应该可以看到软件使用指南，并在适当时再次查看。
案例1：
例如，谷歌相册中的删除照片操作：使用垃圾般的“图标”删除功能，对于用户来说是一定的认知负荷，并在用户的后果点击“删除”后影响不明显，因此，删除后必须有弹出提示。此弹出窗口清除删除后的效果，后续帮助说明和操作选项。弹出框的外观非常好，以减少用户。在内存之前和之后，这是易于访问原则的体现，如下所示：
案例2：
例如，更新了Android版iQiyi之后，新功能指南：更新应用程序后，当用户触发这些功能时，会出现以下类型的掩码类型提示，提示用户所在的功能是和功能。这种做法将出现在许多应用程序中，这也反映了易于访问的原则，请参见下图：
原则7：灵活性和使用效率
汽车油门—新手用户往往是隐形的，而且掌握者可以通过它快速与汽车互动。这样的系统可以满足有经验和没有经验的用户。允许用户自定义常用功能。
案例1：
例如，Android版支付宝的编辑应用功能：支付宝主页的应用可以根据自己的喜好定制，包括定义常用应用，排序，删除，添加等，以便用户可以自定义适合的应用程序根据自己的个人兴趣。分配方法称为用户定制的通用功能，是灵活高效原则的体现，如下所示：
案例2：
例如，Android版QQ聊天常用表达模块：Android版QQ聊天界面表达式弹出窗口将有一个“常用表达”模块，它分类个人使用频率或最常用的表达方式，当用户用途当你可以快速找到自己喜欢的或常用的表达方式，提高聊天效率，体验非常好，这也是灵活高效原则的体现，如下图所示：
原则8：审美和简约设计
会话内容应删除不相关或几乎不需要的信息。任何不相关的信息将使得用户更难以感知原始重要信息。
案例1：
Apple自有软件（IOS11设计规范）：在新版Apple手机中，该软件的标题属于字体放大，界面设计风格简洁;和Apple自己的音乐软件，在段落中标题和文字之间的区别是显而易见的。标题显然很大，身体部分相对较小。这是优雅简洁原则的体现，如下所示：
案例2：
例如，Android版的网易云音乐和QQ音乐播放器页面：网易云音乐和QQ音乐APP音乐播放界面，从上面的视觉和功能布局都相当不错，美观简洁，功能中小学，用户体验是好;也是美丽而简单的原理的一个体现，如下图所示：
“帮助用户识别，诊断并从错误中恢复”
错误消息应使用简明文本（不要使用代码），指出错误是什么，并提供解决方案建议。也就是说，如何为用户犯错误时犯错误的用户提供及时正确的帮助？也就是说，为了帮助用户识别错误，分析错误原因，然后帮助用户返回正确的路径。如果您真的无法帮助用户从错误中恢复，请尝试帮助用户最大限度地减少用户的损失。
案例1：
例如，网易邮箱PC的注册界面：当用户在网易163计算机上注册邮箱时，不仅会在输入错误发生时出现错误提示，而且会给出相应的建议以帮助用户进行正确的选择，从而避免用户出现更多。大错误和提高注册效率，这是一个非常好的用户体验和容错原则的反映，如下所示：
案例2：
例如，Twitter注册页面上的错误消息：注册Twitter帐户时，第一步是输入姓名和手机号码。当用户输入正确的一个时，输入框后面会出现一个绿色的复选标记圆圈，提示用户输入正确的圆圈。下一步是，当用户输入错误时，输入框将变为红色，并且下方将出现红字错误，以便用户知道用户输入错误和错误原因，因此用户知道如何修改它。这也是容错原理的一个体现，如下所示：
原则10：帮助和文档
即使系统不适用帮助文档是最好的，我们也应该提供帮助文档。任何帮助信息都应该易于搜索，以用户的任务为核心，以及相应的步骤，但不要过多的文本。
案例1：
例如，淘宝APP和APP登录页面的帮助门户：有必要在重要功能的入口处提供相应的帮助条目，以解决用户在操作功能期间遇到问题或反馈问题的问题，并且不要让用户当你遇到问题时，你不知道该怎么做。见下图：
案例2：
例如，mac上的一些流行的大型软件：原型工具Axure RP 8软件，图像编辑软件Photshop CC和Mac浏览器浏览器，顶部状态栏上有一个“帮助”入口，这也体现了其必要性帮助文档，所以无论什么样的产品，都应该为用户提供帮助入口，以解决用户操作过程中遇到的问题，如下图所示：
三，总结
以上是我对雅各布尼尔森（Jacob·尼尔森）十大互动设计原则的理解，并学到了很多设计经验和技巧，希望对大家有所帮助。
最后，谢谢你的阅读，喜欢它，请喜欢它~~补充~~
参考文献：https://www.nngroup.com/articles/ten-usability-heuristics/
作者：熊猫利基，互动设计师，4年互联网产品经验，曾领导多项互联网产品设计工作。
本文最初由@熊猫小生发表。未经许可，禁止复制
