14-电商视觉中的排版与字体设计
问题
详情页、主图上的文字排版，看似简单，其实是80%电商视觉翻车的根源——字太小看不清、字体太多像广告牌、排版混乱找不到重点。好的排版让用户"不知不觉就看完了"，差的排版让用户"看一眼就关掉"。
学习
本文综合排版设计经典理论、移动端电商设计最佳实践、各平台字体使用规范，系统梳理电商视觉中的排版与字体设计。
电商字体使用规范
中文电商常用字体：| 字体名称 | 适用场景 | 商用版权 | 特点 |
|----------|----------|----------|------|
| 思源黑体（Source Han Sans） | 正文、小字、标题 | 免费（SIL协议） | 清晰、多字重、高可读性 |
| 思源宋体 | 正文、品牌文案 | 免费（SIL协议） | 文艺、高端、适合美妆 |
| 阿里巴巴普惠体 | 正文、标题 | 免费（阿里官方） | 电商优化、商务感 |
| 优设标题黑 | 标题、主图大字 | 免费 | 笔触有力、突出 |
| 站酷系列字体 | 标题、促销标签 | 免费 | 创意多样 |
| 华文细黑/中黑 | 详情页正文 | 随系统 | Windows自带，通用 |
| 汉仪/造字工房 | 品牌定制 | 需购买授权 | 品牌调性高 |
| 庞门正道标题体 | 主图/大幅标题 | 免费可商用 | 粗壮有力，视觉冲击强 |
英文字体（跨境/品牌电商）：| 字体 | 适用 | 价格 | 特点 |
|------|------|------|------|
| Inter / Roboto | 正文/UI | 免费 | 清晰、现代、易读 |
| Playfair Display | 标题/品牌 | 免费 | 优雅、衬线、高端 |
| Montserrat | 标题/促销 | 免费 | 现代、几何、有力 |
| Merriweather | 长文正文 | 免费 | 阅读体验好 |
| Helvetica Now | 品牌 | 付费 | 经典、专业 |
排版黄金法则
1. 层级原则（Type Hierarchy）电商视觉中文字必须分3个层级：
- 第一层（标题/卖点）：最大、最粗、最醒目——一句话说完核心卖点
- 第二层（特征/数据）：中等大小——支撑卖点的具体证据
- 第三层（辅助信息）：最小——规格、参数、条款
示例（护肤品主图）：
`
第一层："28天亮白一个度" ── 33px Bold ✅
第二层："专研VC+烟酰胺" ── 18px Regular ✅
第三层："*基于实验室测试数据" ── 12px Light ✅
`
2. 少即是多原则
- 一张主图/一个模块：不要超过3种不同字体
- 中文+英文混合时：字体风格要统一（黑体配无衬线、宋体配衬线）
- 正文不建议用粗体（降低识别度）
- 行距建议：正文1.5-1.8倍字号，标题1.2-1.4倍字号
- 文字和背景色：WCAG AA级标准——正常文字对比度≥4.5:1，大文字≥3:1
- 浅色背景上的浅色文字 = 看不见（常见的翻车）
- 深色背景上的深色文字 = 看不清（常见的翻车）
- 红色背景上的白色文字 = 不推荐（红色+白色对比度低且晃眼）
- 最小字号：16px（日常购物字体），12px（辅助信息极限）——iOS/Android系统标准
- 点击区域：CTA按钮最小44×44pt
- 行宽：每行25-35个中文字符为最佳阅读宽度
- 留白：元素间距≥8px，保证触摸不误触
详情页排版模板
头部（首屏）：`
┌──────────────────────────────┐
│ [品牌Logo] │ ← 顶部导航
├──────────────────────────────┤
│ │
│ 🎯 一句话核心卖点 │ ← 38-42px Bold
│ │
│ ✨ 2-3个支撑亮点 │ ← 20-24px Regular
│ │
│ 💰 价格+限时优惠 │ ← 32px Bold(价格)
│ │
│ [立即购买] [加入购物车] │ ← CTA按钮44px高
└──────────────────────────────┘
`
中间（卖点展示）：
`
┌──────────────────────────────┐
│ │
│ 🔥 卖点1 │ ← 28px Bold
│ │
│ 详细说明+图片 │ ← 16-18px Regular
│ │
│ ───────────────────── │ ← 分隔线
│ │
│ 🔥 卖点2 │
│ │
│ 详细说明+图片 │
│ │
└──────────────────────────────┘
`
尾部（证据/转化）：
`
┌──────────────────────────────┐
│ ⭐⭐⭐⭐⭐ 用户好评 │ ← 24px
│ │
│ "用了都说好" │ ← 16px(引用样式)
│ │
│ 检测报告/认证(可点击放大) │
│ │
│ [立即抢购] │
│ │
│ ⚠️ 7天无理由退货 │ ← 14px(消除顾虑)
└──────────────────────────────┘
`
案例数据
案例1：某护肤品详情页排版优化- 优化前：全篇16px等大文字，没有层级区分
- 优化后：38px主卖点→24px支撑点→16px详细说明
- 结果：平均停留时长从52秒提升至89秒，转化率从2.1%→3.3%
- A版：20px统一字体，卖点用加粗区分
- B版：33px核心卖点+18px支撑卖点+14px参数
- 结果：B版CTR提升31%
分析
排版问题的本质是"信息架构的视觉化"。
"字小"不是问题——所有字一样大才是问题。用户需要的是"导航"：通过字体的大小、粗细、间距来快速判断什么重要、什么次要。
好的排版 = 视觉引导系统，像路标一样告诉用户"先看这里，再看那里"。
理解
底层逻辑：电商排版的核心矛盾是信息量的无限性 vs 注意力的有限性。用户只愿意花30秒看一个详情页，但你可能有30个卖点要讲。排版的任务不是"展现30个卖点"，而是"在30秒内传递最关键的3个卖点"。
这需要：
内化
这和FABE法则的"利益优先"完全一致——排版的第一层级必须展示利益（Benefit），而不是特征（Feature）。
也和短视频叙事的"前3秒"逻辑异曲同工——排版的第一行字就是详情页的"前3秒"。
类比
排版设计就像报纸的头版：
- 最大的标题 = 今日头条（最重要的新闻）
- 次大的副标题 = 第二重要的新闻
- 正文 = 详细报道
用户扫一眼头版就知道"今天发生了什么大事"——详情页排版同理，扫一眼就知道"这个产品的核心卖点是什么"。
迁移
排版能力可以迁移到：
- 品牌VI系统：字体系列的定义和使用规范
- 广告创意：平面广告的排版逻辑
- 自媒体内容：公众号/小红书文章的排版
- PPT/演示文稿：信息层级的视觉化
实践
实操要点：
错题本
错误1：字太小- 典型：PC端看着合适的字，手机上一团糊
- 正解：始终以手机尺寸做设计，PC端靠后考虑
- 典型：一张主图上用了3种以上字体
- 正解：最多2-3种字体，统一字族
- 典型：英文字体套中文，中文字部分用默认字体
- 正解：中文电商始终以中文字体为主
- 典型：文字叠在一起，难以阅读
- 正解：正文字间距1.5倍以上
调整
- 年轻化品牌：可以用更个性、更自由的排版（如手写体标题）
- 高端品牌：排版要留白更多、字距更松
- 促销场景：可以适当打破规则（更大、更吸睛的促销字体）
- 跨境vs国内：跨境英文排版注意字偶间距（Kerning），中文注意字重（Weight）