什么是栅格系统

产品设计从理解用户到定义问题，再到探索方案并输出草图乃至视觉稿，每一个阶段都关系到一个产品的成败。而其中交互设计与视觉设计是与设计师密切相关的两个阶段，也是最大程度占据我们工作场景的内容。其中关键的信息设计、导航设计、界面设计都能从栅格工具中受益，因为它们概括下来，都涉及到组织信息以提供更合规、流畅、且符合用户习惯的浏览体验。

在面对复杂信息的排版与布局时，设计师如何进行决策，是凭借感觉经验不经思考的随意摆放，还是有一套自洽的理论体系得以遵循并规范化整个设计，且延伸至整个产品线，多业务，多平台成为通用的布局准则。

1. 什么是栅格

一句话概括：栅格系统是用于规范化信息布局，辅助设计人员组织信息的工具，且能够尽可能保证设计与开发过程的规范高效，并提高布局视效的一致性、韵律感、秩序严谨、比例良好等方面。

在平面设计领域通常采用“网格”的方式来规范化布局，网格就像设备屏幕上的一个个像素点，平面设计师将物料核心版面区域拆分为等分的方格，以保证、对齐、节奏、比例、视觉面积等方面的协调感和一致性，从而保证设计美感和视觉传达效率。

但在应用程序相关的产品设计领域，鉴于设备屏幕横向宽度受限但纵向高度无限延展的背景，及真实体验设计场景下，使用无限下拉交互方式承载复杂内容的规则，在产品设计领域往往只需要制定纵向列式分割规则，以规范 X 轴向内容的对齐、比例等布局效果。这就是我们所说的的栅格（与网格作一定区分，常用与产品设计领域）栅格系统不是令人“谈之色变”的超高深技巧，而是设计界约定俗成且广泛运用于平面设计及产品设计领域的设计工具。在涉及到组织信息的工作内容时，合理的使用栅格系统能够从设计效率、设计质量、多角色设计协作等多方面推动设计师的工作。

2. 网格/栅格的发展历程

早在文艺复兴时期，人们便有意识的使用辅助线叠加在图片上的形式来模拟透视关系，且已经开始使用黄金比例矩形。13 世纪，法国建筑师 Villard de Honnecourt 创作了一张图表，试图实现“和谐的设计”。该图将网格系统与黄金比例合并，以产生基于固定比例的边距的页面布局。该技术至今仍在使用，大多数印刷书籍和杂志的设计师都使用 Villard de Honnecourt 的图来创建平衡的设计。