在如今多终端多设备的场景下，多屏设计成为了当今产品设计中需要考虑的重要一点，也是商业设计中不可或缺的一部分。栅格系统能够辅助设计师进行界面排版布局，能够优化用户体验。本文对该系统设计进行了详细的介绍，希望对你有所帮助。

在如今多终端、多设备尺寸的加持下，多屏设计就成了商业设计中不可缺少的一部分，为了让所用界面的视觉表现出统一性和一致性、同时还在不同系统及不同尺寸的设备上保持良好的用户体验，栅格系统就显得尤为重要，它能辅助设计师制定界面排版布局的方案，以网格的形式将多元素/内容链接在一起，很好的做到多平台、多尺寸的适配，让设计美感、工作效率都得到了很大的提升。

一些优秀的产品都在使用栅格去规范界面信息的排版布局，虽然它只是传统设计方式的一部分，但只要不嫌麻烦，就可以使用栅格系统解决很多设计布局的问题。

不少设计师都知道栅格的重要性，但碍于对其一知半解，以至于在设计中总有些无从下手，本文笔者将从浏览过的大量文章结合自身工作经验对栅格作出了系统化的总结，希望能帮助初/中级设计师对栅格有一个更深的认识。

1. 栅格的来源

栅格的概念来源于平面设计中的“网格”，早在13世纪，法国建筑师 Villard de Honnecourt 创作了一张图表，试图实现“和谐的设计”，这也是继黄金比例之后，第一次将网格与其结合在一起，以此产生固定比例的页面布局。

在18世纪工业革命大规模生产的开始，随着报纸、传单等主流印刷品的兴起，设计师们需要解决“将不同的信息传达给不同的人群且能自然浏览、还要防止不同部分争夺读者的注意力”的问题时，栅格的雏形已然显现出来。

20世纪初，设计师们发现使用网格辅助设计印刷作品，可让排版布局更加清晰、信息传递也更加有效，由此演变成了平面设计中的一种方法。

20世纪中期，约瑟夫·米勒-布罗克曼著作了《平面设计中的网格系统》一书对设计界影响至今。

由此不难发现，不管是前几个世纪的印刷刊物、还是如今的互联网产品界面布局，栅格都可以作为组织信息的工具，帮助设计师实现一致、和谐的信息布局效果。

2. 什么是栅格

栅格和网格的英文都以“Grid”来表示，其本质是为了给版面提供一个基本设计框架，这也是为实现有组织的设计其中方法之一，在平面设计中称之为“网格”，而在网页/移动端中更多称为“栅格”。

栅格是根据平面中的网格发展而来，通过一定的规律、合理的设置基准线来规范界面中的元素（文本/图像），让每个区域能够相对独立却又能相互关联，形成整个界面，最终呈现出清晰易读的信息布局。

3. 为什么要使用栅格

首先对用户来说，使用栅格能让内容布局具有规律性，通过定义留白、对齐、分割等各种比例关系，不仅能降低用户认知成本，还能让信息的展现更加清晰，有效提升用户的浏览、接收效率。

其次对于研发团队，栅格通过统一的标准规范对设计师进行约束，协同产出一致性的视觉效果，避免了一人一个样式的混乱场面，同时减少了部分细节上的沟通，提高决策及产出效率。在开发过程中，程序员通过有规可循的设计规律，可对部分组件及模块进行封装调用，不仅高度还原设计效果、还能提高开发效率。

另外，在设计Web界面时，使用栅格系统能一稿适配电脑、平板、手机等不同的设备尺寸，合理兼容多端、多系统下的自适应效果。