网格系统（上）
UI设计的骨骼搭建
前言
网格系统，系统英文为Grid Systems。网格其实在我们的生活中无处不在，对于UI来说网格系统就好比整个页面的骨架支点，它会让你的页面更加有秩序，有规律，使页面更加有科学性的进行排版，使页面有数据性的去设计。
一、什么是网格设计？
1、定义
是一种用于对其的工具，由平行排布的纵向和横向交错的线组成，常用于对齐图形、文字和图像，并建立这些内容之间的秩序和规则，是系列性设计保持一致性的骨架。
2、基本要素
单元栏、栏间距、边距
3、常见的网格类型
手稿型网格、栏式网格、模块式网格、分层型网格
手稿型网格特点：中间内容，四周都是栏间距。常用于书籍。
栏式网格特点：常用于UI设计，杂志、海报。
分层型网格特点：图像展示类网站，中间没有水槽。
模块式网格特点：常用于报纸、海报、PC端数据、表单类客户端。
4、网格的应用
我们经常看到的报纸、海报、杂志、移动端设计，等很多地方都运用到了网格。我们在使用网格时，首先要考虑它服务于什么内容。
比如产品的超市宣传单，运用的是模块式网格，内容更紧凑一些，希望是将超市的产品更多的的展示给用户，制造一种玲琅满目的感觉。
比如海报设计，可以运用栏式网格，将文字对齐在整个网格空间就可以。
5、怎么定义网格的大小
网格是根据内容去设计的，不同的内容、产品对网格的要求也不一样，网格是没有标准的固定答案，一切都是根据具体内容去设定的。如果希望内容松弛一点，网格可以大一点，希望内容满一点，网格密度可以小一点。
比如杂志海报，要有时尚感，需要留白多一点，制造空间感。
二、网格工具
Sketch和Photoshop里都有各自相对应的小工具和插件。
三、如何设置网格参数
在定义网格时，我们会考虑该设置多少栏，多少栏间距，多少边距。其实没有正确答案，我们需要不停的去尝试，参考，对于UI来说，会有一些常用的网格。
网格没有一个标准答案，是根据产品的气质决定的，如果希望产品留白大一些，边距可以大一点15-20，水槽可以大一点。网格的数值不是一成不变的，是根据实际需要而变化的。有的时候会存在除不尽的情况，在网格中多1像素和少1像素问题是不大的。
四、网格如何对齐
网格要把强调、重要的元素放在整数倍的单元栏内，并让他们对齐。
在使用网格时，我们可以把内容放到水槽里，但是必须连带旁边单元栏一起使用，内容间距只能空水槽，不可空单元栏。
五、网格如何布局
根据设计需求，可以使用不同数量的单元栏来组合成你想要的布局。
六、网格推荐书籍
