给设计师讲透栅格——看这一篇就足够了

时间：2023-09-28 23:54:01 | 来源：网站运营

时间：2023-09-28 23:54:01 来源：网站运营

给设计师讲透栅格——看这一篇就足够了：最近做批采商家后台一期的项目时遇到了一个问题，没有模版可套的时候，设计咋做？模版是什么，是基于前人的工作成果，缝缝补补修修改改做设计，不经意间设计难度就降低了很多。这次做一个新的pc后台，没有现成的组件模板套进去，我就无了，慌了，怎么对齐？模块做多大？怎么才好看？

我的心路历程：没导航>居中处理>三个模块从上到下排>看看规范的栅格是怎么定义的>就这么做吧先...

当然最后的结果是我们也要加上导航，也没有居中处理。但在这个过程中，我意识到了从0到1做设计的时候，栅格是个好东西，在很多模凌两可逻辑弱的设计中，除了“美观度”这种说辞外，你可以说，这是按照栅格做的！是增加设计逻辑性，更容易说服人的一种方式。看了无数网文，请教了部门大神发芽老师以及跟前端大哥聊了一下他们的工作方式以后，我决定要写一篇东西来总结一下，栅格是什么，栅格怎么用，并立志写成一篇全网最通俗易懂的栅格说明文。

从网格聊起

栅格，是发源于平面设计中网格的一种网页设计工具。简单了解一下网格，有助于我们接下来理解栅格。网格，简单讲就是把一个页面分割成既定数量的方块，设计内容按照这些方块来进行布局，对齐。我们可以把这些方块理解为基础单元，一个页面被分成一定数量的这样的单元，在填充内容进去时，我们跟合作团队沟通的语言就不再是从这个图片宽高多少，文本多长时换行这样数据维度，而是这个内容占了几个单元。基础单元成了设计的度量衡。如下图。有的图片占据1个单元，有的图片占据4个单元，这样做有什么好处？1，对齐。网格是一个很好的对齐的手段，非常省力。2，版面布局。重要的需要突出的部分占更多个的单元，需要弱化部分的占据更少的单元，设计就有了起始点，同时能在调整布局时完美的兼顾整洁有序。3，设计的理由。审美是个主观的事，当设计师遭遇各方大哥们的挑战说你这个图再大一丢丢这个地方再进去点（天知道这个一丢丢是多少！），你可以有理有据的拿出网格这样一个规范的设计工具来battle。

由此，我们可以通过网格，来给工作原理一脉相承的栅格下定义：

从功能角度：栅格是让设计更严谨的工具，栅格是设计师跟外部沟通的工具。

从属性角度：栅格是一种布局的方式。

再细分到互联网行业，栅格还是设计跟前端沟通的工具。

细说说栅格

在互联网语境下，栅格可以解释为，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。由于网页纵向是无限空间，可以采用间距规则来约束。而横向是固定尺寸，1920，1440，960等，我们有必要遵照栅格规范来合理的布局。划重点：网格，布局，信息分布。类似网格以方块作为基础单元，栅格是以列作为元单位。如下图。

原理讲清楚了，接下来需要讲讲栅格怎么使用。栅格有三个基本元素，小列，间隙，边距。

小列。简单说，小列就是盛放内容的区域，元素就放在这里。小列就是元单位，我们跟外界对话的语言就变成了：这个卡片，这个图片占了几个小列而不是多少像素。

如果小列紧密排列密不透风，填充的内容就会非常拥挤，因此，我们需要间隙。

间隙。间隙又称水槽，是两个小列中间的间距。水槽的作用就是分隔内容让页面通透的，因此，水槽中不能填充内容，即内容一定是从小列开始，小列结束。水槽位于两列小列之间，因此，水槽数量是小列数量-1。（这点理解不了的小朋友去回顾一下小学数学之植树问题）

（小列+间隙=列的概念我实在不知道有什么用，忘记冗余的知识吧，也欢迎讨论。）

设置栅格时，水槽数值固定，画面的松散通过调整小列的数量实现。网页内容多而细的时候需要更多的小列来让页面更加细分，提供给我们更多的布局组合。如下图。画面有12小列时，你可以根据信息量自由选择6×2,4×3,3×4这样不同的组合，布局会更加机动灵活，适配性高。列数多列宽（小列的宽度）自然就小。当你内容很少，太多的列数也大可不必，4列，6列就可以满足使用。但在很多时候，同公司的产品内容密度差异不会特别大，为了设计的统一性，列数，列宽也可以是固定的。

边距。边距也称为外水槽，是内容宽度之外的空白区域。通常做自适应的距离。例如小屏和大屏之间做响应，就会改变边距。移动设备的边距通常为16～32px，在平板电脑和PC端，这个间距通常会差异很大。

栅格实践

理论讲完了，现在说说如何实践栅格。除去一些栅格插件，我们可以自己在sketch里自己定义。路径：视图>画布>布局设置。

以移动端375屏幕为例，边距我们定义为16，总宽是我们删除掉左右边距32之后的数值343，列数可以自己定义，或者根据公司的规范，移动端一般为8或者12，PC端和平板端自由度较大，4，8，12，24都是可以被接受的。间距宽度就是水槽，一般也是固定的，移动端一般为8，4也可以接受，PC端和平板端可以是8，16，24，32等等，具体根据自己信息布局的疏密度来判断。这些数值是需要我们计算输入的，最后的列宽软件会自己计算出来。

讲到这里，你以为你会栅格了吗？不，你不会。不信大家可以计算一下，按照我举的那个例子，列宽，他有问题。

[总宽（343）-水槽总宽度（8*11）]/12=?

人工计算列宽是小数！！！sketch直接把其四舍五入成最近的整数了。

列宽出现小数是非常正常的，固定这么多数值最后再用除法，没小数才怪。但完全没问题，我们只需要按照整数处理就好，因为，回顾一下前文，我们根本不需要考虑像素的事，我们的对话语言是，这个卡片，这个图片占了多少个列！栅格的元单位是小列，我们只需要定义好内容中每个模块所处的列的个数，前端同学也只会关心这个东西占了几个列，在整个屏幕中比例如何，像素什么的，他们才不管。事实上，在实际工作中，软件会自动把这些小数给摊平，一定会出现有的列多一个像素有的列少一个像素这样的情况，对于一个像素这样的差异屏幕上肉眼根本看不出来，只要模块之间和内部是对齐的，和谐的，这就足够了。

响应式布局和自适应布局

响应式即同一套设计，在不同屏幕尺寸及不同端的展示问题。自适应布局是前端会对不同端写好几套设计，后台会读取屏幕尺寸然后调用不同的设计。这其实是跟前端同学的工作息息相关，作为设计师了解一些之后能够更好的提高自己设计的适配性，同时更好的跟前端同学沟通。

讲解之前，需要先引入一个概念，断点，即随着屏幕尺寸的缩放设计布局发生变化的点。如图。

在响应式布局和自适应布局中，水槽的值一般是固定的，列宽可以变化也可以固定，列数（小列的数量）会变化。举个栗子 ：假设三张卡片分别放在PC端的四列上，平板电脑由于宽度不够只有三列，则其会显示两张卡片，并把第三张卡片进行换行显示在第二行上。

前端布局的框架逻辑跟栅格有点像但又不完全一样，我们没必要了解太深。简单说布局模式有三种，固定网格，流动网格，混合网格。

固定网格

小列和水槽的宽度是固定不变的，变化的是列数。当屏幕不断缩小，设计元素不会有任何变化，页面会先被裁掉一部分，出现横向滚动条。直到到了临界点，会出现内容元素的换行，布局改变。再达到一个临界点，设计的布局又会再次变化。边距会随着屏幕的放大缩小而改变。

设计师的任务：具体到什么临界值栅格的列数会发生变化，需要跟开发说清楚。临界值设置多少、设置多少个临界值。

优点：设计的还原度是最高的，无论在什么什么屏幕下，核心样式是保持不变的。

缺点：在小屏下会有滚动条，给浏览带来麻烦，在大屏上左右留白过多，会浪费空间。

流动网格

水槽宽度不变，列宽与列数会变化。因为列宽变了，即填充内容的容器变窄（宽）了，设计元素自然会动态的放大缩小。到了断点时会换行，布局也会变化。

设计师的任务：跟前端说明元素的布局样式，对齐方式，哪些边距要固定，那些是可以变动的。

优点：在不同屏幕下会自动放大或缩小，更充分的利用空间。

缺点：由于列宽是不固定的，样式可能会发生变形，设计还原度不高。

混合栅格

混合网格，顾名思义，就是混合了固定网格和混合网格的做法。

跟前端沟通下来，用哪种形式他们会有自己的判断，设计师也可以提前思考一步，交付给前端的时候更好沟通一些。总的来说，除了需要写死一些元素的时候他们会关注具体像素，比如导航，一般都是写死的，在更多时候为了自适应他们更关注的还是比例，列数。即作为设计师去纠结间隔几个像素，图片长宽多少没有意义，不同屏幕下都会改变的。重要的是要关注内容在屏幕中所占的百分比，这是栅格最大的意义。

关于栅格的其他

1.不是所有的元素一定要遵照栅格对齐

栅格是一个大的布局方式，在小的模块内部，依然可以有很大的自由度来让设计更灵活。如图，大的模块按照栅格来对齐，在内部可以自由的布局。父级是舒适的对齐的，子级当然可以灵活一些，因为整个元素实际上是在一个不可见的，更大的模块中。

2.水槽中不放内容

栅格应该是小列起小列止，可以跨越水槽但不能止于水槽。因为水槽是画面的留白，是不同内容元素间的分隔，终止在水槽中画面还怎么呼吸？




3.可以去除边距，从列开始布局栅格

成熟的B端产品，导航和状态栏都是有固定规范，前端在开发的时候都会写死，因此自由区域只有内容区。而导航和状态栏跟内容区的间距一般都能固定下来，这就相当于边距了，因此我们可以直接在内容区0边距布局栅格，从小列起始。




写后感：我是一个有点偏执的人，一个事情想不明白我就不想开始，写这个总结前前后后想了两周，查了很多资料，输出的过程太痛苦了。现在也不觉得自己就完全明白了栅格，但彻底明白点啥多难啊，不跟自己较劲了，开心一点。写文的过程是痛苦的，但收获是颇丰的，总结梳理是尽了全力的，内容是严谨的（尽力严谨），我觉得也够了，也欢迎大家批评指正，一起交流进步！




参考文章：

看不懂不会用的栅格系统，这篇帮你彻底掌握它

Responsive grid https://designsystem.quickbooks.com/bolt/responsive-grid/

Responsive layout grid https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

实例讲解：平面设计中的网格系统，怎么用？https://zhuanlan.zhihu.com/p/37392801

交互学姐密丝杨，vx：gardern1 欢迎跟我交流～