对于UI设计师而言，不仅仅需要优秀的设计能力，设计后期还需要与开发前端良好的沟通协同能力，来推动界面设计落地，完成设计验收。

目录 

1、开发的适配方式

2、组件适配三原则

3、图片适配的小细节

在日常工作中，很多设计师认为适配是开发的事情，与自己无关。如果没有标注清晰的适配方式，开发自己选择的适配效果较为理想，那还好；但是适配效果差，导致后期沟通修改成本增加，延缓开发进度，那设计师有无可避免的责任，所以作为一个合格的设计师，首先需要排除自身原因，设计师需要在开发前期就标注好合适的适配方式。

开发眼中的适配一般有以下三种：①元素尺寸不变，间距自适应；②间距不变，元素尺寸等比缩放；③间距和元素尺寸等比缩放。

①元素尺寸不变，间距自适应

该适配方式是在一倍图下，市场上大多数app都采用该种适配方式，原因是适配成本较低，没有什么缺点。例如新浪微博发现页面的金刚区图标就采用这种适配方式

②间距不变，元素尺寸等比缩放

该适配方式也是在一倍图下，这种适配方式在小屏适配到大屏时，可能会导致图片变模糊，所以上传的图片尺寸要尽量大些，防止适配到大屏时，出现模糊的情况。例如优酷视频的首页就采用该种适配方式。

③间距和元素尺寸等比缩放

等比缩放一般单独适用于图片适配，并不适用于整体界面的适配，因为等比缩放适配，需要保证不同机型的清晰度，需要根据不同机型切多套图，适配成本极高。例如我们经常剁手的淘宝app首页就采用整体等比缩放适配的方式，但该种方式并不适用于一般的app

这里我就不阐述逻辑像素，物理像素，DPI这些之间的关系，有兴趣的同学可以自己百度了解，开发在实际开发工作中用的是逻辑像素，适配需要根据逻辑像素来选择适配方式，适配方式有以下两种：

①倍率适配：应用于逻辑像素相同，但倍率不同的设备；适配不同机型时，可直接缩放倍率。例如android的720稿件适配成1080，因为逻辑像素相同，所以可以直接缩放倍率适配（忘记各机型逻辑像素、倍率等的同学可看第一张图）

②逻辑像素适配：应用于倍率相同，但逻辑像素不同的设备；适配不同机型时，需要先把稿件缩放成相同倍率，再根据组件适配三原则进行适配。例如android的720稿件适配成6 plus尺寸，因为它们之间并不是相同倍率，所以需要先转换成相同倍率再进行适配

上面提及到组件适配三原则，分别指的是：文字流、弹性控件、等比缩放。设计师在适配不同机型时，都是使用这组件适配三原则进行适配，观察适配效果。

文字流：指的是多行文本宽度会随着屏幕尺寸的宽度变化而变化，在字数相同的情况下，屏幕越宽的文本段落越少。例如朋友圈的文字，在相同字数下，750的为两行，而640的为三行文字。

弹性控件：指的是组件的控件元素尺寸不变，控件间距随着屏幕宽度自适应，如同弹簧一般伸缩自如。例如微信个人中心，左边的功能图标与右边的箭头的尺寸大小不变，间距变宽了。

等比缩放：元素的尺寸跟随屏幕宽度进行等比缩放；常用于banner、封面图、照片这些图片元素。例如微信公众号的推送图片，不管屏幕尺寸如何变化，图片都以16:9的比例等比例缩放。

图片除了等比例适配，在单张与多张不同情况下还存在着不同的适配方式。

多张图片

多张图片通常是以1:1的图片比例显示，图片以最短边长作为图片显示区域的边长等比缩放

单张图片

单张图片的情况下，图片的宽度选择一般有两种：①以多图的一张半图片为宽度；以多图的两张图片为宽度；图片比例一般为1:1或4:3，宽图或长图的情况下，1:1的图片比例展示地内容较少，所以建议分别使用4:3或3:4的图片比例，能展示更多的图片信息，提升用户体验

全文分享了开发的适配方式、组件适配三原则、图片适配小细节三个知识，让大家了解设计师应该如何去适配稿件以及开发的适配工作方式，在日后的协同工作中，降低沟通成本，提高工作效率