# 电商详情页设计通用规范

## 1. 详情页标准结构（从上到下）

| 序号 | 模块名称 | 内容 | 推荐屏数 |
|:----:|:--------|:-----|:--------|
| 1 | 首屏海报 | 品牌/产品核心卖点、场景图 | 1屏 |
| 2 | 痛点场景 | 用户痛点描述，引发共鸣 | 1-2屏 |
| 3 | 产品展示 | 多角度产品实拍/渲染图 | 2-4屏 |
| 4 | 核心卖点 | 功能/材质/工艺详细展示 | 3-6屏 |
| 5 | 规格参数 | 尺寸、重量、材质等参数表 | 1-2屏 |
| 6 | 细节展示 | 放大细节、工艺特写 | 2-4屏 |
| 7 | 对比优势 | 与竞品/旧款的对比 | 1-2屏 |
| 8 | 使用场景 | 生活方式场景图 | 2-3屏 |
| 9 | 信任背书 | 认证、检测报告、评价 | 1-2屏 |
| 10 | 购买须知 | 物流、售后、FAQ | 1屏 |

## 2. 信息层级规范

| 层级 | 字号范围 | 用途 | 颜色 |
|:-----|:--------|:-----|:-----|
| 一级标题 | 36-48px | 模块大标题 | 品牌主色 |
| 二级标题 | 24-32px | 小节标题 | #333333 |
| 三级标题 | 18-22px | 说明文字标题 | #666666 |
| 正文 | 14-16px | 描述文字 | #666666-#999999 |
| 强调文字 | 16-20px | 价格/促销 | #FF0000 或品牌强调色 |

## 3. 详情图尺寸规范

| 平台 | 宽度(px) | 高度 | 单张文件大小 |
|:-----|:--------|:-----|:------------|
| 淘宝/天猫 | 750-790 | 不限 | ≤3MB/张 |
| 京东 | 750-790 | 不限 | ≤3MB/张 |
| 拼多多 | 640-750 | 不限 | ≤5MB/张 |
| 抖音/抖店 | 750 | 不限 | ≤3MB/张 |

## 4. 详情页设计原则

| 原则 | 说明 |
|:-----|:-----|
| **F型浏览** | 用户按F型路径扫描，重要信息放左侧和顶部 |
| **3秒法则** | 每屏3秒内能理解核心信息 |
| **移动优先** | 750px宽度、竖版构图、大字少文 |
| **一屏一意** | 每屏传达一个核心信息点 |
| **视觉引导** | 用箭头、序号引导浏览顺序 |

## 5. 转化率优化要素

| 要素 | 优化方法 |
|:-----|:--------|
| 首屏吸引力 | 3秒内传达核心卖点，高质感场景图 |
| 信任建立 | 数据可视化、权威认证、真实评价 |
| 消除顾虑 | 清晰退换货政策、售后保障 |
| 购买冲动 | 限时优惠、库存紧迫感、场景代入 |
| 行动引导 | 明确的"立即购买"引导，优惠信息突出 |

## 6. 各模块设计标准

### 6.1 首屏海报
- 尺寸：750×800px 到 750×1000px
- 包含：品牌标识 + 产品名称 + 核心卖点（≤15字）+ 场景图
- 色彩：与品牌VI一致，高对比度

### 6.2 产品展示
- 至少包含4个角度：正面、背面、侧面、45°
- 白底或浅灰底为主
- 可配合使用场景展示

### 6.3 规格参数
- 表格形式为主
- 关键参数加粗或标色
- 尺寸图/结构图辅助说明

## 7. 常见设计错误

| 错误 | 正确做法 |
|:-----|:--------|
| 文字过小看不清 | 正文≥14px，移动端实际查看 |
| 图片太长加载慢 | 单张≤500KB，总长度控制在15-25屏 |
| 信息堆砌无重点 | 每屏只讲一个卖点 |
| 颜色杂乱无品牌感 | 统一3-5色配色方案 |
| 手机看不清表格 | 表格也需适配750px宽度 |