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

版权申明：本教程出自"Milky_lele"原创，感谢"Milky_lele"的原创文章分享！

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

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

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

首先，举两个栗子

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

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

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

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

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

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

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

3、根据屏幕常用尺寸整除的最大概率结论：界面的最小单位是8px。内部组件元素，板式按照基本单位建立和布局。

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

栅格系统在项目中的应用

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

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

1、搜索模块的栅格：

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

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