3. 命名规范与约束：小写字母与下划线命名法、驼峰命名法、按模块/功能/状态命名的策略

命名这件事，说大不大，说小不小。我见过太多项目，功能都写好了，结果因为图片命名乱七八糟，移植的时候找资源找到崩溃。你想想看，一个界面里几十上百张图，如果命名毫无章法，那简直就是给自己挖坑。

今天我们就来聊聊图片资源的命名规范。说白了，就是给每张图片起个好名字，让团队里任何人都能一眼看懂它是什么、用在哪儿、什么状态。

3.1 两种主流命名法

先说说最基础的东西。图片命名主要有两大流派：小写字母+下划线，以及驼峰命名法。我个人更倾向于前者，但具体用哪种，得看团队约定。

3.1.1 小写字母与下划线命名法

这种命名法，全小写字母，单词之间用下划线分隔。举个例子：btn_login_normal.png。它的好处很明显——跨平台兼容性好，Linux 和 Windows 都不会因为大小写出问题。

# 推荐示例
icon_home_selected.png
icon_home_unselected.png
bg_login_top.png
btn_submit_disabled.png

# 不推荐示例
IconHomeSelected.png    # 大小写混用
icon-home-selected.png  # 连字符在某些系统有问题
ICON_HOME_SELECTED.png  # 全大写可读性差

我记得有一次接手一个老项目，图片命名全是中文拼音加数字，比如 an1.png、an2.png。移植到新平台时，根本不知道每张图是干嘛的。后来我花了两天时间全部重命名，改用小写加下划线，才把项目救回来。

3.1.2 驼峰命名法

驼峰命名法分两种：小驼峰（首字母小写）和大驼峰（首字母大写）。在图片命名中，小驼峰更常见，比如 btnLoginNormal.png。

// 小驼峰示例
iconHomeSelected.png
bgLoginTop.png
btnSubmitDisabled.png

// 大驼峰示例（常用于组件名）
HomeIcon.png
LoginBackground.png
SubmitButton.png

这里有个坑要注意。我曾经在 Windows 上开发，用驼峰命名法，一切正常。结果代码提交到 Linux 服务器后，图片加载失败。为什么？因为 Windows 不区分大小写，但 Linux 区分。所以如果你的项目要跨平台部署，我建议优先考虑小写加下划线。

3.2 按模块/功能/状态命名的策略

光知道命名法还不够，关键是怎么组织名字的结构。我总结了一套「三段式」命名策略，用了好几年，效果不错。

3.2.1 模块前缀

每张图片的名字，开头先标明它属于哪个模块。比如登录模块用 login_，首页用 home_，设置用 settings_。这样一眼就能知道图片的归属。

模块	前缀	示例
登录	login_	login_bg.png
首页	home_	home_banner.png
个人中心	profile_	profile_avatar.png
设置	settings_	settings_icon.png

3.2.2 功能/类型标识

第二部分说明图片的类型或功能。常用的标识有：

• btn — 按钮
• icon — 图标
• bg — 背景
• img — 普通图片
• logo — Logo
• avatar — 头像
• banner — 横幅

举个例子：login_btn_submit.png，一看就知道是登录模块的提交按钮。

3.2.3 状态后缀

第三部分描述图片的状态。按钮有正常、按下、禁用；图标有选中、未选中；背景有白天、夜间。把这些状态放在最后，用下划线连接。

# 按钮状态
btn_login_normal.png
btn_login_pressed.png
btn_login_disabled.png

# 图标状态
icon_home_selected.png
icon_home_unselected.png

# 主题状态
bg_main_day.png
bg_main_night.png

3.3 命名规范全景图

下面这张图，把命名规范的核心逻辑串起来了。你可以把它当作团队规范文档的参考。

3.4 避坑指南

做图片命名这么多年，我踩过不少坑。分享几个最常见的，你遇到了可以绕开走。

• 不要用空格和特殊字符 — 空格在 URL 里要转义，#、&、? 这些字符在某些系统里会引发解析错误。
• 不要用数字序号 — img01.png、img02.png 这种命名，过两周你自己都分不清哪张是哪张。
• 不要混用命名风格 — 一个项目里，要么全用下划线，要么全用驼峰。混着用，代码审查的时候会被骂的。
• 不要用缩写过度 — lg_btn_nm.png 这种，缩写到亲妈都不认识。除非是团队公认的缩写，否则老老实实写全称。

3.5 实战建议

说了这么多，最后给几条落地建议。

1. 团队统一 — 不管用哪种命名法，全团队必须统一。不要在同一个项目里出现两种风格。
2. 命名即文档 — 好的命名，不需要额外注释就能让人看懂。如果一张图的名字需要写注释才能理解，那名字就没起好。
3. 保持简洁 — 名字不要太长。我一般控制在 3-4 个单词，超过 5 个就要考虑是不是分类有问题。
4. 版本管理 — 图片改名后，记得更新所有引用。我习惯用全局搜索确认没有遗漏。

命名规范这件事，前期花点时间定好规矩，后面能省下大把时间。你想想看，移植界面的时候，看到 login_btn_submit_normal.png 就知道它是登录页的提交按钮、正常状态。这种清晰感，真的很舒服。