说说原生App切图的那些事儿— UI设计

如何切图？
了解 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 像素）的手机（ G7 、 N1 、 NS ），一般是运行在 hdpi 模式下。当运行在 hdpi 模式下时， 1dp=1.5px ：也就是说设计师以 480x800 作为设计稿的尺寸时，在 PS 里定义一个 item 高 72px ，开发就会定义该 item 高 48dp ； Photoshop 中 21px 大的字体，开发会定义为 14sp 。

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

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