1. 引言
在技术博客创作中,AI 配图已成为提升文章可读性和视觉吸引力的重要手段。然而,配图并非简单插入即可,合理的排版规范能让图片与文字相得益彰,避免视觉混乱。本文围绕 AI 配图的尺寸选择、位置布局、对齐方式、图文间距以及替代文本等方面,梳理一套实用的排版规范。
2. 图片尺寸与比例
AI 生成的图片尺寸多样,插入正文前应根据用途统一规范,避免图片过大撑破版面或过小影响阅读。
- 封面图:推荐使用 16:9 或 3:2 的横版比例,宽度与正文容器一致,保证在列表页和文章页都有良好展示。
- 正文插图:优先使用 4:3 或 1:1 比例,宽度控制在正文宽度的 80% 到 100% 之间,避免图片过小导致细节难以辨认。
- 示意图:若为流程或架构示意,建议使用 16:9 横版,便于展示横向逻辑关系。
3. 图片位置与对齐
图片在正文中的位置直接影响阅读节奏,应遵循「先文后图、图文呼应」的原则。
- 居中展示:正文插图默认居中,视觉上更稳定,适合单图独立展示。
- 紧随段落:图片应紧跟相关描述段落之后,避免图片与文字脱节,让读者在读到对应内容时能立即看到配图。
- 避免打断代码块:图片不要插入代码块中间,以免破坏代码的连续性和可复制性。
4. 图文间距与留白
图片与上下文字之间应保留适当间距,避免视觉拥挤。
- 图片上方和下方各保留一个空行或固定间距,使图文层次分明。
- 多图并列时,图与图之间保持统一间距,形成整齐的视觉节奏。
- 图片下方可添加居中的图注,说明图片内容或来源,增强信息完整性。
5. 替代文本与可访问性
每张 AI 配图都应填写简洁准确的替代文本,既方便搜索引擎理解图片内容,也有助于读屏用户获取信息。
- 替代文本应概括图片核心内容,避免使用「图片」「示例图」等无意义描述。
- 若图片包含关键数据或结论,应在正文中同步用文字说明,避免信息仅存在于图片中。
6. 总结
AI 配图的排版规范核心在于「统一、呼应、留白、可访问」。统一图片尺寸与对齐方式,让配图与正文内容紧密呼应,保留充足间距提升阅读舒适度,并通过替代文本增强可访问性。遵循这些规范,AI 配图才能真正成为技术博客的加分项,而非视觉负担。