内容整理：图片与文字如何搭配更协调？
图文协调性的核心设计准则：
- 视觉动线：
- F型布局符合自然阅读习惯
- 图片与相邻文字间距≥1.5倍行高
- 信息密度：
- 每屏核心图片不超过3张（首屏更需克制）
- 文字段落配合图片注解（如Figcaption标签）
| 搭配技巧 | 应用示例 | 工具推荐 |
|---|---|---|
| 黄金比例分割 | 文字占61.8%区域，图片占38.2% | Adobe XD参考线工具 |
| 颜色情感映射 | 食品类用暖色调搭配手写体文字 | Coolors配色生成器 |
| 响应式断点适配 | 移动端改为图片上方文字布局 | Chrome Devices Mode |
| 语义化ALT文本 | 图片描述需包含关键词且通顺 | SEOquake插件检查 |
更新时间：2025-06-20 16:57:20