微信公众号排版 SOP 规范文档
版本: v1.0
适用范围: 微信公众号图文排版
核心原则: 全内联样式，确保跨平台兼容
一、微信公众号 CSS 限制（必读）
❌ 禁止使用（会被微信过滤）
| 禁用项 | 说明 |
|---|---|
<style> 标签 |
所有样式必须写成内联 style 属性 |
position 属性 |
absolute/relative/fixed 全部失效 |
linear-gradient |
复杂渐变会被过滤，只用纯色 |
ID 选择器 |
会被删除 |
class 选择器 |
外部样式表无效 |
JavaScript |
完全不支持 |
transform |
部分场景失效 |
| 百分比单位 | 如 translateY(-100%) 会失效 |
✅ 可安全使用
- 内联
style=""属性 background-color（纯色）border、border-left、border-radiuspadding、marginfont-size、font-weight、colortext-aligndisplay: inline-blockline-heightletter-spacing
二、标准配色方案
2.1 主色系
| 用途 | 色值 | 示例 |
|---|---|---|
| 微信绿（主色） | #07c160 |
章节标题、成功提示、编号徽章 |
| 强调红 | #fa5151 |
重点标注、警告、数据亮点 |
| 链接蓝 | #1890ff |
链接、信息提示、二级标题 |
| 高级紫 | #722ed1 |
专业术语、阶段标签、特殊强调 |
| 成功绿 | #52c41a |
正确做法、成功结果 |
| 警告橙 | #fa8c16 |
注意事项、动机标注 |
2.2 文字色系
| 用途 | 色值 |
|---|---|
| 主标题 | #1a1a1a |
| 正文 | #3f3f3f |
| 二级文字 | #555555 |
| 辅助说明 | #888888 |
| 浅色提示 | #aaaaaa |
| 分隔符 | #cccccc |
2.3 背景色系
| 用途 | 色值 |
|---|---|
| 浅灰卡片 | #fafafa |
| 绿色成功 | #f6ffed |
| 橙色金句 | #fff7e6 |
| 蓝色信息 | #f0f5ff |
| 黄色警告 | #fffbe6 |
| 红色错误 | #fff2e8 |
| 代码块深色 | #1e1e3f |
2.4 边框色系
| 用途 | 色值 |
|---|---|
| 通用边框 | #e8e8e8 |
| 绿色边框 | #b7eb8f |
| 橙色边框 | #ffc069 / #ffd591 |
| 蓝色边框 | #adc6ff |
| 红色边框 | #ffbb96 |
2.5 下划线标注色（用于文字高亮）
| 颜色 | border-bottom 色值 |
|---|---|
| 红色下划线 | #ffccc7 |
| 绿色下划线 | #b7eb8f |
| 蓝色下划线 | #91d5ff |
| 紫色下划线 | #d3adf7 |
| 橙色下划线 | #ffd591 |
三、组件样式模板
3.1 主标题
<p style="font-size: 22px; font-weight: bold; color: #1a1a1a; margin: 0; letter-spacing: 1px; text-align: center;">🚀 文章主标题</p>
3.2 副标题/说明
<p style="font-size: 14px; color: #888888; margin-top: 12px; text-align: center;">副标题说明文字</p>
3.3 章节标题（带编号徽章）
<p style="font-size: 18px; font-weight: bold; color: #1a1a1a; padding-left: 12px; border-left: 4px solid #07c160; margin-bottom: 24px;">
<span style="display: inline-block; background-color: #07c160; color: white; width: 24px; height: 24px; text-align: center; line-height: 24px; border-radius: 4px; font-size: 14px; margin-right: 8px;">一</span>
章节标题文字
</p>
3.4 二级标题
<p style="font-size: 16px; font-weight: bold; color: #1a1a1a; margin: 28px 0 16px; padding-bottom: 8px; border-bottom: 1px solid #eeeeee;">👤 二级标题</p>
3.5 三级小标题
<p style="font-size: 15px; font-weight: bold; color: #722ed1; margin: 24px 0 12px;">😰 三级小标题</p>
3.6 引言/提示块（绿色左边框）
<section style="background-color: #f7f7f7; border-left: 4px solid #07c160; padding: 16px 20px; margin: 24px 0; border-radius: 0 8px 8px 0;">
<p style="margin: 0; font-size: 15px; color: #555555;">引言内容文字</p>
</section>
3.7 英文金句卡片
<section style="background-color: #fff7e6; border-radius: 8px; padding: 16px 20px; margin: 20px 0;">
<p style="font-family: 'Courier New', monospace; font-size: 15px; color: #d46b08; margin: 0 0 10px 0; font-weight: 500;">"English quote here."</p>
<p style="font-size: 14px; color: #ad6800; margin: 0; padding-left: 12px; border-left: 3px solid #ffc069;">「中文翻译在这里。」</p>
</section>
3.8 成功/正确提示框
<section style="background-color: #f6ffed; border: 1px solid #b7eb8f; border-radius: 8px; padding: 14px 18px; margin: 16px 0;">
<p style="margin: 0; font-size: 15px;"><strong style="color: #52c41a;">✅ 结果：</strong>成功提示内容</p>
</section>
3.9 警告/注意提示框
<section style="background-color: #fffbe6; border-left: 4px solid #faad14; padding: 16px 20px; margin: 20px 0; border-radius: 0 8px 8px 0;">
<p style="margin: 0; font-size: 15px;"><strong style="color: #d48806;">⚠️ 重要提醒：</strong>警告内容</p>
</section>
3.10 错误/踩坑提示框
<section style="background-color: #fff2e8; border: 1px solid #ffbb96; border-radius: 8px; padding: 16px 20px; margin: 16px 0;">
<p style="font-size: 14px; font-weight: bold; color: #fa541c; margin: 0 0 12px 0;">❌ 踩坑标题</p>
<p style="margin: 0; font-size: 15px;">踩坑内容描述</p>
</section>
3.11 信息卡片（通用灰底）
<section style="background-color: #fafafa; border: 1px solid #e8e8e8; border-radius: 8px; padding: 16px 20px; margin: 16px 0;">
<p style="font-size: 14px; font-weight: bold; color: #1890ff; margin: 0 0 12px 0;">📋 卡片标题</p>
<p style="margin: 6px 0; font-size: 15px;">卡片内容</p>
</section>
3.12 阶段标签
<p style="display: inline-block; background-color: #722ed1; color: white; padding: 4px 14px; border-radius: 16px; font-size: 13px; font-weight: bold; margin: 16px 0 12px;">阶段 A：标签名称</p>
3.13 圆形编号列表项
<p style="margin: 8px 0 8px 20px; font-size: 15px;">
<span style="display: inline-block; background-color: #07c160; color: white; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius: 50%; font-size: 12px; margin-right: 6px;">1</span>
列表内容文字
</p>
3.14 时间线样式
<section style="margin: 20px 0; padding-left: 20px; border-left: 3px solid #07c160;">
<p style="margin: 16px 0;">
<span style="color: #07c160; font-weight: bold;">第 1 个月</span><br>
<span style="font-size: 15px;">时间线内容描述</span>
</p>
</section>
3.15 数据行（带左边框）
<p style="margin: 8px 0; padding: 8px 12px; background-color: white; border-radius: 4px; font-size: 14px; border-left: 3px solid #07c160;">
<strong>时间点</strong> · 数据描述内容
</p>
3.16 代码块
<p style="background-color: #1e1e3f; color: #a5b4fc; padding: 12px 16px; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 14px; margin: 16px 0;">
代码内容
</p>
3.17 行内代码
<code style="background-color: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 13px;">代码片段</code>
3.18 定价/套餐卡片
<p style="margin: 10px 0; padding: 10px 14px; background-color: #fff7e6; border-radius: 6px; font-size: 14px;">
<span style="display: inline-block; background-color: #fa8c16; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px; margin-right: 8px;">Pro</span>
<strong>$29/月</strong> · 功能描述
</p>
3.19 分隔符
<p style="text-align: center; color: #cccccc; font-size: 16px; letter-spacing: 8px; margin: 32px 0;">✦ ✦ ✦</p>
3.20 文字高亮标注
<!-- 红色下划线 -->
<span style="color: #fa5151; font-weight: bold; border-bottom: 2px solid #ffccc7;">重点文字</span>
<!-- 绿色下划线 -->
<span style="color: #52c41a; font-weight: bold; border-bottom: 2px solid #b7eb8f;">成功文字</span>
<!-- 蓝色下划线 -->
<span style="color: #1890ff; font-weight: bold; border-bottom: 2px solid #91d5ff;">信息文字</span>
<!-- 紫色下划线 -->
<span style="color: #722ed1; font-weight: bold; border-bottom: 2px solid #d3adf7;">专业术语</span>
3.21 星号列表项
<p style="margin: 8px 0 8px 20px; font-size: 15px;">✦ 列表内容</p>
3.22 结尾互动框
<section style="background-color: #f0f5ff; border: 2px solid #adc6ff; border-radius: 12px; padding: 20px 24px; margin: 24px 0; text-align: center;">
<p style="font-size: 17px; font-weight: bold; color: #2f54eb; margin: 0 0 12px 0;">🎯 互动标题</p>
<p style="margin: 0; font-size: 15px; color: #555555;">互动引导文字</p>
</section>
3.23 参考来源（小字）
<section style="margin-top: 36px; padding-top: 20px; border-top: 1px solid #e8e8e8;">
<p style="font-size: 13px; color: #888888; margin: 0 0 12px 0;"><strong>📚 参考来源：</strong></p>
<p style="font-size: 12px; color: #aaaaaa; margin: 4px 0;">1. 来源名称</p>
</section>
3.24 参考链接列表（最小字）
<section style="margin-top: 24px; padding: 16px; background-color: #fafafa; border-radius: 8px;">
<p style="font-size: 12px; color: #888888; margin: 0 0 10px 0;"><strong>参考原文信息列表：</strong></p>
<p style="font-size: 11px; color: #aaaaaa; margin: 3px 0; word-break: break-all;">1. https://example.com/article</p>
</section>
3.25 文章结尾
<p style="text-align: center; color: #cccccc; font-size: 20px; margin: 36px 0 20px;">✨</p>
<p style="text-align: center; color: #aaaaaa; font-size: 13px; margin: 0;">— END —</p>
四、字号规范
| 用途 | 字号 |
|---|---|
| 主标题 | 22px |
| 章节标题 | 18px |
| 二级标题 | 16px |
| 三级标题 | 15px + bold |
| 正文 | 15-16px |
| 卡片标题 | 14px + bold |
| 辅助说明 | 14px |
| 副标题/提示 | 13-14px |
| 参考来源 | 12-13px |
| 参考链接 | 11px |
五、间距规范
| 用途 | 数值 |
|---|---|
| 章节间距 | margin: 36px 0 |
| 段落间距 | margin: 16px 0 |
| 卡片内边距 | padding: 16px 20px |
| 分隔符间距 | margin: 32px 0 |
| 列表项间距 | margin: 8px 0 |
| 时间线项间距 | margin: 16px 0 |
六、圆角规范
| 用途 | 数值 |
|---|---|
| 大卡片 | 8px |
| 小标签 | 16px (胶囊形) |
| 代码块 | 6px |
| 行内代码 | 3px |
| 编号徽章方形 | 4px |
| 编号徽章圆形 | 50% |
| 结尾互动框 | 12px |
七、开发流程 Checklist
7.1 开发前检查
- [ ] 确认所有样式写在 style 属性内
- [ ] 不使用
<style>标签 - [ ] 不使用 class 和 id
- [ ] 不使用 position 定位
- [ ] 不使用渐变背景
7.2 开发中检查
- [ ] 使用标准配色方案
- [ ] 使用标准字号规范
- [ ] 使用标准组件模板
- [ ] 图片使用
<img>标签 + 内联样式
7.3 发布前检查
- [ ] 在浏览器中预览效果
- [ ] 复制粘贴到公众号后台
- [ ] 在手机端预览检查
- [ ] 检查深色模式显示（可选）
八、常见问题 FAQ
Q1: 为什么样式不显示？
A: 检查是否使用了 <style> 标签或 class，必须全部改为内联样式。
Q2: 为什么背景渐变不生效？
A: 微信会过滤 linear-gradient，请使用纯色 background-color。
Q3: 为什么布局错乱？
A: 检查是否使用了 position 属性，微信会删除所有定位属性。
Q4: 为什么圆形编号显示为方形？
A: 确保同时设置了 width、height、line-height 相同数值，并使用 display: inline-block。
Q5: 深色模式下显示异常？
A: iOS 深色模式会给元素添加 transform 属性，可能导致层级问题。建议避免复杂的层叠结构。
九、快速复制模板
完整的文章框架模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章标题</title>
</head>
<body style="font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif; line-height: 1.8; color: #3f3f3f; padding: 20px; max-width: 680px; margin: 0 auto; font-size: 16px;">
<!-- 标题区 -->
<section style="text-align: center; margin-bottom: 30px;">
<p style="font-size: 22px; font-weight: bold; color: #1a1a1a; margin: 0;">文章标题</p>
<p style="font-size: 14px; color: #888888; margin-top: 12px;">副标题</p>
</section>
<!-- 引言 -->
<section style="background-color: #f7f7f7; border-left: 4px solid #07c160; padding: 16px 20px; margin: 24px 0; border-radius: 0 8px 8px 0;">
<p style="margin: 0; font-size: 15px; color: #555555;">引言内容</p>
</section>
<!-- 分隔符 -->
<p style="text-align: center; color: #cccccc; font-size: 16px; letter-spacing: 8px; margin: 32px 0;">✦ ✦ ✦</p>
<!-- 章节 -->
<section style="margin: 36px 0;">
<p style="font-size: 18px; font-weight: bold; color: #1a1a1a; padding-left: 12px; border-left: 4px solid #07c160; margin-bottom: 24px;">
<span style="display: inline-block; background-color: #07c160; color: white; width: 24px; height: 24px; text-align: center; line-height: 24px; border-radius: 4px; font-size: 14px; margin-right: 8px;">一</span>
章节标题
</p>
<!-- 正文内容 -->
<p style="margin: 16px 0;">正文段落内容</p>
</section>
<!-- 结尾 -->
<p style="text-align: center; color: #cccccc; font-size: 20px; margin: 36px 0 20px;">✨</p>
<p style="text-align: center; color: #aaaaaa; font-size: 13px; margin: 0;">— END —</p>
</body>
</html>
文档维护人: [填写]
最后更新: 2025年12月17日
微信公众号排版 SOP 规范文档 版本 1.0 | 适用范围：微信公众号图文排版 | 核心原则：全内联样式 一、微信公众号 CSS 限制（必读） 1.1 禁止使用（会被微信过滤） 禁用项 说明 <style> 标签 所有样式必须写成内联 style 属性 position 属性 absolute/relative/fixed 全部失效 linear-gradient 复杂渐变会被过滤，只用纯色 ID 选择器 会被删除 class 选择器 外部样式表无效 JavaScript 完全不支持 transform 部分场景失效 百分比单位 如 translateY(-100%) 会失效
1.2 可安全使用 •内联 style="" 属性 •background-color（纯色） •border、border-left、border-radius •padding、margin •font-size、font-weight、color •text-align、line-height、letter-spacing •display: inline-block 二、标准配色方案 2.1 主色系 用途 色值 使用场景 微信绿（主色） #07c160 章节标题、成功提示、编号徽章 强调红 #fa5151 重点标注、警告、数据亮点 链接蓝 #1890ff 链接、信息提示、二级标题 高级紫 #722ed1 专业术语、阶段标签、特殊强调 成功绿 #52c41a 正确做法、成功结果 警告橙 #fa8c16 注意事项、动机标注
2.2 文字色系 用途 色值 主标题 #1a1a1a 正文 #3f3f3f 二级文字 #555555 辅助说明 #888888 浅色提示 #aaaaaa 分隔符 #cccccc
2.3 背景色系 用途 色值 浅灰卡片 #fafafa 绿色成功 #f6ffed 橙色金句 #fff7e6 蓝色信息 #f0f5ff 黄色警告 #fffbe6 红色错误 #fff2e8 代码块深色 #1e1e3f
2.4 下划线标注色（用于文字高亮） 颜色 border-bottom 色值 红色下划线 #ffccc7 绿色下划线 #b7eb8f 蓝色下划线 #91d5ff 紫色下划线 #d3adf7 橙色下划线 #ffd591 三、字号规范 用途 字号 主标题 22px 章节标题 18px 二级标题 16px 三级标题 15px + bold 正文 15-16px 卡片标题 14px + bold 辅助说明 14px 副标题/提示 13-14px 参考来源 12-13px 参考链接 11px 四、间距与圆角规范 4.1 间距规范 用途 数值 章节间距 margin: 36px 0 段落间距 margin: 16px 0 卡片内边距 padding: 16px 20px 分隔符间距 margin: 32px 0 列表项间距 margin: 8px 0 时间线项间距 margin: 16px 0
4.2 圆角规范
用途 数值
大卡片 8px
小标签（胶囊形） 16px
代码块 6px
行内代码 3px
编号徽章方形 4px
编号徽章圆形 50%
结尾互动框 12px
五、开发流程 Checklist
5.1 开发前检查
•□ 确认所有样式写在 style 属性内
•□ 不使用 <style> 标签
•□ 不使用 class 和 id
•□ 不使用 position 定位
•□ 不使用渐变背景
5.2 开发中检查
•□ 使用标准配色方案
•□ 使用标准字号规范
•□ 使用标准组件模板
•□ 图片使用 标签 + 内联样式
5.3 发布前检查
•□ 在浏览器中预览效果
•□ 复制粘贴到公众号后台
•□ 在手机端预览检查
•□ 检查深色模式显示（可选）
六、常见问题 FAQ
Q1: 为什么样式不显示？
A: 检查是否使用了 <style> 标签或 class，必须全部改为内联样式。
Q2: 为什么背景渐变不生效？
A: 微信会过滤 linear-gradient，请使用纯色 background-color。
Q3: 为什么布局错乱？
A: 检查是否使用了 position 属性，微信会删除所有定位属性。
Q4: 为什么圆形编号显示为方形？
A: 确保同时设置了 width、height、line-height 相同数值，并使用 display: inline-block。
Q5: 深色模式下显示异常？
A: iOS 深色模式会给元素添加 transform 属性，可能导致层级问题。建议避免复杂的层叠结构。
— 文档结束 — 最后更新：2025年12月17日
本文档为站内渲染。原始文件本地路径：saas/source/knowledge-ai/Knowledge-AI-增长案例-模版-排版-639f11.md（仅本地保留，不入库不部署）