App 切图规范

如何切图？ 

了解iphone界面的尺寸

最小的分辨率是320x480，咱们把这个尺寸定为基准界面尺寸（baseline），基准尺寸所用的图标定为1倍图（1x）。 

在实际设计过程当中，为了下降设计成本，通常拿设备最高的分辨率做为设计稿的原始尺寸，拿iphone来讲就是iphone5或5s的640x1136啦，固然也能够用iphone4或4s的640x960，由于宽度都是640px，他们切图的标准是同样的。显然，以1倍图的基准尺寸（宽320px）为相对的参考依据，宽640px的设计稿，以原始尺寸切出来的图标称为2倍图（2x）。

有人可能会问：为何不拿320px做为设计稿的原始尺寸呢？由于1倍图放大成为2倍图远比2倍图缩小成1倍图来得模糊！

因而，在不考虑iphone6和iphone 6 plus的状况下，为了适配iphone，每一个图标须要切两份。

Android - 更为繁多的界面尺寸

Android开源自由的代价就是设备规范的不可控，市面上充斥着各类品牌的android手机，有着各类各样的尺寸和分辨率，为了适配各类不一样分辨率的设备，同一个图标须要切成N份，每一份对应一个尺寸。

另外须要注意的是，Android里面开发用的尺寸单位是dp或sp（dp为元素表现尺寸，sp为字体尺寸）而不是iphone中的px。。。

对于分辨率繁多的android设备，为了方便原生应用的界面适配，Google按照dpi大小将它们分红了4中模式（MDPI、HDPI、XHDPI和XXHDPI，也许有一天会增长第五种XXXHDPI，谁知道呢）：

 

看到这里，传统的web前端同窗可能已经凌乱了，iphone用px，android用dp，而视觉设计稿则统一用的px，怎么将使用px做为单位的psd给使用dp做为单位的android app切图啊???

显然，咱们得花点脑细胞去弄清楚px与dp的换算关系。

px与dp的换算关系

通常状况下，手机分辨率与所运行的dpi模式是匹配的，例如hvga(320x480像素)的手机屏幕通常在3.5英寸左右，运行在mdpi模式下。当运行在mdpi下时，1dp=1px：也就是说设计师以320x480做为设计稿的尺寸时，在PS里定义一个item高48px，开发就会定义该item高48dp；Photoshop中14px大的字体，开发会定义为14sp。

对于一部wvga（480x800像素）的手机（G七、N一、NS），通常是运行在hdpi模式下。当运行在hdpi模式下时，1dp=1.5px：也就是说设计师以480x800做为设计稿的尺寸时，在PS里定义一个item高72px，开发就会定义该item高48dp；Photoshop中21px大的字体，开发会定义为14sp。

关于px与dp的更多详细信息，请参考文章http://www.zhihu.com/question/19625584

IPhone应用切图尺寸与Android应用切图尺寸的对应关系

在Android应用中，以MDPI为基准界面尺寸，刚好对应上面说起的iphone应用的基准界面尺寸（320x480），所需的切图图标为iphone中对应的1倍图；XHDPI则对应2倍图，HDPI和XXHDPI可依此类推。

换一种说法再看看：若是要以最低的设计成本作一个app，iphone版和android版用的同一套设计稿，那么设计稿的尺寸最好是640x960像素。由于这个尺寸切出来的图标尺寸涵盖了iphone 3 ~ 5的分辨率，以及android的MDPI、HDPI、XHDPI模式。XXHDPI模式会自动利用低一级的XHDPI的图标进行放大展现。

把切图交给工具

看了上面说起的各类界面尺寸，若是全手工切，一次切完你能忍。若是切完了还有各类图标的增长、修改，没几回你多半会崩溃血喷屏幕～

幸亏咱们有一些很好的切图工具能够用，具体使用方法可参考它们的官网教程。

推荐切图工具1 - cut&slice me

  

推荐切图工具2 - cutterman

推荐切图工具3 - devRocket

注：damao推荐，看了官网好像很强悍的样子，可是收费哦。

小结

借助工具，原生App中的切图变得简易，可是“一个图标要切多套尺寸”的问题依旧没有改变，有没有更好的图标解决方案呢？譬如应用网页应用中的图标字体？ 敬请期待《Iconfont在原生App中的应用》。

参考资料

1. http://www.zcool.com.cn/article/ZNTMwOTI=.html

2. http://blog.csdn.net/iunion/article/details/9449703