关注上方蓝字关注我们


Jakob Nielsen 的交互设计 10 原则，被称为“启发式”的广泛的经验法则。


本文结合实际生活中的启发，总结了可用性十大法则。
文末附赠84页 “京东APP交互设计规范”




#1：系统状态的可见性

✦启发示例：
商场地图上的 “您在这里” 指示器向人们显示他们当前所在的位置，以帮助他们了解下一步该去哪里。

“系统状态的可见性”设计应始终通过在合理的时间内提供适当的反馈，让用户了解正在发生的事情。


当用户知道当前的系统状态时，他们会了解之前交互的结果并确定后续步骤。可预测的互动可以建立对产品和品牌的信任。

Tips：
  • 向用户清楚地传达系统的状态——在未通知用户的情况下，不应采取任何会对用户造成后果的操作。
  • 尽快（最好是立即）向用户提供反馈。
  • 通过开放和持续的沟通建立信任。

#2：系统与现实世界的匹配

✦启发示例：
当炉灶控件与加热元件的布局相匹配时，用户可以快速了解哪个控件映射到哪个加热元件。

“系统与现实世界的匹配”原则告诉我们，设计应该讲用户的语言。使用用户熟悉的单词、短语和概念，而不是内部术语。遵循现实世界的惯例，使信息以自然且符合逻辑的顺序出现。

您的设计方式在很大程度上取决于您的特定用户。您和您的同事看似非常清楚的术语、概念、图标和图像可能对您的用户来说不熟悉或令人困惑。
当设计的控件遵循现实世界的惯例并对应于期望的结果（称为自然映射）时，用户就更容易学习和记住界面的工作原理。这有助于打造直观的体验。
Tips：
  • 确保用户无需查找单词的定义即可理解含义。
  • 永远不要假设您对单词或概念的理解与您的用户的理解相匹配。
  • 用户研究将揭示用户熟悉的术语，以及他们围绕重要概念的心理模型。

#3：用户控制和自由
✦启发示例：
数字空间需要快速紧急出口，就像物理空间一样。

“用户控制和自由”，源于用户经常会错误地执行操作。他们需要一个明确标记的“紧急出口”来离开不需要的行动，而不必经历一个漫长的过程。
当人们很容易退出某个过程或撤消某个操作时，就会培养一种自由感和自信。退出允许用户保持对系统的控制，避免陷入困境和感到沮丧。
Tips：
  • 支持撤消和重做。
  • 显示退出当前交互的清晰方法，例如“取消”按钮。
  • 确保出口有清晰的标签且易于发现。

#4：一致性和标准

✦启发示例：
登记柜台通常位于酒店前面。这种一致性满足了客户的期望。
“一致性和标准”原则用户不必怀疑不同的词语、情况或动作是否意味着同一件事。遵循平台和行业惯例。

雅各布定律指出，人们大部分时间都花在使用除您的产品之外的数字产品上。用户对其他产品的体验决定了他们的期望。未能保持一致性可能会 迫使用户学习新东西，从而增加用户的认知负担。
Tips：
  • 通过保持内部和外部两种一致性来提高可学习性。
  • 保持 单个产品或产品系列内的一致性（内部一致性）。
  • 遵循既定的行业惯例（外部一致性）。

#5：错误预防

✦启发示例：
弯曲山路上的护栏
良好的错误消息很重要，但最好的设计首先会仔细防止问题的发生。要么消除容易出错的情况，要么检查它们并在用户承诺操作之前向用户提供确认选项。
错误有两种类型：失误和失误。失误是由于注意力不集中而导致的无意识错误。错误是基于用户心理模型与设计之间不匹配的有意识的错误。
Tips：
  • 优先考虑你的努力：首先防止高成本的错误，然后再防止小挫折。
  • 通过提供有用的约束和良好的默认值来避免失误。
  • 通过消除内存负担、支持撤消和警告用户来防止错误。

＃6：识别而不是回忆

✦启发示例：
大多数人更容易识别国家的首都，而不必记住它们。人们更有可能正确回答这个问题：里斯本是葡萄牙的首都吗？而不是葡萄牙的首都是什么？
通过使元素、操作和选项可见来最小化用户的内存负载。用户不必记住从界面的一个部分到另一部分的信息。使用该设计所需的信息（例如字段标签或菜单项）应该是可见的或在需要时易于检索。
人类的短期记忆是有限的。促进识别的界面减少了用户所需的认知工作量。
Tips：
  • 让人们识别界面中的信息，而不是强迫他们记住（“回忆”）它。
  • 在上下文中提供 帮助，而不是给用户提供冗长的教程来记忆。
  • 减少用户必须记住的信息。

#7：使用的灵活性和效率

✦启发示例：
地图上列出了常规路线，但了解该地区的当地人可以走捷径。 
对新手用户隐藏的快捷方式可以加快专家用户的交互速度，从而使设计能够满足缺乏经验和有经验的用户的需求。允许用户定制频繁的操作。
灵活的流程可以通过不同的方式进行，以便人们可以选择适合自己的方法。
Tips：
  • 提供键盘快捷键和触摸手势等加速器。
  • 通过为个人用户定制内容和功能来提供个性化。
  • 允许定制，因此用户可以选择他们希望产品如何工作。



＃8：美观和简约的设计

✦启发示例：
华丽的 茶壶
界面不应包含不相关或很少需要的信息。界面中每一个额外的信息单元都会与相关的信息单元竞争，并降低它们的相对可见性。
这种启发式并不意味着您必须使用扁平化设计- 它是为了确保您将内容和视觉设计集中在要点上。确保界面的视觉元素支持用户的主要目标。
Tips：
  • 让 UI 的内容和视觉设计集中在要点上。
  • 不要让不必要的元素分散用户对他们真正需要的信息的注意力。
  • 优先考虑支持主要目标的内容和功能。

#9：帮助用户识别、诊断错误并从错误中恢复

✦启发示例：
道路上的错误方向指示。
错误消息应该用简单的语言（没有错误代码）表达，准确地指出问题，并建设性地提出解决方案。
这些错误消息还应该通过视觉处理来呈现，以帮助用户注意到和识别它们。
Tips：
  • 使用传统的错误消息视觉效果，例如粗体、红色文本。
  • 用他们能理解的语言告诉用户出了什么问题——避免使用技术术语。
  • 为用户提供一个解决方案，就像一个可以立即解决错误的捷径。


#10：帮助和文档

✦启发示例：
机场的信息亭易于识别，可以根据上下文立即解决客户的问题。
最好系统不需要任何额外的解释。但是，可能有必要提供文档来帮助用户了解如何完成其任务。
帮助和文档内容应该易于搜索并关注用户的任务。保持简洁，并列出需要执行的具体步骤。
Tips：
  • 确保帮助文档易于搜索。
  • 只要有可能，就在用户需要时在上下文中呈现文档。
  • 列出要执行的具体步骤。

总结：

  • 实用的定义=它是否提供了您需要的功能。

  • 可用的定义=这些功能使用起来有多容易和愉快。

  • 有用的定义=可用性 + 实用性。

在 Web 上，可用性是生存的必要条件。
如果一个网站难以使用，人们就会离开。如果主页没有明确说明公司提供什么以及用户可以在网站上做什么，人们就会离开。如果用户在网站上迷路了，他们就会离开。如果网站的信息难以阅读或无法回答用户的关键问题，他们就会离开。
没有用户阅读网站手册或花费大量时间试图找出界面这样的事情，当用户遇到困难时，离开是第一选择。提升可用性是减少离开的第一道防线。


附84页 “京东APP交互设计规范”
完整文档获取方式：
分享/点赞本文，回复：设计
扫描二维码加作者索取

···············END···············

专注变现|AI|数据分析|SaaS领域

加我进群

往

期

推

荐

两份大厂“产品总监”简历【保真】！

本篇文章来源于微信公众号: 产品参赵

关于下载

本站分享的产品前端、B端竞品和所有付费资源，均不是该资源的价格，本身资源是不用付费的，这是赞助知识库资源模板的收集整理、服务器维护的基础开销费用！


免责声明

1、本站分享的产品前端、B端竞品和产品知识库主要来源于网络的公开信息，均为网络搜索，微信缓存，免费下载，互联网平台整理而来，产品知识库的资料文档仅限用于学习交流。如若有侵权你的知识版权的嫌疑，请及时告知我们，我们会在24小时内进行删除。联系管理员：2841552294@qq.com
2、上述资源和模板的知识产权及相关权利归作者及制作公司所有。
3、上述资源和模板仅供学习参考及技术交流之用，未经源码的知识产权权利人同意，用户不得进行商业使用。
4、上述资源和模板如需商业使用，请自行联系源码知识产权权利人进行授权，否则，我们将积极配合作品知识产权权利人 一起维权。
5、上述资源和模板如有侵犯您的知识产权，请您立刻联系我们，我们会在24小时内做删除下架处理。