🎯 学 gstack 的批量视觉探索系统：不是一次生成一个设计方案然后反复修改，而是一次性生成多个视觉方向（散弹枪式覆盖）——不同的配色、排版、布局——让"选择哪个方案"变成有选项可以对比的决策。 ⏱️ 预计时间：20 分钟
[!tip] 初学提示：如果你第一次接触"散弹枪式"设计方法论，重点理解第1节的"先广度后深度"哲学——这是与传统迭代设计的根本区别。
[!quote]- 📖 原Skill精要 技能名称：design-shotgun（发散探索维度） 核心功能：与 [[L6-11-设计方案散弹枪|design-shotgun]] 共享同一个 Skill，本课聚焦其"先广度后深度"的设计哲学——一次性生成多个完全不同方向的视觉方案（不同配色、排版、布局），让"选方案"变成有对比的决策而非模糊的偏好。 所属体系：gstack 虚拟工程团队 协作关系：锁定视觉方向后交给 [[L6-42-设计到代码|design-html]] 实现为生产代码
§1 课程概览
[!info] 白话小课堂 一句话：别在一个方案上反复改来改去——同时做出 5-10 个完全不同方向的方案，摆在一起比较，挑出最合适的那一个再深入。
为什么重要：传统设计流程的问题是"你只能在一条路的变体里走"——换了个颜色、调了下间距，但底层的布局逻辑从来没变过。Shotgun 打破了这个局限：极简 vs 丰富、深色 vs 浅色、现代 vs 复古——你看到的是"设计空间的全景"，不是"一个方案的微调版"。
核心心法：先广度后深度。广度 = 探索设计空间的边界（哪些方向是可能的），深度 = 在选定的方向上精益求精（做到像素级完美）。两个阶段不要混淆——不要在广度阶段追求完美，也不要在深度阶段回头改方向。
§2 结构拆解
核心特征
- 管理对象：视觉设计方向（配色方案 + 排版风格 + 布局密度 + 主题模式）
- 核心原则：先广度后深度 —— 先覆盖设计空间的全景，再在最佳方向上深入
- 关键设计：
- 散弹枪式并行生成：同时产出 5-10 个截然不同的方向
- 多维度区分：配色、排版、布局、主题必须全部不同（否则退化为"换色"）
- 对比视图：并排展示让决策者同时看到所有选项
- 方向推荐：基于目标用户匹配度给出选择建议（不是"最好看"是"最适合"）
通用结构
输入层： → 设计需求描述（产品类型、目标用户、品牌个性） → 约束条件（品牌色、已有 DESIGN.md、竞品参考） ├── 方向生成器 │ ├── 配色维度：[极简单色 ↔ 丰富渐变] │ ├── 排版维度：[现代无衬线 ↔ 衬线传统 ↔ 手写温度] │ ├── 布局维度：[大留白1列 ↔ 密集网格3-4列] │ └── 主题维度：[浅色明亮 ↔ 深色沉浸] ├── 对比视图渲染（并排展示，每方向标注设计语言） └── 方向选择器（基于目标用户匹配度推荐） 输出层： → 5-10 个完整视觉方向（含配色方案、排版说明、布局描述） → 推荐方向（标注原因：目标用户匹配度、品牌一致性） → 被排除方向的风险标记（如"不适合当前用户群但适合高端线"）
§3 Shotgun 的设计哲学——先广度，后深度
Shotgun vs 迭代式设计
迭代式设计： 做一个方案 → 不喜欢 → 修改 → 还是不喜欢 → 再修改 问题：你只能在"一个方案的变体"中打转
Shotgun 式设计： 同时生成 5-10 个截然不同的视觉方向 → 极简主义 vs 丰富色彩 → 深色主题 vs 浅色主题 → 现代扁平 vs 拟物风格 → 大胆排版 vs 传统排版
然后选择方向 → 在该方向上深度迭代。
Shotgun 的输出
→ 多个设计变体（HTML/CSS 或图片） → 每个变体标注：设计方向、配色方案、排版风格 → 对比视图（并排展示多个方案） → 选择 → 进入 design-html 深度开发
§4 电商 Skill 案例：家居电商App首页5种视觉方向发散探索
🛒 实战案例：某家居电商品牌计划全面改版App首页。目标用户25-45岁注重生活品质的消费者，品牌定位"温暖、自然、匠心"。团队对改版方向有分歧——设计主管倾向极简北欧风、产品经理倾向温馨日式风、CEO想要"看起来贵但实际上不贵"的高级感。使用
/design-shotgun生成5个截然不同的视觉方向，让数据而非意见决定方向。
- 5个方向生成：方向A极简北欧风——大面积留白+浅橡木色+无衬线字体Inter、1列大图布局、风格参考HAY/MUUTO；方向B温馨日式风——米色/抹茶绿+柔和暖调+衬线字体Noto Serif、非对称网格布局、风格参考Muji/IDEE；方向C高级画廊风——#1a1a1a深色底+金色点缀+粗体Druk Wide标题、全屏沉浸式大图、风格参考RH Restoration Hardware；方向D自然手工风——粗麻布纹理背景+手写字体Caveat+暖调泥土色、卡片式产品展示、风格参考Etsy/手工市集；方向E活泼明亮风——品牌绿#2D6A4F+明黄点缀+圆润几何图形、模块化网格布局、风格参考IKEA新形象。5个方向覆盖了"极简←→丰富"、"温暖←→冷峻"、"手工←→工业"三个关键设计轴。
- 内部评审与筛选：团队5人评审5个方向→3人倾向方向A(极简北欧)、1人方向B(日式)、1人方向D(手工)。CEO倾向方向C(高级画廊——"这个看起来贵")。但目标用户是"注重生活品质的25-45岁消费者"非奢侈品买家→方向C的深色+金色的"奢华/稀缺"传达与品牌"温暖、自然、匠心"定位存在冲突。最终决定方向A(北欧)和方向B(日式)进入用户测试。
- 用户测试结果：在30位目标用户中进行偏好测试→方向A极简北欧：57%首选"感觉空间很大、产品很突出、浏览不累"；方向B日式：33%首选"感觉很温暖、想在这个空间里待更久"；方向C高级画廊：7%首选"好看但不太像家居品牌"；方向D/E：合计3%。转化模拟——方向A的加购CTA点击率预测值最高（清晰的视觉层次引导视线到产品卡片→加购按钮）。最终选择方向A(北欧极简)为基础方向，融入方向B的温暖色调（将橡木色调暖至蜜色）作为差异化。实际上线后：首页停留时长从42s→68s(+62%)，加购转化率从3.1%→4.3%(+39%)。
🔑 启示：Shotgun式设计探索的"一次生成5个方向"不是为了炫耀AI的生成能力——而是为了打破迭代式设计中的"锚定效应"。迭代式流程中设计师在方案A上反复修改→在第7版时已经对这个方案产生了认知锚定→认为这就是最好的方案。Shotgun同时呈现5个截然不同的方向→消除锚定→让选择从"修改第7版"变为"在5个方向中选最优"。CEO倾向的方向C在用户测试中只获7%支持——如果一开始就沿着CEO的直觉走迭代→最终方案很可能是方向C的变体→上线效果可想而知。
[!info] 参考来源 Shotgun 设计探索参考了 design/spark 的视觉生成模式和 daily.co 的 AI 辅助 UI 设计流程。用户偏好测试方法论参考了 Nielsen Norman Group 的设计评估研究。
§5 掌握检验
Q1：Shotgun 式设计和迭代式设计的最本质区别是什么？
- A) Shotgun 一次只生成一个方案，迭代式一次生成多个方案
- B) Shotgun 先广度后深度——同时生成多个截然不同的视觉方向后选择最合适的深入；迭代式在一个方案上反复修改——只能在变体中打转
- C) Shotgun 更快但质量更低
- D) 两种方式没有本质区别
Q2：电商案例中为目标用户（18-35 岁女性，时尚品类）生成了 5 个方向，为什么"方向 C（深色主题 + 金色点缀 / Luxury 风格）"被标记为"适合高端线，不是大众定位"？
- A) 深色主题在所有设备上显示效果差
- B) 设计方向的选择不是"好看 vs 不好看"而是"适合目标用户 vs 不适合"——深色+金色传达的是"奢华/稀缺/高门槛"，与大众时尚品类（可及、温暖、亲和）的品牌定位冲突
- C) 金色在网页上无法正确渲染
- D) 方向 C 的代码量太大
Q3：Shotgun 的 5 个视觉方向的区分维度有哪些？请列出至少 4 个区分维度，并说明每个维度上的两个极端（如"极简 vs 丰富"）。为什么区分维度必须足够大才能发挥 shotgun 的价值——如果 5 个方案只是配色不同但布局相同，shotgun 会失效吗？
Q4：Shotgun 和设计迭代式方法相比，在"决策质量"上有什么优势？请从以下场景分析：一个产品经理需要对 3 个设计方向做出选择。迭代式流程中她看到的是"方案 A 的第 7 版"——她不知道还有方案 B 和 C 存在。Shotgun 流程中她同时看到 A/B/C/D/E 五个初版方案。哪种流程下她做出的选择更可能正确？为什么？
Q5：电商案例中生成了方向 A（极简白 + 品牌橙点缀 / Everlane 风格）和方向 B（柔和粉彩 + 卡片式 / Glossier 风格）作为推荐方向。这两个方向在"设计语言"上的对比——极简白传达什么品牌感受？柔和粉彩传达什么品牌感受？如果目标用户是"18-25 岁男性，街头潮流品类"，这两个推荐方向还适用吗？如果不适用，哪两个原始方向（或新方向）更适合？
Q6：Shotgun 输出多方向后，推荐系统给出了方向建议。但如果用户选择了"不推荐的"方向（如选择了深色主题但产品是大众定位），设计系统应该如何处理？是强制纠正用户的选择，还是接受但在后续 design-review 中标记风险？请从"AI 辅助设计决策"的边界角度分析——AI 的建议和人的最终决策权如何平衡？
§6 答案
点击查看答案
Q1：B —— Shotgun 的哲学是"不要在单一方向上过度投资判断力"——首先生成多个截然不同的方向（极简 vs 丰富、深色 vs 浅色、现代 vs 复古），然后选择最有潜力的方向深入。
Q2：B —— 设计方向选择的核心是"目标用户匹配度"，不是"设计的绝对好坏"。
Q3：四个区分维度：①配色方案（极简白/单色 vs 丰富渐变/多色）；②布局密度（大留白/1列 vs 密集网格/3-4列）；③排版风格（大号粗体/现代 vs 衬线/传统 vs 手写/温暖）；④主题模式（浅色主题 vs 深色主题）；⑤视觉风格（扁平/现代 vs 拟物/丰富质感）。区分维度必须足够大——如果 5 个方案只在配色上不同但布局完全相同，shotgun 就退化为"换个颜色看看"而非"探索不同的设计方向"——设计师无法从这 5 个方案中判断"用户更喜欢什么样的信息架构"（因为信息架构完全一样）。
Q4：迭代式流程中的决策盲区：产品经理看到方案 A v7 时，她只能判断"这个方案好不好"——但无法判断"是否存在更好的方案 B"。她的决策建立在"方案 A 是我唯一看到的"这个错误前提上——她选择 A 可能不是因为 A 是最好的，而是因为 A 是她唯一看到的。Shotgun 流程中她能看到"设计空间的全景"——她能在 A/B/C/D/E 之间对比——选择不是"这个好不好"而是"在这 5 个中，哪个最适合我们的用户"。她的决策质量更高因为她的选择空间更完整——她知道了"被排除的选项是什么"，因此更理解"她选择的选项为什么是对的"。
Q5：极简白（A）传达：干净、信任、品质感、"让产品说话"——适合强调产品质量和信任感的品牌（护肤品、高端家居）。柔和粉彩（B）传达：女性化、温暖、亲和、社区感——适合强调情感连接和社区归属感的品牌（美妆、生活方式）。对于"18-25 岁男性，街头潮流"：A 和 B 都不适用——极简太"成熟"，粉彩太"女性化"。更适合的方向：方向 D（活力渐变 + 动态排版 / Nike 风格）——活力、运动、年轻能量；或新方向 F（工业风格 + 粗犷字体 + 高对比度 / Supreme 风格）——街头、反叛、限量感。品牌个性必须通过设计语言来传达——用错了设计语言，就像穿着西装去滑板公园。
Q6：AI 不应该强制纠正用户的选择——因为方向选择涉及品牌战略，这是创始人的决策权。但 AI 应该：①明确标记风险——"你选择了方向 C（深色奢华）但你的目标用户是 18-35 岁女性时尚品类——深色奢华传达的'高端门槛'可能与你的品牌定位'可及'冲突"；②提供折中方案——"如果你喜欢深色，我们可以用深色但降低奢华感——如深蓝而非深黑，搭配温暖的珊瑚色而非金色"；③在后续 design-review 中增加"品牌定位一致性"检查项——确保深色主题的实现不会进一步滑向奢华方向。AI 的角色是"揭示决策的后果"而非"代替决策"——产品经理选择深色可能是故意的（品牌正在向上转型）——AI 不知道这个战略意图，不应该阻止执行。
（5/6 通过）
延伸阅读
- [[L6-40-设计深度审计|上一课：设计深度审计]]
- [[L6-42-设计到代码|下一课：设计到代码]]
评论区
共 0 条评论