素材交付出问题的方式是可预测的，而其中几乎所有问题，都能靠导出前一次简短对话避免。
首先要问的三个问题
- 显示尺寸是多少？ 不是设计画布尺寸——是界面里实际渲染的尺寸，且要按各断点分别确认。其余一切都由它推出。
- 要支持哪些像素密度？ 1×、2×、3×？网页通常需要 1× 和 2×，移动应用往往需要 3×。
- 能不能做成矢量？ 如果能，大部分导出工作就消失了。
问清这三个，就能避免最常见的失败：按错误尺寸导出，然后再返工两次。
矢量还是位图
给 SVG 的情形：图标、logo、纯色形状的插画、需要缩放的一切、需要随主题变色的一切。
给位图（PNG/WebP/JPEG）的情形：照片、复杂渐变和纹理、带大量效果的图像，或者 SVG 会大到离谱时（一张有数千条路径的描摹插画，往往比 PNG 还大）。
交付 SVG 前先做清理：剥离编辑器元数据、删除隐藏图层、降低坐标精度、压平不必要的分组，并把文字转曲*或*确认字体可用。原始编辑器导出常常比优化后的大十倍。
位图导出规则
- 按所需的最高密度导出，若构建流程支持，就让它去生成更小的尺寸。
- 使用精确的像素尺寸。 因为四舍五入误差而宽 101 像素的素材，会导致半像素渲染和边缘发虚。
- 按内容选格式：照片用 JPEG 或 WebP，带透明或锐利界面边缘的用 PNG，项目支持就用 WebP/AVIF。
- 除满幅照片外，一律给透明背景——开发随时可以加背景，却无法去掉背景。
- 统一裁掉留白，或者明确指定内边距。图标周围内边距不一致，是经典的对齐噩梦。
能对应到代码的命名
使用可预测、对代码友好的规范：
icon-search-24.svg
[email protected]
hero-homepage-1920x1080.jpg
logo-primary-dark.svg
logo-primary-light.svg规则：小写、连字符、无空格、名字里带尺寸或变体、密度后缀按平台惯例。绝不要包含日期、v3-final 这类版本号，或设计师的姓名缩写。
还应该附上什么
- 一份清单：一个简短文档或表格，列出每个素材、用在哪里、显示尺寸，以及任何行为（悬停态、深色模式变体）。
- 设计里有的话，附上深色模式变体——并明确说明该素材是应该用 CSS 改色，还是应该整体替换。
- 源文件，而不只是导出件。开发偶尔需要按谁也没预料到的尺寸重新导出。
- 兜底说明：图片加载时应该显示什么，加载失败又会怎样。
- 任何图库或第三方图像的授权信息，以免无权利的素材被带上线。
避免反复返工
- 从组件化结构导出，这样一处改动就能一致地重新生成全部素材。
- 工具支持就自动化导出，而不是手工切图。
- 多给一档密度，超出对方要求的那一档；成本为零，却能省下一次往返。
- 和开发一起坐一次，看他们如何接入素材。二十分钟的观察能消除今后大部分摩擦，因为你会清楚看到，你的哪些惯例正在消耗他们的时间。