# 构图原理通用规范

> 平面设计底层通用规范，供所有设计类技能共享复用。

---

## 1. 经典构图法则

### 1.1 三分法（井字构图）

| 项目 | 说明 |
|:-----|:-----|
| **定义** | 将画面横竖各三等分，形成4条线和4个交叉点 |
| **主体放置** | 主体放在交叉点或沿线排列，而非画面正中央 |
| **留白比例** | 主体约占画面1/3或2/3，形成黄金比例的视觉舒适感 |
| **适用场景** | 场景图、模特图、产品+文字组合图 |
| **电商案例** | 商品放在左下交点，促销文字放在右上交点 |

**参考比例**：

```
┌─────┬─────┬─────┐
│     │     │     │
│  ✦  │     │  ✦  │  ← 四个交叉点为视觉焦点
│     │     │     │
├─────┼─────┼─────┤
│     │     │     │
│     │  ◎  │     │  ← 中心可放次要元素
│     │     │     │
├─────┼─────┼─────┤
│     │     │     │
│  ✦  │     │  ✦  │
│     │     │     │
└─────┴─────┴─────┘
```

### 1.2 对称构图

| 项目 | 说明 |
|:-----|:-----|
| **定义** | 画面左右或上下镜像对称排列元素 |
| **视觉感受** | 正式、稳重、平衡、秩序感强 |
| **适用场景** | 品牌形象图、高端产品展示、正式场合视觉 |
| **注意事项** | 过于严格对称可能显得呆板，可微调打破绝对对称 |
| **电商案例** | 品牌LOGO居中、产品正面居中、规格参数对比表 |

### 1.3 对角线构图

| 项目 | 说明 |
|:-----|:-----|
| **定义** | 元素沿画面对角线方向排列 |
| **视觉感受** | 动感、延伸、张力、打破平静 |
| **适用场景** | 长条形产品（笔、瓶子、工具）、运动类产品 |
| **方向选择** | 左上→右下（最自然）、右上→左下（逆向，更有冲击力） |
| **电商案例** | 口红/钢笔沿对角线摆放，配合光影营造高级感 |

### 1.4 S形构图

| 项目 | 说明 |
|:-----|:-----|
| **定义** | 元素呈S形曲线排列，引导视线蜿蜒流动 |
| **视觉感受** | 优雅、流畅、韵律感、纵深空间感 |
| **适用场景** | 详情页长图叙事、系列产品展示、空间场景 |
| **电商案例** | 详情页中S形排列产品功能点，引导用户逐步浏览 |

### 1.5 框架式构图

| 项目 | 说明 |
|:-----|:-----|
| **定义** | 利用前景元素（门窗、植物、几何图形等）形成天然画框 |
| **视觉感受** | 聚焦、窥视感、层次丰富、空间纵深感 |
| **适用场景** | 场景氛围图、品牌故事图 |
| **电商案例** | 产品置于窗框/拱门中，前景虚化聚焦商品 |

### 1.6 中心构图

| 项目 | 说明 |
|:-----|:-----|
| **定义** | 主体置于画面几何中心，周围环绕或留白 |
| **视觉感受** | 聚焦、突出、直接、无干扰 |
| **适用场景** | 白底图、产品首图、品牌LOGO图 |
| **电商案例** | 白底首图（平台搜索展示用）、核心卖点单屏 |

### 1.7 留白（负空间）

| 项目 | 说明 |
|:-----|:-----|
| **定义** | 有意识地保留空白区域，不填充任何元素 |
| **视觉感受** | 高级感、呼吸感、聚焦、简约 |
| **留白比例** | 电商设计建议留白30%-50% |
| **适用场景** | 高端品牌、极简风格、文字排版 |
| **常见错误** | 把留白当"浪费空间"而填满，导致信息过载 |

---

## 2. 视觉引导与阅读动线

### 2.1 Z型动线

| 项目 | 说明 |
|:-----|:-----|
| **路径** | 左上 → 右上 → 左下 → 右下 |
| **原理** | 人眼从左到右、从上到下的自然阅读习惯 |
| **适用** | 信息量适中的画面：海报、首屏、Banner |
| **布局建议** | 左上放LOGO/品牌，右上放行动按钮，中间放主体，右下放次要信息 |

### 2.2 F型动线

| 项目 | 说明 |
|:-----|:-----|
| **路径** | 先横向扫读顶部 → 再向下扫读左侧 → 遇到感兴趣的内容横向扫读 |
| **原理** | 网页浏览眼动热力图研究结论 |
| **适用** | 详情页长图、信息密集型页面 |
| **布局建议** | 重要信息放顶部和左侧，每屏开头放核心标题吸引扫读 |

### 2.3 视觉重心

| 要素 | 权重影响 | 说明 |
|:-----|:-------|:-----|
| **尺寸** | ⭐⭐⭐⭐⭐ | 大的元素视觉重量大，天然成为焦点 |
| **色彩** | ⭐⭐⭐⭐ | 暖色/高饱和色比冷色/低饱和色更"重" |
| **位置** | ⭐⭐⭐⭐ | 中心 > 上部 > 下部 > 边缘 |
| **对比度** | ⭐⭐⭐ | 高对比区域吸引注意力 |
| **复杂度** | ⭐⭐ | 细节丰富的区域比平坦区域更吸睛 |
| **方向** | ⭐⭐ | 有指向性的元素引导视线方向 |

### 2.4 主次层级

| 层级 | 视觉手法 | 电商应用 |
|:-----|:--------|:--------|
| **一级（Hero）** | 最大尺寸、最强色彩、居中/黄金位 | 产品主体、核心卖点标题 |
| **二级（Sub）** | 中等尺寸、辅助色、近主体 | 卖点说明、价格信息 |
| **三级（Detail）** | 小尺寸、中性色、边缘/底部 | 规格参数、品牌信息、装饰 |
| **建立方法** | 尺寸递减（1:0.6:0.4）、色彩从强到弱、位置从中心到边缘 |

---

## 3. 平衡与对比

### 3.1 对称平衡 vs 不对称平衡

| 类型 | 特点 | 适用 |
|:-----|:-----|:-----|
| **对称平衡** | 左右镜像，元素重量完全相同 | 正式、品牌、高端 |
| **不对称平衡** | 左右不同元素，但视觉重量相等 | 现代、活泼、创意 |
| **实现方法** | 大而淡 = 小而浓；多而散 = 少而聚；暖色小块 = 冷色大块 |

### 3.2 对比手法

| 对比类型 | 实现方式 | 视觉目的 |
|:--------|:--------|:--------|
| **大小对比** | 主图元素放大，次要元素缩小 | 建立主次层级 |
| **色彩对比** | 互补色、冷暖对比、明暗对比 | 吸引注意、区分信息 |
| **疏密对比** | 信息密集区 vs 留白区交替 | 呼吸节奏、不疲劳 |
| **虚实对比** | 主体清晰 vs 背景模糊（景深效果） | 空间层次、聚焦 |
| **方向对比** | 水平稳定 vs 垂直延伸 vs 倾斜动感 | 打破单调、制造张力 |
| **质感对比** | 粗糙 vs 光滑、哑光 vs 光泽 | 突出材质、品质感 |

### 3.3 对比强度控制

| 强度 | 效果 | 场景 |
|:-----|:-----|:-----|
| **强对比** | 冲击力强、吸引眼球 | 促销海报、主图、首屏 |
| **中对比** | 清晰舒适、信息传达好 | 详情页、产品展示 |
| **弱对比** | 柔和优雅、品牌感 | 高端品牌、氛围图 |

---

## 4. 电商设计特化

### 4.1 主图构图规范

| 要点 | 规范 |
|:-----|:-----|
| **核心策略** | 中心聚焦为主，1个视觉焦点 |
| **产品占比** | 商品占画面60%-85%（白底图）/ 40%-60%（营销图） |
| **文字区域** | 淘宝/京东/抖音 ≤20%，拼多多 ≤40% |
| **角标位置** | 促销角标左上角、价格信息右下角 |
| **白底图** | 纯白#FFFFFF背景、商品居中、无文字无LOGO |
| **多SKU** | 不同颜色共用白底首图，按颜色变体分第2-5张 |

### 4.2 详情图构图规范

| 要点 | 规范 |
|:-----|:-----|
| **核心策略** | 信息流叙事，从上到下引导阅读 |
| **模块化** | 每个模块1屏，1个核心焦点 |
| **动线** | 首屏吸引 → 痛点共鸣 → 卖点展开 → 信任建立 → 行动引导 |
| **节奏** | 疏密交替：信息密集屏 → 留白屏 → 信息密集屏 |
| **宽度** | 统一750px，竖版构图 |
| **单屏信息量** | ≤3个信息点，正文≥14px |

### 4.3 点击率(CTR)优化构图

| 策略 | 实现 |
|:-----|:-----|
| **差异化** | 与搜索列表页竞品主图形成色差对比 |
| **动态感** | 45°角产品摆放 > 正面平放 |
| **人物元素** | 模特展示CTR +30%~50% |
| **数字冲击** | 价格/折扣数字放大加粗 |
| **场景代入** | 展示使用场景而非孤立的商品 |

---

## 5. 常见构图禁忌

| # | 禁忌 | 原因 | 修正 |
|:-:|:-----|:-----|:-----|
| 1 | **主体被边缘切割** | 产品不完整，品质感差 | 确保主体完整在画面内，留安全边距≥30px |
| 2 | **信息过载无留白** | 视觉疲劳、无重点、低端感 | 强制执行30%-50%留白比例 |
| 3 | **视觉重心偏斜失衡** | 画面不稳，不适感 | 检查左右视觉重量是否均衡 |
| 4 | **文字与背景对比不足** | 可读性差，信息传达失败 | 文字与背景对比度≥4.5:1（WCAG标准） |
| 5 | **引导线与视觉动线冲突** | 用户不知道该看哪里 | 确保引导元素（箭头、视线）指向主体 |
| 6 | **多个同等强度的焦点** | 注意力分散，无主次 | 严格建立1-2-3级视觉层级 |
| 7 | **构图与平台规范冲突** | 审核不通过 | 白底图严格纯白、文字不超限制区域 |

---

## 6. 构图决策速查表

| 设计目标 | 首选构图 | 备选构图 |
|:--------|:--------|:--------|
| 突出单品 | 中心构图 | 三分法 |
| 展示场景 | 三分法 | 框架式 |
| 引导浏览 | F型/S形 | Z型 |
| 品牌高端感 | 对称构图 | 大量留白 |
| 促销冲击力 | 中心构图+强对比 | 对角线 |
| 长图叙事 | S形+F型交替 | 模块化节奏 |
| 多产品组合 | 三分法 | 对角线 |