很多刚入门的设计师并不了解珊格系统，也不会利用珊格系统依靠秩序与逻辑去完成设计，这份基础指南，帮你学会珊格系统设计。

一、栅格历史

最早的网格原型，是13世纪由建筑设计师 Villard de Honnecourt 画的图表，其中的比例布局十分和谐，直到现在也依旧应用在书籍设计当中。

16世纪晚期的《圣经》的手抄本。其中有一页采用了两端对齐的排版方式，文字排成两栏并以中心轴为对称轴，这种左右对齐（两端对齐）的排版规则持续了450年，当时还没有“网格”这个概念。

 20 世纪 40 年代后期，第一次出现了使用网格进行辅助设计的印刷作品。由瑞士设计师大师 Josef Müller-Brockmann（约瑟夫·米勒-布罗克曼）所著的《平面设计中的网格系统》一书。

二、栅格优势

1. 减少决策成本保持设计一致性。

栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本；UI 设计也是需要理性的、客观的、具有数学逻辑美感的。熟练运用网格系统能够确保各个布局之间的一致性，提升体验和视觉的一致性，使设计更有秩序感、节奏感。

2.响应式布局

随着响应式设计的流行，使用网格可以跨不同屏幕尺寸的多个设备体验连贯。响应式的要点是为同一个页面设计多种布局形态，分别适配不同屏幕尺寸的设备。
3.提高效率

对设计师：能让设计师高效准确设计界面，多端口屏幕设计减少，提高设计效率；
对开发：节省开发成本，增加配合效率，落地实现更精确；
对用户：秩序感的界面降低了用户的理解成本，让用户体验更好。

三、栅格构成

栅格系统的基础要素主要有：最小单位、屏幕总宽度、列数、栏宽、水槽、安全边距、内容区域。

栏宽度：是栅格当中内容所占的基本宽度，一个栏宽度往往是通过内容宽度、页边距、水槽 排除过后所剩的宽度平均得出，一般常用标准删格分为2，3，4，6，12列页面中水槽及边距设定定值，即浏览器在一定范围扩大或缩小，栅格的栏宽度会随之扩大或缩小，但水槽边距的宽度值固定不变。

最小单位

Ant 有一个最小单位为 8px 的常用模度表，可以作为参考, 这对我们设置页面布局规则将有提效。按照AntDesign的“亲密性”原则，定义了常用的几个间距：

推荐一个sketch插件

Gutter Cutter插件可以帮你在sketch中快速创建自定义的栅格，支持创建水平和垂直的栅格，而且可以自定义列行、槽宽、留白等参数，帮你提高效率。

使用方法：

选择一个图层

执行 Plugins > Gutter Cutter > Vertical / Horizontal Guides 分别可创建水平 / 垂直栅格

在弹出的对话框分别可自定义列 / 行数、槽宽及留白

执行 Plugins > Gutter Cutter > Remove All Guides 可删除所有栅格

Figam小伙伴可以安装Dot Grid插件

四、设计布局

统一尺寸

在设计过程中，设计师还需要建立适配的概念，根据具体情况进行适配，以及考虑那些区块需要动态布局。中台系统的用户的主流分辨率为 1920*1080、1440*900 和 1366*768，一般常用画板1440进行区块动态适配。（优势适配误差相对较小）

左右布局的适配方案

左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定宽度，右侧主体内容根据珊格进行动态缩放；常用标准删格分为2，3，4，6，12列

四分布局

八分布局

上下布局的适配方案

上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，做法是对两边留白区域进行最小值的定义，当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。

设计师通过 4 点来实现设计过程中和工程师的沟通：设计师通过 4 点来实现设计过程中和工程师的沟通：

1、清晰的定义动态布局范围
2、尽量保持偶数思维
3、关键数据的交付（Gutter、Column）
4、区块的定义要从 column 开始到 column 结束

五、总结

栅格系统有助于我们让更好的去设计，而非限制，通过排列组合形成千万种可能性，在界面优雅布局中，结合可用性，要想做出优秀的设计，还需要进一步了解设计背后的科学方法论，不仅要在视觉上突破，更要在设计方法论上得到求证，让做出的设计作品科学合理有理有据，希望能对大家有所帮助，谢谢！

分享两个开源组件库：

ant.design

element.eleme.cn

原文：设计老怪Alan（公众号）

作者：设计老怪Alan

感兴趣可以关注一下，每两周会更新

一篇B端小知识。