我刚开始做界面设计的时候，排版全靠感觉。标题放在这里看着还行，正文往下挪一点，按钮居中对齐，左边的卡片和右边的卡片目测拉到差不多宽的位置，然后只要感觉"挺整齐的"，就算过关了，接下来就是打包设计稿交付研发。

但随之而来的问题开始显现，只要产品经理有新增字段或者内容修改需求，比如说左边的卡片要加一行描述文字，我加上之后，卡片高度就变了，然后就和右边的卡片无法对齐。于是我调整了一下右边的卡片高度，结果它和下面的内容之间的间距又发生变化了。当我调完间距，发现整个页面的元素关系全乱掉了，每个元素的位置都需要重新调整。一个本来只需要改一行文字的需求，最后花了整整一个小时重新排版才完全搞定。

后来我才意识到，不是我的审美出了问题，而是我的排版方法有问题。我把每个元素的位置都当成一个独立的因素去考虑，每个位置确定都是"跟着感觉走"。这种做法在做第一次排版时还能凑合用，但只要页面发生任何调整变化，所有位置都需要打散重来，因为它们之间没有任何规则关联和约束，改动一个局部，就会牵连整个全局。

而今天我们来讲的网格系统，就是专门用来解决这个问题的。

一、网格在做什么事

网格给页面提供了一套定位规则。有了这套规则之后，元素的位置就不再是设计师感官确定的结果，而是从一套规则里面推导出来的。标题放在第一栏到第八栏的位置，侧边栏占第九栏到第十二栏，卡片的宽度是三个栏加两个间距。每个元素的位置都有明确的理论依据。

设计师在排版时，不需要逐个元素去目测它们是否对齐。只要所有元素都按照网格的栏线放置，它们之间的对齐关系就自动成立了。标题的左边缘对齐到第一栏的左边线，正文的左边缘也对齐到同一条线，两者之间的对齐关系就能确定，不需要手动拉辅助线去检查。

对齐之外，网格还让布局可以复用。一个页面的网格定好之后，同一套网格可以用在整个产品的所有页面上。列表页、详情页、设置页，虽然内容不同，但底层的栏数、间距、边距是一致的。设计师在做新页面时，不用从零开始定义布局结构，只需要在已有的网格上安排内容即可。不同页面之间也因此获得了视觉上的一致性，用户在使用页面跳转时，也不会觉得每个页面的排版逻辑不一致。

在团队协作中，网格的价值更加凸显。当一个设计项目由多个设计师共同协作完成时，如果没有网格，每个设计师对"这个元素放在哪里"的判断标准都不相同。同一个产品的不同页面，可能会出现完全不同的间距习惯、不同的栏宽比例、不同的边距处理方式。用户在使用产品时会明显感觉到这种不一致的存在，即使说不出具体是哪里不对，但整体的观感就是"不够统一"。网格作为团队共享的定位规则，把所有设计师的排版行为约束在同一套体系内，避免了各自为战的情况。

对设计师个体而言，网格也在节省决策成本。排版过程中，设计师需要做大量的位置决策，元素放在哪里、占多宽、和旁边的元素隔多远，都需要做设计判断。没有网格系统的支持，每个决策都需要从零开始，设计师需要反复调整才能找到"感觉不错"的位置。有了网格之后，大部分位置决策变成了在固定的栏线上做选择，决策的范围被大幅缩小，设计师可以把精力放在更重要的事情上，比如内容的层级关系、信息的组织方式，以及交互的合理性。

二、四种网格类型

界面设计中常用的网格有四种类型，每种类型的划分方式和适用场景不同，设计师需要根据页面的内容特征来做进一步的选择。我们本文先把四种类型的基本概念和适用范围说清楚，接下来我们会结合多篇文章，逐一讲解不同网格的使用方法。

1. 手稿网格（Manuscript Grid）

手稿网格（Manuscript Grid）是最简单的网格形态。整个页面通常只有一个内容区域，所有内容按顺序排列在这个区域内。手稿网格来自于传统书籍的版面设计，通常一页纸上只有一块文字区域，四周留出边距。在界面设计中，手稿网格适合以连续阅读为主的场景，比如长文章页面、电子书阅读器、帮助文档。这类页面的特点是内容结构大都为线性，用户可以从上往下阅读，不需要横向并排展示多组信息。