关于适配这件小事的前世今生

记得刚做 UI 那会&＃xff0c;根本不知道做完界面还需要适配&＃xff0c;就以为把设计图做好就行了&＃xff0c;其他的事情跟自己没有半点关系。慢慢的踩了坑之后&＃xff0c;才知道还有适配这一说。所以说有些事情别人不告诉你&＃xff0c;自己是很难意识到的&＃xff0c;光靠踩坑得出经验&＃xff0c;终究成本太大&＃xff0c;何不站在前人的肩膀上进步呢。

目录
一、当前现状二.错误做法

三、为什么不能一稿适配两端

四、掌握正确的适配规则

五、需要注意的点

六、设计稿尺寸

七、小技巧

八、总结

一、当前现状
UI 行业的火爆&＃xff0c;各行各业的人都涌入进来&＃xff0c;很多之前没有设计基础的都转行做了 UI 设计师&＃xff0c;其中不乏只突击学习几个月的新手&＃xff0c;在培训的时候为了能让学员真真切切的看到实际效果&＃xff0c;大多都在练习画图标、做界面。

而对于实际工作中才会用到的那些基本不讲&＃xff0c;这倒不是说培训班讲的不好&＃xff0c;也没有贬低培训班的意思&＃xff0c;我自己也参加过。他们不讲只不过是因为这些知识晦涩难懂&＃xff0c;教了新手也很难理解&＃xff0c;索性不讲了。

这就让很多新入行的设计师认为做 UI 很简单&＃xff0c;只需要把产品的原型填个色&＃xff0c;把填色后的设计稿输出就觉得万事大吉了。而对于适配知之甚少&＃xff0c;甚至有些觉得跟自己没半点关系&＃xff0c;都是开发的事情。

二、错误做法
正是由于部分设计师对适配了解不够透彻&＃xff0c;以至于在做实际项目的时候&＃xff0c;需要把750的设计稿适配到640、720、1242的屏幕时&＃xff0c;都选择把设计稿直接等比拉伸至对应的尺寸&＃xff0c;然后再重新标注。殊不知此方法不仅增加了几倍工作量&＃xff0c;还会导致最终的效果不如人意&＃xff0c;花了功夫还不出效果&＃xff0c;说的就是这种事了。

下面以 QQ 首页为例&＃xff1a;左图是750的设计稿&＃xff08;临摹的&＃xff09;直接拉伸至1242的&＃xff0c;右图是实际线上1242的界面。

相信大家也看出差别了&＃xff0c;750直接拉伸后的界面元素整体都比实际线上1242的大。

之所以说这样的方法是错的&＃xff0c;有两个原因&＃xff1a;一个是按照此方法&＃xff0c;750和1242所显示的内容是一样多的&＃xff0c;但实际上1242的屏幕要比750的长一些&＃xff0c;显示的内容更多一些才对。

如下图京东金融&＃xff1a;

另一个原因就跟数学有关了&＃xff0c;750的页面要到1242的大小&＃xff0c;需要放大1.65倍&＃xff0c;但实际上750是2x倍率下的界面&＃xff0c;1242是3x倍率下的界面&＃xff0c;他们的比例是1:1.5&＃xff0c;而不是1:1.65。

也就是说由750直接拉升到1242的稿子开发实现的时候会出现这样的情况&＃xff0c;icon 是1.5倍的大小&＃xff08; icon 实现的时候用的是3x切图文件&＃xff09;文字大小、间距、图片却是1.65倍的大小&＃xff0c;标注稿也是按照1.65倍的来标注的&＃xff0c;这样就会影响到开发布局&＃xff0c;导致出现一系列误差。

由图可见&＃xff0c;当我们直接在拉伸的设计稿中标注间距、icon 大小&＃xff0c;在实际开发的时候 icon 的尺寸会比我们标注的要小&＃xff0c;相差15px。这个时候如果开发完全按照标注稿来布局&＃xff0c;这就会导致有 icon 的区域间距明显和其他地方不一样&＃xff0c;相差太大,甚至会出现 icon 变形的情况。

那既然直接拉伸设计稿的方法不可行&＃xff0c;难道只能为每个屏幕尺寸都重新做一套设计么&＃xff1f;

当然不是&＃xff0c;这样的开发成本太大&＃xff0c;而且也没有必要&＃xff0c;其实只要设计的时候多注意适配的问题&＃xff0c;就能做到一稿适配所有。

三、为什么不能一稿适配所有
大多数人对于750适配到1242都表示能理解&＃xff0c;但对于750到720就理解不了&＃xff0c;持反对意见&＃xff0c;觉得这两个属于 iOS 和 Android 两个不同的端&＃xff0c;标签栏和导航栏高度都不一样&＃xff0c;不单独输出设计稿的话&＃xff0c;图标图片会变形、间距会太窄……

那下面来解释一下&＃xff0c;以往大家的路子都是正面说一稿为什么能适配所有&＃xff0c;今天我们走个不一样的路子&＃xff0c;一稿为什么不能适配所有呢&＃xff1f;

下面针对大家存在疑惑的几个点来做详细解释&＃xff1a;

1. 图标变形
   开发在做的时候都是用的2x、3x的切图&＃xff0c;每个屏幕尺寸用那套图是根据倍率来选择的&＃xff0c;同一个倍率下的图标大小、间距、字号都是一样的。

2. 图片变形
   图片都是按照比例来的&＃xff0c;只要标注的时候只标注比例&＃xff0c;而不是把宽高都限制死&＃xff0c;这个问题是可以避免的。

3. iOS 和 Android 平台差异
   有一些人总认为两个平台存在差异性&＃xff0c;比如&＃xff1a;它们的导航栏、标签栏、时间栏不一样大&＃xff0c;怎么能适配呢&＃xff1f;

其实头部的导航栏、时间栏和底部的标签栏这些平台的基础控件&＃xff0c;与界面内的元素不在一个 Z轴上&＃xff0c;它们属于界面最上层&＃xff0c;界面的尺寸也不受它们的影响。

如下图哔哩哔哩&＃xff0c;Android 和 iOS 的基础控件不一样&＃xff0c;但是并不会影响到导航栏下方的 Tab 筛选的高度。所以事实证明&＃xff0c;适配跟平台并没有太大的关系。

四、掌握正确的适配规则

1. 倍率相同
   适配需要在同一倍率下&＃xff0c;既然要做比较的话&＃xff0c;当然要在同一水平线上&＃xff0c;总不能让一个姚明跟林丹去比羽毛球吧。

知道手机的屏幕分辨率和倍率之后&＃xff0c;就可以算出在其他倍率下&＃xff0c;屏幕分辨率是多少。比如&＃xff1a;iPhone 6的尺寸是750*1334&＃xff08;2x下&＃xff09;&＃xff0c;乘以1.5之后就可以算出3x下的大小。

同理可得其他手机的屏幕分辨率在不同的倍率下的大小&＃xff0c;红框处表示正常的分辨率大小。

适配只跟倍率相关&＃xff0c;同一倍率下&＃xff0c;界面上的间距、文字大小、icon大小是一样的&＃xff0c;不同的只是屏幕显示内容的宽度和高度不同,所以说在2x倍率下&＃xff0c; 750&＃61;640&＃61;828&＃61;720。同理在3x倍率下&＃xff0c;960&＃61;1125&＃61;1242&＃61;1080下面以虾米音乐为例&＃xff0c;分别对比640、720、750页面上的元素大小&＃xff0c;证实界面上的间距、文字大小、icon大小都是一样的。

2. 适配三原则
   在适配的时候通常会遵循三个适配原则&＃xff1a;等比缩放、弹性控件、文字流自适应。

&＃xff08;1&＃xff09;等比缩放

等比缩放指的是该元素的尺寸大小并不是固定的&＃xff0c;是会跟随着屏幕的大小&＃xff08;一般是宽度&＃xff09;变化而变化。如下图 App Store 的搜索结果页&＃xff0c;单个预览图的比例是16:9&＃xff0c;不管屏幕分辨率如何变化&＃xff0c;图片比例并不会发生变化。

标注的时候&＃xff0c;我们也只需要标注好页边距、图片比例、图片之间的间距就好&＃xff0c;开发就可以把适配规则写成随屏幕宽度变化而变化。

&＃xff08;2&＃xff09;弹性控件

弹性控件指的是元素尺寸不变&＃xff0c;间距随着屏幕的宽度自适应&＃xff0c;屏幕越宽&＃xff0c;间距越大。

&＃xff08;3&＃xff09;文字流自适应

一行文字的数量多少和屏幕宽度成正比&＃xff0c;屏幕越宽&＃xff0c;一行能显示的文字数量也就越多。

3. 适配跟平台基础控件无关
   其实并不是界面的所有元素都需要进行适配的&＃xff0c;我们只需要适配中间那一块区域即可。

而上下导航的高度不固定&＃xff0c;每个平台的高度不一样。比如&＃xff1a; iOS 的导航栏是88px&＃xff0c;Android 有112px、104px……但是不管高度如何&＃xff0c;我们只需要做到让元素居中即可。

4. 实际例子
   说了那么多&＃xff0c;是时候来一个实际的例子了&＃xff0c;适配其实总结起来就三个步骤&＃xff0c;先换算至同一个倍率&＃xff0c;再去调整界面元素&＃xff0c;最后将调整好的界面按照倍率还原到最开始需要适配的尺寸。

750如何适配至1242&＃xff1f;

首先适配需要在同一个倍率下&＃xff0c;7501334是2x 下的&＃xff0c;12422208是3x 下的&＃xff0c;根据倍率换算1242 的2x 大小是828*1472。

所以要想将7501334适配至12422208&＃xff0c;就需要先把750适配是8281472&＃xff0c;然后再将调整好的界面×1.5 到12422208。

其他的比如750如何适配至720、640&＃xff0c;原理是一样的&＃xff0c;他们的倍率是一样的&＃xff0c;就省了头尾的那两步&＃xff0c;只需要根据适配三原则调整界面元素即可。

五、需要注意的点

1. 小屏幕适配
   我们的设计尺寸基本都是用750的居多&＃xff0c;这就会涉及到小屏幕的适配问题&＃xff0c;当一个元素在750上显示的效果很完美&＃xff0c;到640上可能就放不下了。所以在做图的时候&＃xff0c;设计师是需要用动态的眼光去考虑问题。那下面就来讲述几个最常出现的问题。

2. 弹窗
   如下图弹框的样式&＃xff0c;在设计尺寸750上显示很完美&＃xff0c;但是不做任何调整&＃xff0c;直接适应到640的屏幕上&＃xff0c;就放不下了。所以这个时候&＃xff0c;我们就需要定义一些适配规则&＃xff0c;比如&＃xff1a;小屏幕缩小字号&＃xff0c;间距缩小或者说是固定弹窗宽度等。

3. 文字截断距离
   屏幕的大小会直接影响到每行显示的字数&＃xff0c;当一行字数的右侧有元素的时候&＃xff0c;就涉及到文字和元素之间的安全截断距离。换句话说&＃xff0c;也就是文字最多能显示的区域。

很多时候设计师在做设计稿的时候&＃xff0c;没有考虑到文字的极端情况&＃xff0c;这就导致在小屏幕的时候&＃xff0c;文字和元素产生重叠现象。比如&＃xff1a;下图的爱奇艺我的页面&＃xff0c;在750的界面上昵称显示的很完美&＃xff0c;但是到640上就显示不全&＃xff0c;这就需要我们定义一下文字可显示的区域&＃xff0c;当文字长度超过这个区域的时候&＃xff0c;文字省略&＃xff0c;用“…”

4. 平台差异
   iOS 和Android 两端的系统级别的控件样式不同&＃xff0c;所以我们可以为两端单独做几个样式&＃xff0c;这个成本不大&＃xff0c;效果确很好。比如 iOS 平台的搜索框是矩形&＃xff0c;而 Android 搜索是下划线。

5. 单屏页面
   大部分我们做的界面适配都是考虑屏幕宽度居多&＃xff0c;高度只会影响到一屏幕显示内容的多少&＃xff0c;屏幕高显示的内容就长一点。对于瀑布流布局来说&＃xff0c;高度根据不需要进行适配。但总是有一些特殊的单屏页面&＃xff0c;比如&＃xff1a;音乐播放页面、空白页面……需要在所有屏幕上显示一样多的内容。

6. 空白页面
   类似下图这种比较简单的页面&＃xff0c;如果固定上方间距&＃xff0c;那么在大屏幕上就会显得内容偏上&＃xff0c;这个时候要想让所有屏幕显示的内容都一样&＃xff0c;我们可以将上方和下方的空白区别设置一个比例&＃xff0c;这样不管在什么屏幕上&＃xff0c;内容相较于整个屏幕来说&＃xff0c;位置都是一样的。

具体计算方法&＃xff1a;屏幕高度减去上下导航&＃xff0c;再减去内容区域的高度&＃xff0c;剩下的区域按照比例来分配。上方占3/7&＃xff0c;下方占4/7。

7. 音乐播放页面
   这个页面相较于空白页面来说&＃xff0c;复杂一些&＃xff0c;但是原理是一样的。把能够按照基础适配规则的地方固定下来&＃xff0c;留一些自适应的部分。比如&＃xff1a;下图网易音乐&＃xff0c;同是2x下的界面&＃xff0c;播放操作区域的高度都是一样的&＃xff0c;按照基础适配规则来的&＃xff0c;而光盘区域则是固定左右间距得出。

而需要根据屏幕高度自适应的区域只有绿色矩形区域&＃xff0c;其实有没有发现把这个图简化后&＃xff0c;就和上面讲的空白页面的适配方法一样了。不过需要注意的是自适应的部分不要超过两个&＃xff0c;超过两个之后&＃xff0c;变数太大&＃xff0c;不利于计算&＃xff0c;也没太大必要。

六、设计稿尺寸
至于设计稿尺寸&＃xff0c;在我看来并没有特别本质的区别。从原理上来看&＃xff0c;你可以用任何你想用的设计尺寸。只不过从适配的角度来说&＃xff0c;750&＃xff08;2x&＃xff09;、720&＃xff08;2x&＃xff09;、375&＃xff08;1x&＃xff09;这三个相对更合适些。

我自己之前用过750&＃xff0c;也用过720&＃xff0c;那时候就想不明白为什么还有人用1x做图&＃xff0c;现在市面上都没1x的手机了&＃xff0c;用1x做图导出2x、3x 图标不都虚边了么。但后来换了一个新工作&＃xff0c;同事都是用的375&＃xff08;1x&＃xff09;做图&＃xff0c;习惯了之后发现两者并没有太大的区别。

只是有些图标不是整数的时候&＃xff0c;需要手动导出2x、3x&＃xff0c;但其实就算用750&＃xff08;2x&＃xff09;做图怕图标虚边&＃xff0c;也还是要手动导出3x的&＃xff0c;所以都一样。用1x的好处是&＃xff0c;很多国外的资源都是用1x做的&＃xff0c;就可以直接用了。

不要需要注意的是&＃xff0c;当在1x下做分割线的时候&＃xff0c;需要改成0.5px&＃xff0c;这样导出2x图后才会是1px。建议分割线用内阴影做&＃xff0c;而不要直接用0.5px的线。

七、小技巧
当我们做图的时候&＃xff0c;想要快速知道当前页面的元素在小屏幕上是否放的下&＃xff1f;

那总不能每次都把当前页面拖动到小屏幕上看看实际效果吧&＃xff0c;这样成本也太大。其实有一个非常简便的方法就可以解决这个问题&＃xff0c;750和640的界面相差110px&＃xff08;2x下&＃xff09;&＃xff0c;我们只需要在750的界面上减去110&＃xff0c;看是否能放的下&＃xff0c;如果放的下&＃xff0c;就表示在小屏幕上也能放下。

如果想要知道字数是否能放的下&＃xff0c;也可以通过计算的方式得出结论&＃xff0c;用110px除以字号大小&＃xff0c;就可以得出小屏幕的比设计稿少显示几个字。比如&＃xff1a;字号是30px&＃xff0c;在750的屏幕上能显示30个字&＃xff0c;那么在小屏幕上就只能显示26个字了。

这样可以快速知道当前页面的内容在小屏幕上是否放置的下&＃xff0c;而不用把元素放到小屏幕上看效果。

八、总结
最后来总结一下全文最重要的几点, 帮助大家加深印象:

传统的等比拉伸界面去适配的方法是错误的&＃xff0c;也是极其浪费人力成本的&＃xff0c;完全可以一稿适配所有&＃xff1b;
适配跟平台无关&＃xff0c;只跟倍率相关&＃xff0c;750和720的尺寸从适配的角度来看&＃xff0c;都是一样的&＃xff0c;只是界面尺寸相差了30px&＃xff1b;
适配三原则&＃xff1a;等比缩放、弹性控件、文字流自适应&＃xff1b;
适配不要标死&＃xff0c;要用动态的眼光去看&＃xff0c;做的时候需要考虑到极端情况&＃xff0c;最常见的比如小屏幕适配问题…
PS&＃xff1a;适配这个概念很特殊&＃xff0c;它看起来很简单&＃xff0c;简单到大多数人都觉得自己会了&＃xff0c;不用再去研究了&＃xff0c;但其实只懂了皮毛&＃xff0c;并不清楚原理。