栅格化在网页设计中的应用：后台典型页面实践

网页设计中为什么采用栅格系统

随着Google推出的Material Design被设计师推崇到了一个高度之后，栅格系统在界面中的应用也越来越多。可是就算你做了充分的竞品调研，将自适应布局在实际项目中落地的时候，才发现比预期还要复杂。

如果我们将一块块相同类型的内容区块看成一张张的卡片，那么卡片与卡片之间的间距是不会变的，随着屏幕的宽度的变化，卡片的数量会按照一定的规则而变化。

首先，举两个栗子🌰

某球馆，流式与自适应布局相结合。（背景截图来源于网络）

还有，站酷也采用的栅格化布局呀（背景截图来源于网络）

接下来，不得不说到协助网页设计的神奇软件：sketch

Sketch的布局设置功能能够很好的帮助我们实现页面的栅格。“总宽”为栅格区域的总宽度（W），“列数”为栅格数量，“装订线宽度”为水槽宽度（G），“列宽”为栅格中每一等分栏的宽度（C）。

1、由于web端页面的交互特性，我们习惯用鼠标滚动轮或者侧边滚动条来查看内容信息，所以在内容没有限制的情况下，纵向的高度是可以不断的往下延伸的，所以本文中我所提到的栅格系统都是针对横向的宽度的。

2、经过沟通交流，开发工程师使用的框架，比如bootstrap也是采用12 栅格的方法。我的系统在界面布局上采用12栅格，按照功能模块将栅格区域进行12等分，以应对大部分系统布局问题。使用栅格系统进行网页布局，可以使页面排版更美观舒适。本文中定义了5个常用屏幕尺寸：­分别为超小屏幕（<768px），小屏幕（≥768px），小屏幕（≥1024px），中等屏幕（≥1280px），大屏幕（≥1440px），超大屏幕（≥1920px）。

3、根据屏幕常用尺寸整除的最大概率结论：界面的最小单位是8px。（因为主流的屏幕像素宽度都可以被8整除，这样设计的时候可以避免出现小数点像素，所以我们的系统常采用8px为界面最小单位。）内部组件元素，板式按照基本单位建立和布局。

4、网页中的设计内容的排版都有所依据，模块化地管理元素，让版面更有层次感。

栅格系统在项目中的应用

谈到后台系统时，怎么做适配是一个必然会遇到而且一定要解决的问题，1280px-1920px这个跨度是真心大，更何况还要考虑到在特殊的使用场景下在手机的768px的展示情况。

在有了系统栅格思维之后，根据实际的业务需求，先按照8n的规则确定下栅格区域的总宽度，再按照12栅格的方法来规范间距。

我采用了在典型页面里分模块栅格的方式。

1、搜索模块的栅格：

搜索模块后台页面布局：设计稿按照常用屏幕宽度1440px为最小宽度尺寸，开发时响应式适配768px，1024px，1280px，1920px等常规尺寸。

栅格及排版：在不同的屏幕尺寸下每条搜索信息的宽度在屏幕中的占比不同。

搜索模块的栅格的具体应用：

超小屏幕（<768px）与小屏幕（≥768px）排一列

小屏幕（≥1024px）排两列

中等屏幕（≥1280px）排三列

超大屏幕（≥1440px）排四列

超大屏幕（≥1920px）排六列

2、表单模块的栅格：

表单模块后台页面布局：设计稿按照常用屏幕宽度1440px为最小宽度尺寸，开发时响应式适配768px，1024px，1280px，1920px等常规尺寸。

调研了后台的常用表单样式，在表单不多的情况下居左或者单列居中排版的比较多，表单较多的情况下多列居中的比较多，基于我系统中页面出现表单的数量最后决定采用表单居中的样式。

栅格及排版：每列表单的宽度在屏幕中的占比及表单距离屏幕两边的间距会根据屏幕宽度大小的变化而变化。并且，新增加了嵌套栅格的方式。

解释一下我理解的嵌套栅格，被嵌套的那部分栅格布局是对第一次栅格所取得有效宽度再进行一次栅格。

 

 

表单模块的栅格的具体应用：

屏幕（<768px）与屏幕（≥768px）排一列，水槽C为16px，列宽G根据屏幕大小变化而变化。

屏幕（≥1024px）排两列，第一次栅格水槽C为16px，列宽G根据屏幕大小变化而变化；嵌套栅格水槽C为32px，列宽G根据屏幕大小变化而变化。

屏幕（≥1440px）排三列，第一次栅格水槽C为16px，列宽G根据屏幕大小变化而变化；嵌套栅格水槽C为32px，列宽G根据屏幕大小变化而变化。

（此处应有分割线）

 

3、弹窗模块的栅格：

把弹窗组件作为一个单独的模块是为了规范系统里所有弹窗的位置、宽度、高度。

弹窗的性质一般是横向居中，上下看弹窗内容多少不用上下居中，做了多种尝试之后发现之前说到的能适用绝大部分情况的12栅格已经满足不了我的需求了啊啊啊~但是没关系，16栅格，24栅格也同样适用，系统里我尝试采用了24栅格的方式。

 

弹窗模块后台页面布局：设计稿按照常用屏幕宽度1440px为最小宽度尺寸，开发时响应式适配768px，1024px，1280px，1920px等常规尺寸。

普通弹窗宽度采用24的页面栅格方式（W=6*C+5*G），当页面宽度<1280时的弹窗大小位置与1280保持一致，弹窗的最大高度不超过页面总高度的50%，弹窗的起始位置位于页面总高度的1/3处。

 

 

弹窗模块的栅格的具体应用：

水槽C为16px，列宽G根据屏幕大小变化而变化。

 

屏幕1280px下的弹窗

屏幕1440px下的弹窗

屏幕1920px下的弹窗

 

最后再来看一看按照以上栅格规则的栗子（以1440px的屏幕为例）

不负春光，野蛮生长~感谢大佬前辈的后台经验供我学习成长~