资深设计师心得：网格，更科学的排版方法

作者：sky，微信公众号“我们的设计日记 ”

为什么要学习网格

有效、有规律的设计布局是设计的一个基本原则，网格无处不在，可能只是你没有注意到它的存在，简单理解就是把一个页面，根据版心划分为无数统一尺寸的网格，广泛应用于杂志、画册、门户网站、UI设计等平面设计领域。

它能让你的设计更有秩序、更有规律，简单来说就是用更科学的方法去排版。

▲ 谷歌material响应UI基于 12 列网格布局

该网格在布局之间创建视觉一致性，同时允许各种设计的灵活性，网格列的数量根据断点系统而变化。

2. 网格的基础概念   

列

列是网格的垂直部分也可以理解为内容区域，网格中的列越多，其灵活性越大。但是列并不是越多越好，PC端一般是 12 列，移动端一般是 6 列，特别是移动端不适合列太多，列太多会让页面更碎。

▲ PC端 970 为分辨率网格分为 12 列

▲ 移动端一般分为 6 列

行

行是网格的水平部分，也是横向部分，它们通常在网页设计中被省略。具有行和列的网格称为模块化网格，移动端行间距用的比较少可以忽略，一般在UI设计师中就是横向的间距。

内容模块

也叫内容区域，填充设计内容，模块是由行和列交叉创建的空间单位。

组合区域

区域是形成组合元素的列，行或模块的分组。

水槽

列和行由水槽分隔。沟渠越紧，视觉张力就越大。如果你希望你界面间距大点，水槽就可以留大，相反水槽越小，越紧凑，注意一点，水槽里面是不要放内容，除非和区域一样组合使用，内容尽量放在模块里面。

▲ 图中橙色区域就是水槽

这里做设计时候是模块和模块之间间距，最好不要放内容。

屏幕边距

边距是网格列和行之外的空间，不要填充内容，移动端主要是两侧空间和屏幕边缘的距离，这里设计时候切忌不要填充内容，保持页面骨架边界。

▲ 黄色区域就是屏幕边距，设计时候切忌填充内容，保持设计骨架统一

上述基本就是网格的一些常用单位，当然还有更细分的流线，标记，还有各种网格类型。但是今天我们主要学习移动端的网格，只需要掌握：移动端一般分为 6 列，内容区域（UI设计元素，内容）一般放置到内容模块和组合模块，水槽和屏幕边距保持留白，不放内容。