iOS和Android标注和切图的地输出的方法

　　日常工作或者生活中，我们唱功的切图工具是截图的方式，二十几上切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面。一般来说，把一张设计图利用到切片工具把自己所需的切成一张张小图，然后用div+css完成静态页面书写，完成css布局。而切图的主要目的是让网页稿有了交互性，实现你平时看到的各种各样的功能。那么本文讲讲如何地输出ios和android标注和切图。

　　现在有很多产品为了降低设计成本并保持多平台体验的一致性，都以ios为主做一套交互设计，应用于ios和android两个平台。但是在标注与切图的环节，如何的与开发对接，似乎并没有什么更高明的办法。很多团队的做法是先做一套ios的ui+标注+切图，再在ios的基础上缩放一套android的ui+标注+切图。事实上这样的做法是低效，且无效的。为什么且如何做呢?

　　首先本文大前提是，交互以ios的设计为主导，应用于ios和android两个平台。本文描述的方法更适用于人力资源较为匮乏的设计团队。

　　对于设计环节。

　　我对ios和android使用同一套ios的交互设计这种做法不置可否，毕竟好多人都已经这么干了。而很多情况下，到底用一套交互还是两套，这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的，并不是简单的节操问题。所以这里不讨论到底一套交互对不对，只讨论这种情况下怎么干活。

　　那么既然是同一套设计，如果仅仅是为了达到的交付物标准，输出两套几乎完全一样的ios和android的ui图，这种事情略显蛋疼。据我所知有一些设计团队都在不明真相地这么干着。

　　来看设计环节的交付物。

　　ios和android开发需要的设计交付物至少要有：高保真ui图，标注，切图。

　　高保真ui图所起到的作用是，开发会参照其画页面，仅仅是获知页面样子的一个手段，并非什么高精度的事情。仅仅基于这一条，设计师就没有必要出ios和android两套样子一样只是大小不同的图的，对于开发来说，他们只需要看到页面样子即可。

　　标注和切图的作用是，开发会按照标注的尺寸，把切图按照高保真ui图的摆放方式做到界面上。那么问题来了，ios的开发和android开发所需要的标注和切图是不一样的。如何在一套ios的高保真ui图上做出两套标注和切图呢?

　　众所周知ios设计的像素尺寸是640*960/1136，android主流的hdpi模式下的像素尺寸是480*800。如图，他们的换算关系是，ios像素尺寸的75%是android的像素尺寸

　　于是很多设计团队就基于这个75%的关系去做android的图了，但是这不是个好方法，这是一个设计和开发没有成为好基友的状态下所使用的方法。

　　我们知道android开发所使用的单位并非像素，而是一个叫做dp/sp的单位，人家压根就不用像素，你费劲半天调一个480*800又有啥用呢?你给他标注上，这个宽度300像素，又有啥用呢?设计不懂开发，开发也不懂设计，android不懂ios，ios也不懂android，很多同志就在这种“矩阵式的彼此的不理解”中凑合干着。

　　我们以480*800像素尺寸下做的设计图为基准。开发将部件尺寸换算成dp尺寸的方法是，像素尺寸*2/3。这也是为什么要让android部件尺寸能让3整除的原因。所以在hdpi模式，480*800像素尺寸设计图中，开发看到300px宽度的标注，会定义其为宽200dp，到这里android开发才得到一个他们真正会用于开发的数值。

　　这整个过程，设计师做ios尺寸图并标注，设计师调整ios尺寸图为android尺寸并标注px，android开发看着设计师交付的标注，再将其换算成dp，很长的一个过程。

　　其实经过以上整个过程之后，我们已经得出了一个更简单的换算关系：ios像素尺寸*75%=android像素尺寸，android像素尺寸*2/3=android的dp尺寸。进而得出：ios像素尺寸*75%*2/3=android的dp尺寸。所以，ios里一个宽600px的东西，在android的hdpi模式下，正好300dp，正好是50%，很容易算是吧?

　　在这个关系的指导下，我们可以在同一套ui图上做适用于两个平台的标注。只要android的开发知道，标注600px的东西，在hdpi模式下等于300dp这个换算关系，一切都简单了。当然，平台的区别要留意，例如ios使用十进制色值，android使用16进制，ios可以绘制圆角和阴影，android更倾向于用.9.png等。这些差异要在同一套标注中体现出来，让两端的开发各取所需。(如果你发现标注软件中无法在同一张图上标十进制和十六进制色值，你可以用文字标注替 代其中一个，qq的截屏工具中也是带色值提示的，办法很多不再赘述。)

　　至此，已经可以做一套标注，让android和ios的开发共同使用了。当然前提是你要告诉开发这个标注怎么看，怎么用!

　　下面看切图

　　在ios切图与android切图的转换中，是可以使用75%的换算关系的。也就是说ios的切图缩小75%之后，就是android的hdpi模式下的切图，而android开发还需要其他dpi模式的切图，按照如下关系换算即可。

　　我们会发现xhdpi模式和hdpi模式的换算比例也是75%。也就是说xhdpi模式下切图尺寸跟ios下是一样的。所以ios的切图可以直接适用于android的xhdpi模式。至于除hdpi和xhdpi之外的其他模式，如果需要适配，就需要单独处理图片了。

　　要注意的是切图在缩放之后像素会糊在一起，很可能需要重新调整，还有各种虚边情况，尤其是那些带透明阴影的，都要重新调，但是这个工作量显然要比重新调ui重新切，要小多了。

　　至此，我们设计一套适配ios的高保真ui，基于该ui做一套适用于ios和android两类开发人员的标注，再输出一套可适用于ios和 android的xhdpi模式的切图，再调整一套android的hdpi模式切图，基本上大部分工作就已经完成了。