前言

在互联网时代，帮掌产品形态是握移多种多样的 ，就手机行业而言，动端设计师需要面对的设计适配屏幕尺寸至少也有一两百种 ，我们不可能为每一种屏幕尺寸单独进行，字干章节巨大的帮掌工作量是我们无法承受的  。

需要一些方法或者说是握移手段
，帮助我们缩减巨大的动端工作量，这些方法手段的设计适配集合就是——UI设计适配 。UI设计适配帮助设计师只需要维护几种尺寸的字干章节设计稿 ，就可以兼容市面上绝大多数的帮掌屏幕尺寸，达到不同屏幕尺寸下，握移视觉效果接近一致的动端目的。

本篇文章我们主要关注移动端应用的设计适配 UI 设计适配，将从以下几点来介绍：

1. UI 设计适配是什么
2. 为什么需要 UI 设计适配
3. UI 设计适配的一些基础概念
4. 如何进行 UI 设计适配

那么下面
，我们进入正式内容。

一 、UI 设计适配是什么 ？

UI 设计适配是指将同一款应用或网页的用户界面针对不同的设备、分辨率、屏幕尺寸 、操作系统等因素进行调整 ，以确保用户界面的一致性和可用性
。

这段定义包含了一些专业名词，还是让人有点难理解 ，如果我们隐藏那些专业名词，用图形化的方式去解释这个定义，如图 1.1 ，左边是一个 16:9 屏幕尺寸的设计稿 ，我们需要将它转变为一个 1:1 屏幕尺寸的设计稿  。

1. 你要如何处理？

图 1.1:适配过程

在开始设计前，就需要考虑可能存在屏幕尺寸和比例差异较大情况，就如同图 1.1
，应当如何适配；设计中 ，就会考虑得更细致，顶部轮播 Banner 是固定的宽度  ，还是根据不同的屏幕尺寸宽度自适应宽度 ，图 1.1 是选择了固定宽度；而在设计之后，有可能开发时会发现，如果只有两个 Banner 图 ，没法像设计稿中展示 3 个 Banner 图，这时又需要你思考要如何处理。

以上
，我们谈到这三个场景中你思考和处理问题的过程 ，就是在进行 UI 设计适配 。

由此看出，适配是 UI 设计中的过程，却不是一个具体的环节，不像是标注切图是固定的流程。它融入在整个 UI 设计的过程中。在设计前，设计中 ，设计后都可能会考虑 UI 设计适配问题。

二  、为什么需要 UI 设计适配？

为了用户体验的一致性。

这里的「一致性」主要关注的是视觉表现层是否一致 。如图 1.2，是「vivo 浏览器」在「vivo X Fold 2」机型上，内屏与外屏的首页截图 。整个页面在布局结构
，控件类型和元素尺寸以及间距都是基本一致的 。

图 1.2:相同的布局结构

用户体验中，视觉表现层的一致性是基础中的基础。保证了「一致性」 ，就会有效地降低用户的使用成本，即使用户更换了不同的设备，也不会有使用的困难。UI 设计适配则是达成这一目标的重要方法之一 。

不过，也请大家注意 ，这里说的「有几乎相同的用户体验」是限定在屏幕尺寸接近的电子设备上 。比如说 ，我们不能要求一个屏幕尺寸 7 英寸的手机应用和一台 27 英寸的 PC 电脑客户端，视觉表现层基本一致，即便他们的是同一个应用 ，也会因为交互方式和操作系统的不同而天差地别
。

三、UI 设计适配的一些基础概念

用户界面不是物理实体
，需要一些物理实体去承载它。

本小节我们将重点解释一些你需要知道与适配息息相关的概念 。总的来说，对于适配我们需要着重理解三个参数——逻辑（像素）分辨率，物理（像素）分辨率和倍率，以及他们之间的相互关系 。

了解这些概念，是为了帮助我们面对一些适配问题时
，能明白为什么会产生这样的问题，针对问题寻找合适的解决方案就会更加从容

举一个简单的例子，如图 2.1
，左右两个尺寸不同屏幕，都有着完全一致的元素。要达到这样的效果，「逻辑分辨率」，「物理分辨率」和「倍率」 发挥了关键作用。

图 2.1:尺寸不同屏幕比较

1. 屏幕比例

屏幕比例很好理解 ，既设备屏幕尺寸的宽高比值 
。

在 2016 年之前 ，业内主流的手机屏幕比例都是 16:9；但在这一年命运的齿轮开始转动
，小米公司的发布了
，对手机行业影响深远的机型——小米MIX一代，屏幕比例是17:9，由此手机屏幕开启了全面屏设计时代 。时至今日，手机屏幕比例已经完全转向了18:9，19:9，20:9等等 ，手机的屏幕高度在不断地增加
。

那么这个比例的变化，是否对我们适配内容有影响呢？

影响是存在的，只是影响并不大
，而且仅在一些特定场景下有影响。

我们以「vivo i 视频」影视页面为例（图 2.2），高度的变化带来了纵向空间的延展，需要展示更多的内容，对设计适配的影响是比较小的。受影响的一些特定场景，我们将会在之后「适配的手段」小节中详细说明 。

图 2.2:不同屏幕比例下 App 界面的展示内容量不同

2. 逻辑分辨率，物理分辨率和倍率

分辨率一词 
，人们在日常生活中是一个比较常见的概念
。比较常说的——720p
，1080p，2k
，4k等等，都是在说分辨率 。

这些参数对应在 UI 设计中 ，指的是物理分辨率。物理分辨率是用来衡量屏幕中的像素数量，相同的屏幕尺寸和一定的观看距离下 ，分辨率越高，画面越清晰 ，反之则是会模糊。

物理分辨率是一个物理世界存在的具象概念，而逻辑分辨率则是一个抽象概念，对应存在于软件的代码层面。可以理解为代码层面有一块虚拟的屏幕，逻辑分辨率就是衡量这块虚拟屏幕的像素数量，同样这里的「像素」也是不存在的抽象概念。

逻辑分辨率也是由一组参数表达的，并且我们是可以知道这个值是多少的 ，如图 2.3，节选自苹果的《人机交互指南》
，其中详细地列举了 iPhone，iPad 和 iPod 的逻辑分辨率和物理分辨率 。

图 2.3:逻辑分辨率与物理分辨率

我们选择其中一条来解释逻辑分辨率，物理分辨率和倍率之间的关系 。如图 2.3，简单说来就是——逻辑分辨率乘以倍率就是物理分辨率。

图 2.4:逻辑分辨率 ，物理分辨率和倍率三者关系

在这个公式中多了两个单位——“pt”和“px”  ，px很好理解就是我们设计中所用的像素单位，而pt则是开发代码中尺寸单位 ，“pt”来源于印刷行业的术语 ，翻译过来是“点”。图2.3中的“@2x”和“@3x”就是系统默认倍率 ，我们会常常称之为一倍图，二倍图，三倍图以此类推 。

“@1x”是比较久远的手机设备 ，目前已经基本不在设计的考虑范畴了 。在一倍图的情况下 
，此时的 1pt 刚好等于 1px，这样就可以减少开发工程师和设计师之间沟通成本。因为假设你的设计稿是使用的三倍图，那么换算的公式则是 1pt=3px ，如果和开发沟通时不说明具体的单位，你说 12，开发工程师可能就会理解成 12pt，但是实际想表达的是 12px
，这样最后的效果就会是有较大的误差
。所以在很多设计团队，针对 iOS 设备设计时，仍然使用一倍图作为设计稿尺寸，从而打通了开发工程师与设计师之间的沟通壁垒。不会因为单位不统一
，造成结果的误差。

那么来到 AndROId 这边  ，道理是一样的
，只是在参数和概念名词会有些不同。如图 2.5，标黄色的部分是我们目前使用的较多的屏幕尺寸（可能高度数值略有不同）。

图 2.5:Android 手机 物理分辨率与逻辑分辨率

首先 ，Android 的倍率是用英文命名的
，如 mdpi 等，但是习惯上我们还是称之为一倍图等；其次 ，“dp”是 Android 系统中逻辑像素的单位 ，等同于 iOS 中的“pt”。

Android 系统和 iOS 系统的逻辑分辨率的参数值是相近的，这也是很多设计团队只会基于 iOS 进行设计，Android 开发工程师直接使用基于 iOS 的设计稿进行开发 。因为差别不大 ，只要在适配时候使用相同逻辑 ，就可以少设计一次相同页面，也是为了降低设计成本。

以上内容也就说明 ，我们在本节开头的例子（图 2.1），为什么不同的尺寸的屏幕 ，为什么能保持相同的元素布局 ，因为两个物理分辨率不同的屏幕都是，基于一个相同逻辑分辨率，等比放大得到的（图 2.6） 。

图 2.6:Android 手机 物理分辨率与逻辑分辨率

四、UI 设计适配的手段

这一小节 ，我们将介绍适配不同的尺寸屏幕的具体手段——固定尺寸与自适应尺寸。

1. 固定尺寸

先说简单的
，固定尺寸
。固定代表着是一个绝对值 ，固定不变的。

固定尺寸主要是分为两个场景
，一是元素的固定尺寸，这个元素主要是指图标，按钮
，部分的卡片容器（如 Banner）和一些系统控件（如布尔开关 ，单选多选等）。如图 3.1，vivo 账号的登录页面中的登录按钮，在折叠屏内屏与外屏不同屏幕尺寸下
，按钮的尺寸依然是相同的

图 3.1:vivo 账号-登录页按钮尺寸一致

二是元素间的固定间距，主要是指元素与元素间的间距固定和元素与屏幕边缘的边距固定。固定的间距有助于相似元素成为一组，符合格式塔原理。比如图标与文字 ，卡片列表等。

图 3.2:固定尺寸

在手机系统中的设置页面，如图 3.2，将有关联性类目使用较小的固定间距排列，不同类别的则是使用分割线和更大的固定间距排列
，这些固定间距不会因为机型，屏幕尺寸的不同而发生改变 。

图 3.3:设置页面中不同的间距

2. 自适应尺寸

自适应尺寸也细分为三个场景：元素等比适应 ，元素间间距自适应和元素弹性自适应。

①元素等比适应

以宽高的某一边适配屏幕的宽高 ，剩余的一边跟随比例等比适配。这里主要指图片，视频的适配为主。因为这些元素的比例必须是固定的，所以我们只能去等比缩放（如图 3.2）。

图 3.4:宽度固定 ，高度等比缩放

通常来说我们都是以宽度去适配
，但是这些年短视频 App 的火热 ，需要为用户营造沉浸式的观看体验。竖版的视频往往是以高度适配 ，那么会带来一个问题，宽度有可能会超出屏幕宽度，超出的部分就会被裁切，但是为了给用户更好的沉浸式观看体验，会选择裁切视频。

图 3.5:高度固定 ，宽度等比缩放

当然你可能会有疑惑 ，那如果用户上传了一个横版比例的视频或图片，如果按照宽度适配，裁切的内容是不是太多了 ，而且画面的清晰度也会降低很多
？

没错 ，这里我们就需要在不同的场景下，使用不同的适配策略。所以就会针对横版内容，就是以宽度适配，竖版以高度适配。

图 3.6:宽度固定，高度等比缩放

②元素间间距自适应

间距自适应的适配手段，是以百分比数值计算适应元素与元素之间的间距
，元素与屏幕边缘的间距。以百分比计算间距，那么就需要一个基数，这个基数往往是以屏幕分辨率的宽度和高度为基数 。

这个方法主要是针对元素较少的页面，也就是我们在「基本概念」小节中说到的不同的屏幕高度变化带来的影响。最典型的是手机的锁屏场景 ，还有状态结果页面的展示（图 3.7） 。

图 3.7:间距自适应

如图 3.8，还是 vivo 账号的登录页 ，在折叠屏内屏与外屏，可以很明显看到按钮距离底部的间距是不同的 ，这里就是用百分比的间距 。

图 3.8:vivo 账号-登录页按钮位置

③元素弹性自适应

弹性自适应 ，是指控制元素的外边距与内间距 ，同向尺寸弹性自适应。弹性的意思是有多少的空白区域就填充满。如图 3.9
，当右侧多一个按钮时 ，就需要左侧元素弹性的适应填充剩余的空白区域。

图 3.9:弹性自适应

同时我们会有一个衍生的适配手段——矩形等分适配，是指将屏幕（或区域）进行平均分割成相同宽度（或高度）的矩形（分割的矩形之间可以有固定间距，固定间距可为0px） ，而不同的元素在矩形中居中放置。

图 3.10:矩形等分适配

矩形等分主要会是标签栏，宫格式布局和图片视频的瀑布流形式
，花瓣网就是其中之一 ，比较方便适应网页宽度的不断改变 。移动端中
，目前这一方法我们会常用在折叠屏的适配中。如图 3.11，排行榜模块在内屏是以双列展示，而在内屏中则是因为宽度增加
，需要内容填充页面 ，而变成了三列。

图 3.11:排行榜模块由双列改三列

以上就是主要的 UI 设计适配手段 ，总结一下 ：

1. 设计适配的手段分为两大类——固定尺寸和自适应尺寸
2. 固定尺寸针对元素自身尺寸和元素间尺寸
    ，都是确定的固定值
3. 自适应尺寸细分为——元素尺寸等比适应，元素间间距自适应和元素弹性自适应，相对应的自适应的方法都是比值的计算 ，是一个相对值

我们也只是列举几个典型场景，实际业务场景是复杂的，需要注意多种手段相互配合使用。

以上就是关于移动端 UI 设计适配的全部内容了。

感谢你的阅读，希望对你的设计工作有所帮助。

作者
：VMIC UED