Doory 模板套用、素材替换、两个动作的顺序别搞反

模板套用和素材替换是两段动作，不是一轮动作。比较稳的做法是先在 Doory 里把模板套上、把版式定版，再统一替换图片和文案；顺序反过来，先换素材再调版式，就会出现每换一张图都要重新对一次齐的情况。判断当前该做哪一步的标准是：你手上还在改容器位置、边框粗细、标题基线这些决定位置的东西时，版式就没定版，这时候不该动素材。版式定版之后，素材替换只是一次性填充，微调集中放在最后过一遍。

适用场景：用现成模板改稿，且一次要替换多张图或多段文案。操作动作：先套模板并锁定版式基准元素，替换前记录原始素材宽高比，替换完成后统一做一次对齐与裁切复查。验证方式：替换前后对比同一元素的位置、留白和裁切主体是否一致。风险边界：模板自带的响应式断点若与目标尺寸不匹配，需要先改版式再走素材流程，不能靠换图掩盖版式问题。

先确认模板里哪些元素是版式基准

版式基准元素，指的是那些位置一旦变化、会带着其他元素一起移动的元素。常见的三类：卡片或内容区的外边框与圆角色块、承担分栏和留白作用的底色块、以及标题与副标题共用的基线。识别方法不复杂：在设计面板里看这些元素的定位方式，如果用的是固定值或相对父容器的百分比，并且其他元素以它为参照对齐，那它就是基准。

确认之后的第一件事是锁定或标记，别在换素材的过程中顺手挪动。可以给基准元素统一加一层标记，例如在样式里固定住关键定位属性：

.tpl-card {
  position: relative;      /* 基准容器，子元素以它为参照 */
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 24px;           /* 换素材时不要改这个值 */
}
.tpl-card__title {
  margin: 0 0 12px;        /* 标题基线相关间距，先定死 */
}

误改基准元素之后，现象通常是成组出现的：标题掉出卡片边缘、色块不再贴住容器、两栏内容错位，并且在不同视口宽度下偏移方向和幅度不一致。出现这类现象时，先回退版式改动，而不是继续调图片尺寸去凑。

替换素材前记录原始宽高比

新素材撑破版式，多数时候不是图片太大，而是宽高比和占位区域不一致。替换之前，先把每个占位区域对应的原始素材宽高比记下来，写在一张表或一条注释里都行，后面按这个比例去找图或裁图。

记录方式按手头工具选一种即可。设计工具里看图片属性最直接；本地文件可以用 ImageMagick（如果已安装）读尺寸：

identify -format "%wx%h\n" hero.jpg

在浏览器控制台里读原图尺寸也可以，适合核对素材是否被样式拉伸过：

const img = new Image();
img.src = '/assets/hero.jpg';
img.onload = () => console.log(img.naturalWidth, img.naturalHeight,
  (img.naturalWidth / img.naturalHeight).toFixed(3));

记录完之后还要分清两种填充方式的视觉差异。等比缩放（object-fit: contain）保住比例，但会在容器里留下空白，需要靠底色或容器尺寸消化；等比裁切（object-fit: cover）填满容器，代价是边缘被切掉；直接改宽高属于拉伸填充，人像会变扁、圆形会变椭圆、图标线条粗细也会不一致。同一套模板里建议只用一种填充策略，混用会让对齐复查变得很难判断。

素材替换完成后统一做一次对齐与裁切

把替换过程中零散做的微调攒起来，最后一次性过。逐张替换、逐张微调的问题是改完第三张时已经记不清第一张的留白数值，最后只能凭眼看，越改越散。统一复查时按下面三项过一遍：

边缘留白：图片或色块与容器上下左右的距离是否与模板原值一致，用设计面板读数比目测可靠。
文字与图形间距：标题到副标题、图片到说明文字、按钮到正文，这几处的间距最容易在换文案后被撑开。
图片裁切主体位置：使用 cover 时，人脸、产品主体、logo 是否被切到边缘，必要的话调整 object-position 而不是改容器尺寸。

三项都过完之后再导出或发布。如果某一项反复对不上，说明问题在版式基准那一层，回到第一步处理，不要在素材层继续加补丁。

把顺序写进模板使用说明并试跑一次

流程只有写下来才可能被复用。说明文字不用长，但步骤条目要能照着做，建议包含这几条：

套用模板后先确认版式基准元素（边框、色块、标题基线），锁定后再动其他内容。
记录每个图片占位区域的原始宽高比，写进素材清单。
批量替换素材，替换期间不调整容器位置和间距。
替换完成后统一复查边缘留白、文字与图形间距、图片裁切主体位置。
导出前切换一次常用视口宽度，确认版式没有塌陷。

写完之后找一位没参与改稿的同事按说明试跑一次，重点不是看结果对不对，而是看他有没有跳过某一步：比如直接开始换图、没有记录宽高比、换到一半回头改容器尺寸。哪一步被跳过，就在那一步后面补一句“为什么不能省”，比在流程开头加一段总则更管用。