较短的单词可以通过去掉“元音”形成缩写。
较长的单词可以以单词的头部几个字母形成缩写。
还有一些约定成俗的英文单词缩写。
通用切图命名:组件_类别_功能_状态@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后缀名,安卓的切图不需要加,不过有些安卓开发需要切图后缀加上尺寸。
组件(系统控件库)
资源类型
功能命名
常见状态
界面命名
位置排序
注:所有命名全部为小写英文字母。
我们的目标是让开发直接拿我们的切图进行使用,不能够随意修改名称,但是我们要知道,开发小哥哥的代码里只有小写的英文字母,如果你给出的命名全是中文的,那么他们是一定会更改的。所以命名全部用小写的英文字母是最基本的规则。
启动界面
启动图片:default.png
启动:logodefault.png
如:default.png\defoult@2x.png\default-568@2x.png
输入框:login_input.png
输入框选中状态:login_input_pre.png
导航栏按钮(nav)命名
nav_功能描述.png
如:nav_menu.png\nav_menu_pre.png(同按钮选中前后两种状态命名)
按钮命名(btn可重复使用按钮)
一般:normalbtn_xxx_nor.png
点击:highlightbtn_xxx_hig.png
不能点击:disabledbtn_xxx_disa.png
按下:pressedbtn_xxx_pre.png
选中:selectedbtn_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
ps:描述可用英文或拼音开头字母组合等
列表页命名规则
命名List_功能属性+描述.png
如:list_menu_collect.png列表页收藏按钮
以上是总结了切图的命名规范,之后再详谈切图规范。
每个公司都有自己的命名和输出模式的,以上是和大家交流下自己工作中的方法和心得,希望对于大家有所帮助。如果觉得以上有什么补充的,欢迎大家留言告知,不胜感激。