如何高效地输出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，不少同志就在这种“矩阵式的彼此的不理解”中凑合干着。

　　关于dp与dpi等概念，请参考文章：http://www.zhihu.com/question/19625584

　　咱们以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模式的切图，按照以下关系换算便可。

　　关于Android不一样dpi的参考文章：http://www.zhihu.com/question/20697111

　　咱们会发现xhdpi模式和hdpi模式的换算比例也是75%。也就是说xhdpi模式下切图尺寸跟iOS下是同样的。因此iOS的切图能够直接适用于Android的xhdpi模式。至于除hdpi和xhdpi以外的其余模式，若是须要适配，就须要单独处理图片了。

　　要注意的是切图在缩放以后像素会糊在一块儿，极可能须要从新调整，还有各类虚边状况，尤为是那些带透明阴影的，都要从新调，可是这个工做量显然要比从新调UI从新切，要小多了。

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

　　是否是感受这种方法的工做量，一我的能干三我的的活了？

（做者：hoovay，http://www.origintel.com/）