一、命名的重要性
在UI设计交接环节中，切图命名是研发理解你设计意图的“语言”。一个糟糕的命名可能让工程师花5分钟去猜是哪一个按钮；而一个良好的命名，可以让他们“秒懂”逻辑，直接批量调用。
举个例子：
- 图层1拷贝12.png：对于这命名，研发完全不知道它是什么。
- btn_Location_large.png：则清晰的表明，这是一个主按钮表示方位的大号按钮状态。
二、命名的目标
在切图命名中，我们的最终目标是：
- 让人看懂：不需要问设计师就能知道是什么。
- 风格一致：所有文件的命名规则统一。
- 方便扩展：即使新增状态、尺寸或皮肤，也能延续命名逻辑。
- 机器识别：命名避免特殊字符、中文、空格，方便程序调用。
命名的本质，其实是一种沟通标准化。当你在团队中与不同国家、不同背景的前端协作时，统一的命名系统就像一座桥梁。
三、命名规则
1. 全英文小写
使用全英文小写不仅是国际惯例，也能避免跨系统乱码问题。例如：
✅ icon_home.png
✅ btn_primary_hover.png
❌ 首页图标.png
❌ BtnPrimaryHover.PNG
注意：大小写混用可能导致开发工具识别出错，尤其在Linux系统中，Btn.png 与 btn.png 被视为不同文件。
2. 用下划线分隔
在UI资源命名中，下划线 _ 是最推荐的连接方式。它比连字符 _ 更清晰，也避免与CSS类名冲突。例如：
✅ btn_primary_large.png
✅ icon_user_active.png
❌ btn-primary-large.png
小技巧：用 _ 命名还有一个好处,当文件名较长时更便于阅读。
3. 命名结构
命名结构遵循固定顺序，如 [类型] _ [功能] _ [状态]，这个是UI切图最经典的命名范式。btn_login_hover
| 元素 | 说明 | 示例 |
|---|---|---|
| 类型 | 图像所属类别，如icon、btn、bg、tab等 | btn_, icon_ |
| 功能 | 表示用途或位置，如login、home、user等 | btn_login, icon_home |
| 状态 | 表示交互状态或样式，如hover、active、disabled | btn_login_hover |
例子如下：
icon_user_active.png
btn_primary_disabled.png
bg_header_dark.png
这样的结构让文件自动形成“语义组”，你甚至可以按关键词搜索批量替换。
4. 状态顺序
如果一个按钮或组件有多个状态（normal、hover、pressed、disabled），命名最好统一顺序，以方便文件管理与批量导入。
比如：
btn_primary_normal.png
btn_primary_hover.png
btn_primary_pressed.png
btn_primary_disabled.png
当文件在文件夹中按字母排序时，会自然形成状态分组，逻辑一目了然。
5. 分辨率区分
移动端设计常需导出多倍图。常见格式如下：
btn_primary.png → 1x
btn_primary@2x.png → Retina 屏（默认）
btn_primary@3x.png → 高分屏
若项目需区分平台，也可添加平台后缀：
btn_primary_ios.png
btn_primary_android.png
这样前端能快速匹配到对应版本，不会混用资源。
四、命名注意点
1. 避免模糊词
❌ new, final, copy, test
✅ btn_confirm, icon_delete
模糊命名会让人无法判断是正式文件还是临时稿。
2. 不加版本号或日期
❌ btn_login_v2.png
✅ 用版本管理（如Figma历史版本或Git）来追踪改动，不靠命名。
3. 保持一致性
统一的命名风格比“完美命名”更重要。即使团队中有人喜欢缩写（如btn_prim），也要确保全项目一致。
4. 按类型建文件夹
例如： icons文件夹包含切图
icon_home.png
