ios和Android切图尺寸规则
UI交付给研发的资料有:
·注图(以 **750 \1334* 尺寸为基准标注)
·2x切图(以640 & 750为宽度尺寸为基准切图)
·3x切图(以1280为宽度尺寸为基准切图)
![](http://upload-images.jianshu.io/upload_images/2187981-9c2a1c384eb825f7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
iphone设备尺寸
切图命名规则
命名的基本原则:
1.为了让切图便于管理,依图片性质命名。
2.当图片要做给 Retina 屏幕使用时,只要在副档名前加上「@2x」就可以了。三倍的图副档名【@3x】
3.不要把数字或符号当成档名的开头,如 3-icon.png 、+abc.png之类。
![](http://upload-images.jianshu.io/upload_images/2187981-5cf788ee4fd688fd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
根据屏幕图片尺寸
标注图
备注:以下素材图是依ios设备为例,标注的内容适用于Android设备
·H5页面上的标注:
如果界面是用H5来实现的话,标注的单位要用px值进行标注。
·颜色标注:
两种色值表达都标上(16进制&RGB)。
![](http://upload-images.jianshu.io/upload_images/2187981-24a334e019b9e28d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
颜色标注
·文字标注:
两种色值表达都标上(16进制&RGB)。
![](http://upload-images.jianshu.io/upload_images/2187981-a9f0b797a026d9bc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
文字标注
页面标注
·按钮区域:
背景图片名称、区域位置、区域尺寸、透明度,圆弧度。
![](http://upload-images.jianshu.io/upload_images/2187981-418c68795696512f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
按钮标注
·图标区域:
背景图片名称、区域位置、区域尺寸、透明度,圆弧度。
![](http://upload-images.jianshu.io/upload_images/2187981-41856b8dd55b8445.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
区域标注
·文字区域:
文字标注、区域位置、区域尺寸。
![](http://upload-images.jianshu.io/upload_images/2187981-f1423a18d2f5bd83.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
文字区域标注
·间距:两个相邻区域之间的距离。
![](http://upload-images.jianshu.io/upload_images/2187981-38ee9e78cbade012.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
间距标注
·线条:宽度,颜色(16进制 & RGB)。