详情页排版怎么做？AI出图与版式规律总结

很多人做详情页卡在同一个地方：图都齐了、卖点都写好了，但拼起来就是不好看。说不上哪里有问题，就是每一屏看着都挺满，滑下来眼睛累，重点也记不住。找美工改，改完还是不理想。

这类问题的根源往往不是审美，而是缺少一套可以对照的判断标准。留多少白、文字分几级、图和字的比例、眼睛先看哪里，这四件事如果全凭感觉，改十遍也改不到点上。反过来，如果每条都有一个能说清楚的判断口径，改起来就有方向了。

这篇把排版拆成四条规律，每条给出可对照的数值口径和自查方法。不需要设计背景也能用，重点是把「看着不舒服」翻译成「具体哪一项不达标」。

图1：改排版时最有用的做法，是把长图打印出来铺在桌上看整体节奏。

一、排版不是装饰，是阅读顺序的设计

先纠正一个常见理解：排版不是给内容加装饰，而是决定读者先用几秒钟看什么、接着看什么、最后记住什么。同一条详情页，内容一个字没改，只调整间距和层级，转化表现可能差出不少。

原因在于手机端的使用场景。用户刷到你的商品，往下滑的速度很快，每一屏停留的时间很短。排版的作用是让他在这几秒里自动抓到你希望他抓到的信息，而不是等他自己去找。

二、规律一：留白——先定上下留多少

留白是排版里最容易被牺牲的一项。很多人的做法是「还有空位就再塞点东西」，结果每一屏都塞满，整体显得拥挤，重点反而被淹没。

判断标准可以看三条。第一，每个模块内文字与上边缘的距离，不要小于正文字号的一点五倍。第二，相邻两个模块之间的间距，要明显大于模块内部的行间距，一眼能看出「这是两块内容」。第三，一屏之内至少要有一处明显的空区，不要四边都贴满。

具体到数值上，如果正文字号按常见设置，那么模块内部的文字与边缘距离建议留出相当于两到三行文字的空白；模块之间的间距建议是内部距离的两倍左右。这样即使不放大看，滑动时也能自然分辨出内容边界。

还有一种情况是把留白理解成「四边留一圈边距」。真正的留白不只是外框，还包括模块与模块之间的呼吸区、标题与正文之间的距离、图片与说明文字之间的空隙。全部算进去，一屏里空白占比大致能到三成左右，视觉上就比较舒服。

留白少了会显得拥挤，留白多了会让内容被切断、节奏散。判断自己做得对不对有个简单方法：把长图缩到手机屏幕大小，快速滑一遍，如果每一屏都能一眼说出「这屏在讲什么」，说明留白基本到位；如果说不上来，多半是内容挤在一起了。

三、规律二：字级层次——分三级就够用

字级层次指的是同一屏里不同内容用不同字号的层级关系。层次太少，主次不分；层次太多，看起来杂乱。多数详情页用三级就足够。

这张表的用法很简单：拿到一屏画面，先数一数有几种明显不同的字号。如果数到五六种，说明层次过密，可以往下合并；如果只有一种，说明没有主次，需要把核心结论提出来放大。

倍率是相对值，不是绝对值。不同品类的详情图整体字号本来就有差异，食品类的说明文字通常比家居类的大一点，因为阅读场景更随意。关键是同一条详情页内部保持同一套倍率关系，不要这一屏放大一点五倍、下一屏放大两倍。

字重的作用类似。同样字号下，加粗与常规的对比能形成次级层次。但如果一屏里有三处都用了加粗，加粗就不再有强调作用了。常见的处理办法是：主标题用加粗，小标题常规偏粗，正文和辅助说明都用常规，需要强调的个别词用颜色区分，而不是再加一种字重。

四、规律三：图文比例——一屏里图和字怎么分

详情长图往下滑，节奏感主要来自图与文字的面积交替。全部是图，用户不知道在说什么；全部是字，用户不想读。合理的做法是让两者交替出现，并且有一个大致稳定的比例。

经验值是，单屏内图片面积占比大致在六成到七成之间，文字占三成到四成。这个比例下，用户能先被图吸引，再靠文字理解，两边都不吃力。如果是纯参数说明类的屏，文字可以上升到五成以上，但这类屏不要连续出现两屏。

另一个容易踩的坑是长图总高度。详情图高度超过一万五千像素之后加载会明显变慢，移动端页面加载每慢一秒，转化率大致下降百分之七。所以控制总高度本身也是排版的一部分，不是技术问题。

各平台常见的宽度口径可以先记一下：拼多多详情图宽度常见七百五十像素，高度区间大致六千到一万二千像素；抖音商城宽度常见八百像素，高度大致五千到一万像素；Shopee 和 Lazada 常见宽度八百像素；速卖通在八百到一千像素；亚马逊的图片边长多在一千到一千五百像素，并且对纯白背景有更严的要求。这些是行业里常见的经验区间，具体上传以后台提示为准。

图2：同样的内容量，调整图文比例和间距之后，可读性差别很明显。

控制高度的实操做法是，每完成三到四屏就整体看一眼，估算一下总长。如果明显超出目标区间，优先压缩的是重复性的细节图和装饰性图形，而不是卖点说明。卖点那一屏的高度不要为了省长度而硬砍，它是最影响转化的部分。

五、规律四：视线引导——让眼睛按你想要的顺序走

视线引导说的是：用户打开这一屏，眼睛第一瞬落在哪里，接下来看向哪里。这件事你不设计，它也会发生，只是落点不受你控制。

最基础的三种排布方式各有适用场合。居中对称适合强调单一结论，比如一句核心卖点；左右分栏适合做对比或前后变化，比如使用前后、产品与场景；上下分区适合先给结论再给证据，比如上面一句标题、下面一张细节图。

判断引导是否有效，有个很直接的测试方法：把图片调成灰阶、缩小到手机屏幕大小，快速看一眼，然后说出你最先注意到的东西。如果它正好是你想强调的，说明引导到位；如果最先看到的是角落的装饰图或某个不重要的标注，就说明权重给错了。

另一个关键点是方向一致性。如果这一屏的元素都是横向排列、阅读方向从左到右，下一页突然变成从右到左，用户会有一瞬间的停顿。这种停顿看着小，累积几屏之后就很影响滑动体验。所以同一条详情页里，主视觉的方向最好保持统一。

还有一个反直觉的细节：一屏里的视觉重心不要放在最底部。用户滑动时，屏幕下缘的内容往往被手指或下一个模块挡住，放在那里等于白放。重要的结论尽量安排在屏幕中上部。

六、四条规律的对照清单

把前面四条整理成一张自查表，改稿时对着逐项打勾即可。这张表也可以直接给到做图的人，作为交付前的检查依据。

这张表里最容易被忽略的是最后两项。前四项看的是单屏效果，后两项看的是整条长图的连贯性。单屏都合格但整条看下来节奏乱，问题通常就出在这两项上。

把四条规律再浓缩成四张检查卡，改稿时按顺序过一遍，基本能覆盖大部分问题。这四张卡也可以直接交给做图的人当交付标准，减少来回沟通。

四张卡里，留白卡和比例卡看的是画面疏密，字级卡和重心卡看的是信息主次。疏密负责让用户看得下去，主次负责让用户记得住，两边都做到，排版才算真正完成。

七、手机端优先，这四条要改哪些数

上面给的判断标准都以手机端阅读为前提。原因是详情页的流量绝大部分来自手机，电脑端看到的排版和手机端差别很大：同样一段文字，在电脑上是一行，在手机上可能断成三行；同样一个模块，在电脑上看着疏朗，在手机上就挤了。

具体要调整的地方有四处。一是字号，手机端字体不要设到需要凑近看才能读的程度，辅助说明的字号尤其要注意下限。二是留白，手机屏幕上可以承受的间距要比电脑端更大一些，因为手指遮挡和屏幕边缘都会吃掉视觉空间。三是每行字数，一行太长手机端会频繁折行，读起来累，尽量把长句拆短。四是重要的结论不要放在屏幕最底部，前面已经说过这一点。

还有个容易忽略的检查动作：把素材先按手机屏幕的宽度预览一遍，而不是在电脑大屏上判断。很多在电脑上看着不错的排版，缩到手机宽度之后才发现文字挤成一团。

如果同一个商品既要上国内平台又要上跨境站点，建议先按手机端的阅读体验把版式调好，再切换尺寸生成其他版本。反过来的顺序往往要返工，因为尺寸变化会牵动字号和间距的观感。

八、动手调整的步骤

规则看完了，落到操作上大概是这样几步。这里以青虎AI 的详情图编辑模式为例，其他工具的路径类似。

图3：先看整体、再调局部，最后再回到整体确认一次，这样返工最少。

整个过程不需要打开任何其他设计软件。改文字不用重新生成图片，改位置也不用从零重画，这是编辑模式相对传统流程最直接的差别。

九、四个常见误区

十、四个提效技巧

十一、三个可以照做的场景

图4：把长图铺开对照检查，是判断整体节奏最直接的办法。

十二、总结与常见问题解答