搞定B端响应式布局，只看这一篇干货就够了！

一、全文速览图

今天我们要紧接之前B端参数和框架的分享，来对B端响应式设计的方式进行快速的扫盲和上手应用的介绍。

二、响应式的应用场景认识

网页响应式布局的应用，是为了让网页跟随显示空间的大小自动做出自动调整，实现完整、合理的展示效果。

在网页设计中，显示空间的大小主要指的是浏览器窗口大小而不是桌面分辨率，因为显示器窗口是可以自由调节的，用户不是非得浏览器全屏，也可以把它缩放后使用。

所以网页设计关注的不是设备分辨率（除非定制设备），而是浏览器窗口尺寸的使用范围。

接着我们还要区分常规网页和B端网页类型的应用差异，常规网站尤其是企业官网通常信息量很小，可以很好的应用响应式布局，在不同宽度下实现良好的展示效果，且开发成本极低。

但是B端管理系统页面往往信息量非常大，组件和交互都很复杂，这就导致要实现完整的响应式布局效果基本是不可能的，或是开发成本高到无法接受。尤其是面向移动端的使用场景，主流团队宁愿单独开发一个版本也不会使用响应式布局去适配。

所以B端项目会选择性地实现部分响应式布局的效果，而不是全部接受。要学习B端响应式布局的应用方式，就要先了解下它在界面中的具体应用场景和效果。

类型1：布局固定宽度调整

画面中的主要模块、组件布局没变，但它们的宽度会随浏览器的缩放而缩放，影响内容的显示空间。

类型2：多列卡片流动调整

在多列卡片布局中，会随浏览器宽度的变化，切换不同的列数。

类型3：组件自动展开收起

页面的侧边导航或右侧信息栏，会在浏览器宽度达到一定数值后自动展开或关闭。

B端响应式布局基本只应用在这三个场景的页面中，且部分特殊页面还会不使用响应式布局，比如表单或是详情页会使用定宽模式。这些规则都由设计师来决定，所以需要先掌握响应式的应用逻辑才能合理的进行运用。

三、响应式布局的参数设置

响应式布局的参数设置包含以下步骤：

1. 设置宽度适配范围
2. 设置栅格应用区域
3. 添加栅格的具体数值
4. 确定断点的应用数值

步骤1：设置宽度适配范围

设置一个最小宽度和最大宽度，决定项目页面显示的宽度范围。浏览器小于这个宽度，则页面内容会被隐藏要左右滚动，大于这个宽度，则内容不会再放大。

这么做的原因是减少不必要的工作量，去适配一些不能带来实际价值的极限场景。比如把浏览器缩小到100px宽或是在32:9的超宽屏中全屏展示。

常规B端项目的最小宽度通常都在900px以上，最大宽度不会超过2560px。

步骤2：设置响应式应用区域

接着要确定响应式布局应用的范围，简单来说就是结合全局框架确定响应式布局区域。

如果是导航栏在上内容在下的结构，那么响应式就应用在下方的内容区域。如果是左右布局的形式，那么响应式就应用在右侧的内容区域，不会把侧边栏算进去。

步骤3：设置栅格的具体参数

如果在Figma中进行设计，就可以根据内容区域创建一个Frame，然后选中它添加格线Columns系统。主要关注的参数就两个，列数和列间距。

列数最常用的是24，如果对布局有自己的想法也可以使用 12、16、20等其它数值。而列间距只需要在8、12、16px中选出即可。

步骤4：确定断点的应用数值

断点 Breakpoint，是响应式布局中触发特定布局效果的数值，比如导航栏收起和展开，列表从4列变3列等。

先从导航栏收起和展开说起，我们可以把断点设为1000，小于等于1000则导航栏收起，反之则展开。

而多列布局需要看想要兼容几种列数，就要设置几个断点，比如900-1200显示3列，1200-1500显示4列。

断点不是B端响应式布局的必要参数，需要设计师在项目中确定有应用的场景以后，再进行设置。同时，这些参数的定义需要提前和开发做出确认，确定能被实现以后再开展后续的设计。

四、响应式布局的具体设计

确定完响应式的参数以后，下一步就要展开具体的设计了。而响应式布局的制定是在界面设计过程中完成的，不是独立存在的，相关工作内容包括以下3个阶段：

1. 确定顶级组件所占栏数
2. 制定组件内部适应规则
3. 输出主要页面响应式效果

阶段1：确定顶级组件所占栏数

响应式栅格的作用就是作为顶级组件布局的依据，浏览器宽度变更后栅格宽度也会变更，而基于格线设置的顶级组件宽度也会随之改变。

所以第一步就是在每个界面设计过程中确定顶级组件所占栏数，主要应用于仪表盘和多列卡片场景。类似表单或表格等满宽的组件就没有太大区别。

要注意的是，栅格只影响顶级组件，组件下级的元素不需要和栅格做对齐。

阶段2：制定组件内部适应规则

上面完成了整体框架的布局，接着要展开组件内部的设计。因为组件本身的宽度会有变化，所以我们在设计过程中也要制定下级元素的适配规则。

适配规则主要包含下面三种：

1. 下级元素尺寸固定 Fixed，左对齐或右对齐，比如图标或按钮
2. 下级元素尺寸基于上级元素自适应 Fill
3. 下级文本区域高度自适应，且影响上级组件高度

这其实就是Figma 自动布局的应用规则，它可以应对80%以上的情况。而一些更复杂的组件如表格、图表等，就需要问开发使用哪种规则更合适，再进行设计。

阶段3：输出主要页面响应式效果

响应式布局的交付需要让开发能直观的看到对应的效果，所以我们需要给出多个宽度版本的设计稿。

但把所有页面都做一遍是不现实的，也没有必要，所以我们在交付前要做的就是筛选出几个关键的页面，如首页表盘、表格页、列表页等，再分别改出小、中、大三个宽度版本，完成对响应式规则的视觉展示。

只要花不多的时间输出这些效果图，就足够程序员理解布局意图了，如果遇到其它具体问题再具体分析。

要是既不输出效果图也不沟通，那么项目的实际响应式规则就全凭程序员“自由发挥”，是无法获得优秀的使用体验和视觉效果。

结尾

响应式设计规则主要还是要和开发商量，没有新手想的那么困难，整体还是可以轻松应对的工作任务了~

那么我们下篇再贱~

欢迎关注作者的微信公众号：「超人的电话亭」