设计稿切图交付的关键不是把所有图片导出一遍，而是让研发知道每个资源放在哪里、在什么尺寸和状态下使用、加载失败时怎么办。先建立资源清单，再统一命名和倍率，补齐深色/禁用/空状态，最后用真实页面检查清晰度、裁切和加载回退。下面用活动报名页的海报、头像和按钮图标示范一套可复用流程。
用墨刀设计对齐资源所在的页面和组件，再建立导出清单；文件的用途、容器和状态比“导出了多少张”更值得检查。
先建立资源清单，不从画板逐个猜文件名
活动报名页包含一张横幅海报、三张讲师头像、报名按钮图标和“名额已满”状态图。先记录资源用途、容器尺寸、裁切方式、背景要求和是否需要多倍率，再决定导出格式。页面里同一张头像若既用于圆形卡片又用于详情页，不要只交一个“avatar.png”，而要记录组件用途和裁切规则。
| 资源 | 用途/容器 | 交付约定 | 验收点 |
|---|---|---|---|
| 活动海报 | 首页横幅，比例 3:1 | 按兼容范围选 WebP/JPEG，主体避开裁切边 | 窄屏裁切后标题仍完整 |
| 讲师头像 | 圆形卡片，64×64 CSS px | 1x/2x 同源，透明或统一背景 | 圆形裁切不切掉脸部 |
| 报名图标 | 按钮左侧，16×16 CSS px | SVG，命名含状态用途 | 默认、悬停、禁用对比清楚 |
| 名额已满 | 卡片状态，覆盖海报角标 | 独立层，不烘焙进海报 | 状态变化不需要重新导出海报 |
用名称和路径让资源可追踪
命名包含页面、组件、用途和状态，例如 event-signup-banner-default.webp、event-speaker-avatar-01@2x.png、event-signup-icon-disabled.svg。如果项目已有命名规范，应沿用项目词汇；不要混用“banner、hero、top-image”表示同一容器。资源目录按页面或组件归档，研发可以从原型节点回到清单，而不是在压缩包里凭感觉挑图。
在墨刀设计中给资源节点加用途和状态说明，再把清单链接到交付版本。这样设计改动时能看出哪些资源会影响首页、报名卡和结果页，减少只替换一张图却遗漏移动端的问题。
四步完成一轮切图交付
- 盘点：从页面和组件出发列出资源，标记复用、裁切、背景和状态。
- 导出：按容器尺寸和清晰度选择格式与倍率，保留需要的回退格式；图标能用矢量就不要用模糊位图。
- 说明：在清单中写文件名、路径、尺寸、状态、替代文本和使用限制，说明哪些文字不能烘焙进图片。
- 验收：把资源放进桌面和手机页面，检查裁切、清晰度、暗色/禁用态、加载失败回退和可访问名称。
最常见的交付错误
把文案做进海报：活动日期变化就必须重新出图，且屏幕阅读器无法读到。可变文案放页面层，图片只保留必要视觉。
只交默认态：报名按钮、空状态和错误状态往往在联调时才出现。清单中明确状态，缺图时提供颜色、图标或文本回退。
只看设计稿尺寸：高倍率屏幕、窄屏裁切和懒加载会改变实际效果。验收要以 CSS 容器和真实页面为准，而不是只看导出文件。
让研发能快速复核
交付包打开后，研发应先看到资源清单、预览缩略图和原型节点链接。每个资源能追溯到页面和组件，状态能对应到交互说明，替代文本和回退策略已经写明。若发现命名不一致或资源缺失，先在清单记录再修改，不要直接覆盖旧文件。
完成清单后再进入团队评审，把尺寸、命名和状态问题一次解决；页面上线前只需按同一清单回归，不必重新猜设计意图。
响应式页面要用容器验收资源
同一张海报在桌面横幅和手机卡片中可能使用不同裁切策略。本例检查这三种显示情况：桌面 1200×400、手机 390×180、无图回退状态。检查主体是否被裁掉、文字是否仍由页面层渲染、图片加载失败时是否有背景和替代文字。头像则要检查圆形裁切、低分辨率放大和高对比背景，不要只看设计稿原尺寸。
| 场景 | 应看到的结果 | 不合格信号 |
|---|---|---|
| 桌面横幅 | 主题人物完整，日期由页面文字层显示 | 主体被左右裁切 |
| 390px手机卡片 | 图片与标题层级稳定 | 海报文字缩成无法阅读 |
| 加载失败 | 背景、替代文本或占位状态存在 | 出现破图图标或空白大块 |
| 禁用按钮 | 图标与文本对比仍可识别 | 只降低透明度而看不出状态 |
交付包中的最小文件结构
可以按页面建立 page/asset-manifest.csv、page/images/、page/icons/ 和 page/prototype-link.txt。清单记录文件名、用途、尺寸、倍率、alt、状态和负责人；文件夹只放实际要用的版本，废弃资源移到带日期的归档目录。这样研发不会把旧海报误当成当前版本，也方便后续替换单一资源。
资源交付完成后，让研发按清单随机抽取一个默认态、一个错误态和一个移动端容器回看。抽查能发现命名、裁切和状态遗漏；如果抽到问题，回到清单修正，而不是只在代码里临时覆盖。
导出格式怎样取舍
几何图标优先考虑 SVG，便于缩放；照片类资源可比较 WebP、JPEG 等格式的体积和可见细节；需要透明度的图像，应选择支持透明通道的格式并在实际背景上检查边缘。具体格式仍以项目兼容范围和构建链为准，不要为每张图机械导出所有格式。
对页面以 64×64 CSS 像素显示的头像，2x 文件可按 128×128 像素准备；这不意味着所有资源都必须同时提供 1x、2x、3x。先确认页面如何选择源图，再按容器和屏幕密度验收。把决定写进清单，避免研发自行缩放一个尺寸不明的“高清图”。
从墨刀设计中的一张活动报名页开始，先整理海报、头像、图标和名额状态四类资源，把文件用途、容器与倍率写进清单；请研发按同一清单检查桌面和手机页面，发现裁切问题就回到源稿调整。
