新人来收！10分钟帮你掌握栅格系统基础知识！

编者注：看过很多栅格系统的科普，还是看懂？那本绝对值得你十分钟试一！语言浅显直白，配图清晰易懂，保证轻松会。

速栅格系统的线具→ http://grid.guide

文章目录

• 什么是栅系统
• 流如何使栅格系统
• 如何用栅格系统布局页面
• 影响网页设计两大素

什么是栅格系统

栅格系统英为 Grid Systems，有翻译为格系统。

义：运用固的格子，遵循一的规则，行页面的布局设，使布局规范简洁规则。

1. 栅格

栅格早起源于平面设。1692法提高印刷水平，以方格设基础，将一印刷版面分千小格，这就早的栅格雏形。再后，慢慢演变运用固的格子设版面的平面设风格。

2. 网页栅格

包括页端和移端，是规则的格阵列来指导规范界面中的版面布及信息分布。

3. 为什么要使用栅格

通过栅格的使，可逻辑解释商设计的细节问题。

设内都应该所依据，当其他人质疑时，可以系统底气的解释设内。设师可以利用栅格让画面调性，让内具可读性；可以速校准元素的置，让画面平衡；可以模块化理元素，让版面层次感。

4. 栅格基础七要素

最小单位

需要先定好界面的单位基础，后续容元素和布规则都是基于它整数倍递增。

网页端小单：10

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

总宽度/W

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

界设计要有具体尺寸，由于内容多少不确定，所以高度没有办法定死，内容区宽度是可以定。

列数/N

列数界面总宽度设好后，纵向分几列。

• 页端：12列、24列（等分列数，当然是固定的，需要根据自己的容设定列数）
• 移动端：6列（常用分列数）

大列宽/L

把界面总宽度等成列，每一列的宽度即为大列宽。

• 计算公：L = W / N
• 大列宽包含：列宽和水槽

水槽/G

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

水槽宽度越，页面留白呼吸感会好，反之则紧凑。水槽可以将内规范的区分。

列宽/C

把界面总宽等分成列，相邻两列之间的间隔（水槽）减后就是列宽。

安边距/M

界面左右能证读和美观度的、合适的空隙就是安边距。

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

算公式：M = G / 2

5. 安全边距

除了使水槽的0.5倍，还可使0、0.5、1.0、1.5、2.0等水槽的倍数。举例：水槽是20，使0.5倍，全边距为10；水槽是20，使2.0倍，全边距为40。

栅格辅页面布局的，所以需根据实际内灵活的使用栅格，不被栅格所束缚。

6. 各种公式汇总

N 自义设置的列数。

小结

在 Sketch 里设置栅格，定义好3个数值即可，总宽、列数和水槽，这个容定义好数值后，他容就会自计算，一个栅格就生成了。

主流网站如何使用栅格系统

1. 电网站

一看一下两个主流电何使用栅格布局页面，进一步了解栅格系统的使用。

△ 左淘、右

2. 淘布局

下图包含：完整内容展示布局、浏览器缩内容展示布局。

淘宝局分为4列内容：1、2、3、4，在浏览器缩小的情况下，内容3被隐藏。

栅格布局

• 完整内展示布局：网页总宽度1200，列数24，水槽10；
• 浏览缩小时内容展示布局：宽度为990，列数为20，槽为10。

浏览器缩小时的栅格布局里，隐藏4列，内2宽度变窄占10列，其他内不变。

栅格布局设后，可以很方便算出每模块内的宽度。

栅格的列数，根据具体内设。内模块较多，建议分列数多一些，易布局；如果内模块较少，分列数也可以少一些，就淘宝可以分24列，也可以分12列。

栅格布局设12列，每模块内的宽度面分24列的宽一样。

2. 京东布

图包含：整容展示布、浏览器缩小时容展示布。

京东布局淘宝布局一样分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，是是突然发现设计实是一道数题。

1. 网页举例

根据具内容，使用方局整个页面。

Sketch 栅格设置，这里的总宽1190是容设计的实际宽，设计页面宽是1920，因为有些容展示中布方式，两边留白。

影响网页设计的两大因素

响网页计的大因素：辨率和浏览器。

1. 分辨率

什么是分辨率？

比如1920*1080px，整个屏幕可以成是由多方格组成，一个像素就是一个格，横向有1920个格，竖向有1080个格。

电脑屏幕是14寸还是15寸的，尺寸不变，电脑分辨率是变的，在同一个屏幕上，分辨率越大画面就越精细，反之就越模糊。当下比流行的屏幕分辨率：1024*768、1366*768、1280*800、1280*1024、1440*900、1600*900、1920*1080等。

注意：

关分辨率，以选用适合自己团的分辨率尺寸，我们团是梳理出所有产品的分辨率的使用情况，及团产品设计的特点，选取2~3个为续统一使用的尺寸。

2. 浏览器

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

因为同浏览器工具栏同，如果设计容需要在小屏幕上展示，就要考虑到打开浏览器默认页面及全屏页面的展示情况，如果浏览器占较多，那么容展示区域就被压缩了，就要考虑将最重要的容尽量放在上面。

下面看看近一浏览器市场份额占比况。

△ 浏览器数据源：https://netmarketshare.com/browser-market-share

欢迎关注作者微信公众号：「蜗启奏」