@chantezy/mcp-product-design 0.1.0 → 0.1.2

package/skills/requirements-content-analysis/references/Cognitive Psychology.md

@@ -0,0 +1,207 @@
+# 认知心理学常识
+
+> 本文档整理了交互设计领域最重要的认知心理学尝试，用于指导设计方案决策。
+
+---
+
+## 文档索引（快速定位）
+
+在编辑器或预览中可用搜索（Ctrl/Cmd+F）跳转到对应 **原则/主题** 小节。
+
+| 模块               | 原则 / 主题 | 速查                            |
+| ---------------- | ------- | ----------------------------- |
+| **一、认知心理学**      | 希克定律    | 选项越多决策越慢 → 减选项、分步、默认          |
+|                  | 菲茨定律    | 目标越大越近越好点 → 大按钮、热区、边缘         |
+|                  | 米勒定律    | 短期记忆约 7±2 → 分块、分组、简化导航        |
+|                  | 格式塔原理   | 整体知觉 → 接近 / 相似 / 连续 / 闭合 / 图底 |
+|                  | 雅各布定律   | 用户带着既有习惯来 → 遵循惯例与平台规范         |
+| **二、Don Norman** | 可见性     | 相关功能要看得见                      |
+|                  | 反馈      | 每个操作都应有可感知响应                  |
+|                  | 约束      | 用物理 / 逻辑 / 语义限制误操作            |
+|                  | 映射      | 控件与效果的空间或逻辑对应                 |
+|                  | 一致性     | 内外一致、与心智模型一致                  |
+|                  | 供能性与意符  | 能做什么 + 如何被提示                  |
+|                  | 概念模型    | 帮用户建立对系统的正确理解                 |
+| **三、用户体验**       | 多尔蒂阈值   | 400ms 内易保持专注 → 按延迟选反馈策略       |
+|                  | 峰终定律    | 人记住峰值与结尾 → 抓好关键节点与收尾          |
+|                  | 帕累托原则   | 80/20 → 优先核心路径与高频功能           |
+|                  | 泰斯勒定律   | 复杂度只能转移 → 系统承担、用户减负           |
+|                  | 波斯泰尔定律  | 发送严格、接收宽容 → 输入容错、输出一致         |
+| **四、框架**         | 设计决策框架  | 可用性 → 效率 → 学习 → 容错 → 满意       |
+
+---
+
+## 一、认知心理学原则
+
+### 1. 希克定律（Hick's Law）
+**公式**：选择越多 → 决策时间越长
+
+**应用**：
+- 菜单选项不宜过多（7±2原则）
+- 复杂决策拆分为多步
+- 默认选项减少决策负担
+
+**示例**：注册流程拆分为多个步骤，而非一页填完。
+
+---
+
+### 2. 菲茨定律（Fitts's Law）
+**公式**：目标越大、距离越近 → 点击越容易
+
+**应用**：
+- 重要按钮做大
+- 边缘区域适合放功能按钮（角落更易点击）
+- 移动端点击区域至少44×44px
+
+**示例**：移动端底部导航栏比顶部更易操作。
+
+---
+
+### 3. 米勒定律（Miller's Law）
+**核心**：人短期记忆容量约7±2个单位。
+
+**应用**：
+- 信息分块展示
+- 导航不超过7项
+- 表单分组
+- 复杂任务拆解
+
+**示例**：信用卡号分组显示（4-4-4-4）。
+
+---
+
+### 4. 格式塔原理（Gestalt Principles）
+**核心**：人脑倾向于将视觉元素组织成有意义的整体。
+
+**子原则**：
+
+| 原理 | 含义 | 应用 |
+|------|------|------|
+| 接近性 | 距离近的元素被视为一组 | 表单字段分组 |
+| 相似性 | 相似的元素被视为一组 | 列表项样式统一 |
+| 连续性 | 人眼倾向于跟随平滑路径 | 引导视线流动 |
+| 闭合性 | 人脑会自动补全不完整图形 | 图标简化设计 |
+| 图底关系 | 区分主体与背景 | 弹窗遮罩层 |
+
+---
+
+### 5. 雅各布定律（Jakob's Law）
+**核心**：用户期望你的产品和其他产品一样工作。
+
+**应用**：
+- 遵循平台设计规范
+- 常见功能位置符合惯例
+- 不要为了"创新"而改变标准交互
+
+**示例**：导航栏放在顶部或侧边，不要放在底部中间。
+
+---
+
+## 二、Don Norman 设计原则
+
+出自 Don Norman《设计心理学》，关注用户心理模型与认知。
+
+### 1. 可见性（Visibility）
+相关功能元素必须可见，让用户知道能做什么。
+- **反面**：隐藏的功能等于不存在的功能
+
+### 2. 反馈（Feedback）
+每个操作都应有即时的、可感知的响应。
+- **要点**：反馈的及时性 > 精确性；反馈形式匹配操作的重要性
+- **示例**：按钮点击态、操作成功 Toast、震动反馈
+
+### 3. 约束（Constraints）
+通过物理、逻辑、语义约束限制可能的操作，防止错误。
+- **类型**：物理约束（USB 只能一个方向插入）、逻辑约束（棋子只能走规则内的位置）、语义约束（红色=危险/停止）
+
+### 4. 映射（Mapping）
+控制元素与其效果之间应有自然的空间/逻辑关系。
+- **示例**：炉灶旋钮排列与灶台位置对应、方向盘左转车左转
+
+### 5. 一致性（Consistency）
+相似的操作和元素应有相似的外观和行为。
+- **要点**：内部一致性 + 外部一致性 + 与用户心智模型一致
+
+### 6. 供能性 / 意符（Affordances & Signifiers）
+- **供能性**：物品自身提供的操作可能性（按钮可按、旋钮可转）
+- **意符**：提示用户可以如何操作的视觉线索（阴影、图标、标签）
+
+### 7. 概念模型（Conceptual Model）
+用户对系统如何工作的理解。好的设计让用户建立正确的概念模型。
+- **要点**：系统模型应与用户心智模型匹配
+
+---
+
+## 三、用户体验原则
+
+### 1. 多尔蒂阈值（Doherty Threshold）
+**核心**：响应时间 < 400ms 时，用户保持专注。
+
+**应用**：
+| 响应时间 | 用户感受 | 设计策略 |
+|---------|---------|---------|
+| <0.1s | 即时 | 无需反馈 |
+| 0.1-1s | 流畅 | 显示加载动画 |
+| 1-10s | 等待 | 显示进度 |
+| >10s | 焦虑 | 允许后台运行，通知完成 |
+
+---
+
+### 2. 峰终定律（Peak-End Rule）
+**核心**：用户只记得体验的峰值和结束时的感受。
+
+**应用**：
+- 确保关键体验节点出色
+- 流程结束给予正向反馈
+- 处理好"最后一公里"
+
+**示例**：注册成功后给予庆祝动画，留下好印象。
+
+---
+
+### 3. 帕累托原则（80/20法则）
+**核心**：80%的效果来自20%的原因。
+
+**应用**：
+- 识别核心功能，优先优化
+- 简化高频操作路径
+- 20%的功能满足80%的需求
+
+**示例**：分析用户行为，优化最常用的功能入口。
+
+---
+
+### 4. 泰斯勒定律（Tesler's Law）
+**核心**：任何系统都有无法简化的复杂性。
+
+**应用**：
+- 复杂性无法消除，只能转移
+- 让系统承担复杂性，而非用户
+- 高级选项折叠隐藏
+
+**示例**：自动填充减少用户输入，复杂计算后台完成。
+
+---
+
+### 5. 波斯泰尔定律（Postel's Law）
+**核心**：发送时严格，接收时宽容。
+
+**应用**：
+- 输入验证宽松（允许多种格式）
+- 输出格式严格（保证一致性）
+- 容错设计
+
+**示例**：电话号码接受多种格式输入，但统一格式存储。
+
+
+---
+
+## 四、设计决策框架
+
+### 当面临设计选择时，按以下顺序思考：
+
+1. **可用性** — 用户能完成任务吗？
+2. **效率** — 用户能快速完成任务吗？
+3. **学习成本** — 新用户能快速上手吗？
+4. **容错性** — 用户犯错后能恢复吗？
+5. **满意度** — 用户享受这个过程吗？

package/skills/requirements-content-analysis/references/Interaction-design-principles.md

@@ -0,0 +1,264 @@
+# 交互设计原则知识库
+
+> 本文档整理了交互设计领域最重要的原则体系，用于指导设计方案评审与决策。按场景分类，便于快速查阅。
+
+---
+
+## 文档索引（快速定位）
+
+在编辑器或预览中可用搜索（Ctrl/Cmd+F）跳转到对应 **原则 / 主题** 小节。
+
+| 模块                | 原则 / 主题      | 速查                  |
+| ----------------- | ------------ | ------------------- |
+| **一、Nielsen 启发式** | 系统状态可见性      | 合理时间内反馈「系统在做什么」     |
+|                   | 系统与现实世界的匹配   | 用户语言、隐喻、惯例，忌纯技术术语   |
+|                   | 用户控制与自由      | 撤销 / 重做 / 退出，误操作可挽回 |
+|                   | 一致性与标准       | 产品内与平台 / 行业惯例统一     |
+|                   | 错误预防         | 约束与确认，优先防止错误发生      |
+|                   | 识别而非回忆       | 选项可见，勿依赖跨页记忆        |
+|                   | 灵活性与使用效率     | 快捷键、批量、自定义，兼顾新手与专家  |
+|                   | 美学与极简设计      | 信息与任务强相关，减少噪音       |
+|                   | 帮助识别、诊断和恢复错误 | 人话说明问题 + 可执行建议      |
+|                   | 帮助与文档        | 易搜、任务导向、上下文帮助       |
+| **二、格式塔**         | 接近性          | 距离近则视为一组            |
+|                   | 相似性          | 外观同类则语义同类           |
+|                   | 连续性          | 视线沿平滑路径流动           |
+|                   | 闭合性          | 脑补不完整图形             |
+|                   | 图底关系         | 分清前景与背景             |
+|                   | 共同命运         | 同向同速运动视为整体          |
+| **三、通用交互**        | 菲茨定律         | 目标大、距离近则指向更快        |
+|                   | 席克定律         | 选项越多决策越慢            |
+|                   | 米勒定律         | 7±2 分块，控制信息量        |
+|                   | 帕累托法则        | 80/20，优先核心高频        |
+|                   | 泰斯勒定律        | 复杂性守恒，尽量由系统承担       |
+|                   | 雅各布定律        | 与常见产品行为一致           |
+|                   | 冯·雷斯托夫效应     | 差异项最易被记住            |
+|                   | 多巴胺效应        | 正向反馈强化行为            |
+| **四、评审**          | 设计方案评审检查清单   | 按维度对照原则快速检验         |
+
+---
+
+
+## 一、Nielsen 可用性启发式原则（Heuristic Evaluation）
+
+由 Jakob Nielsen 提出的 10 条经典可用性评估原则，是交互设计最广泛使用的评估框架。
+
+### 1. 系统状态可见性（Visibility of System Status）
+系统应始终通过适当的反馈，在合理时间内告知用户当前正在发生什么。
+- **要点**：用户需要知道系统是否在处理、是否完成、是否出错
+- **示例**：加载进度条、表单提交成功提示、文件上传状态
+
+**核心**：让用户随时知道系统在做什么。
+**应用**：
+- 加载状态、进度条、操作反馈
+- 表单验证实时提示
+- 按钮点击后的状态变化
+**反例**：点击提交后无任何反馈，用户不确定是否成功。
+
+### 2. 系统与现实世界的匹配（Match Between System and the Real World）
+系统应使用用户熟悉的语言、概念和惯例，遵循现实世界的逻辑。
+- **要点**：避免技术术语，使用用户能理解的词汇和隐喻
+- **示例**：购物车（而非"临时数据暂存区"）、回收站（而非"标记删除队列"）
+
+**核心**：使用用户熟悉的语言和概念，而非技术术语。
+**应用**：
+- 图标隐喻（垃圾桶=删除、齿轮=设置）
+- 拖拽操作模拟物理世界
+- 进度条表达时间概念
+**反例**：用"404"而非"页面不存在"告知用户。
+
+### 3. 用户控制与自由（User Control and Freedom）
+用户经常误选功能，需要明确的"紧急出口"来离开非期望状态。
+- **要点**：支持撤销（Undo）和重做（Redo）
+- **示例**：邮件"撤回"、订单取消、返回上一步
+
+**核心**：用户应该能轻松撤销、重做或退出操作。
+**应用**：
+- 撤销/重做功能
+- 返回上一步
+- 取消按钮明显可见
+- 草稿自动保存
+**反例**：删除操作无确认、无撤销。
+
+### 4. 一致性与标准（Consistency and Standards）
+遵循平台惯例，不要让用户猜测不同词语/操作/动作是否意味着同一件事。
+- **要点**：内部一致性（产品内统一）+ 外部一致性（遵循平台规范）
+- **示例**：iOS Human Interface Guidelines、Material Design 规范
+
+**核心**：相同功能使用相同的交互模式和视觉表达。
+**应用**：
+- 相同功能的图标/按钮保持一致
+- 交互模式符合平台规范（iOS HIG / Material Design）
+- 内部一致：同一产品内风格统一
+**反例**：同一产品内"编辑"按钮有时是图标、有时是文字。
+
+### 5. 错误预防（Error Prevention）
+比好的错误提示更重要的是从源头防止错误发生。
+- **要点**：用约束条件排除不可能的输入，用确认机制拦截危险操作
+- **示例**：密码强度实时检测、删除前的二次确认、日期选择器（而非手动输入）
+
+**核心**：在错误发生前就预防它，而非事后提示。
+**应用**：
+- 禁用不可用的按钮（灰显）
+- 表单实时校验
+- 危险操作二次确认
+- 输入格式提示
+**反例**：允许用户输入错误格式，提交后才报错。
+
+### 6. 识别而非回忆（Recognition Rather Than Recall）
+将对象、操作和选项可见化，减少用户的记忆负担。
+- **要点**：不要让用户记住信息从一个页面带到另一个页面
+- **示例**：导航菜单常驻可见、已填信息自动回填、历史记录
+
+**核心**：让信息可见，减少用户记忆负担。
+**应用**：
+- 显示最近搜索记录
+- 表单默认值
+- 面包屑导航
+- 操作历史可见
+**反例**：要求用户记住上一步的选择。
+
+### 7. 灵活性与使用效率（Flexibility and Efficiency of Use）
+为新手和高级用户提供不同的交互路径，加速高频用户的操作。
+- **要点**：快捷键、批量操作、自定义工作流
+- **示例**：键盘快捷键（Ctrl+C/V）、搜索命令面板、收藏/书签功能
+
+**核心**：为新手和专家提供不同的使用方式。
+**应用**：
+- 快捷键支持
+- 批量操作
+- 自定义工作区
+- 模板和预设
+**反例**：所有操作都必须经过相同的繁琐流程。
+
+### 8. 美学与极简设计（Aesthetic and Minimalist Design）
+对话中不应包含无关或极少需要的信息。界面的每一单位信息都应与用户任务相关。
+- **要点**：减少视觉噪音，突出核心操作
+- **示例**：渐进式披露（Progressive Disclosure）、隐藏高级设置
+
+**核心**：减少无关信息，突出核心内容。
+**应用**：
+- 视觉层级清晰
+- 留白合理
+- 信息分块展示
+- 渐进式披露（高级选项隐藏）
+**反例**：页面堆满信息，用户找不到重点。
+
+### 9. 帮助用户识别、诊断和恢复错误（Help Users Recognize, Diagnose, and Recover from Errors）
+错误信息应使用平实的语言（无技术术语），准确指出问题，并给出建设性的解决方案。
+- **要点**：错误信息 = 问题描述 + 原因 + 解决建议
+- **示例**：❌ "Error 404" → ✅ "页面不存在，请检查链接是否正确"
+
+**核心**：错误信息要用人话，并给出解决方案。
+**应用**：
+- 错误信息说明问题原因
+- 提供具体解决建议
+- 错误位置高亮显示
+**反例**：显示"Error: 0x8004234F"无任何解释。
+
+### 10. 帮助与文档（Help and Documentation）
+尽管最好是不需要文档就能使用系统，但仍需提供帮助和文档。
+- **要点**：帮助信息应易于搜索、聚焦任务、不要太大
+- **示例**：新手引导、工具提示（Tooltip）、上下文帮助
+
+**核心**：在用户需要时提供帮助。
+**应用**：
+- 引导教程（首次使用）
+- 上下文帮助（悬停提示）
+- 帮助中心/FAQ
+- 空状态引导
+**反例**：用户遇到问题无处求助。
+
+---
+
+## 二、格式塔视觉原理（Gestalt Principles）
+
+指导视觉信息的组织和感知。
+
+### 1. 接近性（Proximity）
+距离越近的元素越被视为一组。
+- **应用**：相关表单项分组、卡片间距设计
+
+### 2. 相似性（Similarity）
+外观相似的元素被视为同一类。
+- **应用**：统一图标风格、相同颜色表示相同状态
+
+### 3. 连续性（Continuity）
+人眼倾向于沿平滑路径追踪元素。
+- **应用**：引导线、流程图、进度指示
+
+### 4. 闭合性（Closure）
+人脑会自动补全不完整的图形。
+- **应用**：图标设计、Logo 设计、省略号表示更多
+
+### 5. 图底关系（Figure-Ground）
+人会自动区分前景（主体）和背景。
+- **应用**：弹窗遮罩、卡片浮起效果、聚焦态高亮
+
+### 6. 共同命运（Common Destiny）
+同方向/同速度运动的元素被视为一组。
+- **应用**：列表项同时滑入、批量操作动画
+
+---
+
+## 三、通用交互设计原则
+
+### 1. 菲茨定律（Fitts's Law）
+到达目标的时间取决于目标的距离和大小。
+- **公式**：T = a + b · log₂(D/W + 1)
+- **应用**：重要按钮要大且近、点击热区扩大、底部导航栏
+
+### 2. 席克定律（Hick's Law）
+选择越多，做决定的时间越长。
+- **应用**：减少选项数量、分步表单、智能默认值、搜索替代浏览
+
+### 3. 米勒定律（Miller's Law）
+普通人工作记忆能保持 7±2 个信息块。
+- **应用**：导航项不超过 7 个、分页显示、信息分组
+
+### 4. 帕累托法则（80/20 Rule）
+80% 的效果来自 20% 的功能。
+- **应用**：优先设计核心高频功能、将低频功能收纳
+
+### 5. 泰斯勒定律（Tesler's Law / 复杂性守恒）
+每个系统都有固有的、不可消除的复杂性，只能在系统和用户之间转移。
+- **应用**：系统应承担复杂性，而非转嫁给用户；智能推荐、自动补全
+
+### 6. 雅各布定律（Jakob's Law）
+用户将大部分时间花在别人的产品上，因此他们期望你的产品和他们已知的其他产品行为一致。
+- **应用**：遵循行业惯例，不要为了"创新"而违背用户习惯
+
+### 7. 冯·雷斯托夫效应（Von Restorff Effect）
+在一组相似元素中，与众不同的那个最容易被记住。
+- **应用**：主要 CTA 按钮用对比色、重要信息突出显示
+
+### 8. 多巴胺效应（Dopamine Effect）
+正向反馈会激励用户继续行为。
+- **应用**：进度条、成就徽章、微动画庆祝效果
+
+---
+
+
+## 四、设计方案评审检查清单
+
+使用以下清单快速检验设计方案：
+
+| 维度 | 检查项 | 对应原则 |
+|------|--------|----------|
+| **可用性** | 系统状态是否始终可见？ | Nielsen #1 |
+| **可用性** | 是否有撤销/返回机制？ | Nielsen #3 |
+| **可用性** | 错误是否从源头预防？ | Nielsen #5 |
+| **可用性** | 错误提示是否友好且可操作？ | Nielsen #9 |
+| **认知负荷** | 是否减少用户记忆负担？ | Nielsen #6、Miller |
+| **认知负荷** | 信息是否分层展示？ | 渐进式披露 |
+| **一致性** | 与平台/行业惯例是否一致？ | Nielsen #4、Jakob |
+| **一致性** | 产品内部风格是否统一？ | Nielsen #4、Norman #5 |
+| **效率** | 高频用户是否有快捷路径？ | Nielsen #7 |
+| **效率** | 核心功能是否易达？ | 菲茨定律、扁平层级 |
+| **视觉** | 信息分组是否合理？ | 格式塔原理 |
+| **视觉** | 重要元素是否突出？ | 冯·雷斯托夫效应 |
+| **反馈** | 每个操作是否有即时反馈？ | Norman #2 |
+| **移动端** | 触控目标是否足够大？ | 移动端 #2 |
+| **移动端** | 高频操作是否在拇指热区？ | 移动端 #1 |
+| **无障碍** | 文字对比度是否达标？ | a11y #1 |
+| **无障碍** | 是否支持键盘导航？ | a11y #2 |