svgaps绘制时不能用中文命名吗_设计师需要了解的切图命名规范

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

总结

切图命名不是一成不变的，在实际工作当中，还是需要多思考和灵活使用。其实命名规范主要就是为了程序员更好的进行开发工作，节约前端开发的时间成本。所以有什么不懂的地方要和开发同事多沟通，这样才能使团队协作更高效，也能凸显出设计师的专业性，岂不是一举两得～