B端计师要知道的栅格设计( 二 )

二、为什么用栅格系统来进行响应式设计
响应式可以响应的前提有两点：
页面布局具有规律性摆脱像素，元素宽高用百分比代替固定数值，容器按比例实现而栅格系统页面布局具有规律性、元素宽高可用百分比表示，这两点正是栅格系统本身就具有的典型特点，我们透过栅格化布局的设计系统为响应式适配打下良好的基础。

文章图片
三、如何利用栅格进行响应式设计
1.响应式适配方式
定义响应式规则时，还需结合业务的属性去制定。那在布局时，内容区模块结构如何变化呢？简单介绍几种常见的变化形式：
1）拉伸布局
布局不变，内容在屏幕显示区域内进行相对拉伸，以达到布局完整。
如下图微信公众号后台的卡片适配采用的就是拉伸布局的形式，这种实现方式成本低，在响应式中大量的被运用。
2）等比缩放
布局不变，内容在屏幕的相对位置进行等比例缩放，这种方式不会产生任何布局重构影响，适配简单。

文章图片
一般在带有图片显示场景中使用，如站酷的布局采用的就是这种形式，需要注意图片素材放大后清晰度的问题。

文章图片
3）扩展布局
布局不变，内容可灵活按照屏幕比例进行增加或减少、扩展为多行或多列等。首先需要通过最小单位选择一个基本尺寸，然后以基本尺寸的倍数构建每个盒子框，就会出现一个个网格

文章图片
如下图花瓣的布局页面所示，在网页收缩过程中，经过一个断点就会自动减少最边缘元素，其他元素基本保持不变。栅格列数随着浏览器宽度的减少而减少，边缘图块自动换行，或者有时会溢出滚动条。采用此方案需要做数据源的补足，保证内容展示合理。

文章图片
4）固定布局
以像素px作为页面的基本单位，内容不会随着本身窗口宽度进行改变，窗口缩小后时内容会被遮挡

文章图片
如人人都是产品经理网站，整个网站采用的是固定布局，并没有进行适配。可用性不强，屏幕分辨率过小时内容会被遮挡
5）分栏布局
布局改变，充分利用不同设备、不同屏幕尺寸的差异化，通过分栏布局形式重新对内容展示做位置变化，进行整个屏幕更合理化的分配。此布局页面结构产生变化，需要重构UI框架，有一定的开发成本。

文章图片
6）混合布局
很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能是保持简单轻巧，而且同一断点内（发生布局改变的临界点称之为断点，后面内容会讲到）保持统一逻辑。
否则页面实现太过复杂也会影响整体体验和页面性能。一般通栏、等分结构的布局适合采用弹性布局方式，非等分的多栏结构布局则需要采用混合布局的实现方式。
以AntDesignPro的响应方式为例，就采用了混合布局，分别运用了拉伸布局+扩展布局+分栏布局+固定布局