一套标准的栅格系统构造网页界面设计方法

网页栅格系统像谜一样的困扰着浩瀚网页低级设计师，关于网页栅格系统是网页设计的一套标准的布局设计方法！

从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。
利用固定的格子设计版面布局，其风格工致简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

一、栅格系统

栅格系统 英文为 Grid Systems，也有翻译为 网格系统。

定义：利用固定的格子，遵照一定的规则，进行页面的布局设计，使布局规范简洁有规则。

实在也没那么玄乎，我给网页栅格系统这样定义的：以规则的网格阵列来辅导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。
1692年法国为提高印刷水平，以方格为设计根本，将一个印刷版面分成上千个小格，这便是最早的栅格雏形。
再后来，逐步演化成利用固定的格子设计版面的平面设计风格。
不过对付网页设计来说，栅格系统的利用，不仅可以让网页的信息呈现更加都雅易读，更具可用性。
而且，对付前端开拓来说，网页将更加的灵巧与规范。

文章来源：壹念视觉

1.1 网页栅格

这里所说的包括网页端和移动端，因此规则的网格阵列来辅导规范界面中的版面布局以及信息分布。

1.2 为什么要利用栅格

通过栅格的利用，可以用逻辑阐明商业设计的细节问题。

设计内容都该当有所依据，当其他人质疑时，可以系统有底气的阐明设计内容。
设计师可以利用栅格让画面更有调性，让内容更具可读性；可以快速校准元素的位置，让画面更平衡；可以模块化地管理元素，让版面更有层次感。

1.3 栅格根本七要素

1.3.1最小单位

须要先定好界面的单位根本，后续内容元素和布局规则都是基于它整数倍递增。

网页端 最小单位：10

移动端 最小单位：3、4、5

1.3.2 总宽度 / W

总宽度：对整体布局进行规范，且还可以担保设计尺寸的统一性。

界面设计要有详细尺寸，由于内容多少不愿定，以是高度没有办法定去世，但内容区的宽度是可以定的。

1.3.3 列数 / N

列数是界面总宽度设定好后，纵向平分成几列。

网页端：12列、24列（常用等分列数，当然不是固定的，须要根据自己的内容设定列数）

移动端：6列（常用等分列数）

1.3.4 大列宽/ L

把界面总宽度平分成几列，每一列的宽度即为大列宽。

打算公式：L = W / N

大列宽包含：列宽和水槽

1.3.5 水槽 / G

相邻两个列宽之间的间隔是水槽。

水槽宽度越大，页面留白和呼吸感会更好，反之则更紧凑。
水槽可以将内容更规范的区分开来。

1.3.6 列宽 / C

把界面总宽度平分成列，相邻两列之间的间隔（水槽）减去后便是列宽。

1.3.7 安全边距/ M

界面旁边担保可读性和都雅度的得当的空隙便是安全边距。

Sketch里设置水槽后，安全边距是水槽的0.5倍。

打算公式：M = G / 2

安全边距：

除了利用水槽的0.5倍，还可以利用0、0.5、1.0、1.5、2.0等水槽的倍数。
举例：水槽是20，利用0.5倍，安全边距为10；水槽是20，利用2.0倍，安全边距为40。

各种公式汇总：

N 是自定义设置的列数

综上所述，在Sketch里设置栅格，定义好3个数值即可，总宽度、列数、水槽，这三个内容定义好数值后，其他内容就会自动打算，一个栅格就天生了。

如果没Sketch，也可以在AI天生一个栅格！

栅格打算办法

已知：

宽度（W） 列宽（a） 列数（n） 间距宽度（i） 列数+间隙（A）

公示如下：

办法一

W=（a×n）+（n-1） i

办法二

由于：列数+间隙为A

也可得(A×n)-i=W

AI操作方法

1.比如950PX为类，仿照浏览器背景1920，新建紧张区域950px；

2.选中950矩形，进行工具—路径—分割为网格

3.输入总宽，列宽就可以自动帮你打算了

通过AI也可以做个大略的栅格系统，可以考试测验一下！

二、主流网站如何利用栅格系统

2.1 电商网站

看一下两个主流电商如何利用栅格布局页面，进一步加深对栅格系统利用的理解。

（左 淘宝 & 右 京东）

淘宝布局

下图包含：

第一张图为完全内容展示布局

第二张为浏览器缩小时内容展示布局

淘宝布局分为4列内容：1、2、3、4，第二张缩小后，内容3则被隐蔽。

栅格布局：

第一张图完全内容展示布局：网页总宽度为1200，列数为24，水槽为10；

第二张图浏览器缩小时内容展示布局：总宽度为990，列数为20，水槽为10。

在第二张图栅格布局里，隐蔽4列，内容2宽度变窄占10列，其他内容不变。

栅格布局设定后，可以很方便打算出每个模块内容的宽度

栅格的列数，根据详细内容设定。
内容模块较多，建议等分列数多一些，随意马虎布局；如果内容模块较少，等分列数也可以少一些，就像淘宝可以平分成24列，也可以平分成12列。

栅格布局设定为12列，每个模块内容的宽度和上面平分成24列的宽一样

京东布局

下图包含：

第一张图为完全内容展示布局

第二张图浏览器缩小时内容展示布局

京东布局和淘宝布局一样分为4列内容：1、2、3、4，在被缩小的情形下，内容3被隐蔽。

栅格布局：

第一张完全内容展示布局：网页总宽度为1200，列数为24，水槽为10；

第二张浏览器缩小时内容展示布局：总宽度为990，列数为20，水槽为10。

在被缩小的图二的栅格布局里，隐蔽4列，其他内容不变。

京东栅格布局，每个模块内容的宽度如下图

再来强调一下：栅格的列数，根据详细内容设定。
京东网页平分成24列，也可以平分成12列。

栅格布局设定为12列，每个模块内容的宽度和上面平分成24列的宽一样

三、如何用栅格系统布局页面

第一步：确定页面宽度，比如1920、1800、1600、1366、1280等等

第二步：剖析内容平分的繁芜度，如果内容大略只须要3、4平分，12列的栅格系统即可。
如果有较多不平分的可能，还是建议采取24列的栅格系统，可灵巧设置。

第三步：根据内容布局页面，确定模块之间是否有“间隔”，间隔尺寸是多少，6px、8px、10px、12px、20px选一个方便打算、方便影象和整除的数值即可。
就像过去，开拓职员创造960px是最适宜作为网格布局的宽度，由于960可以整除3，4，5，6，8，10，12，15，是不是溘然创造设计实在是一道数学题。

3.1 网页举例

根据详细内容，利用方格布局全体页面。

Sketch栅格设置，这里的总宽度1190是内容设计的实际宽度，设计页面宽度是1920，由于有些内容展示选用居中布局办法，两边留白。

四、影响网页设计的两大成分

分辨率和浏览器

4.1 什么是分辨率？

比如19201080px，全体屏幕可以算作是由很多小方格子组成，一个像素便是一个小格子，横向有1920个小格子，竖向有1080个小格子。

电脑屏幕是14寸还是15寸的，尺寸不变，电脑分辨率是可变的，在同一个屏幕上，分辨率越大画面就越风雅，反之就越模糊。
当下比较盛行的屏幕分辨率：1024768、1366768、1280800、12801024、1440900、1600900、19201080等。

4.2 浏览器

设计网页时要考虑好浏览器，主流的浏览器有谷歌、Safari、火狐、IE、欧朋等。

由于不同浏览器工具栏高度不同，如果设计内容须要在小屏幕上展示，就要考虑到打开浏览器默认页面及全屏页面的高度展示情形，如果浏览器所占高度较多，那么内容展示区域就被压缩了，以是就要考虑将最主要的内容只管即便放在上面。

下面来看看最近一年浏览器市场份额占比情形。

五、GridGuide工具先容

网址：http://grid.guide/

5.1 GridGuide先容

利用办法：输入3个数值，自动天生所有可利用的栅格最佳组合方案。
打开网页，她长这样

网页包含4大版块内容

关闭与栅格操作无关的信息，如下图点击「Dismis this message」可隐蔽产品先容内容

关掉产品先容后，显示如下图

5.2 如何设置栅格

栅格系统设置只须要设置3个数值即可，是总宽度、列数、水槽，而GridGuide工具，设置的是总宽度、列数、水槽的几倍(也便是旁边两侧安全边距)，如下图

输入总宽度、列数、水槽的几倍，3个数值后，自动天生所有可利用的栅格最佳组合方案，如下图

自动天生的栅格，司帐算出每个方案「列宽、水槽」的数值

上图设置的内容，「水槽的几倍」为0，以第一个方案为例，水槽为12，120=0，以是安全边距为0，如果「水槽的几倍」设置为1.0就会天生下面这些方案

「水槽的几倍」设置为1.5又会天生下面这些方案

「水槽的几倍」可以选择设置为0、0.5、1.0、1.5、2.0等倍数。

刚才设置「水槽的几倍」为1.5不变的情形下，再设置下「总宽度、列数」这些数值，看看又会变革出哪些神奇的方案呐，如下图

5.3 如何用栅格布局页面

首先评估下内容，选取一种最适宜自己内容的栅格方案，下载后放在设计软件里设置出栅格系统就可以了，如果没有可以自动天生的功能，也可以自己绘制。

实在栅格系统理解后是不是觉得也挺大略的，最主要的一点：栅格是赞助页面布局的，以是须要根据实际内容灵巧的利用栅格，而不要被栅格所束缚了，把稳灵巧利用。