tomevault-io Feat 插图设计方法论
核心理念
不是套模板，而是理解本质；不是执行规则，而是运用原则。
优秀的插图设计源于对内容的深刻理解，而非对模板的机械应用。本方法论提供设计思维框架，让创作在合理边界内自由发挥。
一、设计的本质
1.1 插图存在的意义
插图不是装饰，而是信息的视觉翻译。
文字信息 ──→ 认知加工 ──→ 视觉表达
│ │ │
│ │ │
▼ ▼ ▼
抽象概念 理解与提炼 具象呈现
核心问题：这张图要帮助读者理解什么？
1.2 好插图的标准
| 维度 | 标准 | 反例 |
|---|---|---|
| 传达效率 | 3秒内理解主旨 | 需要反复阅读才能理解 |
| 信息精准 | 视觉与内容高度一致 | 图文不符或过度装饰 |
| 视觉舒适 | 层次清晰、留白得当 | 拥挤杂乱或空洞无物 |
| 风格统一 | 元素之间和谐共存 | 风格混搭、元素冲突 |
二、设计思维框架
2.1 内容解码
在动手设计前，先回答五个问题：
| 问题 | 探究方向 | 设计启示 |
|---|---|---|
| What | 核心信息是什么？ | 决定视觉焦点 |
| Why | 为什么要这张图？ | 决定信息密度 |
| Who | 读者是谁？ | 决定表达方式 |
| Where | 出现在哪里？ | 决定尺寸比例 |
| How | 如何表达最有效？ | 决定视觉形式 |
2.2 视觉翻译
将抽象内容转化为视觉语言：
| 内容本质 | 视觉表达 | 设计要点 |
|---|---|---|
| 过程/流程 | 线性叙事 | 方向感、阶段感、连贯性 |
| 对比/选择 | 并置对照 | 平衡感、差异强调 |
| 层次/结构 | 嵌套堆叠 | 层级区分、关系清晰 |
| 概念/抽象 | 符号隐喻 | 识别度、联想性 |
| 情感/氛围 | 场景渲染 | 情绪传递、意境营造 |
| 关系/网络 | 连接辐射 | 节点关系、路径清晰 |
2.3 风格决策
风格不是选择，而是内容属性的自然延伸：
内容属性分析
│
├── 技术含量高 ──→ 几何、规整、冷色调
│
├── 情感浓度高 ──→ 有机、柔和、暖色调
│
├── 信息密度高 ──→ 简约、克制、高对比
│
└── 创意要求高 ──→ 独特、新颖、有记忆点
风格是结果，不是起点。 先理解内容，风格自然浮现。
三、设计原则
3.1 核心原则
原则一：一图一意
每张图只传达一个核心信息。
❌ 错误：一张图同时展示架构、流程、性能数据
✅ 正确：一张图展示架构，另一张图展示性能对比
原则二：视觉层级
建立清晰的信息层次：主 > 次 > 辅
视觉权重分配：
├── 主信息：最大字号、最强对比、中心位置
├── 次信息：中等处理，支撑主信息
└── 辅助信息：最小、最淡，不抢焦点
原则三：留白呼吸
内容占比不超过 60%，留白是设计的一部分。
留白的作用：
├── 视觉休息：避免信息过载
├── 焦点强化：突出主体
└── 品质感：留白 = 高端感
原则四：对比统一
在变化中寻求统一，在统一中制造对比。
对比：大小、颜色、形状、位置
统一：风格、色调、元素、节奏
3.2 配色原则
色彩心理学
| 色调 | 心理联想 | 适用场景 |
|---|---|---|
| 蓝色系 | 专业、信任、技术 | 技术文档、企业级产品 |
| 绿色系 | 成长、自然、安全 | 教程、环保、健康 |
| 紫色系 | 创新、神秘、高端 | AI、新产品、高端服务 |
| 橙色系 | 活力、热情、行动 | 活动、促销、号召 |
| 红色系 | 紧急、重要、热情 | 警告、重点、节日 |
配色公式
60-30-10 法则：
├── 主色 60%：背景、大面积色块
├── 辅色 30%：次要元素、边框
└── 强调色 10%：重点突出、CTA
对比度要求
- 正文文字对比度 ≥ 4.5:1（WCAG AA）
- 大标题对比度 ≥ 3:1
- 确保可读性优先于美观性
四、创作边界
4.1 硬性约束（必须遵守）
| 约束类型 | 具体要求 | 原因 |
|---|---|---|
| 尺寸规范 | 封面 900×383，正文 900×自适应 | 平台要求 |
| 格式要求 | 静态 HTML，无动画无交互 | 输出为图片 |
| 对比度 | 文字对比度 ≥ 4.5:1 | 可读性 |
| 内容完整 | 不超出容器边界 | 防止裁剪 |
| 品牌标识 | 包含 Feat 品牌 | 品牌一致性 |
4.2 防溢出约束（关键）
容器必须设置 overflow: hidden，超出内容会被裁剪，不会显示。
内容容量上限
| 内容类型 | 最大数量 | 单项字数 | 安全边距 |
|---|---|---|---|
| 主标题 | 1 个 | ≤12 字 | 距边缘 ≥40px |
| 副标题 | 1 个 | ≤20 字 | 距边缘 ≥30px |
| 列表项（横向） | ≤4 个 | ≤8 字 | 间距 ≥12px |
| 列表项（纵向） | ≤5 个 | ≤15 字 | 间距 ≥8px |
| 关键词标签 | ≤5 个 | ≤6 字 | 间距 ≥8px |
| 功能亮点 | ≤4 个 | ≤10 字 | 间距 ≥16px |
| 步骤节点 | ≤5 个 | ≤8 字 | 间距 ≥20px |
防溢出技术规范
/* 必须设置 */
.container {
width: 900px;
height: 383px; /* 或其他固定高度 */
overflow: hidden; /* 关键：防止溢出 */
position: relative;
}
/* 内容区域留出安全边距 */
.content {
padding: 40px; /* 四周留白 */
box-sizing: border-box;
}
/* 文字截断 */
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 多行文字截断 */
.text-clamp {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
溢出风险检查
生成前必须检查：
| 检查项 | 标准 | 不达标处理 |
|---|---|---|
| 文字总长度 | 不超过容器 80% 宽度 | 缩短文字或换行 |
| 元素总高度 | 不超过容器 70% 高度 | 减少元素或缩小字号 |
| 元素间距 | ≥8px | 调整布局 |
| 边缘距离 | 内容距边缘 ≥30px | 增加内边距 |
4.3 软性约束（建议遵守）
| 约束类型 | 建议范围 | 可突破条件 |
|---|---|---|
| 文字长度 | 标题 ≤12 字，说明 ≤20 字 | 有特殊设计需求时 |
| 元素数量 | 主要元素 ≤5 个 | 复杂信息图可增加 |
| 留白比例 | 30-50% | 极简风格可更多 |
| 配色数量 | 主色 1 + 辅色 2-3 | 渐变、插画可更多 |
4.3 自由创作空间
在边界内，以下方面可自由发挥：
创作自由度
│
├── 布局方式 ──→ 自由选择：居中、左右、上下、对角、辐射...
│
├── 视觉元素 ──→ 自由创造：形状、图标、线条、装饰...
│
├── 配色方案 ──→ 自由搭配：在色彩心理学指导下
│
├── 字体处理 ──→ 自由设计：大小、粗细、间距、排列
│
└── 细节风格 ──→ 自由定义：圆润/锐利、简约/丰富、现代/复古
五、设计决策逻辑
5.1 内容 → 形式 决策链
Step 1: 识别内容本质
│
▼
Step 2: 确定视觉形式（流程图？对比图？概念图？）
│
▼
Step 3: 选择布局结构（线性？并列？嵌套？辐射？）
│
▼
Step 3.5: 【强制】布局尺寸计算（见 5.3 节公式）
│
▼
Step 4: 确定风格基调（简约？手绘？科技？温暖？）
│
▼
Step 5: 设计配色方案（基于情感和主题）
│
▼
Step 6: 细化视觉元素（图标、装饰、细节）
│
▼
Step 7: 【强制】溢出验证（见 5.4 节检查清单）
5.2 布局计算公式（强制执行）
⚠️ 关键：生成代码前必须完成以下计算，确保内容不溢出！
通用计算公式
可用宽度 = 容器宽度 - 左右 padding - 预留边距
可用高度 = 容器高度 - 上下 padding - 预留边距
安全原则：实际使用 ≤ 可用空间的 90%
网格布局计算
假设：cols 列，rows 行，gap 间距
单格宽度 = (可用宽度 - (cols-1) × gap) / cols
单格高度 = (可用高度 - (rows-1) × gap) / rows
验证：单格高度 ≥ 内容高度（图标 + 文字 + 内边距）
示例计算（3×2 网格，容器 900×500）：
可用宽度 = 900 - 50×2 = 800px
可用高度 = 500 - 36×2 - 标题区(90) - 底部预留(20) = 318px
单格宽度 = (800 - 2×18) / 3 = 254.67px
单格高度 = (318 - 18) / 2 = 150px
卡片内容：
- 图标 44px + margin 12px = 56px
- 标题 16px + margin 6px = 22px
- 描述 12px × 1.4 = 17px
- padding 18px × 2 = 36px
- 总计：56 + 22 + 17 + 36 = 131px ✓ < 150px
横向列表计算
单个宽度 = (可用宽度 - (n-1) × gap) / n
验证：单个宽度 ≥ 图标宽度 + 文字宽度 + padding
纵向列表计算
单个高度 = (可用高度 - (n-1) × gap) / n
验证：单个高度 ≥ 图标高度 + 文字行数 × 行高 + padding
5.3 溢出检查清单（生成前必检）
在输出 HTML 代码前，必须逐项检查并确认：
| 检查项 | 计算公式 | 阈值 | 当前值 | 是否通过 |
|---|---|---|---|---|
| 容器总高度 | 所有区块高度之和 | ≤ 容器高度 - padding | ___px | ☐ |
| 单格高度 | 内容高度 + padding | ≤ 计算所得单格高度 | ___px | ☐ |
| 文字行数 | 总字数 / 单行字数 | ≤ 预期行数 | ___行 | ☐ |
| 边缘距离 | 内容到容器边缘 | ≥ 30px | ___px | ☐ |
5.4 常见溢出原因与修正
| 溢出原因 | 表现 | 修正方案 |
|---|---|---|
| padding 过大 | 内容区域被压缩 | 减小 padding 至 30-40px |
| gap 过大 | 单格空间不足 | 减小 gap 至 16-20px |
| 字号过大 | 文字超出预期 | 减小字号 2-4px |
| 元素过多 | 总高度超标 | 减少元素或增加容器高度 |
| 未预留标题空间 | 内容区被挤压 | 先扣除标题区高度再计算 |
5.5 常见场景决策参考
| 场景 | 内容本质 | 视觉形式 | 布局建议 | 风格倾向 |
|---|---|---|---|---|
| 技术教程 | 步骤流程 | 流程图 | 线性/纵向 | 简约专业 |
| 产品发布 | 亮点展示 | 特性卡片 | 并列/网格 | 现代渐变 |
| 概念解释 | 抽象具象化 | 概念图 | 中心辐射 | 手绘/简约 |
| 方案对比 | 差异呈现 | 对比图 | 左右并列 | 中性平衡 |
| 成长故事 | 时间叙事 | 时间轴 | 线性/曲线 | 温暖手绘 |
| 架构说明 | 层次关系 | 结构图 | 嵌套堆叠 | 简约专业 |
注意：以上是参考，不是规则。根据具体内容灵活调整。
六、技术实现
6.1 基础技术栈
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>插图标题</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f0f0f0;
}
.container {
width: 900px;
height: 383px; /* 封面高度，正文可调整 */
overflow: hidden; /* 关键：防止溢出 */
position: relative;
background: #ffffff;
}
</style>
</head>
<body>
<div class="container">
<!-- 内容必须在容器内 -->
</div>
</body>
</html>
6.2 防溢出核心要点
┌─────────────────────────────────────────────────────────────┐
│ overflow: hidden 是必须的，超出内容会被裁剪，不会显示 │
├─────────────────────────────────────────────────────────────┤
│ │
│ 安全区域 = 容器尺寸 - padding - 预留边距 │
│ │
│ 封面 900×383：安全区域约 820×303（padding 40px） │
│ 正文 900×500：安全区域约 820×420（padding 40px） │
│ │
└─────────────────────────────────────────────────────────────┘
6.3 CSS 变量系统
:root {
/* 中性色 */
--neutral-900: #171717;
--neutral-700: #404040;
--neutral-500: #737373;
--neutral-200: #e5e5e5;
--neutral-50: #fafafa;
/* 功能色 */
--primary: #2563eb; /* 主色-可替换 */
--accent: #f59e0b; /* 强调色-可替换 */
/* 手绘风格色（可选） */
--art-cream: #fef9f3;
--art-primary: #7c6ba0;
--art-line: #5d4e37;
}
6.4 字体规范
/* 系统字体栈 */
font-family:
-apple-system,
BlinkMacSystemFont,
"PingFang SC",
"Hiragino Sans GB",
"Microsoft YaHei",
sans-serif;
/* 手绘风格字体（可选） */
font-family:
"ZCOOL KuaiLe",
"Ma Shan Zheng",
"PingFang SC",
sans-serif;
6.5 常用布局模式
居中布局
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
左右分栏
.container {
display: flex;
}
.left { flex: 1; }
.right { flex: 1; }
网格布局
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
七、质量检验
7.1 自检清单
生成后，逐一检验：
防溢出检查（最重要）
- 容器是否设置
overflow: hidden？ - 所有内容是否在容器边界内？
- 文字是否超出预期宽度？
- 元素是否超出预期高度？
- 边缘是否留有 ≥30px 安全边距？
传达效果
- 3 秒内能理解主旨吗？
- 视觉与内容一致吗？
- 信息层次清晰吗？
视觉质量
- 配色和谐吗？
- 对比度足够吗？
- 留白合理吗？
技术规范
- 尺寸正确吗？
- 品牌标识正确吗？
7.2 溢出问题诊断与修正
| 溢出类型 | 表现 | 原因 | 修正方案 |
|---|---|---|---|
| 文字溢出 | 文字被截断或超出 | 字数过多/字号过大 | 缩短文字、缩小字号、换行 |
| 元素溢出 | 元素被裁剪 | 数量过多/尺寸过大 | 减少元素、缩小尺寸 |
| 布局溢出 | 整体超出容器 | padding 不足 | 增加内边距 |
| 定位溢出 | 绝对定位元素超出 | 坐标计算错误 | 调整定位值 |
7.3 常见问题与修正
| 问题 | 表现 | 修正方向 |
|---|---|---|
| 信息过载 | 元素太多、拥挤 | 删减非必要元素、增加留白 |
| 层次混乱 | 分不清主次 | 强化主信息对比度、弱化次要信息 |
| 风格冲突 | 元素风格不统一 | 统一形状语言、色调、线条风格 |
| 对比不足 | 视觉平淡 | 增加大小、颜色、粗细对比 |
| 留白不足 | 紧迫感强 | 减少元素、增加间距 |
八、创作示例
示例 1：技术教程封面
内容：Feat 框架快速入门，5 分钟搭建第一个服务
设计思考：
- 本质：教程 → 流程 → 步骤感
- 受众：开发者 → 专业、简洁
- 风格：技术向 → 简约、蓝色系
- 布局：标题 + 步骤展示
设计决策：
- 主色：蓝色（#2563eb）— 技术感
- 布局：左对齐，步骤横向排列
- 元素：步骤编号 + 简短文字
示例 2：概念解释插图
内容：AI Agent 的工作原理：感知、决策、执行、学习
设计思考：
- 本质：概念 → 循环 → 周而复始
- 受众：普通读者 → 友好、易懂
- 风格：概念向 → 手绘、温暖
- 布局：中心辐射或循环图
设计决策：
- 主色：紫色（#7c3aed）— AI 感
- 布局：中心图标 + 四周关键词环绕
- 元素：AI 图标 + 手绘装饰
示例 3：产品发布封面
内容：Feat 2.0 发布，三大亮点
设计思考：
- 本质：发布 → 亮点 → 吸引眼球
- 受众：潜在用户 → 活力、现代
- 风格：推广向 → 渐变、动感
- 布局：标题 + 亮点并列
设计决策：
- 主色：紫色渐变 — 新颖感
- 布局：标题居上，亮点横向排列
- 元素：NEW 标签 + 功能图标
九、参考资源
- wechat-design-spec.md — 微信平台技术规范
- templates/ — 历史模板参考（可借鉴，不必照搬）
版本历史
| 版本 | 日期 | 更新内容 |
|---|---|---|
| 4.2.0 | 2025-04-07 | 添加强制布局计算公式和溢出检查清单，优化决策流程 |
| 4.1.0 | 2025-04-05 | 强化防溢出约束，添加容量上限和技术规范 |
| 4.0.0 | 2025-04-05 | 重构：方法论驱动，边界内自由创作 |
| 3.0.0 | 2025-04-05 | 引入智能提示词框架 |
| 2.0.0 | 2025-04-01 | 完善内容约束与配色系统 |
| 1.0.0 | 2025-03-01 | 初始版本 |
Source: smartboot/smart-socket — distributed by TomeVault.