高效利用栅格系统，与程序猿和睦相处
传闻程序猿总是跟设计狮拔刀相见？
讲道理，是不是总有很多涉世未深的小设计狮不能理解狂拽酷炫吊炸天的设计怎么就被程序猿实现成了介个样子？？？嗯嗯额......栅格系统听过没？版式设计网页设计等师敲黑板的时候是不是在梦游～
回归正题，对于UI而言 “栅格系统” 为什么肯定很重要？因为除了缩减与程序猿的交流成本外，更重要的是能帮助实现设计稿的统一性和一致性，让你的界面显得更加专业化系统化。听不懂没关系，我们先来欣赏一下优秀作品：
（图片来源：dribbble.com）
一、栅格系统的基础认知 —— 专业、高效、响应式
可以保证整体设计的一致性、专业性，避免无效的尝试；
官方通用语言：栅格系统。遵循其设计，可以使元素、模块界面等都有规律可循，减少设计决策时间以及沟通损耗，高效利用开发时间；
为了适应多屏趋势，‘栅格系统’ 便于开发响应式布局（不同尺寸屏幕可以适配网页大小），顺便推荐一个响应式开发者网站：bootstrap ，了解一下可以拓宽知识领域
(滴滴官网不同尺寸屏幕适配)
二、如何建立栅格系统
我们都知道iOS端的切图像素必须是偶数，如果是奇数（上图标蓝所示）也就是有 “次像素” 则显示屏上该部分清晰度会打折扣。PS：同理，移动端的文字都是 “无衬线字体”，因为没有 “笔锋” “勾勒”，大大增加了阅读流畅性。
栅格是由一系列有规律的小网格组成的，每个网格都是1个像素。而网格又是构成栅格系统的最小单位。UI设计中，我们通常使用 “8” 作为栅格的最小单位；
倍数处理。以“8”为倍数，可以被大多数主流屏幕整除，可以最大程度上避免出现半像素的情况。同时 “8” 能同时兼顾iOS和Android系统，足够普适
为什么Android也要兼顾偶数原则呢？因为使用偶数可以在界面缩放中最大程度避免类似于0.5、0.75、0.125等次像素出现，从而保证页面中的元素能在大多数场景下有比较精致的细节表现。
三、建立栅格系统：列+槽
栅格系统就像表格，都是一列一列组成的
1.列：栅格的数量单位，比如1比如12栅格就有12个列，主流12/24等分（web：12/24 app：6）
2.槽：页面内容的间距，槽的数值越大，页面留白越多，视觉效果越松散；反之亦然。槽通常设为定值。
三、建立栅格系统：槽的安全边距
1.设计屏幕的安全边距可以增加界面的可读性和美观度。
2.槽的区域不可防治内容
3.槽值计算公式： 列宽：槽 = 3:1 （例：列款为120，槽值为40）
注意下面两张图，深蓝代表槽，浅蓝代表列。左图的槽是无安全边距的，因为界面的最左边并未留有空间，而右图两边都有深蓝色的槽值，则代表两边皆留有安全边距。
右图的优势在于显得界面更规整，更透气；所以注意建立栅格的时候要给两边建立安全槽值。
三、建立栅格系统：盒子结构布局
1.建立好基础栅格之后，一个模块通常会占用几个栏和列的宽度，确立内容层级盒子承载区域内容；
2.实际业务中，同一个页面上使用一到两组比例值的组合来布局是比较合适的（左 上 下）；组合形式过多页面就会显得琐碎、杂乱，不利于阅读和使用
三、建立栅格系统：元素间距设定
1.定义栅格原子单位为8，各元素间距的变化也应遵循8n 的规律。使页面富有节奏感跟韵律感；
2.n可以带小数点，特殊情况特殊处理，灵活运用。
（图片来源：UX Boy ）
例图欣赏：
（图片来源：dribbble.com）
好了，到这里已经介绍完栅格系统的相关应用知识了。最后教教大家如何在软件中设置它：
1.SKETCH:【显示】-【画布】-【网格设置/布局设置】
（PS：如果画布的标尺工具已打开，可以直接在刻度尺上右键调出网格设置）
注意：装订线宽度就是槽值 / 列宽就是单个内容区域的宽度
2. PS：【视图】-【新建参考线面板】PS里选定预设值，其他数值会有相应变化，较方便。
“栅格化的目的是用持续、一致的视觉语言带给用户严谨、可靠的心理感受；同样，允许“不完美”的尺寸，一切以整体界面呈现的节奏感和韵律感为主”
