交互规范：栅格系统让页面元素间距更统一

网格系统为设计师提供了页面布局和尺寸设置的直观参考，使页面设计有规律，降低了设计决策成本；提高了页面布局的一致性和重用性。本文主要关注格栅系统是什么，如何构建格栅系统，格栅系统的应用 阐述了三个部分。在项目中提前定义网格系统将有助于合作设计师输出高度统一的元素间距页面。我希望它能帮助你理解网格知识！！！ 1. 格栅系统是什么？ 1.1 网格单位 网格是由一系列规则的小网格组成的网格系统，网格构成页面的最小单元。在网页设计中，网格的大小通常被定义为8，这不仅符合偶数的想法，而且可以与大多数主流显示设备相匹配。目前，前端开源组件库是基于8个原子单元。 1.2 列 槽（ Column Gutter ） 格栅系统由列组成（Column）跟槽（Gutter）交替分布形成的列（Column）是网格的数量单位，通常设置网格的数量是指列的数量。例如，12个网格有12个网格，24个网格有24个网格。（Gutter）页面内容间距，槽值越大，页面空白越多，视觉效果越松散；相反，页面越紧凑。槽通常设置为固定值。 1.3 盒子/区域 基本网格建立后，一个内容通常占用几个栏和列的宽度。我们将该区域理解为内容盒，用于承载该区域的内容。 2. 如何构建格栅系统 2.1 确定网格区域的宽度 以《「交互规范」在模块布局中，系统布局使页面模块更加统一 以全屏为例，格栅区域的宽度 = 响应式区域 – 页边距*2。 以《「交互规范」以在屏幕垂直中间选择合适的区域为例，网格区域的宽度 = 响应区。 2.2 确定列的数量、槽的宽度 常见的网格系统通常分为12个网格或24个网格。内容不能放置在槽的区域。我们将为确定栏的大小设置一个固定值。 计算公式： 网格区域宽度 = n*(列宽的度 槽的宽度) – 槽的宽度。 网格化工具推荐： GridGuide 12栅格系统： 在流行的前端开发开源工具库 Bootstrap 与 Foundation 广泛应用于中后台页面设计，业务信息分组少，单盒信息量大。 24栅格系统： 24格栅系统适用于业务信息量大、信息分组多、单盒信息量小的中后台页面设计。与12格栅系统相比，24格栅系统变化更灵活，更适合内容多样、复杂的场景。 3. 网格系统的应用 3.1 横向划分 以12格栅系统为例，格栅区域可以根据业务场景轻松划分为2等分、3等分、4等分、6等分，以及根据等分模块组合的各种不等分场景。 以查询页为例，筛选区域 数据统计按数据统计 按3等分划分，数据列表 按1等分划分。 3.2 纵向划分 纵向间距以8为基础，通过 8px(小间距)，16px(中间间距)，24px(大间距)这三种规格来划分信息层次。 如果这三种规格不适用，可以加减「基础间距」倍数，或增加元素 ( 分割线 ) 打开信息层次。计算公式：y = 8 8 * n ( n