App设计体系之切图

1、切图尺寸

iOS最小点击尺寸为44，增量为4的倍数，Android最小点击尺寸是48px，增量为8的倍数。

为了保证icon的完整性，icon和切图区域的四边要有边距，不要贴边。

iOS只需导出@2x和@3x，Android只需导出xxxhdpi、xxhdpi、xhdpi，需要注意的是，导出Android端切图时会以xxxhdpi、xxhdpi、xhdpi分别生成文件夹，而导出iOS端切图前需要建立好文件夹。当格式为svg和.9.png，只需导出原比例尺寸大小的切图。

2、命名类型

2.1 功能类型

2.2 资源类型

2.3 常见状态

2.4 位置排序

3、命名规则

启动页

启动图片：default.png

启动logo：default_logo.png

登录页

登录背景：login_bg.png 

登录logo：login_logo.png 

登录按钮：login_btn.png

登录按钮选中状态：Login_btn_pre.png

导航栏 

nav_功能描述.png

导航菜单：nav_menu.png

导航菜单选中状态：nav_menu_pre.png

按钮

btn_色彩/功能描述.png

蓝色按钮：btn_blue.png

发布正常：btn_publish_normal.png   

点击：btn_publish_highlight.png

禁用：btn_publish_disable.png

按下：btn_publish_pressed.png

选中：btn_xxx_selected.png

其他

图标：icon_xxx.png

图片：pic_xxx.png/img_xxx.png

照片：pho_xxx.png

4、点九图

左上两条线是限制可拉伸区域，两者的原理是一样的，当没有左边黑线时，纵向拉伸会造成圆角变形。

左边加一条黑线或黑点，相当于把原来的图形分为三个部分，纵向拉伸时，只会拉伸黑线的部分，这样无论拉伸到多高，都不会变形。

右下两条线是控制内容区域的，以右边线为例，如果没有右边那条黑线，相当于没有限制，在切图上输入内容，内容会撑满整个背景图。

加上右边黑线后，相当于把原来的图形分为三个部分，内容只显示在中间区域。

上右两边都加上黑线后

最后导出一张后缀名为“*.9.png”格式的图片，图片上下左右各增加了1px的黑线，其中，左上为1*1的黑线，黑线颜色必须是#000000，透明度100%，并且图像四边不能出现半透明像素，黑线离图形要有1px的间距。

查看点九图的说明