B端产品服务于企业、产品、研发，目的是要帮助B端企业解决一些问题的。我们在工作中对于图标的命名规范有良好习惯，是非常重要的！规范的命名方式可以提高设计与开发人员的的开发效率和整个开发团队的友好合作。这样子既方便设计又方便开发人员，凭借多年工作经验编写一份命名规范给大家，供大家使用！！！设计师、开发工程师，包括H5前端开发人员都可以记住的文件命名规范。一、 切图命名英文缩写的3个原则 较短的单词可以通过去掉“元音”形成缩写较长的单词可以以单词的头部几个字母形成缩写还有一些约定成俗的英文单词缩写二、 命名规则通用切图命名：组件_类别_功能_状态@2x.png举例：tabbar_icon_home_default@2x.png（对应中文：标签栏_图标_主页_默认@2x.png）模块特有切图命名：模块_类别_功能_状态@2x.png举例：bill_icon_search_pressed@2x.png（对应的中文为：账单_图标_搜索_ 默认@2x.png）三、 名词解释【控件/组件】：比较独立的可以操作界面元素。如 状态栏、搜索栏、弹出时窗口等。【模块】：一般指页面中的部分区块，也有指背景图。如背景、按钮、icon都是模块。【功能】：一般指的是页面或者模块中，需要操作或点击的某个点，如上图，发现页中的搜索icon。【状态】：一般指当前切图的状态区分，像按钮的话，有默认状态、点击时状态、按下状态、不可点击状态等，网页上按钮还有悬停状态。注意：所有命名只能为小写英文字母，不要为了好看或者像平时打英语一样，首字母是大写之类的，也不可以为中文，不然对于开发来说，是没有意义的，因为他们还是得自己再改一遍。注意：ios切图需要在命名后加上@2x、@3x后缀名，安卓的切图不需要加，不过有些安卓开发需要切图后缀加上尺寸。四、 UI文件命名规范常用词组件（系统控件库）
| 状态栏 | status bar | 搜索栏 | search bar |
| 导航栏 | nav/navigation bar | 表格视图 | table view |
| 标签栏 | tab bar | 分段控制 | Segmented control |
| 工具栏 | tool bar | 活动视图 | activity view |
| 左侧导航 | leftnav | 扫描 | scanning |
| 提醒视图 | alert view | 弹出视图 | popovers |
| 编辑菜单 | edit menu | 开关 | switch |
| 选择器 | pickers | 弹窗 | popup |
| 滑杆 | sliders |
资源类型
| 图片 | img /image | 滚动条 | scroll |
| 图标 | lcon | 标签 | tab |
| 静态文本框 | label | 勾选框 | checkbox |
| 编辑框 | edit | 下拉框 | combo |
| 列表 | list | 单选框 | radio |
| 进度条 | progress | 线条 | line |
| 树 | tree | 蒙版 | mask |
| 动画 | animation | 标记 | sign |
| 按钮 | btn / button | 动画 | animation |
| 背景 | bg /backgroud | 播放 | play |
功能命名
| 确定 | ok | 添加 | add |
| 默认 | default | 查看 | view |
| 取消 | cancel | 删除 | del / delete |
| 关闭 | close | 下载 | download |
| 最小化 | min | 等待 | waiting |
| 最大化 | max | 加载 | loading |
| 菜单 | menu | 安装 | install |
| 卸载 | uninstall | 选择 | select |
| 搜索 | search | 更多 | more |
| 暂停 | pause | 刷新 | refresh |
| 继续 | continue | 发送 | send |
| 导入 | import | 前进 | forward |
| 导出 | export | 重新开始 | restart |
| 后退 | back | 更新 | update |
常见状态
| 普通/正常 | normal | 不能点击 | dis |
| 选中 | selected | 已访问 | visited |
| 禁用 | disabled | 获取焦点 | focused |
| 完成 | complete | 空白 | blank |
| 按下 | pre | 弱化 | weaken |
| 点击 | highlight | 默认 | default |
| 悬停 | hover | 错误 | error |
| 滑动 | slide | 弱化 | weaken |
| 按下 | pre |
界面命名
| 整个主程序 | app | 搜索结果 | search results |
| 首页 | home | 应用详情 | app detail |
| 软件 | software | 日历 | calendar |
| 游戏 | game | 相机 | camera |
| 管理 | management | 照片 | photo |
| 发现 | find | 视频 | video |
| 个人中心 | personal center | 设置 | settings |
| 小技巧 | tips | 热点 | hot |
| 排名 | ranked | 个人资料 | profile |
| 活动 | activity | 信息 | msg / messages |
| 探索 | explore | 音乐 | music |
| 联系人 | contacts | 新闻 | news |
| 控制中心 | control center | 注释 | notes |
| 健康 | health | 天气 | weather |
| 邮件 | 手表 | watch | |
| 地图 | maps | 锁屏 | lock screen |
| 服务 | service |
位置排序
| 顶部 | top | 底部 | bottom |
| 中间 | middle | 第一 | first |
| 左 | left | 中 | center |
| 第二 | second | 页眉 | header |
| 最后 | last | 页脚 | footer |
| 右 | right |
注：所有命名全部为小写英文字母我们的目标是让开发直接拿我们的切图进行使用，不能够随意修改名称，但是我们要知道，开发小哥哥的代码里只有小写的英文字母，如果你给出的命名全是中文的，那么他们是一定会更改的。所以命名全部用小写的英文字母是最基本的规则。五、常用界面命名启动界面启动图片：default.png启动：logo default.png如：default.png\defoult@2x.png\default-568@2x.png登录界面登录背景：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\nav_menu_pre.png（同按钮选中前后两种状态命名 ）按钮命名（btn可重复使用按钮)一般：normal btn_xxx_nor.png点击：highlight btn_xxx_hig.png不能点击：disabled btn_xxx_disa.png按下：pressed btn_xxx_pre.png选中：selected btn_xxx_sel.png 复数选择出现机会不高btn_功能属性或色彩均可.png如：btn_blue.png\btn_blue.9.png 蓝色按钮其他命名图标：icon_xxx.png图片：pic_xxx.png或是img_xxx.png照片：pho_xxx.png左侧导航 命名 leftbar_功能描述.png如：leftbar_info.png\leftbar_info_pre.png 个人中心底部选项卡按钮（TabBar）命名 Tab_功能描述.png 如：tab_set.Png\nav_set_pre.png 设置主页命名命名 home_功能属性＋描述.png如：home_menu_recommended.png 热门推荐ps：描述可用英文或拼音开头字母组合等列表页命名规则命名 List_功能属性＋描述.png如：list_menu_collect.png 列表页收藏按钮总结以上是总结了切图的命名规范，之后再详谈切图规范。其实管理文件也是门学问，它能让你省下没必要耗费的时间与精力。沟通也是能够帮助你更好地与团队，不同部门更高效地推进项目的开展。每个公司都有自己的命名和输出模式的，以上是和大家交流下自己工作中的方法和心得，希望对于大家有所帮助。如果觉得以上有什么补充的，欢迎大家留言告知，不胜感激。
