一文彻底看懂UI设计适配与落地（上）

写在前面：

在设计的过程当中，只有新手设计师才会关注于如何是设计精美的图片，或者是如何完成需求，当工作两三年之后，我们的设计越来越成熟，如何将图片设计的精美不在是困扰我们最大的问题，而困扰我们最大的问题是，怎样将设计精美的页面，也同样精美的落实到真正的产品中去，一份精美的设计图无法落地的话，那这份设计图和废纸没什么区别！

这段时间我在学习“UI的适配和落地”的课程，做了一些笔记，来和大家分享。

 

适配的核心概念和正确方法

物理像素：指的是屏幕上的像素格点，不可以调整（除非换屏幕），iPhone5s的屏幕就是由640行1136列的像素点组成的矩阵图，物理像素=分辨率，单位px。

 

渲染像素：软件层面的尺寸，通俗一点就是屏幕截图，在有些机型上，物理像素和渲染像素是相同的。

 

逻辑像素：是开发员使用的一种计量单位，决定页面内容呈现多少，直接决定着渲染像素（下图中缩放就是在调整逻辑像素）。

 

倍率=渲染像素/逻辑像素

 

 

物理像素 在 硬件 层面构成了液晶屏幕，

 

逻辑像素 在 软件 层面构成了画面图像， 

 

手机图像是由物理像素和逻辑像素共同构成，二者缺一不可。

 

 

一稿如何适配多端

不管是iOS还是安卓，我们在做适配的时候，两个平台都是使用一个尺寸的稿件。

 

由于iOS、android的开发工具不同，逻辑单位在两个平台的名称不同，iOS逻辑像素单位是pt，android逻辑像素单位是dp。

 

设计师可以简单理解为：pt=dp

 

 

为确保设计图的落地效果，建议：

 

• 1X倍率下，尺寸必须为 偶数，执行难度：低
• 2X倍率下，尺寸必须为 4的倍数，执行难度：中
• 3X倍率下，尺寸必须为 6的倍数，执行难度：高

（这里不过多解释，还不了解的百度啦～）

  

 

苹果如何适配安卓？

题目：

如何将苹果640*1336px @2x 的设计图适配安卓1080*1920px @3x呢？

 

适配流程：

先概括一下总流程：苹果@2x > 安卓@2x > 苹果@3x。

 

• 1. 绘制一个新的安卓倍率为2的画板，为保证倍率与iPhone5相同，所以将画板设置大小为720*1280px；
• 2.将iPhone5 的设计图拷贝到新的安卓画板上，并对页面结构（左右间距保持一致）进行调整；
• 3. 将画板从2倍缩放到3倍。

 

先做逻辑像素适配，再做倍率适配。

 

 

逻辑像素适配应用于倍率相同，但逻辑像素不同的设备，对页面结构调整。

 

倍率像素适配应用于逻辑像素相同，但倍率不同的设备，进行等比缩放。

 

 

逻辑适配

逻辑适配，主要是在下面的5个机型中进行自适应的一个适应方式。

 

 

叠合在一起就是下面的效果，宽度在320～414pt之间，高度在568～812pt之间。

 

 

设计师喜欢使用2倍的倍率设计，现在将这5张尺寸调整为2倍的倍率。

 

 

叠合在一起就是下面的效果，宽度在640～828px之间，高度在1136～1624px之间缩放。

 

 

在适配的过程当中并不是一个随性所欲的适配，它需要遵循一定的规则规范，而这些规则规范主要有三条：文字流、弹性控件、等比缩放。

 

 

1. 文字流

一定数量的文字在小屏幕上，它的折行次数会比较多，在大屏幕上折行相对较少，对文字下面的内容会产生一定的影响。屏幕越窄的话，文字占的高度就越多。

 

2. 弹性控件

a. 间距的变化：当屏幕比较小的时候，左右元素之间的间距比较小，在大屏幕上，间距会变大，元素的高度、大小以及到屏幕两端的间距并不会发生变化，变化的只是彼此之间的间距；

 

b. 数量的变化：在十字交互（横滑）的模块上，不是体现在元素间距上的变化，而是体现在数量上的变化（如下图）；

 

 

c. 在不能滑动的情况下，随着屏幕变宽，页面能够容纳的内容也能增多（如下图）。

 

 

3. 等比缩放

无论是在大屏幕还是小屏幕上，元素的宽高比都不会发生改变，最常用的在图片上，例如banner。

 

等比缩放的好处：

可以确保页面元素之间的大小以及间距在各个机型上显示的效果是统一的。尤其是页面元素很多的时候，可以使用等比缩放。

 

我们大部分适配是基于宽度上进行适配，但也有例外，例如登陆页、视频播放器页面。（在后面的文章会分享高度适配）

 

 

倍率适配

先做逻辑适配，再做倍率适配。

 

倍率适配的方法：在逻辑像素相同的情况下，进行等比缩放。（@1x > @2x > @3x的适配）

 

但也要避免下面的几个坑：

 

• 1. 分割线不需要等比缩放；
• 2. 一些线性图标在放大1.5倍后，参数会由原来的整数变成0.5的小数，会出现下面图片中的情况，需要对边缘模糊的图标单独进行调整（调整为内描边、整数）。

 

 

简单回顾一下，不管什么机型的适配，主要都是以下三个步骤：

 

• 1、先逻辑适配，设置好同等的倍率，再调整页面元素的结构和位置，调整的规范有3个：文字流、弹性控件、等比缩放。
• 2、进行倍率适配，等比缩放。
• 3、适配完后，调整一下分割线、图标等细节的部分。

 

标注决定呈现！

很多小伙伴从来不标注直接丢蓝湖，或者全都标出来，这种方式是错误的。

 

如果在标注的时候，设计师不能明确标注出来页面的适配方式，开发都有十足的理由自行选择适配方式，如果适配方式和设计师希望的效果不相符的话，设计师要求开发进行调整，我想开发是有权利拒绝设计师的，毕竟设计师在标注的时候，没有明确自己希望使用哪种适配方式。

 

在接下来的文章中，我会详细跟大家讲解适配应该怎样标注…

转载声明：文章来源于网络，不作任何商业用途。