你知道「网格系统」在界面设计中的应用吗？

北京/UI设计师/7年前/752浏览

版权

一开始「网格系统」的出现，就是为了解决平面设计师在进行大量的图片和文本混排时的效率以及美观的问题。特别是针对大篇幅、多版面的报刊、杂志、书籍、画册和期刊的排版时，设计师可以按需求来设置各类文本、图片尺寸和图表，通过网格系统来规范设计内容，不仅工作效率上得到大幅提升，而且还可以轻松的创作出更具有功能性、逻辑性和充满美感的版面视觉效果。

但是在UI设计里，我们也需要视觉表现出具有节奏且信息层级清晰，让用户能够舒适的阅读以及很好地使用产品；

UI设计相对于传统平面设计更强调动态化、体系化的思考。而网格系统就可以辅助我们制定UI设计的界面规则，将界面中所有的设计元素高效有序地组织起来，从而让整个产品的设计具有高度的一致性和逻辑性，避免设计师们凭感觉做设计。

1. 网格系统的定义

网络系统是利用一系列的垂直与水平的参考线，将画面分割成若干个有规律的正方形格子，再用这些正方形格子作为参考，控制视觉元素间的数量与组合，从而创造出一种紧凑、清晰易懂、整洁有序的设计。
关于「网格与栅格」
我理解的网格与栅格本质上是相同的，都是用来规范设计内容的。而不同的是，网格更多的是在平面设计使用中，利用一定规律的格子，将文本与图片填入到固定的格子就可以了。而在网页或者移动端的设计中，因为高度无法确定，使用的是具有一定规律的列去编排视觉元素的。

2.网格系统的基本构成

网格系统是由单元格、内容区域、外边距、列数、水槽、横向间距组成的，它们之间的比例关系与布局划分，构成了一个基本的网格系统。

1)单元格：网格系统是由一系列垂直与水平的参考线，将画面分割成若干个有规律的正方形格子，而这些正方形小格子就是网格系统里面最基本的元素「单元格」。

2)内容区域：在做界面设计前会先确定一个尺寸，由于内容的多少是不确定的，所以高度我们无法确定，但内容区域的宽度是可以定的，也可以理解为网格宽度。页面的内容区域由N个列和（N-1）个水槽组成。
3)安全边距：在界面设计中，我们会先确定好设计尺寸与内容区域，而所有内容都会显示在内容区域里，那么内容区域与内容的左右两端所留出的空间，被称为安全边距。安全边距数值越大，页面显得越宽松，数值越小越显得比较紧凑，因此需要根据自己产品的实际需求去确定具体数值。

4)列：列是网格的数量单位，通常设定网格数量说的就是列的数量。

5)水槽：就是列与列之间的间距，水槽宽度的数值对界面的影响，与完全边距大体上相似，即数值越大界面留白越多，界面视觉越宽松；反之，界面视觉就会越紧凑。

3.网格系统的运用

1)定义设计尺寸与内容区域：当我们开始着手设计一个产品时，首先应考虑设计多大的尺寸范围，也就是确定网格区域的宽度范围。

2)定义最小单位：最小单元格的数值，大多数 APP/WEB 会选择4-10这个范围内一个偶数。但是这个数值不是随便可以定义的，第一需要考虑到是否能被大多数屏幕的宽度所整除，即广泛的适用性；第二从页面的兼容性与可扩展性来讲，还需要考虑的更加长远，遵循「偶数原则」可以最大程度上避免各种潜在的问题。因此我们需要根据产品的实际需求选择合适的数值，4px或6px单元格比较适合界面内容信息较多、布局排版比较复杂的产品，例如：淘宝、京东等电商类产品；而8px单元格对一般的设计场景都可以很好的满足，比较适合大多数的产品。

3)梳理组件之间的间距：既然确定了最小单元格的数值，那么页面里所有的间距、组件尺寸等都需要以最小单位的增量去定义，以达到具有统一性与逻辑性的视觉效果。例如单元格选择为8px，那么所有用到的间距尺寸将会是8px、16px、24px、32px、40px……

4)确定列的数量：我们在设计页面时，列的数量可以是6、8、12、16、24等数值，在定义的过程中，需要考虑这个数值怎样才能最大程度的满足自身产品的实际需求。在 WEB端设计中，列的数值一般会采用12、16、24，但是在移动端设计中，列的数量不宜过多，因为手机屏幕宽度有限，列的数量越多，页面就会被分割的越零散，因此在实际使用中还是以8列和6列为主。24列会比较适用于业务信息量大、信息分组较多的产品，例如后台界面设计；相对12列，24列变化更加灵活，更适合内容比较多样复杂的场景。

5)通过sketch的布局设置：利用sketch的布局设置功能，可以快速搭建出网格系统的参考布局，但在设置的过程中每一项对应的内容都需要注意。