详情页排版要检查什么？一份可直接执行的自查表

详情页排版是什么，先说清楚

详情页排版是把商品详情内容按用户阅读路径组织成有序视觉流的设计工作：确定画布宽度与栅格、划分信息模块、建立标题与正文字体层级、控制留白与行距、处理图文比例与切图加载。它解决的是「用户愿不愿意往下读」的问题，而不是单张图好不好看的问题。

为什么这件事关键：详情页的转化取决于信息被消化的效率。排版混乱会让用户在第一屏就流失，即使卖点再强也没机会被看到。规范的排版能降低阅读成本，把注意力引导到关键卖点与下单按钮，直接影响停留时长与支付转化率。

放在电商美工设计的场景里看：电商视觉的底层能力，涵盖主图、详情页、海报、店铺装修与包装设计，直接影响点击率与转化率。所以同样一件事，在不同平台上做，判断标准并不通用。

下面这些动作建议按顺序逐项核对，完成一项勾一项：

先定画布宽度与栅格：移动端详情页常见宽度为 750px 或 790px 量级，具体以平台规范为准；建立 12 栅格或 24 栅格，所有模块对齐栅格线，避免元素随意摆放。
按阅读路径划分模块：典型顺序为：首屏卖点、痛点场景、核心卖点拆解、参数对比、细节材质、资质背书、服务与尺码说明、购买引导。模块顺序即说服逻辑，不能随意打乱。
建立四级字体层级：大标题、模块标题、正文、注释四级，字重依次递减，同页面字体种类不超过三种，标题与正文字号差异要足够明显以形成视觉跳跃点。
设定留白与行距节奏：模块之间留白明显大于模块内部元素间距，正文行距通常为字号的 1.5-1.8 倍，段间距大于行距，让眼睛有休息点。
图文比例与信息承载平衡：关键卖点用图文结合，纯文字段控制在三行以内；参数类信息优先用表格对齐，避免大段描述让用户找不到重点。
切图与加载优化：长图按屏切分成多张，单张高度控制在合理范围，图片压缩到平台允许的最优体积，避免加载卡顿导致跳失。
统一色板与视觉节奏：全页主色不超过两种加一种强调色，强调色只用于关键数据与按钮，模块间交替使用浅底与白底形成节奏，避免全页一个色调导致阅读疲劳。

常见误区	正确做法
模块顺序凭感觉堆	应按用户决策路径排：先讲痛点共鸣，再给卖点方案，然后上证据背书，最后服务保障，顺序错了说服力大打折扣
全页字号层级不明显	标题和正文差异太小会让页面没有视觉落点，用户扫不到重点，应拉开字号与字重差距
大段纯文字堆参数	参数应转成对齐表格或图标加短句，成段文字在手机上几乎没人读
一张超长图不切分	加载慢、容易加载失败，应按屏切分成多张并压缩体积
颜色用得过多	主色控制在两种内再加一种强调色，强调色只用于关键数据和按钮，用多了等于没有重点
只做电脑端效果	详情页主要在手机端消费，必须按手机屏幕宽度和手指滑动的真实体验来排版

指标	参考值 / 说明
页面停留时长	用户在详情页停留的平均秒数，反映内容是否被真正阅读
跳失率	只看首屏就离开的比例，过高说明首屏或加载有问题
支付转化率	支付订单数除以详情页访问数，是排版的最终效果指标
首屏加载时长	详情页首屏可见所需秒数，加载越慢跳失越高
阅读深度	用户滑动到页面中后部的比例，反映中后段内容是否被看到
单页图片总体积	全页图片加总体积，过大直接影响加载体验与跳失

以上为经验区间，实际以所在类目与平台最新规则为准。

详情页画布宽度做多少？

移动端常见宽度在 750px 到 790px 量级，具体以目标平台最新规范为准。设计时按 2 倍或 3 倍像素密度出图再压缩导出，保证高清屏下文字不发虚。

详情页应该做多长？

没有固定标准，以讲清楚卖点为准。判断依据是阅读深度指标：如果后半段几乎没人看到，说明内容冗余该精简；如果停留时长过短，说明卖点展开不足。

文字和图片的比例怎么把握？

关键卖点用图文结合，纯文字段控制在三行以内；参数对比类信息做成表格。原则是能图表化就不写段落，能短句就不写长句。

字体层级怎么设才清楚？

建议四级：大标题、模块标题、正文、注释。字重和字号依次递减，标题与正文要有明显落差，同页字体种类控制在三种以内。