网格系统总结：从初识到应用
目录：
1.什么是网格
2.为什么要使用网格
3.网格系统中都包括什么
4.如何制作网格系统
5.如何使用网格系统
6.总结
“网格”简单来说就是一些横竖相互垂直的线，将页面分为各种“列”或“模块”。这种系统开始是书面书籍的辅助线，在打印版式中备受青睐。它可以把页面分成许多区域，将文字或图片变成“设计元素”填入其中。避免让设计师在大空白页上抓瞎。
就好比画素描面部时候的“三庭五眼”。也是需要提前画出比例辅助线，再在其中画出细节。鉴于平面设计和界面设计当中有很多的共同点，通过后续演化，这种技术已完美的移植到了互联网线上产品当中。网格系统也已成为界面设计当中不可或缺的辅助技术之一。
①梳理页面
网格是一种可以梳理结构的利器。它可以让显示的信息更加规整且平衡。用户希望可以快速的梳理出页面当中的信息。如果页面过于杂乱，影响了用户的认知速度，后果就是会直接关闭页面离开。
②响应式设计
现在人们会用多种不同设备去查看页面内容。如果不按照一些标准或框架去约束设计，当网页被缩小放大时，其中的内容就会变得异常混乱。对于用户来说，在阅读体验上是灾难性的。同样也会给开发人员带来很大的麻烦。
如果将网格当做标尺，对页面进行很好的切分布局，那么在这种“一致性”的标准下，可以大大减少开发的成本。这种“一致性”，也让整套页面看下来更有节奏，因为用户的眼睛一直在被无形的框架引导着。无论页面的大小如何变，框架依然会让页面保持整齐。
③效率性设计
一整套页面都用同样的框架来设计，可以让我们不再为调整细节而消耗时间。可以很好地做到重复性使用，大大提高设计效率。在对接项目的时候，对接人也可以按照标准快速上手。后期修改或改版时，也有规律可循。
④专业性体现
当甲方因不满意而让我们修改页面的时候，有一部分原因是我们没有很好地表达出自己的想法，没有让甲方充分理解我们的思考过程。当页面附带上网格且添加了说明，这种严谨专业的形式势必会减少沟通成本，让对方更加了解我们的设计思路，有理有据体现专业性。
既然是系统，那就不可能是简单的几根辅助线这么简单了。网格系统中，主要包括的元素有“宽度”、“列”、“水槽”以及“边距”。
①宽度
内容区域宽度，是我们的主要设计区域。但也有一些特殊的设计，比如悬浮的装饰、内容的延展等等，是可以合理超出内容区域宽度的。不过，核心内容需要在宽度内显示。
有一种网格被称作“网格之王”，也被叫做“960网格”，它的内容区域宽度是960像素。原理是现代显示器至少支持1024×768像素分辨率，而960可整除2、3、4、5、6、8、10、12、15、16、20、24、30、32、40、48、60、64、80、96、120、160、192、240、320和480等数字。这使其成为一个高度灵活的数字，且有更高的延展性。因此，被称作“网格之王”并不为过。
现在，显示器的屏幕尺寸越来越大，“960px”的经典尺寸在某些领域网站的页面中显得有些力不从心。比如视频类网站、电商网站、工作室网站等等。这些网站很多都强调视觉冲击力或者是信息量巨大。因此，个人认为网站的宽度还是要“具体内容具体分析”。需结合所属领域或展示内容，以及公司规范来制定具体内容区域宽度。
国内的设计类网站宽度一般在1200-1400px；视频类网站在1600-1800px不等；电商类网站在1200px左右，可供参考。
②列
最常使用的列数是12列、16列等，每列宽为60-80像素。但列数和列宽的数值并不是绝对固定，和设备以及展示内容有很大关系。比如在PC端上是16列，到了平板上就会变成8列，手机端又变成6列或4列。像一些个人网站、图库网站并没有那么多的内容，可能仅需4列就足够了。而后台页面因为展示内容非常多，信息量大。因此，可能会需要更多的列数。
③水槽
水槽是列与列之间的间隔，最小间距不小于8像素。常用的间距有8px、10px、20px等等，数字并不固定，和列一样需要匹配具体内容。列+水槽的组合，也可被称为“栅格”。
④边距
边距是内容区域之外的内容。我们左右拉伸一个页面，内容区域与两边边界始终有一段留白区域，保护着内容不与显示器边界挤在一起。这个边距一般是不能放任何内容的（特定的装饰元素除外）。类似于印刷品中的“出血”。数值并不需要太多，一般在10-20px左右。而移动端的左右边距尺寸在20px-40px不等。
①公式
假设内容区域宽度为W，列宽为a，列数为n，水槽/外边距宽为i
那么可得W=(a*n)+(i*n)-i
因为a+i=A
所以W=(A*n)-i
例：
当我们使用12列网格设计，每一列网格宽为80px，水槽宽为20px；套入公式可得W=(80+20)*12-20=1180 内容区域的宽度为1180像素。得到了公式，我们只要填入相对应数值，就可以得出其他的数值。
另一种情况：
我们可以设定内容区域为整数值，外边距为20px；在前端开发时，可以使用css中的Margin属性挤出外边距。这样可以保证宽度的整数值尺寸。
②工具
a.PS参考线设置
新建画布——视图——新建参考线版面——调整数值
b.Sketch参考线设置
新建画布——view（视图）——Layout settings（布局设置）——调整以数值
c.网站Grid.Guide
右上角调整宽度、列数、外边距即可。
③注意事项
a.如果不确定宽度、列数等参数，我们可以先画草图，并通过观察测量相关主流产品寻找灵感。
b.时刻考虑自适应的问题，要考虑页面在不同宽度以及移动端时候的状态。网格系统要时刻保持并使用。
c.不能为了网格而网格。我个人也接触过一些页面的源文件，发现里面的网格虽然规范，但与实际内容并不匹配。所以，网格是手段，而不是目的。
①8点网格
建议我们的设计元素都要是8的倍数。因为，大多数流行的屏幕尺寸都可以被8整除。“8”这个数字在开发人员那里更容易理解，且更有说服力。同时，用8作为设计的最小单位是可以除尽的。8/2=4、4/2=2、2/2=1；而其他数字比如6或者10，只能除一次。再缩小就会出现半像素的情况。iOS的@1x，@2x，@3x图，用 8 为基数可减少出现是奇数造成一像素偏移模糊的情况。
②网格类型
a.流动网格
当窗口缩放时，内容等比例缩小。到达临界值时，内容排版会改变。
b.固定网格
固定网格，列宽和水槽宽不会改变。当窗口缩放到达临界值时，内容条目的排版会发生改变。
c.混合网格
混合网格，页面缩放时，内容并不是等比例缩放。在不同的页面宽度，会有不同的缩放比。
③模块布局
通过网格的制作，给我们的页面提供了约束后的空间。我们可以在这样规整后的空间中，进行各种模块化的分布设计。
④设计边界
核心设计内容要在网格系统内。同时，设计内容的边界与网格的边界是一致的。如果设计边界不与网格边界对齐，就会出现多余的留白。
内部的水槽不推荐放设计元素。水槽不仅仅是网格的间隔，同时也是设计元素的间隔。
⑤保持创意
网格系统虽然可以让我们的设计更便捷、更有效率、更有一致性，但这也带来了同质化的问题。如今同属性的网站或APP，比如电商类、视频类页面的排版都很相似。虽然，确保了整体的规范以及专业性，但是页面变得不再那么新颖。这不仅需要我们在视觉上更加吸引眼球，在排版布局上也要下功夫。必须在两者之间找到平衡。
1.什么是网格：一种帮助设计师梳理页面并提供合理约束的手段。
2.为什么用网格：效率、规范化、延续性、专业性。
3.网格系统中都包括什么：内容宽度、列、水槽、外边距。
4.如何制作网格系统：ps新建参考线版面、sketch--view（视图）--Layout settings（布局设置） 、网站Grid.Guide
5.如何使用网格：设计元素均用8的倍数、模块化设计、外边界与内间隔、保持创意。
网格系统是帮助我们更好完成设计的方法，而不是制约我们的工具。规范化、专业性都十分重要，但对于设计来说我们的创意更不能丢失。网格系统帮助我们更有效率的进行设计，给我们节省了调整细节以及复用等问题的时间，这样就可以让我们更好的在排版上下功夫。
参考文章
1.http://printingcode.runemadsen.com/lecture-grid/
2.https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout
3.https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/
4.https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
5.https://www.carbondesignsystem.com/guidelines/2x-grid/basics/
