详情图图文位置怎么摆？AI编辑器拖拽与布局

图文位置这件事，说起来简单：把图和文放到该放的地方。但真到编辑器里动手，多数人都会卡住——图放左边还是右边，文字是压在图上面还是另起一行，两张图要不要左右对称，想半天也定不下来。于是干脆两种都试，试完再删，删完再改。

之所以卡住，是因为大部分人是从”哪种好看”这个角度切入的。好看没有判定标准，所以永远选不完。真正能定下来的依据是信息关系：这一屏里，图是主角还是文是主角。主角是谁，位置就该偏向谁，剩下的都只是执行。

这篇把两件事讲透：四种常见布局分别对应什么信息关系，以及不管用哪种布局，同类元素之间必须对齐这条硬规矩。工具部分继续以青虎AI【详情图编辑模式】为例，它的中间画布区可以拖动模块、缩放、解除组合，位置调整是它最核心的能力之一。

图1：一屏里图占多少、文占多少，决定了整张图的节奏

一、图文位置摆不好，多半是没先想清”谁是主角”

一屏版式里，图和文一定有一个是主角。主角不一定是面积大的那个，而是用户目光落上去的第一落点。如果这一屏要展示商品的外观、材质、颜色，那图就是主角，文字退到辅助位；如果这一屏要讲一个使用场景、一段材质说明、一组参数对比，那文就是主角，图退成背景或配图。

这个判断顺序不能反过来。先选布局再想内容，等于先买鞋再量脚。正确的顺序是先问这一屏要解决什么问题，再由这个问题决定谁当主角，最后才落到具体的摆法。

主角定了之后，位置其实是被推出来的。图是主角，图就该占据视觉重心位——通常是上半屏或整屏，字号大、占比高、边界清晰；文是主角，文字区就该有足够宽度和舒适的阅读区，图缩到辅助尺寸，甚至处理成低对比的背景。

有一类常见情况值得单独说：很多人把”图多”当成”信息足”，一屏塞三张图加两段字。这种版式下用户的目光没有落点，三张图互相抢戏，文字又被挤成窄条。与其让三张图都变小，不如只留最想说清的那一张，把另外两张挪到别的屏去。位置问题，很多时候是取舍问题。

二、四种常见布局，各自解决什么问题

把电商详情图里的图文关系归类，常见的就四种：左图右文、上文下图、居中对称、环绕。这四种没有优劣，各有各的适用场景，关键看你这一屏要传达的信息是什么形态。

图2：同样的图同样的字，摆法不同，读起来完全是两张图

左图右文是最常见的横向布局，图占左侧三到五成宽度，文字在右侧纵向排布。它的好处是阅读动线自然，用户从左到右扫一遍就能把图和说明对应起来，适合”这个商品长什么样 + 它有什么特点”这类并列关系。缺点是对宽度有要求，详情图宽度 750px 的口径下，图占四成只剩 450px 给文字，一行放不下太多字，所以文字要短、要断句。

上文下图是把说明文字放在上面，图放在下面。它的阅读顺序是”先结论后证据”：先告诉用户这个商品解决了什么问题，再用一张图证明。这种布局适合卖点型模块，一句话卖点加大图，冲击力强。反过来用成”上图下文”也成立，适合先给视觉印象再补说明，比如颜色展示。

居中对称是把图放在正中，文字上下或左右对称分布，视觉上稳。它适合单一主角的单品展示，比如一张完整的商品正面图配上下两行说明。这种布局不能塞太多内容，一旦对称结构里出现长度不一致的文字，重心就歪了。

环绕是把文字围绕在图的四周，图中可能还叠加了一两个标注。它适合讲解类内容，比如指出商品某个结构在哪、某个部件怎么用。环绕布局的难点是文字块之间容易互相干扰，图周围留出的空间必须够，否则一圈字会糊成一团。

这张表里最后一行要单独提醒。同一屏里混用两种以上布局是常见的，但前提是这几种关系不能互相打架。比如上面是上文下图，下面接一组环绕标注，就有两个视觉中心，用户的目光会在两处之间来回跳。混排可以，但一屏只留一个主中心。

三、判断依据：先看图是主体还是文是主体

布局选不出来的时候，回到这一个问题上就够了：这一屏里，用户记住的是形象还是信息。记住形象，图当主体；记住信息，文当主体。这不是审美判断，是内容类型判断，所以有答案。

图当主体的信号有三类。一是商品本身的视觉差异就是卖点，比如款式、颜色、质感、做工，这些用文字描述很吃力，一眼看图就懂。二是这一屏承担的是吸引注意力的任务，用户大概率是划着看，需要一张有冲击力的图让他停下。三是图里有文字说不清的信息，比如尺寸比例、使用姿态、配件数量。

文当主体的信号同样清楚。一是这一屏要传递的是可比较的信息，比如三个规格哪个更适合我，用表格和文字比用图高效。二是要讲因果或步骤，用户需要顺着读下来才能理解。三是这一屏的图是重复的或者通用的，换张图对理解没有帮助，那图就不该占主位。

判断主体还有一层意义：它决定了文字的对齐方式和图的对齐方式该怎么配。图主文辅时，文字通常贴着图的边缘对齐，形成一条清晰的阅读起点线；文主图辅时，图往往居中或贴边放置，不参与文字的对齐体系，避免把文字的起点线拉歪。这两个细节，就是下一节要讲的同类对齐。

还有一个容易被忽略的判断维度：这一屏在整张长图里的位置。首屏承担的是”让人停下来”的任务，图的比例通常更大；中段承担的是”讲清楚”的任务，文字的比重会上来；尾段承担的是”推一把”的任务，往往回到大图或者强对比的图文组合。同一个商品，不同屏的图文关系可以完全不同，不需要全篇统一成一种布局。

四、对齐逻辑：同类元素必须对齐，否则视觉会散

布局定完之后，决定版式看起来”整不整”的，不是布局本身，而是对齐。规则可以概括成一句话：同类元素必须对齐，不同类元素之间不要强行对齐。

什么叫同类元素？所有文字块的左边缘是一类，所有图片的上边缘是一类，所有模块之间的间距是一类。同类元素对齐之后，用户的视线能顺着一条条看不见的线往下走，版式就有秩序感。同类的元素如果各走各的，哪怕每个元素单独看都挺精致，整张图读起来也是散的。

具体到实操，最常用的三条对齐线是：文字左对齐的起始线、图片的上边缘线、以及每一屏内容区的左右边距线。前两条决定模块内部整齐不整齐，第三条决定整张长图的外轮廓是否稳定。详情图是纵向滚动的，用户滚动时视线主要靠左右两侧的边距感来定位，边距线一乱，滚动过程中就会觉得画面在左右晃。

什么时候不要强行对齐？当图是主体的那一屏，文字为了贴合图的轮廓而收缩或偏移，这时候文字块的左边缘可能和上面一屏不一致。这是可以接受的，因为这一屏的视觉重心是图，文字只是附属。但要让用户能感觉到这是有意为之，而不是随手放歪的——判断标准是偏移是否有规律，有规律的偏移看起来是设计，没规律的偏移看起来是失误。

最后一条细则：间距的同类型对齐比边缘对齐更容易被忽略。相邻两个模块之间的距离如果是 60px，那下一组也应该是 60px 左右，不能这一段 40px、那一段 90px。间距是节奏，节奏一乱，用户滑动时会有”哪一块跟哪一块是一组”的困惑，本属于同一组的信息被读成了两块。

五、青虎AI【详情图编辑模式】能改到什么程度

青虎AI【详情图编辑模式】是详情图生成模块下可二次精细化排版的工具。它不是从零画图，而是依托 LinkPix 引擎先生成初稿，再用内置的轻量化在线编辑器直接调整图文位置、修改文字样式、增删排版模块，全程不用跳到第三方设计软件，创作、微调、导出在一条链路上走完。

入口有两个。登录青虎AI 工作台后，从左侧【创作】进【电商详情图】，选【电商详情图（编辑模式）】；也可以从 LinkPix 首页的【电商详情图】里切到【编辑模式】。生成阶段的参数区包含产品图上传、详情图模式下拉、图片比例、语言、配色和数量。产品图单次最多上传 10 张，尺寸可选默认尺寸、亚马逊长图、天猫详情长图、淘宝详情长图，语言支持简体中文、英语、泰语等，初次生成可以一次拿到 1 到 10 张不同版式的初稿。

它的边界要说清楚。编辑器不会替你判断这一屏该用哪种布局，这个判断来自你对商品和用户的理解，工具只负责把你判断的结果摆出来。修改文字内容之后，要回头检查文字和图片的对应关系是否还成立，尤其是环绕布局，文字挪位置以后可能指着图的另一处。另外导出前建议先点「保存」留存编辑版本，方便回滚，最终结果仍要按平台规则和广告法人工审核一遍。

还要和同属【电商详情图】模块的【详情图复刻】区分开。复刻是上传一张参考图让系统学那张图的版式风格，再叠加自己的产品图生成新图，重点在”学别人的版式”；编辑模式是AI出初稿之后人工微调，重点在”改自己图上的细节”。本篇讲的所有位置调整，指的都是后者。

六、动手前先备好这三样东西

位置调不快，往往不是手速问题，而是手里没有判断依据。开工前把这三样备齐，能在编辑器里少走很多弯路。

这三样东西里，卖点排序最容易被跳过，但它的作用最大。你带着一份排好序的卖点清单进编辑器，每一屏该是图主还是文主，是能立刻对上号的；空着手进去，就只能靠感觉，而感觉是最不稳的判断依据。

七、从上传到导出的操作步骤

把上面所有判断落成动作，实际就是下面这几步。每一步做完都有明确的检查点，检查点过了再走下一步，比一路改到底再回头看要省时间。

图3：位置调整是一条链，每一步都为下一步留好接口

步骤之间有一个硬约束：位置没定完不要开始对齐，对齐没做完不要开始配色。原因是每一步都会改变下一步的参照对象，位置一动，原来对齐好的边缘就失效了；对齐一动，配色的对比关系也要跟着重新判断。

八、导出前的自查清单

导出之前，把这张清单过一遍，比导出之后再发现问题要划算。清单不长，但每一条都对应一次真实的返工。

第一组看主体：每一屏能不能一句话说清谁是主角。说不清的屏，基本就是混排过头了，两个视觉中心在打架。第二组看对齐：所有文字块的左边缘是否落在同一条线上，所有图片的上边缘是否基本齐平，整张长图的左右边距是否稳定。第三组看间距：相邻模块之间的距离是否均匀，同一组信息内部的距离是否明显小于组与组之间的距离。

第四组看图本身：横竖混排的图有没有把阅读侧面撑开一个豁口，需要跨屏连续读的两张图有没有被别的模块打断。第五组看移动端效果：单屏文字是不是超过了 40 字，超过的部分大概率会被跳过，这种屏要考虑把文字移走或者拆成两屏。

还有两条收尾项。一是高度，详情图高度超过 15000px 之后加载会明显变慢，而移动端页面加载每慢 1 秒，转化率大约下降 7%，位置调整时如果把屏数堆得太多，最后要回头看总高度。二是检查有没有哪个模块是”为了凑数放上去的”，这种模块在位置调整中最容易被保留下来，因为它不碍事，但它确实在稀释重点。

九、四个常见误区

位置这件事上，翻车的方式其实很集中，下面这四种占了大多数。

十、四个提效技巧

下面这四个习惯，做熟了之后位置调整的时间会明显缩短。

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

把上面的规则放到具体商品上，场景是这样的。

图4：同一张图，两个人的落点往往不一样，对一遍就统一了

十二、总结与常见问题