写在前面
这篇文章主要是对于切图命名的一些简单规范,如果你在设计或者开发,摸爬滚打的n多年,请忽略本文,这篇文章主要针对初学者来写的,当然也适用于一些项目的规范,如果能帮到你,或者有什么建议或者意见,欢迎留言,Thank you!
不管是在安卓还是苹果开发中,App中都会涉及到图片资源的应用,比如:背景图,帧动画等,并且在不同的平台,图片的命名有所不同,同一张图片,iOS会有@2x和@3x图,那么如何对图片资源进行统一的管理,方便开发者使用,就必须制定一个规范.
总体原则
- 英文命名
- 每个英文以
_连接 <备注:下划线相对鸵鸟命名,对于开发程序猿来说,更容易,也更快速的选择所需图片> - 图片名中两倍图在名字最后要加
@2x，三倍图在名字最后要加@3x___逻辑分类
首先,来了解一下,一个app在手机屏幕的位置布局:如下图:
其次,重点来了,基本上 App 的切图可分为下面几大类：
背景、按钮、图示、图片、照片、TabBar icon、NavBar icon 等,此外,还包括AppIcon(logo),LaunchImage(启动图片),Guide(引导页)。
为了让切图便於管理，通常会依图片性质命名。例如 bg_xxx.png、btn_xxx.png、img_xxx.png、tab_xxx.png。当图档要做给 Retina 萤幕使用时，只要在副档名前加上「@2x」就可以了。如bg_xxx@2x.png、btn_xxx@2x.png 、icon_xxx@2x.png.
此外,图片资源的目录,对于图片的管理也至关重要,在开发中,我遇到过,将所有项目中用到的图片放在同一目录下,这样,虽然,切图你很爽,没有做分类,但是,对于开发人员,图片就很混乱,因此,需要采取的一般目录管理应该是如下图:
图片的类型
什么是图片的类型,简单的说,就是这个图片是属于哪一类的,是图片的性质,该图片属于哪一类,属于按钮呢,还是导航栏,还是引导页等,这个对于找图非常重要,如果有一定的规范,可以提高开发效率,比如,上如中的导航栏(NavgationBar),按钮(button)等,当然也可以简写如(navBar,btn,Tabbar等);
代表含义
如果说,图片名称的第一部分是图片的所属,也就是对应到每个不同的模块,那么第二部分就是图片的性质-图片所代表的意义(一般来说,就是中文对应的英文),比如第一幅图中的tabbar,精华,那么它的@2x图名称就是tabbar_hot_icon@2x。
图片状态
对于某些类型的切图，它可能代表的只是某个控件的一种状态，以按钮为例，正常的状态就是 normal，而点击中的状态是 highlighted，选中的状态则是 selected。 如下方的 Tabbar 来讲，选中的是 Home，那么当前这张图片的两倍图的完整命名就应该是 tabbar_hot_icon_selected@2x.png。
当然,对于帧动画的图片组来说,像很多app都有刷新动画,那种的话,可以以项目名大写首字母开头,然后再加上refresh_01,等等,便于开发遍历
图片的命名大体上,就这么些东西,当然有些图片的命名,还需要根据项目实际情况进行命名,规范仅仅是一个指导性的东西,总之,能让别人见文之意的命名方法,就是好方法.
