本文介绍了UI设计稿在不同设备间的适配问题，强调适配只与倍率相关，同一倍率下字号、间距和图标大小相同。适配涉及等比缩放、弹性控件和文字流自适应三大原则，并提供了适配方法步骤。适配不受平台基础控件影响，状态栏等可按系统默认处理。设计师应遵循适配规则，确保设计稿在不同尺寸屏幕上的呈现效果。
全文预计阅读5分钟
在刚开始接触UI设计的时候，一心想着只要把界面设计好，标注切图正确输出一切就都大功告成了，等到项目落地的时候，才发现诸多问题。为避免多走弯路，今天就来和大家共同探讨下设计稿适配的问题。
看完这篇文章99%的适配你都能掌握了。如果还简单粗暴地直接拉伸设计稿，请对屏思过。
提醒：本篇所谈适配规则，都是在相同倍率的情况下，不同倍率没有可比性。
文章目录
适配与倍率
适配与平台基础控件
适配的三个原则
适配的方法步骤
一、适配与倍率
▼红框内为实际尺寸
如果设计稿是1倍图，适配到@3x，要乘以3；设计稿是2倍图，适配到@3x，要乘以1.5。
适配只与倍率有关，同一倍率下文字字号、界面间距、icon大小相同。不同的只是整体界面的宽度和高度不同(也可以理解为显示内容的多少不同)。
如喜马拉雅FM，通过上面的表格可以看出720和750属于同一倍率，也就是720=750=@2x，可知文字字号，图标大小，间距大小是一致的。
▲放大查看标注信息
同理，1125=1242=1080=@3x，文字，图标，间距也应该是一致的。所以在做设计稿时，同一倍率下，不同尺寸的屏幕只需要修改画布尺寸，再调整元素位置即可。
在分析和对比设计图时，一定要在同一倍率下，你总不能让服装设计师和建筑设计师去比拼谁的设计水平高吧。
二、适配与平台基础控件
通过上面的例子可能有人会问了，720和750不属于同一个系统呀，状态栏、导航栏和标签栏的高度都不一样，该怎么适配？其实适配和平台的关系不大。状态栏、导航栏、标签栏优先级更高与内容不在同一Z轴，不受适配影响。
所以，状态栏直接用系统提供的，标签栏和导航栏高度虽然不同但只需把元素水平居中即可。(同一倍率元素大小保持不变)
三、适配的三个原则
重点来了，适配针对不同元素有所区别，三个原则即对应三种不同类型的元素。
原则一：等比缩放(适用于图片、色块等)
1、在输出的时候，只有一张大图则只需要标注比例即可，开发那边会适配的。
2、如果并列有两张图以上，需要计算一下，不过也很简单。
A：图片宽度
W：界面宽度
d：图片之间的距离
D：图片距离边框的距离
x：图片的个数
计算公式：A= { W-2*D-(x-1)*d } / x
也就是说，图片间距离和图片到边框的距离是固定的(同一倍率下间距相同，图片比例相同，尺寸可能不同)，只需等比缩放图片就行了。这也是为什么图片要标注比例的原因，因为你不可能每个界面的图片尺寸都算一遍吧。
原则二：弹性控件(适用于列表、左右分布功能的界面)
也就是说，不论屏幕宽度怎么变化，左对齐的元素距左边框的距离不变(同一倍率下)，右对齐的元素距右边框的距离不变，变化的只是中间的距离。
原则三：文字流自适应(适合段落文字)
段落两边距离固定，文字随着屏幕宽度不同，一行显示的字数发生变化。
这里需要注意的是，标题性文字一般最多显示三行，过多即可省去，小屏幕如640，一行显示不全的，要制定一个显示规则(比如超过5个字符自动省略)，多出的用「…」代替。
四、适配的方法步骤
*以iPhone 8 适配到iPhone 8P 为例
第一步：将设计稿换算到目标尺寸的倍率下
比如设计稿为375*667(iPhone8 1x)，要适配到iPhone 8P(@3x)，则需要将设计稿乘以3，得到@3x图，(如果设计稿是2倍图，则乘以1.5)。
第二步：调整@3x图尺寸
此时的@3x图是iPhone8的3倍图，需要调整@3x图尺寸与iPhone 8P实际尺寸相同。
第三步：调整元素位置，适应iPhone 8P界面
这里就用到了前面提到的适配三原则了，在设计界面时就要考虑适配原则。如果你没跟开发讲清楚很可能就按照他自己的想法做了，导致设计稿还原度不够，出现问题背锅的还是自己。
本文总结：
适配只与倍率有关，同一倍率下文字字号、界面间距、icon大小相同。
适配与平台基础控件关系不大，不受影响
适配三原则：等比缩放；弹性控件；文字流自适应
适配的方法步骤：①将设计稿换算到与目标尺寸相同的倍率下；②调整尺寸与目标尺寸相同；③利用“适配三原则”调整元素位置，使完美适应目标界面
UI设计进阶，希望每一篇文章都能让你我更进一步！
关注公众号，获取更多UI进阶知识，后台加阿倩微信，一起交流探索！
▼推荐阅读
扫一扫
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
