认知设计Skill cognitive-design

认知设计技能基于认知心理学原理,用于优化视觉界面、数据可视化、教育内容等的设计,以提高用户体验和信息传达效率。关键词:认知设计、数据可视化、用户体验、教育技术、认知心理学。

0 次安装 0 次浏览 更新于 3/22/2026

名称: 认知设计 描述: 使用于设计视觉界面、数据可视化、教育内容或演示文稿时,需要基于认知心理学原理做出决策 — 感知、注意、记忆、格式塔分组和视觉编码层次。当用户提到认知负荷、视觉层次、工作记忆、前注意处理、格式塔原则、编码层次、认知设计金字塔,或需要理解为什么某些设计有效时调用。对于设计评估,使用 design-evaluation-audit。对于谬误预防,使用 cognitive-fallacies-guard。对于数据故事讲述,使用 visual-storytelling-design

认知设计原则

目录


先读此部分

此技能的作用

此技能提供有效设计的认知科学基础 — 解释为什么某些设计有效的感知、注意、记忆和决策原则。

核心原则: 有效设计与人们的思维方式对齐,而不仅仅是外观。

为什么认知设计重要

此技能解决的常见问题:

  • 用户在仪表板中错过关键信息
  • 复杂界面导致认知过载和放弃
  • 数据可视化被误解
  • 教育材料未被保留
  • 表单完成率低

此技能如何帮助:

  • 基于认知心理学研究(Tufte, Norman, Ware, Cleveland & McGill, Mayer)做出设计决策
  • 应用系统框架(认知设计金字塔、设计反馈循环、三层模型)
  • 基于感知层次选择适当的视觉编码
  • 管理注意、记忆限制和认知负荷
  • 应用领域特定的认知原则(数据可视化、UX、教育)

何时使用此技能

使用此技能当:

  • ✓ 学习设计的认知基础
  • ✓ 将认知框架应用于新设计
  • ✓ 基于感知研究选择视觉编码
  • ✓ 获取领域特定的认知指导(数据可视化、UX、教育)
  • ✓ 用研究支持倡导设计决策
  • ✓ 理解设计在认知上成功或失败的原因

使用其他技能当:

  • design-evaluation-audit 用于系统设计审查和审计
  • cognitive-fallacies-guard 用于检测误导性可视化
  • visual-storytelling-design 用于数据新闻和叙事可视化
  • information-architecture 用于内容组织和导航
  • d3-visualization 用于使用 D3.js 实现可视化

如何使用此技能

先决条件

  • 基本设计素养(熟悉UI术语、常见图表类型)
  • 理解用户任务和上下文
  • 访问正在创建的设计

预期成果

立即: 基于认知科学的设计,具有清晰理由 短期: 改进可用性指标(完成率、任务时间) 长期: 内化认知原则,团队共享词汇


工作流程

应用认知原则工作流程

使用当: 从零开始创建新界面、仪表板、可视化或教育内容

时间: 1-2小时

复制此清单并跟踪进度:

认知设计进度:
- [ ] 步骤 1: 定位到认知原则
- [ ] 步骤 2: 用框架结构化设计思维
- [ ] 步骤 3: 应用领域特定指导
- [ ] 步骤 4: 对照快速参考验证

步骤 1: 定位到认知原则

认知基础开始,深入理解为什么设计有效(感知、记忆、格式塔原则),或使用快速参考快速定位(20个核心原则、决策规则)。基础提供理论依据;快速参考更快上手。

步骤 2: 用框架结构化设计思维

使用设计框架应用系统方法:认知设计金字塔(4层质量评估)、设计反馈循环(交互周期)和三层可视化模型(数据通信保真度)。这些为设计决策提供可重复结构。

步骤 3: 应用领域特定指导

选择您的领域:数据可视化用于图表/仪表板,UX产品设计用于界面/应用,或教育设计用于电子学习/培训。为您的特定上下文应用定制的认知原则。

步骤 4: 对照快速参考验证

使用快速参考验证您的设计是否通过3问题检查(注意?记忆?清晰?)和20个核心原则。确认您的设计符合基本认知对齐。

后续步骤: 使用 design-evaluation-audit 技能进行系统评估,cognitive-fallacies-guard 检查误导。


快速验证工作流程

使用当: 需要快速通过/不通过决策、抽查更改或在主动设计工作中对照认知基础验证

时间: 5-10分钟

复制此清单并跟踪进度:

快速验证进度:
- [ ] 步骤 1: 三问题快速检查
- [ ] 步骤 2: 如果发现问题进行抽查

步骤 1: 三问题快速检查

使用快速参考并应用:(1) 注意 - “首先看什么是否明显?”(视觉层次清晰、主要元素突出、可预测扫描),(2) 记忆 - “用户是否需要记住任何可以显示的东西?”(状态可见、选项呈现、适合4±1块),(3) 清晰 - “不熟悉的人能在5秒内理解吗?”(目的可掌握、无必要装饰、熟悉术语)。如果所有是 → 可能认知上合理。

步骤 2: 如果发现问题进行抽查

如果有任何问题失败,咨询相关认知基础:注意失败?在认知基础中检查层次和视觉突出。记忆失败?检查分块和记忆约束。清晰失败?检查简洁原则和标签指导。


路径选择菜单

根据当前需要选择您的路径:

路径 1: 理解认知基础

选择此当: 您想学习有效设计背后的核心认知心理学原理(注意、记忆、感知、格式塔分组、视觉编码层次)。

您将获得: 基于研究的为什么某些设计有效的深入理解。

时间: 20-40分钟

前往认知基础资源


路径 2: 应用设计框架

选择此当: 您想要系统框架来结构化您的设计思维。

您将获得: 三个互补框架:

  • 认知设计金字塔(4层:感知效率 → 认知一致性 → 情感参与 → 行为对齐)
  • 设计反馈循环(感知 → 解释 → 决定 → 行动 → 学习)
  • 三层可视化模型(数据 → 视觉编码 → 认知解释)

时间: 30-45分钟

前往框架资源


路径 3: 获取领域特定指导

选择此当: 您正在处理特定类型的设计并想要定制的认知原则。

选择您的领域:

3a. 数据可视化(图表、仪表板、分析)

前往数据可视化资源

涵盖: 通过任务-编码对齐选择图表、仪表板层次和分组、渐进披露以探索、叙事数据可视化


3b. 产品/UX设计(界面、移动应用、Web应用)

前往UX产品设计资源

涵盖: 通过熟悉模式学习性、任务流程效率、认知负荷管理、入门设计、错误处理


3c. 教育设计(电子学习、培训、教学材料)

前往教育设计资源

涵盖: 多媒体学习原则、双重编码、工作示例、检索练习、分段、一致性原则


路径 4: 访问快速参考

选择此当: 您需要快速设计指导、核心原则摘要或快速验证检查。

您将获得: 20个核心原则、3问题检查、常见决策规则、设计启发式

时间: 5-15分钟

前往快速参考资源


路径 5: 探索来源景观

选择此当: 您想了解认知设计原则背后的研究传统和关键作者。

您将获得: 关键研究人员(Tufte, Norman, Ware, Cleveland & McGill, Mayer, Nielsen)、他们的贡献以及何时引用他们。

时间: 10-20分钟

前往来源景观资源


路径 6: 退出

选择此当: 您已完成设计工作或收集了所需信息。

在退出前:

  • 您是否实现了此会话的目标?
  • 需要评估您的设计? → 使用 design-evaluation-audit 技能
  • 需要检查误导? → 使用 cognitive-fallacies-guard 技能
  • 需要讲述数据故事? → 使用 visual-storytelling-design 技能

相关技能

技能 使用于
design-evaluation-audit 使用认知清单和可视化审计进行系统设计审查
cognitive-fallacies-guard 检测图表垃圾、误导性轴、认知偏见、数据完整性违规
visual-storytelling-design 数据新闻、演示文稿、信息图表、叙事可视化
information-architecture 内容组织、导航设计、分类学、可发现性
d3-visualization 使用 D3.js 实现交互式数据可视化