illustrator

文章插图设计方法论

核心理念

不是套模板，而是理解本质；不是执行规则，而是运用原则。

优秀的插图设计源于对内容的深刻理解，而非对模板的机械应用。本方法论提供设计思维框架，让创作在合理边界内自由发挥。

---

配置系统

本 skill 使用配置系统来适配不同品牌和平台。

品牌配置

品牌配置存储在 config/brands/ 目录下，每个品牌有独立的 YAML 文件：

# config/brands/{brand-name}.yml
brand:
  name: "品牌名称"
  tagline: "品牌标语"

colors:
  primary: "#2563eb"
  primary-light: "#3b82f6"
  primary-dark: "#1d4ed8"
  secondary: "#64748b"
  accent: "#f59e0b"

neutral:
  50: "#fafafa"
  100: "#f5f5f5"
  200: "#e5e5e5"
  500: "#737373"
  700: "#404040"
  900: "#171717"

typography:
  font-stack: "-apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif"
  art-font: "'ZCOOL KuaiLe', 'Ma Shan Zheng', sans-serif"

logo:
  text: "LOGO"
  position: "bottom-right"

平台配置

平台配置存储在 config/platforms/ 目录下：

# config/platforms/{platform-name}.yml
platform:
  name: "平台名称"

sizes:
  cover-large:
    width: 900
    height: 383
  cover-medium:
    width: 900
    height: 500
  inline:
    width: 900
    height: auto

safe-area:
  top: 60
  bottom: 40
  left: 40
  right: 40

format:
  type: "static-html"
  output: "png/jpg"
  max-size: "2MB"

使用配置

生成插图时，按以下步骤操作：

1. 识别品牌：检查用户是否指定品牌，否则使用默认
2. 识别平台：检查用户是否指定平台，否则使用默认
3. 加载配置：读取对应的 YAML 文件
4. 应用配置：在设计中使用品牌颜色、平台尺寸

---

一、设计的本质

1.1 插图存在的意义

插图不是装饰，而是信息的视觉翻译。

文字信息 ──→ 认知加工 ──→ 视觉表达
    │            │            │
    ▼            ▼            ▼
  抽象概念    理解与提炼    具象呈现

核心问题：这张图要帮助读者理解什么？

1.2 好插图的标准

---

二、设计思维框架

2.1 内容解码

在动手设计前，先回答五个问题：

2.2 视觉翻译

将抽象内容转化为视觉语言：

2.3 风格决策

风格不是选择，而是内容属性的自然延伸：

内容属性分析
     │
     ├── 技术含量高 ──→ 几何、规整、冷色调
     │
     ├── 情感浓度高 ──→ 有机、柔和、暖色调
     │
     ├── 信息密度高 ──→ 简约、克制、高对比
     │
     └── 创意要求高 ──→ 独特、新颖、有记忆点

风格是结果，不是起点。 先理解内容，风格自然浮现。

---

三、设计原则

3.1 核心原则

原则一：一图一意

每张图只传达一个核心信息。

❌ 错误：一张图同时展示架构、流程、性能数据
✅ 正确：一张图展示架构，另一张图展示性能对比

原则二：视觉层级

建立清晰的信息层次：主 > 次 > 辅

视觉权重分配：
├── 主信息：最大字号、最强对比、中心位置
├── 次信息：中等处理，支撑主信息
└── 辅助信息：最小、最淡，不抢焦点

原则三：留白呼吸

内容占比不超过 60%，留白是设计的一部分。

留白的作用：
├── 视觉休息：避免信息过载
├── 焦点强化：突出主体
└── 品质感：留白 = 高端感

原则四：对比统一

在变化中寻求统一，在统一中制造对比。

对比：大小、颜色、形状、位置
统一：风格、色调、元素、节奏

3.2 配色原则

色彩心理学

配色公式

60-30-10 法则：
├── 主色 60%：背景、大面积色块
├── 辅色 30%：次要元素、边框
└── 强调色 10%：重点突出、CTA

对比度要求

• 正文文字对比度 ≥ 4.5:1（WCAG AA）
• 大标题对比度 ≥ 3:1
• 确保可读性优先于美观性

---

四、创作边界

4.1 硬性约束（必须遵守）

4.2 防溢出约束（关键）

容器必须设置 overflow: hidden，超出内容会被裁剪，不会显示。

内容容量上限

防溢出技术规范

/* 必须设置 */
.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;
}

溢出风险检查

生成前必须检查：

4.3 软性约束（建议遵守）

4.4 自由创作空间

在边界内，以下方面可自由发挥：

创作自由度
│
├── 布局方式 ──→ 自由选择：居中、左右、上下、对角、辐射...
│
├── 视觉元素 ──→ 自由创造：形状、图标、线条、装饰...
│
├── 配色方案 ──→ 自由搭配：在色彩心理学指导下
│
├── 字体处理 ──→ 自由设计：大小、粗细、间距、排列
│
└── 细节风格 ──→ 自由定义：圆润/锐利、简约/丰富、现代/复古

---

五、设计决策逻辑

5.1 内容 → 形式 决策链

Step 1: 识别内容本质
        │
        ▼
Step 2: 确定视觉形式（流程图？对比图？概念图？）
        │
        ▼
Step 3: 选择布局结构（线性？并列？嵌套？辐射？）
        │
        ▼
Step 3.5: 【强制】布局尺寸计算（见 5.2 节公式）
        │
        ▼
Step 4: 确定风格基调（简约？手绘？科技？温暖？）
        │
        ▼
Step 5: 设计配色方案（基于情感和主题）
        │
        ▼
Step 6: 细化视觉元素（图标、装饰、细节）
        │
        ▼
Step 7: 【强制】溢出验证（见 5.3 节检查清单）

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 代码前，必须逐项检查并确认：

5.4 常见溢出原因与修正

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 溢出问题诊断与修正

7.3 常见问题与修正

---

八、创作示例

示例 1：技术教程封面

内容：框架快速入门，5 分钟搭建第一个服务

设计思考：

1. 本质：教程 → 流程 → 步骤感
2. 受众：开发者 → 专业、简洁
3. 风格：技术向 → 简约、蓝色系
4. 布局：标题 + 步骤展示

设计决策：

• 主色：蓝色（#2563eb）— 技术感
• 布局：左对齐，步骤横向排列
• 元素：步骤编号 + 简短文字

示例 2：概念解释插图

内容：AI Agent 工作原理：感知、决策、执行、学习

设计思考：

1. 本质：概念 → 循环 → 周而复始
2. 受众：普通读者 → 友好、易懂
3. 风格：概念向 → 手绘、温暖
4. 布局：中心辐射或循环图

设计决策：

• 主色：紫色（#7c3aed）— AI 感
• 布局：中心图标 + 四周关键词环绕
• 元素：AI 图标 + 手绘装饰

示例 3：产品发布封面

内容：产品 2.0 发布，三大亮点

设计思考：

1. 本质：发布 → 亮点 → 吸引眼球
2. 受众：潜在用户 → 活力、现代
3. 风格：推广向 → 渐变、动感
4. 布局：标题 + 亮点并列

设计决策：

• 主色：紫色渐变 — 新颖感
• 布局：标题居上，亮点横向排列
• 元素：NEW 标签 + 功能图标

---

九、参考资源

• config/brands/ — 品牌配置目录
• config/platforms/ — 平台配置目录
• templates/ — 历史模板参考（可借鉴，不必照搬）

---

版本历史