Chengzi的Chengzi：我记得刚开始做UI的时候，我都不知道做完这个界面还需要适配，所以我觉得只要完成设计就可以了，其他的东西都没有了与我无关。慢慢踩坑后，才发现原来还有适配这回事。所以，有些事情，别人不告诉你，你是很难意识到的。毕竟光靠踩坑刷经验，成本太高了。何不站在前人的肩膀上进步。一、现状UI行业蓬勃发展，各行各业的人涌入，很多之前没有设计基础的人转行成为了UI设计师。让学生真正看到实际效果。大部分都是在练习画图标，做界面，但是基本不谈实际工作中用到的那些。这并不是说培训班不好，也不是贬低培训班的意义，我自己也参加过。他们不解释就是因为知识晦涩难懂，教给新手也很难理解，所以干脆就不解释了。这让很多刚入行的设计师都觉得做UI很简单。他们只需要填写产品原型，上色后输出设计稿，就万事大吉了。而我对适应了解不多，甚至有人觉得这与我无关，都是发展的问题。2、错误的做法正是因为一些设计者对适配的认识不够透彻，以至于在做实际项目时，需要将750的设计稿适配到640、720、1242的屏幕时，选择直接将设计稿按比例拉伸到相应的尺寸，然后重新标注，大家都知道这种方法不仅增加了数倍的工作量，而且导致最终的结果不尽如人意，而且费了很大力气才出结果，这就是我们正在谈论的。我们以QQ首页为例。左图是750的设计稿（抄袭）直接拉伸到1242，右图是实际的1242在线界面。相信大家都能看出区别。750直接拉伸后的界面元素在实际线路上比1242大。这种方法错误的原因有两个。一种是按照这个方法，750和1242显示的内容是一样的，但实际上1242的屏幕比750长，显示的内容更多就对了，如下图京东金融。另一个原因与数学有关。750的页面需要放大1.65倍才能达到1242的大小。但实际上750是2倍放大的界面，1242是3倍放大的界面。他们的比例是1:1.5。而不是1:1.65。也就是说，当稿件直接从750升到1242时，icon是1.5倍大的时候会出现这样的情况（icon是用3x的切图文件实现的），但是文字大小，间距，和图片是1.65倍尺寸，注释稿也是按照1.65倍标注的，会影响展开排版，导致一系列错误。从图中可以看出，当我们在拉伸设计稿中直接标注间距和图标尺寸时，图标的尺寸会比实际开发时标注的要小，相差15px。这会导致带有图标的区域的间距与其他地方有明显的差异，差异过大，甚至会导致图标变形。既然直接拉伸设计稿的方法行不通，难道只能针对每个屏幕尺寸重新设计一次吗？当然不是，这种开发成本太高，也没有必要。适配问题，一稿万能。3、为什么不能一稿改编？750转1242的适配大部分人都能理解，但750转720的适配就看不懂了，有异议，认为这两者属于iOS和Android的两个不同端点。标签栏和导航栏的高度不同。设计稿如果不单独输出，icon图像会变形，间距会太窄……那我解释一下为什么大家以前的方式都是说一张稿就可以适应所有人。今天我们走了一条不同的路。为什么初稿不能适应所有人？下面就大家疑惑的几个点进行详细的解释。1.在做图标变形开发时，使用了2x和3x的切图。根据放大倍率选择用于每个屏幕尺寸的图像集。在相同的放大倍率下，图标大小、间距和字体大小是相同的。2.图片按比例变形。只要在标注的时候只标注比例，而不是限制宽高，就可以避免这个问题。3.iOS和Android平台的区别有些人总是认为这两个平台是有区别的。例如，它们的导航栏、标签栏和时间栏大小不一样。底部的标签栏，这些平台的基本控件，与界面中的元素不在同一个Z轴上。它们属于界面的最上层，界面的大小不受它们的影响。如下图哔哩哔哩，安卓和iOS的基本控件是不一样的，但是不会影响导航栏下的Tab滤镜的大小和高度。所以事实证明，适配与平台无关。四、掌握正确的适配规则1、同倍率。适应需要在相同的放大倍数。既然要比较，那当然要处于同一水平线上。你不能让姚明和林丹拿羽毛球来比较。知道了手机的屏幕分辨率和放大倍率后，就可以计算出其他放大倍率下的屏幕分辨率了。比如iPhone6的尺寸是750*1334（at2x），乘以1.5后就可以算出at3x的尺寸。同理可以得到其他手机在不同放大倍数下的屏幕分辨率，红框表示正常分辨率。适配只与放大有关。在相同的放大倍数下，界面上的间距、文字大小、图标大小都是一样的。唯一的区别是屏幕显示内容的宽度和高度。所以在2倍放大下，750=640=828=720；同样，在3倍放大倍率下，960=1125=1242=1080。我们以虾米音乐为例，对比640、720、750页的元素大小，验证界面上的间距、文字大小、图标大小是否一致。2.适配三大原则适配通常遵循三个适配原则：比例缩放、灵活控制、文本流适配。比例缩放比例缩放是指元素的大小不是固定的，而是会随着屏幕的大小（通常是宽度）而变化。AppStore的搜索结果页面如下图，单张预览图的比例为16:9。无论屏幕分辨率如何变化，图像的比例都不会改变。标注的时候我们只需要标注页边距、图片比例、图片间距，开发可以写适配规则随屏幕宽度变化。灵活控制灵活控制是指元素的大小不变，间距随屏幕宽度自适应。屏幕越宽，间距越大。一行文本流中的单词数与屏幕的宽度成正比。屏幕越宽，一行中可以显示的单词就越多。3、适配与平台的基本控件无关其实并不是界面的所有元素都需要适配，我们只需要适配中间区域即可。上下导航的高度不固定，每个平台的高度都不一样。比如iOS的导航栏是88px，Android有112px、104px……但是不管高度如何，我们只需要让元素居中即可。4.实际例子说了这么多，是时候来一个实际例子了。其实，适配可以概括为三个步骤。首先，转换为相同的放大倍数，然后调整界面元素。放大倍率恢复到需要适配的原始大小。如何适配750到1242首先适配需要在同倍率下，750*1334在2x，1242*2208在3x，1242的2x大小根据倍率换算为828*1472。所以如果要让750*1334适配到1242*2208，需要先把750适配到828*1472，再把调好的界面×1.5适配到1242*2208。其他的，比如750怎么适配720和640，原理是一样的，放大倍数是一样的，所以省去了开头和结尾两步，只需要根据适应的三个原则。五、注意点1、小屏适配我们设计的尺寸大多是750，这就会涉及到小屏适配的问题。一个元素在750上显示时，效果很好。在640上可能放不下，所以在做图的时候，设计师需要用动态的角度来考虑问题。以下是一些最常见的问题。2、弹窗有弹出框的样式，如下图。在750的设计尺寸上完美显示，但不做任何调整，无法直接适配640的屏幕。所以这个时候，我们需要定义一些适配规则，比如针对小屏幕减小字体大小和间距.3.文字截断距离屏幕的大小会直接影响每行显示的字数。当一行文字右侧有元素时，涉及到文本与元素的安全截断距离。换句话说，它是最多可以显示文本的区域。很多时候，设计师在做设计稿时没有考虑到文字的极端情况，导致小屏幕上文字和元素的重叠。比如下图的爱奇艺我的页面，昵称在750的界面上显示的很好，但是在640的界面上就显示不全了，这就需要我们定义可以显示文字的区域.当文本长度超过该区域时，文本被省略并用“...”代替。4、平台差异iOS和Android两端的系统级控件样式不同，我们可以分别为两端做几种样式。这个成本并不大，但是效果很好。比如iOS平台的搜索框是一个长方形，而Android平台的搜索框是带下划线的。5.对于单屏页面，我们做的大部分界面适配都是基于屏幕宽度的。高度只影响屏幕显示的内容量，屏幕显示的内容越长。对于瀑布布局，不需要调整高度。但是总有一些特殊的单屏页面，比如：音乐播放页面，空白页面……需要在所有屏幕上显示相同数量的内容。空白页面类似于下图所示的相对简单的页面。如果上间距是固定的，内容在大屏幕上会显得更高。这时候，为了让所有屏幕显示的内容都一样，我们可以通过设置上下空白区域来设置一个比例尺，让内容无论在什么屏幕上，相对于整个屏幕的定位都是一样的。具体计算方法：屏幕高度减去上下导航，再减去内容区域的高度，剩下的区域按比例分配。顶部占3/7，底部占4/7。音乐播放页面比空白页面复杂，但原理是一样的。修复可以遵循基本适配规则的地方，留一些适配的部分。比如下图中的网易音乐，在2x下是同一个界面，播放操作区域的高度是一样的，按照基本的适配规则，而光盘区域是固定左右间距得到的。需要根据屏幕高度适配的区域只有绿色矩形区域。其实大家有没有发现，这张图简化之后，和上面说的空白页的适配方法是一样的。但需要注意的是，适配部分不能超过两个。超过两个后，变量太大，不利于计算，也没有必要。六、设计稿的大小至于设计稿的大小，在我看来，没有本质的区别。原则上，您可以使用任何您想要的设计尺寸。但是从适配的角度来说，750(2x)、720(2x)、375(1x)这三款相对来说更适合一些。以前用过750，也用过720，当时很不理解为什么还有人用1x来做图。现在市面上已经没有1x手机了。如果用1x做图片，导出2x、3x的图标，图标不都是虚的。什么。但是后来换了新工作，同事都用375(1x)做图。习惯之后，我发现两者并没有太大区别。只是有些图标不是整数的时候，需要手动导出2x和3x，但实际上即使用750（2x）做图片，还是需要手动导出3x，所以也是一样的。使用1x的好处是很多国外的资源都是用1x制作的，可以直接使用。需要注意的是，做1x的分割线时，需要改成0.5px，这样导出2x的图片后就是1px。分界线建议使用内阴影，不要直接使用0.5px的线。7.Tips我们在做图片的时候，想快速的知道当前页面的元素是否可以放到小屏上？那我们总不能把当前页面拖到小屏幕上看实际效果吧。这个成本太高了，其实有一个很简单的方法可以解决这个问题。750和640的界面相差110px（2x以下），我们只需要将750的界面减去110就可以看能不能放了，能不能放就说明能放小屏幕。如果想知道字数能不能合得来，也可以通过计算得出结论。110px除以字号，小屏比设计稿少显示几个字。比如字体大小为30px，在750屏幕上可以显示30个字符，但是在小屏幕上只能显示26个字符。8.总结***总结全文最重要的观点，帮助您加深印象。传统的比例拉伸接口适配方式是错误的，极度浪费人力成本。完全有可能在一个草稿中调整所有内容；适配与平台无关，只与放大倍数有关。750和720的尺寸从适配来看，都是一样的，只是界面尺寸相差了30px；自适应的三个原则：比例缩放、灵活控制和自适应文本流；适应不应是死板的，而应从动态的角度来看待。有时需要考虑极端情况，最常见的就是小屏适配问题。。。适配这个概念很特殊，看起来很简单，简单到大多数人都认为自己懂，所以没必要再去研究它，其实我只了解皮毛，没有了解原理。比如很多人说自己会PS，但是和那些专业人士相比，你自以为知道的只是冰山一角。所以，我们要时刻保持一颗求知的心，不要总是固执己见，互相勉励。
