【摘要】 一文彻底看懂UI设计适配与落地（下）考必过小编为大家整理了关于一文彻底看懂UI设计适配与落地（下）的信息，希望可以帮助到大家！
上一期→《一文彻底看懂UI设计适配与落地（上）》
在接下来的文章中，我会详细跟大家讲解适配应该怎样标注…
标注决定呈现
在设计师的眼中，页面是静止不动的，在程序员的眼里，并不是对每个机型单独进行开发和适配，他们是通过一套代码，实现多个机型的页面展现。
举个例子：
将下图640px @2x适配到750px @2x 中，设计师喜欢把页面上所有的元素一五一十的标注出来，这样是错的。
如果我们要将一个页面的元素进行适配，我们势必只能标注一部分参数，还有一部分参数不能去标注，这一部分参数要随着屏幕宽度的变化而变化。
如上图标注，开发会有4种适配的可能：
第1种适配：头像尺寸以及边距不变，但是头像间的间距发生变化。如下图：
第2种适配：左右间距、上下间距、头像间的间距不变，变的是头像的大小。头像大小：（ 750-30*2-20*5）/8≈98，控件高度：20+98+30=148。结果如下图：
（提示：有时候缩放会小数点，需要调整为整数；或者间距不均等，需要将中间一些间隙调大一点。在开发的时候也会遇到这样的情况，这个是正常的，因为屏幕发生变化，有些等分的参数面临除不尽的情况，）
第三种适配：如果设计把所有的参数都标注出来，开发会误解为随着屏幕宽度的变化进行等比缩放。
第四种适配：除了以上的几种可能，还有一种锁定比例，跟第二种类似，跟着屏幕宽度放大而放大。如下图。输入框宽度：（750-60*2-40*2）/4≈138，输入框高度按照比例5/7缩放。
无论按那种方式实现，都是合理的，设计要标注清楚用什么样的方式适配，不要让开发去猜测。
标注思路
如果把标注看成是开发说明书，那么就要求我们精简一部分内容，精简的内容就是我们留给开发进行适配自适应的区域，标注文档核心就要清晰。作为一个合格的设计师，只有自己标注清楚才能去要求对方。标注主要分为四个步骤：边距、元素尺寸、间距、详情。
1. 边距
边距就是起到留白的作用，屏幕的边距是统一的尺寸，边距只适用于内容区，底部和顶部导航栏的边距需要单独标注。
2. 元素尺寸
元素的尺寸一共有四种类型，元素的尺寸是固定的，常见的就是按钮的大小，输入框的高度、banner图的比例一般是不会发生变化，对话气泡根据内容多少发生变化。
3. 元素之间的间距
间距有两个概念：相对位置、绝对位置。
- 绝对位置：只用屏幕的边缘进行标注，比如边距。
- 相对位置：不是根据屏幕的边缘进行确定，依靠另外一个元素来确定自己的位置，标注组件里面的位置。
4. 详情
详情主要指的是文字的详情（字号、字色、字重）、输入框、分割线、圆角等。
设计适配的标注方式
继续讲解，逻辑适配三原则的三种适配方式：文字流、弹性控件、等比缩放。
1. 文字流
除了要标注字号、字色、字重、截断之外，还需要标注文字到其他元素的间距。
常犯的错误：
a. 字段的标注
错误：标注字段的宽度
正确：标注标注到其他元素的距离
（安卓用的是dp单位，iOS用的是pt单位）
错误的方法
正确的方法
b. 在文字前后添加标签的情况
错误：在折行文字后面添加标签
正确：标签放在文字前端，或单行文字末尾跟随标签
c. 文字数量不确定的情况
需要给左侧的文字和右侧的文字留一个安全的距离，如果不留安全距离，两边的元素很容易发生重叠。（通常留的安全距离是20px或者30px）
d. 左边文字、右边图片的情况，需要考虑小手机（iPhone5等）元素之间会不会重合。
小技巧：安全间距+110px（110px为iPhone5和iPhone6宽度的差距），再调字段。
不需要改变设计图整个的布局，只需要对有存疑的元素进行微调，放入屏幕差距的矩形块，就可以知道当前屏幕的效果，在其他手机上是否会产生重叠。
2. 弹性控件
弹性控件就是元素的尺寸、高度、以及到屏幕两端的间距都不会发生变化，唯一发生变化的就是两端元素之间的间距会自适应。
a. 列表中组件尺寸不变，间距自适应，屏幕边框，水平方向显示的内容越多。
当列表中有长度自适应的文字的时，“间距自适应”被“文字长度自适应”代替。
b. 屏幕越宽，显示按钮越多的情况。
3. 等比缩放
常见的例子，banner图，标注图片比例即可，长宽不需要被标的。
有些图片的尺寸是无法根据自身得出来的，而是需要在别的图里面得出来。
写在最后
以上便是我前段时间学习总结的笔记，有不正确的地方，望大家指出改正～
以上就是一文彻底看懂UI设计适配与落地（下）的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！