盒饭君带你一稿设计适配双端
2016年来了！盒饭君愿大家新的一年设计更上一层楼，赚高薪，迎娶白富美！
最新被很多小伙伴们问起，盒饭君有没有办法能让iOS的设计稿直接给安卓用？能不能只做一稿设计稿同时适配iOS和安卓两个端？针对这样的问题，盒饭君在过去的分享里有提过一些，但不具体。盒饭君个人作为设计师是不想用这种行为，但是呢盒饭君确实又自己用过了这种方式。相信大家在公司多多少少都有遇到过，项目赶、设计师人手不够或者是小公司只有一个设计师的时候，都希望能够做一稿设计稿让安卓和iOS同时进行适配开发。下面呢盒饭君把自己的一些经验总结出来，供大家参考一下。还请小伙伴们轻喷～
即使盒饭君在前面也写了一些关于设计经验的分享，但是呢感觉大家还是不太明白那些适配的事情，而双端的适配还真的是要了解两个端的情况不能去进行。最起码你得真正明白为什么iOS iPhone4、iPhone5、iPhone6为什么都是@2x？安卓什么情况下1dp的2px或者怎么计算px和dp的换算？明白这些原理后就更容易理解适配了。下面的都很基础，写给初学小伙伴们的，大神表要砸我～
iOS的适配以及倍率关系
这张表的数据都是iOS的像素密度和分辨率的数据，相信大家也都看过不少遍，但是还有人不明白PPI。很多小伙伴都是以分辨率作为设计基础去设计，然后给程序交付标注切图的时候标的PX单位，程序却要你标注pt，又不知道pt是什么，怎么换算是吧？
像素密度就是PPI，大家都知道屏幕是很多像素点组成的，分辨率就是手机屏幕的实际像素尺寸。就像iPhone6的分辨率750＊1334的屏幕，就是由750列、1334行的像素点组合形成的。但是手机屏幕的物理尺寸大小和像素尺寸大小是不成比例的，就比如说同为3.5英寸屏幕的iPhone3gs和iPhone4/4s，iPhone3gs的分辨率是320＊480，iPhone4/4s的分辨率是640＊960，如下图的两个手机状态栏，在屏幕物理尺寸相同，密度两倍的大小的情况。这个时候你就会发现，屏幕物理大小不能拿来做设计，屏幕分辨率又是源于像素点，也就是ppi（ppi的计算大家可以百度一下公式）。
看上面的状态栏对比，在ppi大两倍的情况下，以及表格的数据。你会发现一个倍率关系，苹果官方就是以iPhone3gs的像素点为基准定了一个倍率关系，@2x就是基于iPhone3gs的2倍，除了6Plus的@3x不规律以外，但是苹果官方给iPhone6plus定义的就是3倍的倍率关系。然后iOS应用根据图片所带的@2x、@3x进行读取对应的图片资源。所以程序员就是用iPhone3gs为基准的像素点去做适配，而iOS的点单位是pt。当程序写入状态栏高度为20pt的时候呢，iOS会自动设置在iPhone3gs是20px，iPhone4/5/6是40px，iPhone6plus是60px。这就是为什么你标注px的时候他让你换成pt的原因，所以哪些帮你从px换算成pt的程序员，你们应该感谢他；不帮你换算的呢还需努力做好关系噢～
安卓的适配以及倍率关系
安卓的适配真的跟iOS是类似的，也是基于一种密度的像素点进行适配。但是由于安卓的手机的屏幕尺寸太多，导致出现各种各样的分辨率大小。加上安卓各大厂商的的设计规范都不一样，这增加了大家理解安卓适配的难度。其实，大家要是抛开分辨率、以及对导航栏、状态栏具体数值的执着。采用iOS的像素点适配的方式去思考，就很快能明白安卓的适配了。无论你分辨率多大，只要你们找准分辨率对应的密度去理解安卓的倍率关系就会发现，其实安卓和iOS是一样倍率规律适配。比如分辨率720*1280，它对应的密度就是320；安卓的设计基准就是以密度160为设计基准的，密度160的基准下1dp/1sp＝1px(安卓的点单位为dp,字号单位为sp)，如下图密度160的状态栏高度为24dp就等于24px了，密度320的状态栏高度为24dp就等于48px。
当你理解这些以后倍率的关系和原理后，相信大家对适配也算是了解了。做设计无论你用哪种设计稿去做设计，只要理解这些倍率关系以及对应的密度，相信切图标注这些都不是事了。更何况这些密度数据对应的倍率，无论是安卓还是iOS都做了像盒饭君这样对应的数据表，大家只要对应去套用就行了。
一稿设计稿适配双端
当你理解iOS和安卓的适配原理和倍率关系后，你们那些常常问的那些规范真的可以不用再那么在意了。原本规范就是初学者作为学习参考的，并不是一个写死的，规范说标签栏、导航栏高度多少多少的也不是必须。如下图的walkup、light、小样儿三款应用也没有严格按照规范去做啊，你能说它不行吗？不行的话怎么开的？怎么上线的？而且设计感也不错！
那么一稿适配双端有没有可能？如下图小米商城应用，iOS版与安卓版并没有太大的区别，虽然盒饭君不敢确定是不是一稿设计的，但是从这也能看得出来，但是部件基本两端是一样的。
盒饭君现在呢，就用平时做的优阁应用项目去给大家分享一下盒饭是如何一稿适配iOS和安卓（安卓由于是自由开发者无私帮助开发，进度特别慢，无私的程序员大哥拿他下班不忙的时间一点点的去写的）。优阁app呢，盒饭君是用的iOS750*1334去做的适配，为什么是这个尺寸？因为750*1334在iOS能向上适配iPhone6plus，向下适配iPhone4/5。最重要的是它与安卓720*1280的尺寸特别相近，而且在它们的密度也是相近的，对应的倍率关系是一样。iOS750*1334的倍率关系是2倍@,而安卓720*1280的倍率关系也是2倍。也就是说这两个尺寸下1pt=1dp/1sp=2px。
从上图所示的例子，不知道大家明白了些什么没？盒饭君就是用iOS750*1334的设计稿，通过改画板的大小，保持部件元素大小不变，相应调整位置宽度，就可以转换成安卓的设计稿了。是不是想问iOS的导航栏按钮部件是44pt，安卓的导航栏按钮部件是48dp，怎么就一样了？对吗？
从标注看得出来iOS和安卓的标注几乎是一致的对吧？除了设计尺寸宽度窄了一些，高度少了一些，里面的部件元素、间距、字号几乎是一致的。回到iOS导航栏部件大小44pt，安卓导航栏部件大小48dp的问题上。盒饭君为什么安卓的导航部件和iOS一样是44dp？前面说过规范是参考，当你熟悉理解规范以后，就可以打破规范去做设计。难道安卓变成44dp后程序员就不能去实现开发了？并没有！难道安卓说48dp点击热区成功率高一些，44dp就低了很多？也并不是！影响切图给程序员了？那就看下面的部件切图。
事实证明这样并不影响切图给程序员，甚至一稿设计的部件元素能够切图iOS和安卓的全部切图，可能有一些自动自带的部件需要去稍微调整一下就好了。如果不是因为给安卓开发一套安卓标注你设置都不用去调整画板成安卓的设计稿。当初盒饭君第一家公司的安卓开发就是拿着俺的iOS标注去做适配，拿着俺给iOS的切图去适配。盒饭君都看傻眼了，基本iOS一摸一样。当然啦，想梗顺畅的在两个端之间一稿适配，对于设计稿的要求也会多一些，即使不是为了一稿适配，平时做设计也应该管理好自己的部件命名、图层命名。
盒饭君分享一个提高工作效率的小技巧，盒饭君在设计优阁app的时候，会建立一个部件库的画板。每增加一个图标，盒饭君就会把图标添加到图标画板里，并且给部件进行命名。当你再次需要的时候，随时可以用图标库里复制出来，反复利用部件。最重要的是，切图只需要在这里选中设置切图的倍率，就全出来了。无论是iOS还是安卓，都是相当的方便。
这些就是盒饭君一稿的适配双端一些分享，打破了规范。大家可以做为参考，但是请一定得理解双端的基础规范，以及适配的原理再去进行这样的尝试。盒饭君其实并不推荐大家这样去做，不是项目赶、人手不够的话，还是一端一个设计吧。毕竟我们是设计师，iOS和安卓Material Design的设计语言是有很多相同处也是有很多差异化，各有特色。做为什么设计师，我们应该去做好设计，但是也得站在公司角度，老板的立场去思考如何去公司的利益。更多的学习交流，可以去盒饭君的群里，群号：100621947，我们都是一群爱设计的小伙伴。
看完了的人，2016薪资翻倍！
