UI设计交付切图规范：从多倍图命名到安卓与iOS适配落地

切图整理完发给开发，过一会儿对方发来消息：这个 normal 是默认还是选中？那个 icon 是不是少了 2 倍？能不能重新导一遍？这种情况通常不是画得不好，而是交付一开始就缺少统一规则。

UI 设计交付看似只是导出 PNG 或 SVG，实际影响的是开发能不能立即使用。命名混乱、目录分散、倍数缺失，开发要么反复来问，要么自己猜着替换，最终上线效果和设计稿不一致。因此，切图规范的核心不是图包有多完整，而是拿到手能不能直接落到项目里。

先定命名规则，再开始导出

命名规则建议包含模块、类型、功能、状态和倍数五个部分。模块表示图片属于哪个页面或公共区域；类型说明这是图标、按钮还是背景；功能描述具体用途；状态用于同一按钮的不同交互状态；倍数决定它应该在什么屏幕密度下使用。

可以套用这个模板：

模块_类型_功能_状态@倍数.png

例如：

• home_icon_search_normal@2x.png




• mine_btn_follow_pressed@3x.png




• common_bg_dialog@2x.png

这条规则的要点是全小写、下划线连接，不出现空格、中文或随意大小写。开发不需要逐个打开图片，只从文件名就能判断它属于哪个模块、什么状态、应该在哪个密度下加载。如果命名随意，比如“图标1”“搜索2”“最终版”，开发就只能靠肉眼区分，替换错误和漏掉状态是大概率事件。

状态后缀必须和团队约定保持一致，比如默认 normal、按下 pressed、禁用 disabled、选中 selected。不要在同一份切图里一会儿用 default，一会儿用 normal；一会儿用 off/on，一会儿用 selected/unselected。命名不统一的直接后果是开发要自己判断对应关系，判断错一次就可能出现选中态和默认态反了的问题。

模块缩写也建议由团队统一维护，例如 common 用于公共图标、home 用于首页、mine 用于个人中心、detail 用于详情页。新增模块时先定缩写，再开始导图。模块名是开发快速定位的关键，如果按中文页面名来建文件夹，跨平台路径和代码引用都会更麻烦。

目录按平台分好后，倍数要一次对齐

命名解决了单张图能不能被识别，目录解决的是一批图能不能被快速接入。iOS 和 Android 对资源目录的要求不同，设计交付时如果混在一个文件夹里，开发需要自己拆分，这比重新切图还容易出错。

建议直接按平台先分目录：

切图/
├── ios/
│   ├── 1x/
│   ├── 2x/
│   └── 3x/
├── android/
│   ├── mdpi/
│   ├── hdpi/
│   ├── xhdpi/
│   ├── xxhdpi/
│   └── xxxhdpi/
└── common/
    └── svg/

iOS 与 Android 的倍率不是简单换个后缀，而是要保证同一张图在不同密度设备上有合适的分辨率。常用对应关系如下：

iOS 常用 @2x 和 @3x，Android 常用 xhdpi、xxhdpi 和 xxxhdpi。少了某个倍数，开发在相应屏幕密度下要么使用低清晰度素材，要么由系统放大，边缘容易变模糊。如果只给一张 @2x 就让 Android 自行适配，遇到更高密度屏幕就会出现放大后发虚；反过来用最大倍数缩到小尺寸，细小线条又可能断裂或变重。因此，按倍率逐级导出是保证双端显示一致的基础。

图标和位图不能都用同一套规则

很多刚开始独立交付的设计师会把所有图形都导出成 PNG，甚至把简单图标也按多种倍数导出。图包会变得臃肿，开发也要在更多资源中做选择。更合理的判断是先区分图形性质：它属于矢量优先，还是必须用位图保证效果。

线性图标、扁平图标、简单几何图形、单色或少量颜色的符号，优先用 SVG。SVG 作为矢量格式可以无损缩放，开发引入后不需要准备多套倍率，图标也不会因为密度不同而模糊。常见的导航图标、操作栏图标、状态图标，只要效果不依赖复杂滤镜，都适合先考虑 SVG。

带有复杂渐变、多层投影、羽化发光、照片内容、纹理或插画，通常需要导出多倍位图。这些效果在矢量格式里很难逐像素保持一致，部分渲染环境也可能不支持某些滤镜，交付 PNG 反而更稳定。这类素材如果只导出一个倍率，放大后必然出现模糊或细节丢失。

位图发虚很多时候不是导出的倍率不够，而是基准尺寸没有对齐。图标尽量使用偶数尺寸，比如 24、32、48 像素；按钮背景也尽量贴齐整数坐标。奇数尺寸容易在居中计算时产生半像素偏移，边缘会被系统拉伸到虚化状态。

还要给投影、描边留出安全边距。切图时只贴着可见图形裁切，投影或发光效果可能被裁掉一部分；开发加上背景后也会显得很挤。一般建议在导出范围内保留少量透明安全区，具体数值按效果强度调整。

交付前按这份清单过一遍

命名、目录、格式和像素对齐已经拆开讲过，交付前可以把最容易出问题的地方集中检查一遍：

1. 命名抽查：随机打开几组图片，检查是否为“模块_类型_功能_状态@倍数”格式，有无空格、中文或大小写不一致。




2. 状态对应：同一个按钮的 normal、pressed、selected、disabled 是否齐全，状态后缀是否统一。




3. 双端倍数：iOS 的 @2x、@3x，Android 的 xhdpi、xxhdpi、xxxhdpi 是否都已导出；缺哪一个，对应设备就会出现模糊。




4. 格式判断：简单图标是否优先给了 SVG；复杂效果的图片是否保留了多倍 PNG。




5. 尺寸检查：图标基准尺寸是否为偶数；切图后边缘是否贴齐像素网格；有无多余空白或被裁掉的发光、投影。




6. 透明背景：PNG 是否保留透明区域；导出前是否清除了隐藏图层产生的杂边；纯白背景是否误当成了透明。




7. 目录检查：是否按 ios、android、common 分目录；SVG 是否放在公共目录；文件名和目录层级是否和交付说明一致。




8. 打开验证：抽几张位图放大检查边缘；打开 SVG 确认图形完整，没有出现路径丢失或结构裂开。

这套清单不用每张图都查一遍，团队第一次使用时可以全部检查，之后稳定了只抽查关键图标和新增模块即可。

切图规范真正的目标不是让文件包更像规范，而是让开发不再把时间花在找图、改名和猜状态上。命名、目录、格式、倍数和像素检查这五项都固定下来后，交付就不再是设计师和开发之间的摩擦点，而是可以复用的流程。开始导出前花几分钟确认规则，后面的效率提升远高于反复补图。