我们经常能听到“栅格系统”这个词，但却不知道真正的栅格系统是什么，不知道它在设计中是如何应用的。大厂95%的的设计都会应用到栅格系统，栅格系统在UI设计中的应用是非常广泛与重要的！！一起来学习吧，搞定这套大厂方法～

一、什么是栅格系统

栅格系统（grid systems），也叫做“网格系统”，是一种运用固定的格子来设计页面布局，使布局简洁规范有秩序。

栅格系统无处不在，只是我们没有发现而已。栅格系统就像版面布局的骨架，像一张无形的网在规范着我们的设计，让设计更加有秩序美。

二、栅格系统的作用

1.辅助我们更规范排版布局与信息分布，让页面产生秩序美

2.提高页面布局的一致性与复用性，减少设计师思考基础布局，提升设计效率

3.响应式布局，更好适配不同设备，让开发更好的还原设计效果

任何好的设计的秘密在于它的视觉元素的组织方式和元素间相互关联的位置。栅格系统刚好有此作用。栅格系统在UI设计中的应用，不仅能让页面更加规范，让元素之间更加平衡，看起来更和谐；还能大大提高设计师与开发工程师的工作效率。

三、栅格系统的组成要素

栅格系统是由栏（Column）跟水槽（Gutter）交替分布形成的。栅格系统的组成要素有栏、水槽、边距。

1.栏（Column）

栏是从上到下的垂直空间区域，是承载内容的容器。我们的内容一般都是放在栏里面的（栏与水槽结合使用也是用来承载内容的）。在web端栏一般为12列与24列，移动端一般为6列、8列与12列。具体栏数可以根据产品内容来定。界面布局样式越多、栏数建议越多，因为栏数越多组合方式就越多。

2.水槽（Gutter）

水槽（Gutter）相邻两个栏之间的间距，把控着页面的留白与呼吸感。水槽越大页面布局间距就越大，给人的视觉感受就是大留白、呼吸感强。水槽越小页面就越紧凑，页面元素就会越拥挤。

3.边距（Margin）

页边距可以视为安全距离。移动端主要是两边与屏幕的边缘距离，网页端就是指两边的留白区域。

四、如何制定栅格系统？

1.第一步定好最小原子单位

由于栏跟水槽的宽度是以网格的基本单位也就是最小原子单位来定义的，所以第一步需要先定义好栅格系统的最小原子单位大小。也就是最小格子的大小。比如5px、8px

2.定义边距与栏数

边距大小要根据最小原子来定，边距大小是最小原子的倍数。定页边距后我们就需确定好栏数。移动端一般为6栏。水槽的间距设置一般为边距的1倍或2倍。具体倍数大小还是得根据产品内容来定。想要紧凑一些就把倍数设置小一些，想要页面呼吸感强、留白空间大，就可以把倍数设置大一点。

我们以375*667分辨率为例。我定好最小原子单位为5px，那么页边距我设置为15px，我设置栏目数为6栏，设置水槽大小为页边距的1倍，可以得出列宽为（375-15*2－15＊5）／6＝45，在工作中我们根本不需要计算列宽的大小，因为有很多工具可以帮助我们计算！！

五、利用工具制定栅格系统

你一定会觉得栅格系统的计算太麻烦啦，但是没有关系！！！！我们可以利用这些插件与在线制作工具帮你快速的制作栅格系统，无需计算，快速完成栅格系统的制定。

栅格制作工具

sketch插件flavor。我们只需设置好边距、栏数、列间距，其余的插件会自动计算出来。

下载地址：https://oursketch.com/plugin/flavor

在线栅格计算网站。非常的友好，帮我们列举出了几种常用的水槽与边距的比例，当我们不知道哪一种比例比较合适时，我们可以多尝试不同多比例，选取合适自己产品的。

网址：http://grid.guide/

六、栅格系统使用方法

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

1.布局

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

2.定义有意义的间距

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

3.灵活使用栏与水槽

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

最后

栅格系统的使用一定要在平时多研究，多实操。我们可以找一些好多产品比如淘宝、支付宝、爱彼迎、pinterest等产品的界面去研究他们的栅格系统，然后灵活的应用到自己的设计中。栅格系统看似简单，其实在刚开始学习的过程中一定会遇到很多困惑与挑战，只要我们坚持做下去，多练习就一定会掌握的。盖哥大佬说他学习栅格系统用了3年，所以我们在学习过程中遇到困难也不用太沮丧，只要我们坚持学习，就是胜利。最后祝大家都能学会这套大厂方法，一起加油呀～