2020年8月21日下午4点50分 黄河公园通常我们在界面设计完成之后要切图给到前端开发。初做UI设计时，把重点都放在设计效果图上，对之后的切图命名规范没有很注重。当时我会有一些疑惑，切图命名的原则是什么？直接命名为能表达清楚的名称不就可以吗？后来做的项目多了也知道了切图命名规范的重要性。如果你直接命名为中文或者拼音给到开发，会无形之中给开发同事增加工作量，可能开发同事对你的命名没有严格要求，但是在他们进行开发时都是自己去更改切图名称，这样就很浪费时间，也显得设计师不是很专业。所以在设计效果图完成之后，我们在切图时直接把切图命名好，这样极大节省程序员开发的时间成本，有助于团队协同，也是对设计师自身的严格要求，让我们对设计保持严谨性，专业性。
几种切图命名规则
控件_类别_功能_状态
举例：nav_icon_search_normal
对应中文：导航栏_图标_搜索_正常
类别_功能_状态
举例：icon_search_normal
对应中文：图标_搜索_正常
模块_类别_功能_状态
举例：home_icon_search_pressed
对应中文：主页_图标_搜索_按下
注意事项
1.命名用英文
2.命名中不能含有空格
3.用下划线连接
如果一个图标的英文是由2个或者更多的词汇组成，那也需要用下划线连接，不要用空格或者其他符号
4.较长的单词可取单词的头部几个字母形成缩写
例如：bg(background)、pic(picture)、tab(tabbar)
5.不要有重复的名字，会被覆盖
命名中不要有重复的英文名，如果有重复的名字，上传时会被其中一个覆盖，如果有相同命名的图标，我们要想办法区分，可以换个表达方式或者功能后面加上数字1、2、3、区分开
常用英文单词表
控件名称：
状态栏：status bar
搜索栏：search bar
导航栏：nav bar/nav_
标签栏：tab bar/tab_
弹窗：popup
开关：switch
选择器：pickers
工具栏：tool bar
单选框：radio
复选框：checkbox
背景：background
标志：logo
蒙版、遮罩：mask
功能命名：
添加：add
卸载：uninstall
查看：view
搜索：search
关闭：close
下载：download
取消：cancel
删除：delete
暂停：pause
导入：import
继续：continue
等待：waiting
后退：back
导出：export
安装：install
常见状态：
普通：normal
默认：default
按下：pressed
选中：selected
禁用：disabled
已访问：visited
悬停：hover
总结
切图命名不是一成不变的，在实际工作当中，还是需要多思考和灵活使用。其实命名规范主要就是为了程序员更好的进行开发工作，节约前端开发的时间成本。所以有什么不懂的地方要和开发同事多沟通，这样才能使团队协作更高效，也能凸显出设计师的专业性，岂不是一举两得～
