超全面总结！如何利用栅格系统做响应式设计？

@UX-BOY ：文主要与大家分享何用栅格系统完成后台页响应式设计，介绍响应式设计的思路与方法。

一、什么是响应式？

按照本人的理解，响应式就是通过理的计方案配规范的术实现策略，使同一个 Web页面在各个终端（备）不同辨率屏幕上都能有最佳的用户体验。

这说是用户体验而不是视觉效果是因为用户体验包含了性能、交互、效率等多方面内容，也就是说，对于一个线上的响应式页面，不仅要关注视觉上的，也要关注操作、使用的受，这些综因素最终响着用户使用后台系统时的效率与体验。这里我提到的「合理的设方案」就本篇文章家分享的重点：如何利用栅格系统完后台页面的响应式设。对于交互与性能方面内，本篇文章不介绍，因两者涉及到我不太了解的技相关知识。我提出这观点主希望家执行设时，能全局的考虑，多交互与发沟通，协力打造好的用户体验。

二、响应式响应的是什么？

响应就系统对于外部变化的反馈应，响应式就系统出这种反馈所依据的方案与策略。对于一 Web页面，外部的变化指媒介（Media）与视窗（Viewport）的变化，媒介指 Web页面运行哪些设备的屏幕（手机、平板、PC、Mac），视窗指浏览器用显示网页内的窗口，也就浏览器去掉标签栏、址栏、具栏之后显示内的窗口小。所以对于一 Web页面言，响应式响应的就媒介与视窗的变化，响应的结果视觉表页面不同媒介、不同视窗下会不同的布局结构、版式设以及不同数信息的展示。

三、响应式的目的是什么？

后台系统响应式设的目的：提高屏幕利用率，化操作效率。

提高屏幕利用率最简的理解就是在大屏幕上显示更多内容，在屏幕上通过数据筛选展示关键息。一直以来大家普遍认为移动端碎片化严重，但实际上面端备的辨率也是有着不均匀的布，而随着新备的更新，更多高辨率屏幕不断加入，这种碎片化的趋势会更加显，因而要想利用好每一块屏幕，让不同辨率的用户都有好的体验，显然传统固定的布局是做不了。

后系统的应用性，决定了响应式在后计中有高的实用价值。后系统有大主要功能：查操作。查主要是各种数据，是系统动生成的内容；操作是需人工干预、人工决策的任，查的数据为操作提供了依据，而操作支撑了公或部门业的正常运行。所以后台系统设计基础的目标之一如何通过良好的数据展示帮用户提高操作、决策效率，充足的展示空间显然实这一目标的基础，响应式设通过每分辨率设合理的版式布局，使数据每块屏幕都尽可能展示的。优化后的数据展示，帮用户高效获取信息，从提高了用户使用后台系统的效率与体验。

四、为何要利用栅格系统来进行响应式设计

响应式以响应的前提有两点：页面局具有规律；元素宽高用百分比代替固定数值，而两点正是栅系统身就具有的典型特点，所以用栅系统进行响应式的设计是顺理成章的，也比高效快捷，所以响应式与栅化天生一对搭档。

栅格系统页面布局具规律性、元素宽高可用分比表示：

五、利用栅格系统完成后台页面响应式设计的步骤

1. 确立设计稿基准尺寸

设计稿基准尺寸是指我们从哪个分辨率开始设计，也是我们新画板时画板尺寸应该是多大。而这个尺寸确定主要依据是我们后台系统所主要用户屏幕分辨率；我们分两大类情况来讨论这个问题。

果我们的系统是给司内部工使用，由司批量采购设备的原因，司内部工的屏幕分辨率往往比统一，种情况下我们需要拿到个数据，以它为基准尺寸开始设计。因为虽响应式设计的目标是让页面在每个分辨率下有最佳的验，但际开中毕竟存在损坏，设计还原很难100%，因而大数情况下还是基基准尺寸的设计与开，在用户端显示效果最佳、验最。

如果我们的系统平台级面向全网用户，或者虽然公司内部使用，但并不能统到内部员屏幕分辨率况，就可以以1440*900作基准尺寸始设。从统数据看，目内 PC端用户屏幕分辨率排三的分别1920*1080、1366*768、1400*900；1440的尺寸实际处于中间置，如果以它基准设，终向向下响应配后，相对误差小，从达用户体验的公约数。

2. 确定页面布局结构

页面的局结构，是页面基框架，续的设计是在个大的框架下完成的，所以确定页面基准设计尺寸，需要跟互设计师或产品经理合，根据际业务情况讨论确定页面局结构。一般来讲，台系统有两种最典型的页面局结构：左右局与上下局。

△ 上下局

下布局的结构传统网页中非常常见，后台系统中并不常用。这种布局的优点符合用户认知，遵循用户从下浏览页面获取信息的习惯；贯穿全屏的导航栏设也使页面显得式稳重，除却导航栏之后相对较的空间也内展示提供了比较充足的空间。缺点顶部一级导航受页面宽度限制，数会比较局限，同时导航层级较深时，交互效率也不够理。所以该布局合那些导航层级较少，内展示充分的后台系统设。

△ 左右布局

拥有侧边导航的左右布局页面结构，是在后系统中更常见的页面布局形式。侧边导航栏可以固定也可以收起，相对比较灵活，同文字横向排列的形式可以在竖向上展示更多内容，因此侧边导航比顶部导航能容纳更多一内容，而层叠式的内容展示也使得一、二、三导航内容关更为顺畅，可扩展性也得加；由于侧边栏可以常驻在页面左侧，所以对于右侧内容的指示性也优于顶部导航，切换起来也更加方便。但同，因为侧边栏的常驻，导致右侧内容域空间被挤掉部，所以相对上下布局的结构，左右布局的结构，内容域空间会比较；一为了页面其它域做，导航部会用更深的颜色、安排更多的图标和文字，这也导致了在视觉上左右布局的页面不够衡，会有左边重右边轻的觉。

3. 对内容区域建立栅格系统

根据不同的布局类型，对页面内容域建立栅格系统。对于一个利用栅格系统做响应式计的页面来讲，主要有三大数值需要规范：Column、Gutter、Margin；对于 Column、Gutter 在《超全面！栅格系统及其在后计中的应用总结》内容中已经有详细的介绍，不再赘述，而 Margin 是页边距，主要确定了内容域距离页面边缘的距离，它布在内容域的侧，主要作用是通过留把内容域周围环隔离出来，从而突出内容域的显示，此外还可通过 Margin值来调整内容域显示比例，使页面在视觉上有更好的呈现效果。所以一个用于响应式的栅格系统事实上由 Columns、Gutters、Margins 三部组成。

△ 上下布局结构其对应的栅格系统

△ 左右布局结构其对应的栅格系统

4. 根据实际业务内容确定盒子（Box）比例

△ 下布局结构的盒子

△ 左右布局结构的盒子

5. 确定响应策略

响应策略就当视窗（Viewport）发变化时，内区域的元素如何去响应，具体到我们当的栅格系统，就 Columns、Gutters、Margins 以及由 Columns  Gutter 组的盒子（BOX）四者的（主宽度）如何变化，以及这种变化之下我们页面的布局如何调整。

为了方便直观的向开发工程队的其它伙伴沟通，可以把这个响应策略制作成如下的表格，并在页面中标注说相关素的变化规律，供开发参考。

由于带左侧导航的响应式规则相对复杂，我先它为例跟大交流响应策略如何制定。

△ 左右布响应策略表

如图，响应是以视窗最小宽度作为基本依据来制定宽度下 Columns、Gutters 与 Margins 响应策略，也是说 Viewport Min-width 是做出响应触发条件，视窗到个最小宽度，会触发该宽度下预设页布局，而布局都是在该宽度下最佳布局，也是此，响应才会在各复杂分辨率条件下都能用户比较好体验。

每个视窗宽度的最小值是触响应的关键值，因此我们给用触的关键值个名字叫「Breakpoint」，每个 Breakpoint 触一种响应策略，而每个策略持续（持）的宽度范围就是图中绿矩形的范围。以图中二行矩形为例，该矩形代表的响应策略是：栏目数是8、水槽宽度16（SM）、页边距32、边栏收且仅展示图标，当点击边栏展开图标时边栏以 Push 的方式展开，该策略触的 Breakpoint 是768，持范围是577~768。也就是当视窗宽度缩放至768时，栏目数量由上一级的12变为8，水槽宽度由24变为16，边导航由完展开状态自动收文字部分，仅留图标，持关键数值不变，直到视窗宽度达到另一个Breakpoint。需要特殊说明的是，一行矩形中0~576（Min&Fixed）个范围的视窗宽度是固定的，也就是在该套响应策略中，页面最小响应到576的页面宽度，当视窗到达个宽度时，浏览器视窗进一步缩小，因为当页面宽度比它还小时已经无法有效展示数据，所以进一步的缩放是毫无意义的。

左右局响应策略动态演示

考虑到 gif 被压缩显示效果不理想，所以我做一小段视频来帮助大家更的理上述响应策略在际页面中何挥用。视频链接→https://v.qq.com/txp/iframe/player.html?vid=w0711l8yewc

左右局响应策略标注

于上下布局后台系统我们根据内容区域（Container）宽度定义不，可以把它们分为两类：

内容区域定宽后台系统（Fixed-width Container）

内容区域定宽是指内容区域在组视窗宽度区内，都会设定个最大值（Max-with），内容区域宽度小于最大值时，区域内元素会响应视窗变化；到最大值后，内容区域不再响应视窗变化，而是宽度保持该最大宽度值不变，此时我们过增加页两侧margin值来响应视窗变化。Flex Margin 是应此情况动态页边距。

上下布局响应策略表（内容区域定宽（ Fixed-width Container ））

容区域宽流式（fluid-width Container）

容区域宽流式（fluid-width Container）的后台系统，它的容区域（Container）距离页面两侧的页边距 Margin 是定值，因此视有多大容区域就展示多大。

六、问题

1. 后台系统必须做成响应式么？

并不是必须的，是否要做响应式主要是根据后产品面向的用户来定的。如果是公内部使用的系统，且员工配备的面备都是有统一的辨率，就可以不做响应式；如果是面向全网用户的后产品（比如淘商家的后管理系统，阿云的控制）或公（部门）内部的面备并没有统一的辨率规格，那就需要做成响应式。当然了，更实际的环中是否做响应式还有术实现、间、人员成本等各方面因素的考虑，有为了尽快的让业运营起来，后系统会做的比较「简陋」。

2. 为什么栅格系统没有适配到移动端的分享？

因为后管理系统的使用景主要是工作间在面备上使用，由于庞杂的数据内容在移动备上展示困难、操作不便，因而少有公会把后系统响应移动端使用，所以今说的后响应式仅针对面备屏幕。

3. 对于iMac4k、5K这类超高分辨率的屏幕如何做响应式设计？

对于左右布局的后系统，实际上它是全屏展示的，也就是屏幕有多大就展示多大，因而 iMac 的响应策略也是按照左右布局响应策略表的策略来响应。

对于上布，容区域定宽的后台系统，iMac 的响应策略使上布响应策略表里的策略来响应即可；

于内容区域宽度流后台系统，iMac 响应策略可以参考左右布局响应策略表来处理栏目、槽变化，页边距保持定值即可。

4. 在以8为原子单位的栅格中，Margin需要按8n的规律变化么？

能以8n规律变化是最好，如法做到也可以使用其它数值。Margin 是页边距，主要作用是过留白将页内容区域与围环境隔离区分出来，从而突出内容；般我们会优先考虑内容区域匹配8n变化规律，安排完内容区域后剩余空自然成为页边距（margin）。

5. 响应策略制定的时机是什么？如何去制定？文中示例的策略表我可以借鉴套用么？

响应策略表般是在主要页设计完成，要交付开发实现时候来跟开发起商定。这块需要注意两：

果开始设计时就已确定页面是要具备响应式的能力，么最开始设计时就去跟开沟通，看他们现有技术是何来做响应式的，因为他们很有能是在用 Bootstrap、Foundation 类组件库来做开，而组件库一般有自己现成的响应规则，种情况下我们需要开他们的规则，让自己的设计匹已有的策略。当，果他们的规则并不能很满我们的业务需要，一般也是以在组件的基础上让开去修改整的。

响应策略表只对响应方式的结果的呈，这策略的制事实从设始执行时就去考虑的，从我人验讲，我一般会挑两类页面响应策略的研究与配，一控制台（Dashboard）页面，另一表单（Form）页面。优先规划这两页面的设，考虑他们各 Viewport 下如何布局如何展示如何缩变化，并且发沟通法，听取意见，制初的响应划，当这两页面设完，就可以范围的执行设。

文中示例的策略表是基于项目经验总结而来，有实际应用价值，可以借鉴。但更想做的是通过那个表希望跟大家享一种开发交流、沟通的方法和巧。实际工作中并非一定要做出那一个经过心计细致考虑的表，可能会找张纸画一画给开发就可以了，这块的重点是如何把计的想法更可视化更直观准确的传达给开发工程。所以那张表是启发而非标准。

△ 控制（Dashboard）页面示例（素材图片作者：Coderthemes）

△ 表（Form）页面示例

注作者的微信公众号：「UX设计诗」