一份UI稿对接多平台的适配方案

如果公司开发的平台多，设备也多，一套简单高效的适配方案，就显得非常重要了。特别是安卓设备的适配算是开发和UI都很头疼的事情。

原来的适配方案问题日趋严重，开发工期紧没有改变的时间，直到一个转折点到来，经过1周的努力，新的适配方案终于落地，实现了一稿适配多种设备的屏幕，在此记录下这个适配方案探索过程，给需要制定多屏适配方案的朋友们一个参考。

这套适配方案是结合网上已有的一些适配原理，结合自身的需求与资源制定出来的，落地之后改善了许多适配不佳的问题，也提升了设计与开发对接的效率。接下来就从 “单位”、“原理” 和 “落地”，这3个方面介绍这套适配方案：

一、适配单位——px dp sp pt rpx 都是什么鬼？

搞定适配的第一步就是弄清适配相关的单位，这些单位设计师看着不熟搞不清关系，可对于开发同事而言却是老朋友了，因为这些单位是3大平台提供给开发者使用的适配单位。

px像素：屏幕分辨率尺寸。这个无需多解释，屏幕的最小显示单位。

dp与sp：安卓平台的逻辑尺寸，dp主要用于尺寸长度，sp用于字号大小。这2个单位是安卓平台用来管理屏幕适配的，开发只需设置好元件的dp尺寸，实际输出的px尺寸会自动随屏幕的dpi改变，dp与px间存在一个转化公式:

这个 160ppi/dpi 是屏幕精度的一个基准，公式中的 ppi/dpi值和px尺寸，都可以通过代码获取，有些也会显示在“设置-关于本机”，根据这2个信息就可以计算屏幕的dp尺寸，方便做适配处理。

如果要适配的屏幕是 320ppi/dpi，那么开发时设为100dp宽的图形，实际显示的大小是200px，px尺寸是dp尺寸的2倍，这样的屏幕也可称为2倍屏(xhdpi)。

为了适配，安卓还制定一套像素密度等级，像素密度范围与px倍率关系如下：

上面5个名称，项目里都有对应的文件夹，安卓APP在识别屏幕的px尺寸后，会到对应的文件夹里拿取资源（主要是图片）用于显示，所以安卓开发需要准备5套切图。

安卓手机而言，屏幕的px尺寸虽然五花八门，但换到dp尺寸后，主流的宽度只有 360dp 和 411dp，做好这2个宽度的适配，就可以搞定8成安卓机了，如果用px来适配安卓，不知要多写多少行适配尺寸代码。

pt：IOS平台的逻辑尺寸，与安卓类似的适配原理，而且苹果的管理比较规范，需要适配的设备也少，iPhone手机主流的宽度是：375pt 和 414pt。常见iPhone机型分辨率及px分辨率信息如下表：

rpx：小程序的适配尺寸，全屏宽度统一为750rpx。

以上是各大平台的单位介绍，如果适配是一座桥，这些单位就是各大平台已经搭好的桥柱，在这个基础上，我们再进行适配规范，连接好桥面，就可以做出一套贯通多个平台的适配方案。

二、适配核心——等比份缩放

原来的适配方案，是宽高各切成160等份，让后算出元件占用的等份数，写到代码里，这样换了屏幕后，按照一样的比例输出，这样同一个元件就会随屏幕大小变化了，显然这种方式有如下不足：

1.只适合高宽比例一样的几个屏幕的适配，如果新屏幕更宽或是更高了，元件就会严重变形，效果很差。

2.遇到可横可竖的平板，要做两套适配尺寸，代码量也大。

3.每一个元素高宽都需要计算，开发工作量大。

基于适配的需求，在网络上找到很有参考价值的思路，即适配的核心原理：

只进行宽度适配

指的是只以屏幕宽度作为等比例缩放的基准，高度方面不再需要等份，直接采用宽度的基准。

这个宽不是视觉上看到的横着的宽，而是一个屏幕尺寸中比较短的那个边，横着放或竖着放宽是不变的。

这样一来，宽度一样的多个设备，无论横放竖放，也就只需要开发设置一套尺寸即可完成适配，代码量可以变少。同时优化了上面第1点和第2点。

分为360等份

360等份不仅是比原来160等份，更精细，还是打通标注与适配的关键，安卓的主流宽就是360dp，若以360为宽度来设计UI稿的话，标注大小就和开发需要的适配大小完全一致，可以轻松对接，不需要像之前那样再计算一次，开发工作量也变少了。优化了上面第3点。

这样新的适配方案，不仅优化了原适配方案的不足，也顺便提升了设计与开发的对接效率，确定好了基本思路，接下来就是进行方案落地。

三、适配落地——设计与开发对接

这套适配方案由2部分构成：代码部分和设计部分。

代码部分

适配代码部分核心，非常感谢一位安卓大神“ android阿杜”，在适配路上填过坑，他的文章从开发角度介绍了实现安卓适配的思路，也提供了插件（也是文章底部可下载），文章链接详见本文底部参考资料。

开发同事拿到了这个小工具后，进行了几个方块的页面适配测试，适配效果很棒，后来推广到了IOS平台的项目。

设计部分

确定了适配方案后，UI设计图的尺寸和标注也变得明确，根据上面的原理分析，设计这边最关键的任务是提供方便适配的标注图，让开发轻松实现适配。

适配标注落地的时候出现了不少问题，下边是几个典型的问题及应对的办法：

1.设计图只有px尺寸，如何对接开发的dp，sp和pt这些单位？

这时候需要把设计图当作一个屏幕来看，为了画图方便，设计稿通常选用2倍屏的尺寸来做，即720*1280px。

很多文章都推荐用750*1334的尺寸，即IOS的2倍屏尺寸来做UI设计稿，如果设计图只需要适配到iPhone这一种设备，是非常合适的。如果想适配多个平台多种屏幕，还是安卓的2倍屏尺寸比较合适，下一个问题将介绍选720宽的优势。

2.安卓2倍屏宽720px，IOS的2倍屏和小程序却都是750px，宽度不一样，如何一稿适配？

这时候需要选出最好用的一个宽度作为设计稿宽度，假设选750宽，则需要把宽度分成375等份，才方便标注与开发对接，显然元件尺寸很难得到整数值的px，容易造成模糊不清的边缘，这样的效果很不好。

而分为360份则更容易得到整数值，可以减小尺寸误差，也方便解决大部分安卓屏幕的适配。考虑到适配方案的特点、以及适用的屏幕范围，最终选择 720px 作为设计图宽度。

这样的做法，也带来了一个问题：750px宽的IOS和小程序会多出来30px的空白，怎么处理？

这需要对30px进行弹性适配，标注方面常见的情况有：

a.元件尺寸不变，间距边距均匀变化，这种情况只标注元件尺寸

b.元件适当缩放，间距边距不变，这种情况只标注间距边距

另附一份标注说明，与标注图一起打包，方便开发了解弹性适配情况。

3.遇到安卓屏幕宽度不是360倍数，设计稿选多少尺寸？

安卓设备远不止手机，往往会出现宽度不是360倍数的情况，这时就选最近的倍数，且不小于720px的宽度，作为设计稿尺寸，例如：600dp选720px，1200dp选1080px。

4.如何标注出适配需要的等份数？

这里要推荐一个好用设计与开发对接神器：像素大厨pxcook，是个本地小工具，可以帮助UI设计师实现快速标注，屏幕倍数切换，还为开发提供参考代码，和长篇文字复制。

把设计图导入到pxcook之后，在头部切换屏幕倍率，安卓为xhdpi，IOS为@2x，这时候设计图的全宽刚好是360，标注的值与适配需要的份数值完成对接。

对于小程序，只需pxcook中新建项目时，选择设备为“web设备“，设置好基数（px），切换到rpx，完成对接。

四、方案总结——优缺点及适配的思考

最后来总结下，这套方案已经落地几个月了，目前感受到了这些优缺点：

优点：

提高了适配的效率，

减轻了开发工作量以及代码量，

还提升了设计与开发的对接效率。

缺点：

对于超出360等份的元件尺寸，需要打补丁，

一些设备的宽度识别不准确，出现元件出框的现象。

关于适配的思考

发现目前很多适配的宽度都是基于375或750，UI设计规范也偏向苹果，确实苹果的风格很主流，适配方案也完善，可好用的适配方案，还是需要根据实际需求来制定，如果想一稿适配多个平台，多种设备，采用720的宽度来设计，适用范围更广。

参考资料

最后非常感谢大神android阿杜提供的插件，具体的dp适配与插件原理可以去看看他写的文章：

Android屏幕适配dp、px两套解决办法

https://blog.csdn.net/fesdgasdgasdg/article/details/52325590

好用的设计与开发对接工具：

像素大厨pxcook

http://www.fancynode.com.cn/pxcook