设计师应该懂的栅格系统

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

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

设计师应该懂的栅格系统：

一、栅格系统简述

1692年，新登基的法国国王路易十四感到法国的印刷水平不尽人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。栅格最早起源于平面设计，以方格为设计基础，将一个印刷版面分成上千个小格，这就是最早的栅格雏形。再后来，慢慢演变成运用固定的格子设计版面的平面设计风格。

UI中的栅格

我们将网页端的栅格和移动端的栅格都称为UI中的栅格，定义为以规则的网格陈列来指导规范界面中的版面布局以及信息分布，通俗一点讲，就是根据一定逻辑，在界面中绘制出一个一个的小格子，然后将内容摆在这一个一个小格子里组合起来的一种设计形式。

栅格化的优势

1、逻辑性

很多时候自己做的设计越细小的地方越没有办法解释它为何这么做，不能有理有据的阐述自己的设计，但是商业设计是逻辑性解决问题的设计方式，通过栅格化的使用，这些界面中的尺寸细节问题就能完美的解释了。

2、便捷性

设计师除了本身的视觉设计工作外，还需要跟进对接开发，对是否可落地、实现方式、实现的规范性，复用性的高低、性价比是否合适，这些问题都是现实存在的，而栅格化设计方式可以间接的推动和解决这些问题。

3、条理性

设计师可以利用栅格让界面更加有条理性，让内容可读性变高，快速校准元素在界面内的位置，让界面更加稳定平衡，让版面更加有层次感、模块化的管理元素。

二、栅格的基本要素

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

1、最小单位

栅格系统中的最小单位就是界面的网格单位基础，内部设计元素、版式都是按照这个基础单位建立和布局的，定义了最小单位之后，后续内容元素和布局规则都是基于它整数倍递增，最小单位也可视具体情况而定。

2、屏幕总宽度

在做设计之前需要设定屏幕尺寸，这个尺寸将是规范整个布局尺寸以及统一的标准规范。

例如：网页尺寸设定为960、1280、1440等常规尺寸，各种电商主要以960居多，移动端主要以375、750、1280等为常规设计尺寸。

3、列

列=小列+水槽

比如屏幕总宽度为a，被分为n列，就可以计算出小列和水槽的宽度，列数n越多，那么排布在版面内的内容就越精细，通过控制列数，就可以控制版面的留白和呼吸感，网页端：12列、24列；移动端：6列（常用等分数列，并不是固定的，可根据实际内容设定列数）

4、行

行和列的概念是互通的，是删格系统的横向布局，由于现今网页设计的内容高度不是固定的，随机性很高，所以一般情况下大家会忽略行的布局，但是在比较严谨数据可视化的后台设计中，还是需要横向的行布局，因为后台设计中，高度很多都是可控的，而且页面元素和数据较多，这样可以精细化布局，让页面更有逻辑和节奏感。

5、水槽

水槽就是小列与小列之间的分割间距，可以帮助分离内容。可根据页面风格设置水槽的宽度，水槽越大则页面留白呼吸感越好，反之则紧凑，但是水槽内不可放置任何版块元素。

6、安全边距

安全边距指的是在栅格内容和屏幕边缘之间的距离，它的作用主要是让信息和屏幕之间有个安全距离，避免太紧贴边缘，影响视觉内容，可以提高可读性、美观度，增加页面的呼吸感，安全边距内禁止放置任何内容，它和平面栅格中的出血是一个概念。

7、内容区域

内容区域是整个删格系统的汇总，横向的行和纵向的列交叉区域，在这个交叉区域可以进行排布设计元素。

三、栅格系统的应用准则

1、栅格系统的核心思想是内容元素必须位于若干列上

核心思想就是内容元素必须位于若干列上，可以任意分割，比如6x2、3x4、4x3,下面例子中是4x3的分割方式。

2、水槽内禁止放任何内容元素

内容元素应该要在列宽以内，而不能流出在水槽之外，这样会违背栅格化的目的。

3、父级元素对齐栅格，子级可以不完全对齐列

4、除非特意设计，否则不要把列之外区域放置元素

所有重要的内容都应该与总宽度相适应，有时候也不能把总宽度当作全部内容区域，还需给它设定一个内边距，此时它就充当起了留白的作用，不要再网格内部利用列宽当成内边距，而是要与网格最边缘保持对齐，利用网格外部的间距来当作留白区域，比如在设计1200px宽度的网页设计，实际内容占位为960，其余的空间为外边距。

5、特殊的设计风格，可以有例外规则

下面的两个网页设计属于完全出血的设计形态，这就是一个例外的规则，当背景颜色或者背景图片在完全出血的情况下，这时候开发同学就会把它理解为一个全面屏的设计，但这种设计样式，设计同学得能接受在完全出血范围内的元素被裁掉部分的情况，此时背景可以脱离删格化设计规则。

四、栅格系统中的8像素原则

基本使用原则是设计师在设计中需要一致的使用8的倍数来定义元素尺寸、填充和边距。

为什么是8像素，而不是2、4、6、10、12？

因为现在iOS和安卓物理屏幕尺寸分辨率很多，这时候就用到了“偶数思维”，当我们采用偶数的时候，元素不会因为适配不同屏幕而变得模糊、失真。

而且那么多偶数，之所以选择8，是因为8作为最小单位，进可攻、退可守，就是8可以缩小一倍到4,4可以缩小一倍到2，像2、4数值太小，会感觉很碎，也不会像6、10、12一样不能被成倍缩小三次，而且10、12数值有过大，不能精准把控细节，所以现在基本采用以8像素为原则，这样让界面更有逻辑，更统一，更有规范性，提高复用性。

五、总结

栅格系统有助于我们让更好的去设计，但规范总归是规范，在设计中可灵活变通，不可死搬硬套，在设计中可能运用的不只是一个单独的知识点，也许是很多知识点交叉并用然后得出的更加科学合理的页面，要想做出优秀的设计，还需要进一步了解设计背后的科学方法论，不仅要在视觉上突破，更要在设计方法论上得到求证，让做出的设计作品科学合理有理有据，希望能对大家有所帮助，谢谢！