设计交付：切图、命名与标注的实用规范

设计稿交付给开发，最怕两件事：切图糊了、命名看不懂。这两件小事会拖慢整个项目，而且完全可以靠规范避免。

切图导出什么格式

• 图标、logo、插画：SVG。矢量，任意缩放不糊，还能改颜色。
• 照片、复杂渐变：JPG，质量 80 左右。
• 需要透明的元素：PNG（或 WebP）。
• 背景大图：JPG 压缩，或 WebP。别用 PNG 传几兆的背景。

导出倍图：移动端 @2x、@3x；Web 端通常 1x 就够，需要高清时用 2x。别把 3x 的图直接塞进网页，会拖慢加载。

命名规则

统一用"模块-元素-状态"，全小写、连字符分隔：

icon-arrow-left.svg
btn-primary-hover.png
bg-hero-desktop.jpg

不要用中文名（有些构建工具会出问题），不要用"未命名-1""图层副本"。命名统一了，开发找图不用问。

标注什么

现代流程里，标注越来越少——因为开发能直接从 Figma 看尺寸。但有几样还是得说清楚：

• 间距和边距：尤其是响应式下的变化规则
• 字号、行高、字重：特别是用了非标准值的
• 颜色变量：给色值的同时给变量名，方便统一改
• 交互状态：悬停、点击、禁用分别什么样
• 断点规则：什么宽度下布局怎么变

交付物清单

一个完整的交付包通常包含：设计稿链接（带权限）、切图压缩包（按模块分文件夹）、交互说明文档、以及一份"变更记录"。变更记录很重要——改了哪里、为什么改，避免开发做完才发现对不上。

验收环节

开发做完要让设计走查一遍。走查不是"看一眼像不像"，而是对着标注核对：间距对不对、字号对不对、状态有没有漏。发现问题记成清单，一次性反馈，别零散地反复提。

这套流程看着繁琐，跑顺了之后能省掉大量返工。尤其是命名和切图规范，一旦团队统一，沟通成本会明显下降。