写 在 前 面
这篇文章在3月份我就已经发过了，今天我又重新加入了一些新的内容，使文章更加全面，所以我称之为升级版。法关于UI界面的切图命名的规范，U妹觉得关键是在于团队能够有一个统一的规则，所以这里只介绍一种通用的命名规则，当然大家也可以根据自己的实际情况去制定，这里只提供一种方法与思路，仅供参考。
我看到过很多小伙伴的切图命名，大多数人和新手是用拼音命名的
还有部分小伙伴更是要逆天了，是这样命名的
以汉子命名的，（我和我的小伙伴都惊呆了），U妹很担心你会被开发同事打
拼音的命名方式也是可以用的，但在开发同事眼里，只会显得你很Low，很不专业。
而真正规范的命名是这样子的
规范的命名方式可以提高开发人员的开发效率和整个开发团队的友好合作。U妹建议要竟可能用最少的字符而又能完整的表达标识符的含义。
一、 切图命名英文缩写的3个原则
1. 较短的单词可通过去掉“元音”形成缩写
2. 较长的单词可取单词的头部几个字母形成缩写
3. 还有一些约定俗成的英文单词缩写
4. 所有拼写全为小写英文字母
二、命名规则
模块_类别_功能_状态.png
U妹举个栗子：nav_button_search_default.png
释义为：导航_按钮_搜索_默认.png
| 启动界面 | |
|---|---|
| 启动图片 | default.png |
| 启动logo | default_logo.png |
| 如：default.pngdefoult@2x.pngdefauLt-512@2x.png |
| 登录界面（login） | |
|---|---|
| 登录背景 | login_bg.png |
| 登录logo | login_logo.png |
| 输入框 | login_input.png |
| 输入框选中状态 | login_input_pre.png |
| 登录按钮 | login_btn.png |
| 登录按钮选中状态 | login_btn_pre.png |
| 导航栏按钮 (nav) | |
|---|---|
| 命名 | nav_功能描述.png |
| 如：nav_menu.png av_menu_pre.png
（同按钮选中前后两种状态命名 ） |
| 按钮命名（btn可重复使用按钮) | |
|---|---|
| 一般 normal | btn_xxx_normal.png |
| 点击 highlighted | btn_xxx_highlighted.png |
| 不能点击 disabled | btn_xxx_disable.png |
| 按下 pressed | btn_xxx_pressed.png |
| 选中 selected | btn_xxx_selected.png |
| 做为复数选择出现机会不高 | |
|
btn_功能属性或色彩均可.png 如：btn_blue.pngtn_blue.9.png 蓝色按钮 |
| 其他命名 | |
|---|---|
| 图标 | icon_xxx.png |
| 图片 | pic_xxx.png或是img_xxx.png |
| 照片 | pho_xxx.png |
| 左侧导航 | |
|---|---|
| 命名 | leftbar_功能描述.png |
| 如：leftbar_info.pngleftbar_info_pre.png 个人中心 |
| 底部选项卡按钮（TabBar） | |
|---|---|
| 命名 | Tab_功能描述.png |
| 如：tab_set.Png av_set_pre.png 设置 |
| 主页命名 | |
|---|---|
| 命名 | home_功能属性＋描述.png |
|
如：home_menu_recommended.png 热门推荐 ps：描述可用英文或拼间开头字母组合等 |
| 列表页命名规则 | |
|---|---|
| 命名 | list_功能属性＋描述.png |
|
如：list_menu_collect.png 列表页收藏按钮 |
|
UI文件命名规范常用词 |
||
|---|---|---|
| 常用状态 | 正常 | normal |
| 按下 | pressed | |
| 选中 | selected | |
| 禁用 | disabled | |
| 已访问 | visited | |
| 悬停 | hover | |
|
控件＆部件 控件：较独立的可 操作界面元素 部件：描述属于某 控件一部分 |
按钮（可点） | btn |
| 图标 | icon不可点、非点击主体、图案部件 | |
| 标记 | sign | |
| 列表 | list | |
| 菜单 | menu | |
| 视图 | view | |
| 面板 | panel | |
| 薄板 | sheet 底部弹出菜单 | |
| 栏 | bar | |
| 状态栏 | statusBar | |
| 导航栏 | naviBar | |
| 标签栏 | tabBar | |
| 工具栏 | toolBar | |
| 切换开关 | switch | |
| 滑动器 | slider | |
| 单选框 | radio | |
| 复选框 | checkBox | |
| 背景 | bg | |
| 蒙版、遮罩 | mask | |
| 收藏 | collect | |
| 评论 | comment | |
| 广告 | ad | |
| 时间 | time | |
| 音频 | audio | |
| 视频 | viedio | |
| 不喜欢 | dislike | |
| 用户 | user | |
| 首页 | home | |
| 排名 | ranked | |
| 搜索 | search | |
| 标志 | logo | |
| 进度条 | progress bar | |
| 默认图片 | def_ | |
| 分隔图片 | seg_ | |
| 选择 | sel_ | |
| 关闭 | close | |
| 返回 | back | |
| 编辑 | eidt | |
| 内容 | content | |
| 左 中 右 | left center right | |
| 提示信息 | msg | |
| 个人资料 | porfile | |
| 弹出 | pop | |
| 删除 | delete | |
| *载下** | download | |
| 登录 | login | |
| 注册 | regsiter | |
| 标题 |
title |
|
| 注释 | note | |
| 链接 | link | |
| 图片 | image（img） | |
| 刷新 | refresh | |
| 常用补充描述 | 顶部 | top |
| 中间 | middle | |
| 底部 | bottom | |
| 第一 | first | |
| 第二 | second | |
| 最后 | last | |
| 页头 | header | |
| 页脚 | footer |
三、 总结
关于切图命名规范就到这里了，最后还是想和大家说，有什么不懂的、不明白的地方，要多去和开发的同事请教和沟通，这样才能省时省力，事半功倍，更加高效的完成工作。