cognitive-design
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseCognitive Design Principles
认知设计原则
Table of Contents
目录
Read This First
首先阅读以下内容
What This Skill Does
本技能的作用
This skill helps you create cognitively aligned designs - visual interfaces, data visualizations, educational content, and presentations that work with (not against) human perception, attention, memory, and decision-making.
Core principle: Effective design aligns with how people think, not just how things look.
本技能可帮助你打造认知契合型设计——即符合人类感知、注意力、记忆和决策模式的视觉界面、数据可视化内容、教育材料及演示文稿，而非与之相悖。
核心原则： 有效的设计需贴合人类的思维模式，而非仅关注外观。
Why Cognitive Design Matters
认知设计的重要性
Common problems this addresses:
- Users miss critical information in dashboards
- Complex interfaces cause cognitive overload and abandonment
- Data visualizations are misinterpreted or misleading
- Educational materials aren't retained
- Form completion rates are low
- Error messages are confusing
How this helps:
- Ground design decisions in cognitive psychology research
- Apply systematic frameworks (Cognitive Design Pyramid, Design Feedback Loop, Three-Layer Model)
- Evaluate designs against objective cognitive criteria
- Choose appropriate visual encodings based on perceptual hierarchy
- Manage attention, memory limits, and cognitive load
本技能解决的常见问题：
- 用户在仪表盘中遗漏关键信息
- 复杂界面导致认知过载，用户放弃使用
- 数据可视化内容被误解或存在误导性
- 教育材料无法被用户记住
- 表单完成率低
- 错误提示信息令人困惑
本技能的帮助：
- 基于认知心理学研究制定设计决策
- 应用系统化框架（Cognitive Design Pyramid、Design Feedback Loop、Three-Layer Model）
- 依据客观认知标准评估设计
- 根据感知层级选择合适的视觉编码方式
- 管理用户注意力、记忆极限和认知负荷
When to Use This Skill
何时使用本技能
Use this skill when:
- ✓ Designing new interfaces, dashboards, visualizations, or educational content
- ✓ Users report confusion, overwhelm, or missing information
- ✓ Improving designs with poor metrics (low completion rates, high bounce rates)
- ✓ Conducting design reviews and need systematic evaluation
- ✓ Choosing between design alternatives with cognitive rationale
- ✓ Advocating for design decisions to stakeholders
- ✓ Designing high-stakes interfaces where cognitive failure has consequences
Do NOT use for:
- ✗ Pure aesthetic/brand identity decisions unrelated to cognition
- ✗ Technical implementation (coding, databases)
- ✗ Business strategy (feature prioritization, pricing)
- ✗ Tool-specific training (how to use Figma, Tableau, etc.)
建议使用本技能的场景：
- ✓ 设计新界面、仪表盘、可视化内容或教育材料
- ✓ 用户反馈存在困惑、过载或信息遗漏问题
- ✓ 优化指标表现不佳的设计（如完成率低、跳出率高）
- ✓ 开展设计评审，需要系统化评估方法
- ✓ 基于认知逻辑在多个设计方案中做选择
- ✓ 向利益相关者论证设计决策的合理性
- ✓ 设计高风险界面，认知失误可能引发严重后果
请勿用于以下场景：
- ✗ 与认知无关的纯美学/品牌标识决策
- ✗ 技术实现（编码、数据库等）
- ✗ 商业策略（功能优先级、定价等）
- ✗ 工具专属培训（如Figma、Tableau的使用方法）
How This Skill Works
本技能的运作方式
This is an interactive hub - you choose your path based on current need:
- Learning mode: Start with Path 1 (Cognitive Foundations) to understand principles
- Application mode: Jump to Path 2 (Frameworks) or Path 4 (Domain Guidance) to apply to specific design
- Evaluation mode: Use Path 3 (Evaluation Tools) to assess existing designs
- Quick mode: Use Path 6 (Quick Reference) for rapid decision-making
After completing any path, return to the menu to select another or exit.
这是一个交互式枢纽——你可根据当前需求选择对应路径：
- 学习模式： 从路径1（认知基础）开始，理解核心原则
- 应用模式： 直接跳转至路径2（框架）或路径4（领域指导），将原则应用于具体设计
- 评估模式： 使用路径3（评估工具）评估现有设计
- 快速模式： 使用路径6（快速参考）快速制定决策
完成任意路径后，可返回菜单选择其他路径或退出。
Collaborative Nature
协作特性
I'll guide you through cognitive design principles by:
- Explaining WHY certain designs work (cognitive foundations)
- Providing HOW to apply principles (frameworks and workflows)
- Offering domain-specific guidance (data viz, UX, education, storytelling)
- Evaluating designs systematically (checklists and audits)
You bring domain expertise and context; I provide cognitive science grounding.
我将通过以下方式引导你掌握认知设计原则：
- 解释特定设计有效的原因（认知基础）
- 提供原则的应用方法（框架与工作流程）
- 提供领域专属指导（数据可视化、UX、教育、叙事）
- 系统化评估设计（清单与审计方法）
你提供领域专业知识和场景背景，我提供认知科学理论支撑。
How to Use This Skill
如何使用本技能
Prerequisites
前置条件
- Basic design literacy (familiarity with UI terminology, common chart types)
- Understanding of user tasks and context (from user research, stories, or brief)
- Access to design being created or evaluated
- 具备基础设计素养（熟悉UI术语、常见图表类型）
- 理解用户任务和场景背景（来自用户研究、用户故事或需求简报）
- 可访问待创建或评估的设计内容
Expected Outcomes
预期成果
Immediate:
- Designs with clear visual hierarchy
- Reduced cognitive load (fewer overwhelm complaints)
- Systematic evaluation process
Short-term (weeks):
- Improved usability metrics (completion rates, time-on-task)
- Fewer user support requests
- More defensible design decisions
Long-term (months):
- Internalized cognitive principles
- Team shared vocabulary
- Measurable business impact
即时成果：
- 具备清晰视觉层级的设计
- 认知负荷降低（用户反馈的困惑减少）
- 系统化的评估流程
短期成果（数周内）：
- 可用性指标提升（完成率、任务耗时）
- 用户支持请求减少
- 设计决策更具说服力
长期成果（数月内）：
- 内化认知设计原则
- 团队形成统一的专业词汇
- 可衡量的业务影响
Workflows
工作流程
Choose a workflow based on your current situation:
根据当前场景选择对应工作流程：
New Design Workflow
新设计工作流程
Use when: Creating a new interface, dashboard, visualization, or educational content from scratch
Time: 2-4 hours
Copy this checklist and track your progress:
New Design Progress:
- [ ] Step 1: Orient to cognitive principles
- [ ] Step 2: Structure design thinking with frameworks
- [ ] Step 3: Apply domain-specific guidance
- [ ] Step 4: Evaluate design for cognitive alignment
- [ ] Step 5: Check for common mistakes
- [ ] Step 6: Iterate based on findingsStep 1: Orient to cognitive principles
Start with Cognitive Foundations for deep understanding of WHY designs work (perception, memory, Gestalt principles) OR use Quick Reference for rapid orientation (20 core principles, decision rules). Foundations give you theoretical grounding; Quick Reference gets you started faster.
Step 2: Structure design thinking with frameworks
Use Design Frameworks to apply systematic approaches: Cognitive Design Pyramid (4-tier quality assessment), Design Feedback Loop (interaction cycles), and Three-Layer Visualization Model (data communication fidelity). These provide repeatable structure for design decisions.
Step 3: Apply domain-specific guidance
Choose your domain: Data Visualization for charts/dashboards, UX Product Design for interfaces/apps, Educational Design for e-learning/training, or Storytelling & Journalism for data journalism/presentations. Apply tailored cognitive principles for your specific context.
Step 4: Evaluate design for cognitive alignment
Use Evaluation Tools to assess systematically: Cognitive Design Checklist (8 dimensions including visibility, hierarchy, chunking) and Visualization Audit Framework (4 criteria: Clarity, Efficiency, Integrity, Aesthetics). Identify weaknesses and prioritize fixes.
Step 5: Check for common mistakes
Review Cognitive Fallacies to prevent failures: chartjunk, truncated axes, 3D distortion, cognitive biases, data integrity violations. Ensure your design avoids misleading patterns.
Step 6: Iterate based on findings
Return to domain guidance or frameworks as needed. Fix issues identified in evaluation. Re-evaluate until design passes cognitive alignment criteria (avg score ≥3.5 on rubric).
适用场景： 从零开始设计新界面、仪表盘、可视化内容或教育材料
耗时： 2-4小时
复制以下清单，跟踪进度：
New Design Progress:
- [ ] Step 1: Orient to cognitive principles
- [ ] Step 2: Structure design thinking with frameworks
- [ ] Step 3: Apply domain-specific guidance
- [ ] Step 4: Evaluate design for cognitive alignment
- [ ] Step 5: Check for common mistakes
- [ ] Step 6: Iterate based on findings步骤1：认知原则入门
阅读认知基础，深入理解设计有效的底层逻辑（感知、记忆、格式塔原则）；或使用快速参考快速入门（20条核心原则、决策规则）。认知基础提供理论支撑，快速参考帮助你更快上手。
步骤2：用框架结构化设计思路
使用设计框架应用系统化方法：Cognitive Design Pyramid（四层质量评估模型）、Design Feedback Loop（交互循环）和Three-Layer Visualization Model（数据沟通保真度模型）。这些框架为设计决策提供可复用的结构化方法。
步骤3：应用领域专属指导
选择你的领域：数据可视化（图表/仪表盘）、UX产品设计（界面/应用）、教育设计（在线学习/培训）或叙事与新闻（数据新闻/演示文稿）。针对具体场景应用定制化的认知设计原则。
步骤4：评估设计的认知契合度
使用评估工具进行系统化评估：认知设计清单（含可见性、层级、分块等8个维度）和可视化审计框架（4项标准：清晰度、效率、完整性、美观性）。识别设计短板并确定修复优先级。
步骤5：检查常见错误
查看认知谬误，避免设计失误：图表垃圾、截断坐标轴、3D失真、认知偏差、数据完整性违规。确保设计避免误导性模式。
步骤6：基于评估结果迭代优化
根据需要返回领域指导或框架内容。修复评估中发现的问题。重新评估，直至设计通过认知契合度标准（评分表平均得分≥3.5）。
Design Review Workflow
设计评审工作流程
Use when: Evaluating existing designs for cognitive alignment, conducting design critiques, or diagnosing usability issues
Time: 30-60 minutes
Copy this checklist and track your progress:
Design Review Progress:
- [ ] Step 1: Systematic assessment with evaluation tools
- [ ] Step 2: Quick checks for common mistakes
- [ ] Step 3: Rapid validation against core principles
- [ ] Step 4: Note issues and prioritize fixesStep 1: Systematic assessment with evaluation tools
Start with Evaluation Tools for comprehensive review: Apply Cognitive Design Checklist (visibility, hierarchy, chunking, simplicity, memory support, feedback, consistency, scanning) and Visualization Audit Framework (score Clarity, Efficiency, Integrity, Aesthetics 1-5). Identify failing dimensions.
Step 2: Quick checks for common mistakes
Reference Cognitive Fallacies for rapid diagnosis: Look for chartjunk, truncated axes, 3D effects, misleading colors, data integrity violations. These are common culprits in cognitive failures.
Step 3: Rapid validation against core principles
Use Quick Reference for fast validation: Apply 3-question check (Attention? Memory? Clarity?), verify chart selection matches task, check color usage, confirm chunking fits working memory. Catches major issues quickly.
Step 4: Note issues and prioritize fixes
Document findings with severity: CRITICAL (integrity violations, accessibility failures), HIGH (clarity/efficiency issues preventing use), MEDIUM (suboptimal patterns, aesthetic issues), LOW (minor optimizations). Prioritize fixes foundation-first (perception → coherence → engagement → behavior).
适用场景： 评估现有设计的认知契合度、开展设计评审或诊断可用性问题
耗时： 30-60分钟
复制以下清单，跟踪进度：
Design Review Progress:
- [ ] Step 1: Systematic assessment with evaluation tools
- [ ] Step 2: Quick checks for common mistakes
- [ ] Step 3: Rapid validation against core principles
- [ ] Step 4: Note issues and prioritize fixes步骤1：使用评估工具进行系统化评估
从评估工具开始全面评审：应用认知设计清单（可见性、层级、分块、简洁性、记忆支持、反馈、一致性、扫视性）和可视化审计框架（从1-5分对清晰度、效率、完整性、美观性打分）。识别表现不佳的维度。
步骤2：快速检查常见错误
参考认知谬误快速诊断：查找图表垃圾、截断坐标轴、3D效果、误导性配色、数据完整性违规等问题。这些是导致认知设计失败的常见原因。
步骤3：基于核心原则快速验证
使用快速参考快速验证：应用三问检查法（注意力？记忆？清晰度？），验证图表选择是否匹配任务，检查配色是否合理，确认信息分块符合工作记忆容量。可快速发现主要问题。
步骤4：记录问题并确定修复优先级
按严重程度记录发现的问题：CRITICAL（完整性违规、可访问性故障）、HIGH（影响使用的清晰度/效率问题）、MEDIUM（非最优模式、美观问题）、LOW（小幅度优化）。按基础优先原则确定修复顺序（感知 → 连贯性 → 参与度 → 行为）。
Quick Validation Workflow
快速验证工作流程
Use when: Need rapid go/no-go decision, spot-checking changes, or validating against cognitive basics during active design work
Time: 5-10 minutes
Copy this checklist and track your progress:
Quick Validation Progress:
- [ ] Step 1: Three-question rapid check
- [ ] Step 2: Spot checks if issues foundStep 1: Three-question rapid check
Use Quick Reference and apply: (1) Attention - "Is it obvious what to look at first?" (visual hierarchy clear, primary elements salient, predictable scanning), (2) Memory - "Is user required to remember anything that could be shown?" (state visible, options presented, fits 4±1 chunks), (3) Clarity - "Can someone unfamiliar understand in 5 seconds?" (purpose graspable, no unnecessary decoration, familiar terminology). If all YES → likely cognitively sound.
Step 2: Spot checks if issues found
If any question fails, use Evaluation Tools for targeted diagnosis: Failed attention? Check hierarchy and visual salience sections. Failed memory? Check chunking and memory support sections. Failed clarity? Check simplicity and labeling sections. Apply specific fixes from relevant section.
适用场景： 需要快速做出通过/不通过决策、抽查修改内容，或在设计过程中验证认知基础原则
耗时： 5-10分钟
复制以下清单，跟踪进度：
Quick Validation Progress:
- [ ] Step 1: Three-question rapid check
- [ ] Step 2: Spot checks if issues found步骤1：三问快速检查
使用快速参考，回答三个问题：(1) 注意力——“用户第一眼就能明确关注重点吗？”（视觉层级清晰，核心元素突出，扫视路径可预测）；(2) 记忆——“是否要求用户记住本可直接展示的信息？”（状态可见，选项直接呈现，信息分块符合4±1记忆容量）；(3) 清晰度——“不熟悉内容的用户能在5秒内理解吗？”（用途明确，无多余装饰，术语通俗易懂）。若全部为是，则设计大概率符合认知要求。
步骤2：发现问题后针对性抽查
若任意问题未通过，使用评估工具进行针对性诊断：注意力不达标？检查层级和视觉突出部分。记忆不达标？检查信息分块和记忆支持部分。清晰度不达标？检查简洁性和标签部分。从对应部分应用具体修复方案。
Path Selection Menu
路径选择菜单
Choose your path based on current need:
根据当前需求选择对应路径：
Path 1: Understand Cognitive Foundations
路径1：理解认知基础
Choose this when: You want to learn the core cognitive psychology principles underlying effective design (attention, memory, perception, Gestalt grouping, visual encoding hierarchy).
What you'll get: Deep understanding of WHY certain designs work, grounded in research from Tufte, Norman, Ware, Cleveland & McGill, Mayer, and others.
Time: 20-40 minutes
→ Go to Cognitive Foundations resource
适用场景： 你想要学习支撑有效设计的核心认知心理学原则（注意力、记忆、感知、格式塔分组、视觉编码层级）。
你将获得： 深入理解特定设计有效的原因，内容基于Tufte、Norman、Ware、Cleveland & McGill、Mayer等学者的研究成果。
耗时： 20-40分钟
→ 前往认知基础资源
Path 2: Apply Design Frameworks
路径2：应用设计框架
Choose this when: You want systematic frameworks to structure your design thinking and decision-making.
What you'll get: Three complementary frameworks:
- Cognitive Design Pyramid (4 tiers: Perceptual Efficiency → Cognitive Coherence → Emotional Engagement → Behavioral Alignment)
- Design Feedback Loop (Perceive → Interpret → Decide → Act → Learn)
- Three-Layer Visualization Model (Data → Visual Encoding → Cognitive Interpretation)
Time: 30-45 minutes
→ Go to Frameworks resource
适用场景： 你想要使用系统化框架结构化设计思路和决策过程。
你将获得： 三个互补框架：
- Cognitive Design Pyramid（四层质量评估模型：感知效率 → 认知连贯性 → 情感参与 → 行为契合）
- Design Feedback Loop（感知 → 解读 → 决策 → 行动 → 学习）
- Three-Layer Visualization Model（数据 → 视觉编码 → 认知解读）
耗时： 30-45分钟
→ 前往框架资源
Path 3: Evaluate Existing Designs
路径3：评估现有设计
Choose this when: You need to assess a design systematically for cognitive alignment, or conducting a design review/critique.
What you'll get:
- Cognitive Design Checklist (visibility, hierarchy, chunking, consistency, feedback, memory support)
- Visualization Audit Framework (4 criteria: Clarity, Efficiency, Integrity, Aesthetics)
- Examples of evaluation in practice
Time: 30-60 minutes (depending on design complexity)
→ Go to Evaluation Tools resource
适用场景： 你需要系统化评估设计的认知契合度，或开展设计评审/批评。
你将获得：
- 认知设计清单（可见性、层级、分块、一致性、反馈、记忆支持）
- 可视化审计框架（4项标准：清晰度、效率、完整性、美观性）
- 实际评估案例
耗时： 30-60分钟（取决于设计复杂度）
→ 前往评估工具资源
Path 4: Get Domain-Specific Guidance
路径4：获取领域专属指导
Choose this when: You're working on a specific type of design and want tailored cognitive principles for that context.
Choose your domain:
适用场景： 你正在设计特定类型的内容，想要针对该场景的定制化认知设计原则。
选择你的领域：
4a. Data Visualization (Charts, Dashboards, Analytics)
4a. 数据可视化（图表、仪表盘、分析）
→ Go to Data Visualization resource
Covers: Chart selection via task-encoding alignment, dashboard hierarchy and grouping, progressive disclosure for exploration, narrative data visualization
→ 前往数据可视化资源
涵盖内容： 基于任务-编码匹配选择图表、仪表盘层级与分组、探索式设计的渐进式披露、叙事性数据可视化
4b. Product/UX Design (Interfaces, Mobile Apps, Web Applications)
4b. 产品/UX设计（界面、移动应用、网页应用）
→ Go to UX Product Design resource
Covers: Learnability via familiar patterns, task flow efficiency, cognitive load management, onboarding design, error handling
→ 前往UX产品设计资源
涵盖内容： 通过熟悉模式提升易学性、任务流效率、认知负荷管理、新手引导设计、错误处理
4c. Educational Design (E-Learning, Training, Instructional Materials)
4c. 教育设计（在线学习、培训、教学材料）
→ Go to Educational Design resource
Covers: Multimedia learning principles, dual coding, worked examples, retrieval practice, segmenting, coherence principle
→ 前往教育设计资源
涵盖内容： 多媒体学习原则、双重编码、范例学习、检索练习、分段呈现、连贯性原则
4d. Storytelling/Journalism (Data Journalism, Presentations, Infographics)
4d. 叙事/新闻（数据新闻、演示文稿、信息图表）
→ Go to Storytelling & Journalism resource
Covers: Visual narrative structure, annotation strategies, scrollytelling, framing and context, visual metaphors
→ 前往叙事与新闻资源
涵盖内容： 视觉叙事结构、注释策略、滚动叙事、框架与背景、视觉隐喻
Path 5: Avoid Common Mistakes
路径5：规避常见错误
Choose this when: You want to prevent or diagnose cognitive design failures - chartjunk, misleading visualizations, cognitive biases, data integrity violations.
What you'll get:
- Common cognitive fallacies explained (WHY they fail)
- Visual misleads and how to avoid them
- Integrity principles for trustworthy design
Time: 15-25 minutes
→ Go to Cognitive Fallacies resource
适用场景： 你想要预防或诊断认知设计失误——如图表垃圾、误导性可视化、认知偏差、数据完整性违规。
你将获得：
- 常见认知谬误的解释（为何会失效）
- 视觉误导类型及规避方法
- 可信设计的完整性原则
耗时： 15-25分钟
→ 前往认知谬误资源
Path 6: Access Quick Reference
路径6：快速参考
Choose this when: You need rapid design guidance, core principles summary, or quick validation checks.
What you'll get:
- 20 core actionable principles (one-sentence summaries)
- 3-question quick check (Attention, Memory, Clarity)
- Common decision rules (when to use bar vs pie charts, how to chunk information, etc.)
- Design heuristics at a glance
Time: 5-15 minutes
→ Go to Quick Reference resource
适用场景： 你需要快速设计指导、核心原则摘要或快速验证检查。
你将获得：
- 20条可直接执行的核心原则（一句话摘要）
- 三问快速检查法（注意力、记忆、清晰度）
- 常见决策规则（如柱状图与饼图的选择时机、信息分块方法等）
- 一目了然的设计启发式规则
耗时： 5-15分钟
→ 前往快速参考资源
Path 7: Exit
路径7：退出
Choose this when: You've completed your design work or gathered the information you need.
Before you exit:
- Have you achieved your goal for this session?
- Do you need to return to any path for deeper exploration?
- Have you documented key design decisions and cognitive rationale?
Thank you for using the Cognitive Design skill. Your designs are now more cognitively aligned!
适用场景： 你已完成设计工作或获取所需信息。
退出前请确认：
- 本次会话的目标是否已达成？
- 是否需要返回任意路径进行深入探索？
- 是否已记录关键设计决策及认知逻辑？
感谢使用认知设计技能！你的设计现在更符合认知契合度要求了！