本篇属「设计知识」板块，供广告、图文、设计与 AI 应用从业者日常速查。内容整理自公开资料与行业通行做法，涉及数值与工艺的条目，实际生产请以制作方工艺单与设备规格为准。
交付前先整理源文件
源文件（如 PSD、AI、Figma 文件）是后续修改与协作的基础。交付前应命名规范、图层分组清晰、无用图层与隐藏元素删除，并清楚说明所用字体与图片的授权来源。
图层命名别留「图层 1 副本 2」这类默认名。按模块分组，如「导航」「卡片」「弹窗」，组内再按元素命名，前端与同事打开即可读懂结构，不必逐层点开猜测。
建议附一份简短的说明：画布尺寸、设计倍数（如 @2x/@3x）、字体清单与替代方案、交互状态说明。前端拿到即可开工，交付效率与专业度都会显著提升。
目录结构可参考：根目录按「项目名_版本_日期」命名，其下分 source（源文件）、export（切图）、font（字体）、doc（说明与规范）。结构固定后，任何人接手都能立刻上手。
切图导出规范
切图（Slicing）指把界面中需要的图标、按钮、插画等元素单独导出为图片。移动端通常按 @1x/@2x/@3x 多倍率导出，以适配不同屏幕密度，避免在高清屏上发虚。
格式选择有规律：图标与简单图形优先 SVG，矢量无损且体积小；需要透明通道或复杂渐变时用 PNG；照片类用压缩后的 JPG 或现代格式，需按实际清晰度权衡体积。
命名用小写英文加连字符，如 icon-close.png、btn-primary-normal@2x.png，避免中文、空格与大写混用，防止不同系统在引用路径时出错而白白浪费调试时间。
常见误区有三：把整屏截图当切图交付、忘记导出按压与禁用等状态、透明区域留了多余白底。交付前逐张过一遍，删除多余切图并控制总体积。
- 按 @1x/@2x/@3x 多倍率导出
- 图标优先 SVG，需透明用 PNG
- 命名小写连字符、无空格中文
- 补齐按压、禁用、选中等状态
- 删除多余切图、控制总体积
标注怎么做
标注（Spec）是把间距、字号、颜色等数值写清楚，供前端精准还原。应覆盖元素间距、内外边距、字体大小与行高、圆角半径与配色的十六进制值，缺一不可。
现代协作多直接用 Figma 等工具的测量功能，或导出标注文件与红蓝线稿。关键是「数值可查」，而不是靠前端目测，目测正是界面还原出现偏差的主要来源。
容易被漏掉的四类标注：字重与字族、行高与字间距、圆角与描边宽度、各状态的颜色差异。只标字号不标字重，还原出来往往视觉偏轻或偏重。
若项目建立了设计变量或样式库，应在标注中直接引用变量名，让设计与代码共用同一套命名，后续改版时改一处即可，避免两边数值长期不一致。
- 标间距、边距与字号
- 标颜色的十六进制值与透明度
- 标圆角、行高、字重与字间距
- 用工具测量而非目测
协作清单与验收
交付时附检查清单：源文件、切图、标注、字体与素材授权是否齐全，版权可商用的素材需注明来源。清单随包一起发出，对方按项核对即可，无需反复追问。
前端还原后，设计师应做一致性验收：比对字号、间距、颜色与交互状态，并在真机或目标浏览器上查看，屏幕截图与实机渲染常有意想不到的差异。
把规范写成团队模板，下次直接套用，能显著降低沟通成本。好的交付不是「传个文件」就结束，而是让对方零障碍落地，这才是专业协作应有的终点与态度。
一句话总结：规范交付 = 整洁源文件 + 多倍率切图 + 可查标注。按 source/export/font/doc 组织目录，命名统一小写连字符，补齐各状态切图与四项易漏标注，再用清单与模板固化流程，是设计与开发高效协作、减少返工的关键。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
