栅格系统怎么应用

栅格系统在使用核心思想是，内容元素必须位于若干列，可以任意分割，比如 6×2、3×4、4×3；水槽内禁止放任何内容元素，内容元素应该要在列宽以内；父级元素对齐栅格，子级可以不完全对齐列；除非特意设计，否则不要在列之外区域放置元素。

栅格系统简单来说，栅格就是格子。它并没有多高深复杂，可以把他想象成一个个的格子组合起来，就很容易理解了，比如我们小时候用过的方格本，以及现在流行的像素本。所以栅格就是利用网格进行分类排版，由网格演变而来的另一种说法。使用栅格系统，能让你的设计具有正式感和规范感，还具有一种结构分明的设计感。那么栅格系统在设计中的运用必须遵循什么准则？栅格系统使用方法是什么？

栅格系统的应用准则

1.栅格系统的核心思想是：内容元素必须位于若干列上，可以任意分割，比如 6×2、3×4、4×3。

2.水槽内禁止放任何内容元素，内容元素应该要在列宽以内，而不能流出在水槽之外，这样会违背栅格化的目的。

3.父级元素对齐栅格，子级可以不完全对齐列

4.除非特意设计，否则不要在列之外区域放置元素

所有重要的内容都应该与总宽度相适应，有时候也不能把总宽度当作全部内容区域，还需给它设定一个内边距，此时它就充当起了留白的作用。不要在网格内部利用列宽当成内边距，而是要与网格最边缘保持对齐，利用网格外部的间距来当作留白区域。

栅格系统使用方法

栅格系统最主要的是学会如何在 UI 设计工作中去使用这套方法。在实际项目中去实操练习，熟练应用。

1.布局

根据需要，使用不同数量的栏，去排列组和我们想要的布局样式。以 6 栏为例，简单列了几种组合方式。如 1 排 1，1 排 2，1 排 3…,栏数越多，组合方式就越多，在设计中我们可以把常用的组合方式排列出来，后续设计中可以直接拿出来用，大大提升设计效率。

2.定义有意义的间距

栅格系统更多的解决了页面的基本骨架。但是页面元素之间的间距也需要我们有规律有节奏的去定义。比如我们的留白间距规则。很多设计师设置的数值都是一些无效数值，比如 4，8，12…这些间距之间的差异是很小的，让人很难看出组与组之间的亲密关系。所以！！一套有意义的间距数值是很有必要的。一般数值的设定为 XS、S、M、L、XXL 这五个数值，也就是最小间距、小间距、常规间距、较大间距、最大间距。就像我们买鞋子一样，就固定住了这几个尺寸，设计中的间距也一样，这样能让组与组之间区分更明显。让留白更有意义。同时也能让设计师们更加有默契，减少对基础间距设置的思考。

3.灵活使用栏与水槽

很多同学在刚学习栅格系统时，会让自己的设计元素，比如文字、图标去对齐、卡死栏目的边缘。这种使用方法是错误的。因为栏只是内容的承载容器，我们的设计元素在这个容器里的摆放是多样化的。我们需要去灵活使用，而不是非要让所有元素对齐在同一竖线上！！！！

栅格系统的使用一定要在平时多研究，多实操。我们可以找一些好多产品比如淘宝、支付宝、爱彼迎、pinterest 等产品的界面去研究他们的栅格系统，然后灵活的应用到自己的设计中。栅格系统看似简单，其实在刚开始学习的过程中一定会遇到很多困惑与挑战，只要我们坚持做下去，多练习就一定会掌握的。