[笔记]常见的几种适配方式

前言

在UI设计工作中，设计师往往更关注如何做出好看的图，而忽略屏幕的适配。在实际项目中，设计稿的最终落地才是最重要的，我们要熟悉开发的适配规则才能设计出实际可用的设计稿，所以我们要把适配当做一项基本技能牢牢掌握。

像蓝湖、zeplin等一些标注软件虽然功能很全面，提升了设计师的效率，但它们也有自己的短板：每个间距尺寸都标注出来，反而不知道该怎么适配，这个时候开发就会凭感觉，按自己的喜好做适配。

下面我就尝试介绍几种常见的适配方式，希望能让你们理解适配的重要性，以及当下标注工具的弊端。

一、定位方式

在说明适配方式之前得先说说定位方式，页面布局首先是要规定一个元素在页面中的位置，其次再是在各个屏幕中的展现规则。

同样一个页面，里面元素的位置描述也可能会有很多种，举个简单的例子。

下图中按钮的位置最简有几种表述方式？

image

1. 表述按钮x轴上距离左边100，y轴上距离上边200/距离下边500；

   
   
   image
   
   
   img

2. 表述按钮x轴上居中，y轴上距离上边200。

   
   
   image

3. 表述按钮x轴上居中，y轴上距离中线100，

   
   
   img

4. 等等...

基于以上几种排版方式，我们挨个来探讨与之相应的适配方式。

一、按钮的适配

方式一：固定间距，按钮宽度自适应

如果假定按钮的定位方式为：x轴上距离左边100，y轴上距离上边200。

那么常见的适配方式为：固定按钮的高度，x轴上距离两边100，宽度自适应。

img

方式二：固定按钮宽高，定位自适应

如果假定按钮的定位方式为：x轴上居中，y轴上距离上边200。

那么常见的适配方式为：固定按钮的宽高。

image

二、卡片的适配

方式一：固定卡片的宽高，定位间距自适应

把上图三个卡片看成一个整体，假设上图卡片的定位方式为：整体x、y轴上居中，内部卡片中线等分。

img

常见的适配方式为：固定卡片的宽高。

image

方式二：固定间距，卡片宽高自适应

假设上图卡片的定位方式为：x轴上距离左边为40，y轴上距离上边为80，卡片之间的间距为20。

image

常见的适配方式为：所有卡片看成整体，x轴上距离两边40，y轴上距离上下80，间距不变，卡片宽高自适应。

image

方式三：固定卡片宽高，卡片数量自适应

image

1. 假设三个卡片看成整体，x轴上居中，y轴上居中，y轴最小边距分别为40；
2. 当屏幕高度变大时，y轴边距分别小于150时卡片数量不变，反之增加卡片数量；
3. 虚线部分为增加的卡片。

三、REM适配

什么是rem？rem是一个相对单位，简单来说，当你的前端工程师用rem作为单位标记一个按钮的宽高时，按钮的大小就会根据屏幕尺寸做自适应。

rem除了标记尺寸还可以标记间距，设计们只需要说明好定位方式就可以了。

image

扩展阅读

想更全面了解rem可以参考下面这篇文章

web app变革之rem – 腾讯ISUX

这是几篇我认为写得比较详细的适配文章，主要针对iOS和Android端，看完就能系统地了解当下流行的屏幕适配了。虽然公司目前的项目都是用web前端技术实现，适配方式都是异曲同工的。

第一篇：UI适配攻略·教程①名词阐述&倍率选择

第二篇：UI适配攻略·教程②Android&iPhone碎片化误区

第三篇：UI适配攻略·教程③规范的误区+适配原则/方法

第四篇：UI适配攻略·教程④一稿配双平台

第五篇：UI适配攻略·教程⑤【最终篇】详解验收