@mison/ag-kit-cn 2.0.1

package/.agent/skills/frontend-design/decision-trees.md

@@ -0,0 +1,418 @@
+# 决策树与上下文模板
+
+> 基于上下文的设计思考，不是固定答案。
+> **这些是“决策指引（decision guides）”，不是可直接复制粘贴的模板。**
+> **如需 UX 心理学法则（Hick's（希克定律）、Fitts'（菲茨定律）等），请查看：** [ux-psychology.md](ux-psychology.md)
+
+---
+
+## ⚠️ 本文件使用方式
+
+本文件用于帮助你“做判断”，不是照抄。
+
+- 决策树（decision trees）→ 帮助你梳理思路。
+- 模板（templates）→ 提供结构与原则，不提供固定参数。
+- **在套用前必须先询问用户偏好**。
+- **颜色必须根据上下文重新生成**，不要直接复用十六进制色值。
+- **使用 ux-psychology.md 中的 UX 法则**校验你的决策。
+
+---
+
+## 1. 总决策树
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                        你在做什么类型的产品？                │
+└─────────────────────────────────────────────────────────────┘
+                              │
+        ┌─────────────────────┼─────────────────────┐
+        │                     │                     │
+        ▼                     ▼                     ▼
+   电商（E-commerce）        SaaS/应用             内容（Content）
+   - 产品页                  - Dashboard（仪表盘） - Blog（博客）
+   - 结算页                  - 工具端               - Portfolio（作品集）
+   - 商品目录                - 管理后台             - Landing（落地页）
+        │                     │                     │
+        ▼                     ▼                     ▼
+   核心原则：             核心原则：             核心原则：
+   - 信任                 - 功能优先             - 讲好故事
+   - 行动导向             - 清晰                 - 情绪连接
+   - 紧迫感               - 效率                 - 创造力
+```
+
+---
+
+## 2. 受众决策树
+
+### 你的目标用户是谁？
+
+```
+目标受众
+      │
+      ├── Gen Z（18-25，Z 世代）
+      │   ├── 配色：大胆、鲜明、出其不意的配色
+      │   ├── 字体：字号更大、表达感强、可变字体（variable）
+      │   ├── 布局：移动优先、纵向流、碎片化易消费
+      │   ├── 动效：动效、游戏化、互动性
+      │   └── 策略：真实、快速、避免企业化腔调
+      │
+      ├── Millennials（26-41，千禧一代）
+      │   ├── 配色：低饱和、自然、精致
+      │   ├── 字体：清晰、可读、功能导向
+      │   ├── 布局：响应式、卡片化、有组织
+      │   ├── 动效：克制且有目的的动效
+      │   └── 策略：价值导向、透明、可持续
+      │
+      ├── Gen X（42-57，X 世代）
+      │   ├── 配色：专业、可信、偏保守
+      │   ├── 字体：熟悉、清楚、直接
+      │   ├── 布局：传统层级、可预测
+      │   ├── 动效：最小化，仅保留功能反馈
+      │   └── 策略：直给、效率、可靠
+      │
+      ├── Boomers（58+，婴儿潮一代）
+      │   ├── 配色：高对比、简洁、清晰
+      │   ├── 字体：大字号、高可读性
+      │   ├── 布局：线性、简单、去杂乱
+      │   ├── 动效：无或极少
+      │   └── 策略：明确、详细、可信
+      │
+      └── B2B / Enterprise（企业级）
+          ├── 配色：专业色板、低饱和
+          ├── 字体：清晰、数据友好、易扫读
+          ├── 布局：网格化、有序、高效
+          ├── 动效：专业且克制
+          └── 策略：专家感、方案导向、ROI 导向
+```
+
+---
+
+## 3. 配色决策树
+
+### 不给固定色值，而使用以下流程：
+
+```
+你希望传达什么情绪/行动？
+            │
+            ├── Trust & Security（信任/安全）
+            │   └── 可考虑：蓝色系、专业中性色
+            │       → 询问用户具体色相偏好
+            │
+            ├── Growth & Health（成长/健康）
+            │   └── 可考虑：绿色系、自然色调
+            │       → 询问是否强调环保/自然/健康
+            │
+            ├── Urgency & Action（紧迫/行动）
+            │   └── 可考虑：暖色（橙/红）作强调色
+            │       → 控制使用比例，并确认是否合适
+            │
+            ├── Luxury & Premium（高端/奢华）
+            │   └── 可考虑：深色、金属色、克制色板
+            │       → 询问品牌定位
+            │
+            ├── Creative & Playful（创意/活泼）
+            │   └── 可考虑：多色、非常规组合
+            │       → 询问品牌个性
+            │
+            └── Calm & Minimal（平静/极简）
+                └── 可考虑：中性色 + 单一强调色
+                    → 询问哪个强调色更符合品牌
+```
+
+### 流程
+1. 先明确需要传达的情绪。
+2. 收敛到颜色“家族（color family）”。
+3. 在该家族中询问用户偏好。
+4. 使用 HSL 原则生成新色板。
+
+---
+
+## 4. 字体决策树
+
+```
+内容类型是什么？
+          │
+          ├── Data-Heavy（数据密集：仪表盘、SaaS）
+          │   ├── 风格：Sans-serif（无衬线），清晰、紧凑
+          │   ├── 比例：更紧凑（1.125-1.2）
+          │   └── 优先级：可扫读性、信息密度
+          │
+          ├── Editorial（编辑类：博客、杂志）
+          │   ├── 风格：Serif（衬线）标题 + Sans（无衬线）正文常见有效
+          │   ├── 比例：更有戏剧性（1.333+）
+          │   └── 优先级：阅读舒适、层级
+          │
+          ├── Modern Tech（现代科技：创业、SaaS 营销）
+          │   ├── 风格：几何或人文 Sans（无衬线）
+          │   ├── 比例：平衡（1.25）
+          │   └── 优先级：现代感、清晰度
+          │
+          ├── Luxury（奢华：时尚、高端）
+          │   ├── 风格：优雅 Serif（衬线）或纤细 Sans（无衬线）
+          │   ├── 比例：更夸张（1.5-1.618）
+          │   └── 优先级：高级感、留白
+          │
+          └── Playful（活泼：儿童、游戏、轻松场景）
+              ├── 风格：圆润、友好字体
+              ├── 比例：更有变化、更具表现力
+              └── 优先级：有趣、亲和、可读
+```
+
+### 选择流程
+1. 确认内容类型。
+2. 选择字体风格方向（direction）。
+3. 询问用户是否已有品牌字体。
+4. 选择符合方向的字体组合。
+
+---
+
+## 5. 电商指南（E-commerce） {#e-commerce}
+
+### 关键原则（不是固定规则）
+- **信任优先（Trust first）**：你如何证明站点可信？
+- **行动导向（Action-oriented）**：CTA 放在哪里最有效？
+- **易扫读（Scannable）**：用户能否快速比较？
+
+### 配色思路
+```
+电商通常需要：
+├── 信任色（常见蓝色系）→ 先问用户偏好
+├── 干净背景（白/中性）→ 取决于品牌
+├── 行动强调色（CTA/促销）→ 取决于紧迫级别
+├── 成功/错误语义色 → 可用通用约定
+└── 品牌色融合 → 先确认现有品牌色
+```
+
+### 布局原则
+```
+┌────────────────────────────────────────────────────┐
+│  HEADER：品牌 + 搜索 + 购物车                       │
+│  （核心动作始终可见）                                │
+├────────────────────────────────────────────────────┤
+│  TRUST ZONE：为什么值得信任？                        │
+│  （物流、退换、支付安全等，按需）                     │
+├────────────────────────────────────────────────────┤
+│  HERO：主信息/主活动                                 │
+│  （单一焦点 + 清晰 CTA）                             │
+├────────────────────────────────────────────────────┤
+│  CATEGORIES：易导航                                  │
+│  （可视化、可筛选、可扫读）                           │
+├────────────────────────────────────────────────────┤
+│  PRODUCTS：易比较                                    │
+│  （价格、评分、快捷操作清晰可见）                     │
+├────────────────────────────────────────────────────┤
+│  SOCIAL PROOF：他人为什么信任                         │
+│  （评价、证言，按实际情况）                           │
+├────────────────────────────────────────────────────┤
+│  FOOTER：完整信息                                    │
+│  （政策、联系、信任标识）                             │
+└────────────────────────────────────────────────────┘
+```
+
+### 需应用的心理学原则
+- Hick's Law（希克定律）：限制导航选项数量。
+- Fitts' Law（菲茨定律）：为 CTA（行动号召）提供合理点击面积。
+- Social proof（社会证明）：在关键决策点显示社会证明。
+- Scarcity（稀缺性）：仅在真实前提下使用稀缺性。
+
+---
+
+## 6. SaaS 仪表盘指南（SaaS Dashboard） {#saas}
+
+### 关键原则
+- **功能优先（Functional first）**：数据清晰高于装饰。
+- **平静界面（Calm UI）**：降低认知负担。
+- **一致性（Consistent）**：保证模式可预测。
+
+### 配色思路
+```
+仪表盘通常需要：
+├── 背景（background）：浅色或深色（先问偏好）
+├── Surface（表层）：与背景有轻微层次对比
+├── 主强调色：关键操作
+├── 数据语义色：success/warning/danger（成功/警告/危险）
+└── 弱化色：次要信息
+```
+
+### 布局原则
+```
+可考虑以下模式（非强制）：
+
+方案 A：Sidebar + Content
+├── 侧边导航固定
+└── 主区域承载内容
+
+方案 B：Top nav + Content
+├── 顶部横向导航
+└── 获得更多横向内容空间
+
+方案 C：Collapsed + Expandable
+├── 图标侧栏可展开
+└── 最大化内容区
+
+→ 必须询问用户偏好的导航模式
+```
+
+### 需应用的心理学原则
+- Hick's Law（希克定律）：对导航进行分组。
+- Miller's Law（米勒定律）：信息分块。
+- Cognitive Load（认知负荷）：用留白与一致性降低负担。
+
+---
+
+## 7. 落地页指南（Landing Page） {#landing-page}
+
+### 关键原则
+- **Hero（首屏）优先**：首屏印象最重要。
+- **单一焦点**：只保留一个主 CTA（行动号召）。
+- **情绪连接**：先建立共鸣，再促成转化。
+
+### 配色思路
+```
+落地页通常需要：
+├── Brand primary（品牌主色）：Hero 背景或强调色
+├── Clean secondary（干净次级色）：覆盖页面大部分区域
+├── CTA color（行动色）：与其余元素明显区分
+├── Supporting（辅助色）：分区与证言辅助色
+└── 先询问品牌色再定方案
+```
+
+### 结构原则
+```
+┌────────────────────────────────────────────────────┐
+│  Navigation（导航）：简洁，CTA 保持可见             │
+├────────────────────────────────────────────────────┤
+│  HERO（首屏）：钩子 + 价值 + CTA                    │
+│  （最大影响力区块）                                  │
+├────────────────────────────────────────────────────┤
+│  PROBLEM（问题）：目标用户痛点                       │
+├────────────────────────────────────────────────────┤
+│  SOLUTION（方案）：你如何解决                        │
+├────────────────────────────────────────────────────┤
+│  PROOF（证明）：为什么值得相信                       │
+│  （证言、品牌 logo、数据）                            │
+├────────────────────────────────────────────────────┤
+│  HOW（流程）：流程解释                               │
+├────────────────────────────────────────────────────┤
+│  PRICING（价格）：如适用                             │
+├────────────────────────────────────────────────────┤
+│  FAQ（常见问题）：回应异议                           │
+├────────────────────────────────────────────────────┤
+│  FINAL CTA（最终行动）：重复主行动                   │
+└────────────────────────────────────────────────────┘
+```
+
+### 需应用的心理学原则
+- Visceral（直觉层）：首屏视觉冲击与好感。
+- Serial Position（首因-近因效应）：关键内容放在开头/结尾。
+- Social Proof（社会证明）：证言与案例增强说服。
+
+---
+
+## 8. 作品集指南（Portfolio） {#portfolio}
+
+### 关键原则
+- **个性表达（personality）**：让人知道“你是谁”。
+- **作品优先（work-focused）**：让项目本身说话。
+- **可记忆性（memorable）**：避免模板化同质。
+
+### 配色思路
+```
+作品集高度个性化，可选方向很多：
+├── Minimal（极简）：中性色 + 单一签名强调色
+├── Bold（大胆）：非常规大胆配色
+├── Dark（深色）：情绪化、艺术感
+├── Light（浅色）：干净、职业感
+└── 必须先询问个人品牌定位
+```
+
+### 结构原则
+```
+┌────────────────────────────────────────────────────┐
+│  Navigation（导航）：体现个人风格                    │
+├────────────────────────────────────────────────────┤
+│  INTRO（介绍）：你是谁，你做什么                     │
+│  （避免泛泛而谈，要有记忆点）                         │
+├────────────────────────────────────────────────────┤
+│  WORK（作品）：代表项目                              │
+│  （大图、视觉优先、可交互）                           │
+├────────────────────────────────────────────────────┤
+│  ABOUT（关于）：个人故事                             │
+│  （建立连接）                                         │
+├────────────────────────────────────────────────────┤
+│  CONTACT（联系）：低成本联系                         │
+│  （清晰、直接）                                       │
+└────────────────────────────────────────────────────┘
+```
+
+### 需应用的心理学原则
+- Von Restorff（冯·雷斯托夫效应）：制造独特记忆点。
+- Reflective（反思层）：个人故事增强认同。
+- Emotional（情绪层）：适度突出个性表达。
+
+---
+
+## 9. 设计前检查清单
+
+### 开始任何设计前
+
+- [ ] **受众已定义？**（是谁）
+- [ ] **主目标已明确？**（希望用户做什么）
+- [ ] **约束已识别？**（时间、品牌、技术）
+- [ ] **内容已准备？**（是否需要占位内容）
+- [ ] **已询问用户偏好？**（颜色、风格、布局）
+
+### 选择颜色前
+
+- [ ] **已问用户偏好？**
+- [ ] **已考虑上下文？**（行业、情绪）
+- [ ] **是否区别于默认风格？**
+- [ ] **无障碍可读性已检查？**
+
+### 定稿布局前
+
+- [ ] **层级是否清晰？**
+- [ ] **主 CTA（行动号召）是否明显？**
+- [ ] **是否考虑移动端？**
+- [ ] **内容是否匹配结构？**
+
+### 交付前
+
+- [ ] **是否达到高级感而非模板感？**
+- [ ] **你自己是否认可这次输出？**
+- [ ] **与上个项目是否有明确差异？**
+
+---
+
+## 10. 复杂度估算
+
+### 小型项目（小时级）
+```
+简单落地页
+小型作品集
+基础表单
+单一组件
+```
+→ 建议策略：少决策、快执行、聚焦关键目标。
+
+### 中型项目（天级）
+```
+多页站点
+模块化仪表盘
+电商分类页
+复杂表单
+```
+→ 建议策略：先建立 design tokens（设计令牌），再做定制组件。
+
+### 大型项目（周级）
+```
+完整 SaaS（软件即服务）应用
+电商平台
+定制设计系统
+复杂流程
+```
+→ 建议策略：完整设计系统 + 文档化 + 系统化测试。
+
+---
+
+> **记住：** 这些模板提供的是“结构与思考路径”。每个项目都必须基于其独特上下文，重新做配色、排版与风格决策；不确定时就先问用户。