网页 栅格设计 第1篇
目前市面上主流的界面设计工具都支持栅格功能，我用的是摹客DT，搭建栅格系统的步骤如下：
打开摹客DT（），使用快捷键 A 添加初始容器，并选择合适的尺寸。
在右侧属性面板中，找到并展开“布局网格”模块，激活“显示布局”选项即可打开栅格功能。设置面板中“间距”即水槽值，在类型中可以按需选择拉伸（列宽自动）还是居中（手动设定列宽）。
网页 栅格设计 第2篇
边距（Margin）：栅格外边距，与屏宽保持一定的安全距离.
行：栅格系统的横向网格，与纵向网格的列成垂直状态，列和行交叉的区域形成页面的内容区，由于目_页多采用瀑布流形式，上下滑动区域变得不受限制，随意性很高，本文忽略这一部分。
这里需要注意的是：我们把栅格的列（Column）看做是栏+槽的宽度，12栅格即是指12列。有一些文章对栏和槽的理解是下方左图的样子，而从开发角度来说，下方右图是前端理解的栅格。我们用栅格来制定页面视觉规则，同时也要理解开发怎样实现栅格，才能在工作中减少不必要的沟通误区。
网页 栅格设计 第3篇
栅格系统是一种将页面划分为多个列和行的布局结构，能显著提升视觉一致性和组织性。它的主要好处是：
提高可读性：通过合理的布局，用户可以更容易地浏览和理解内容。
简化设计过程：减少设计决策的复杂性，提升设计师排版效率。
便于开发对接：栅格系统符合现代前端开发人员的编程习惯，更容易实现合理的响应式布局
在数字设计中的“栅格”相比平面设计的“网格”更灵活一些，常常只制定纵向的分割规则。因为数字界面的高度不像纸张等实体媒介，不需要严格确定纵向高度。
下图中就是最常见的一个数字界面栅格结构，包括：
列（Column）
水槽（Gutter）
边距（Margin）
栅格总宽（Container）
容器盒子（Col-n）
在实际使用时，尽量让内容（容器盒子）在横向占满（N）列和（N-1）列水槽。比如上图中的左侧的容器盒子占据了 2 列和 1 列水槽，右侧的容器盒子占据了 3 列和 2 列水槽。注意，尽量不要让列和水槽数量相等，而是要让水槽数量比列少一个，这样可以让内容之间留出更自然的间隙。
网页 栅格设计 第4篇
1）Material Design
Material Design的栅格布局是一种响应式设计系统，旨在确保用户界面在不同设备和屏幕尺寸上的一致性和灵活性。它主要基于12列的栅格系统，允许设计师和开发者在布局中有效地组织内容。
Material Design的栅格布局是响应式的，能够根据设备的屏幕大小和方向自动调整。设计师可以利用五个断点（xs, sm, md, lg, xl）来定义在不同屏幕尺寸下的列数和布局方式，从而实现灵活的设计。
2）智能化响应式设计
利用栅格系统可以构建优秀的智能响应式设计，使得网页在不同设备上保持一致性和组织性。通过合理的布局和元素对齐，设计师能够提升用户体验和界面美观性。
在上图这个案例中，设计师利用栅格系统完成网页（Web）设计后，可以轻松地借助栅格的特性和“摹客DT”中的自动布局能力，自动得到平板（Tablet）端和手机（Mobile）端的设计效果，极大地提升设计效率。
3）8点网格设计
8 点网格系统是设计界常用的标准，适用于各种屏幕尺寸。设计师通过使用 8 的倍数来定义元素的间距和尺寸，确保在不同设备上实现视觉一致性。这种方法特别适合移动端设计，能够提高布局的效率和准确性。
在上图的案例中，设计师尽可能使用 8 的倍数来定义所有的设计参数，包括按钮的长宽尺寸、按钮的内边距（Download距离按钮顶部的内边距）、按钮和按钮的间距等。8 点网格可以进一步降低设计师的决策难度，提升设计效率。
4）Bootstrap栅格系统
Bootstrap 框架提供了一个强大的栅格系统，支持多种屏幕设备的响应式设计。通过预定义的类，开发者可以快速构建布局，确保在不同设备上的良好表现。
而在 Bootstrap 3 中，整个栅格系统一开始就是对移动设备友好的，整个框架的内核中内置了整套栅格机制的支持。也就是说，使用 Bootstrap 可以获得最佳的移动端栅格效果。
5）文字基线网格系统
基线网格系统通过密集的水平行提供文本对齐和间距准则，确保文本在设计中的一致性。这种方法在排版设计中尤为重要，能够提升阅读体验和视觉美感。
在上方的示例中，每8px行在红色和白色之间交替。将文字的所有行高设置为基本单位（8x或4px）的倍数，可以让文本和基线网格完美对齐。
6）B端用户界面（GUI）设计
在B端界面设计中，栅格系统用于布局和对齐界面元素，确保用户界面的整洁和可用性。设计师可以利用栅格系统来创建直观的导航和交互体验，提升用户满意度。由于B端界面中通常有固定的左侧边栏，此时可以利用混合栅格的策略，让界面中仅内容的部分符合栅格要求，固定的左边栏不参与栅格布局。
在上方的示例中，登录界面和B端的左侧功能页面都是固定的内容，无需参与栅格布局。此时，可以将布局的重点集中在内容区域，形成混合栅格的结构，保证最佳的页面响应体验。
7）Ant Design
作为国内流行前端设计框架，Ant Design在栅格上的定义也是非常经典的。Ant Design 采用 24 栅格体系。以上下布局的结构为例，对内容区域进行 24 栅格的划分设置，如下图所示。页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。
对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格。在具体落地中视角的不同就容易造成偏差，最终影响还原度，继而增加沟通成本。
8）Arco Design
Arco Design的栅格布局是一种灵活且高效的设计系统，主要用于字节跳动的中后台产品。其设计理念基于24栅格系统，能够有效地组织和展示信息，确保页面布局的一致性和逻辑性。
Arco Design的这套栅格布局不仅提升了设计的效率和美观度，还通过模块化和响应式设计增强了产品的适应性。设计师和开发者可以通过这一系统更好地协作，实现高质量的产品设计。
在这篇文章中，我们深入探讨了栅格系统的基本概念、搭建方法以及实际应用案例。通过这8个应用案例，我们不仅展示了栅格系统在设计和布局中的重要性，还揭示了如何在真实设计和开发中去使用栅格系统，并提升工作效率和视觉美感。
实践出真知，栅格系统的灵活性和适应性使其成为设计师和开发者不可或缺的工具。无论是在网页设计、平面设计，还是在产品开发中，掌握栅格系统都将为你的工作提供坚实基础。通过本篇文章，相信你已经更深入地理解了栅格系统的价值，愿你在项目中大胆应用这些知识，将知识转化为项目成果，在实战中去体会栅格系统的独特优势吧！
网页 栅格设计 第5篇
以8为步进单位，进度合适，既不显得过于琐碎，也不会因为间隔太大而显得内容分散；众多开源代码都以8的倍数作为默认设计大小；已被多次论证，8点栅格甚至已经形成了一套理论。
凡事没有绝对，如果做固定结构的网页布局，不考虑响应式网页设计，也可以自行根据实际情况以偶数作为最小单位来设计网格。
为什么强烈推荐「8点栅格」→ 《让设计更高效！正式为大家安利这个好用的「8点栅格」》
网页 栅格设计 第6篇
栅格是由一系列规律的小网格组成的网格系统，网格构成页面的最小单位。通常，在网页设计中经常使用8作为栅格的最小步进单位，一些知名公司都以8为最小单位划分网格，规范页面秩序，比如：Ant Design、Matierial Design等。
这样做的好处有两方面。
偶数思维：以8为基础倍数，元素大小可以被大多数浏览器识别并整除，最大程度避免出现半像素的情况。
规律性：所有元素以8像素为步进单位，元素大小、间距有规律可循。
网页 栅格设计 第7篇
1919年德国著名建筑家沃尔特·格罗佩斯（Walt Gropius）在魏玛建立国立包豪斯学院。包豪斯的平面设计基本是在荷兰“风格派”和俄国“构成主义”的影响下形成的。因此，具有高度理性化、功能化、简单化、减少主义化和几何形式化的特点。
1928年，朱斯特·施密特（Joost Schmidt）发展出了一套新的理性设计系统和方法。
20世纪50年代，栅格设计系统终于在前西德与瑞士得到完善。通过瑞士平面设计杂志的宣传，将瑞士苏黎士和巴塞尔两个城市的设计家从20世纪40年代探索的成果全面展示，并影响世界各国，因此也被称为“瑞士平面设计风格”（Swiss Design）。由于这种风格简单明确，传达功能准确，因而很快得到世界范围内的普遍认可，成为战后影响最大的一种平面设计风格，也是国际最流行的风格，因此又被称为“国际主义平面设计风格”（International Typographic Style）。
1965年，在美国的芝加哥成立了一家新的平面设计公司——尤尼马克设计公司（Unimark），主要设计人员包括有拉尔夫·依克斯特朗姆（Ralph Eckerstrom）、詹姆斯·佛格曼（James Fogleman）、马西莫·维格涅里（Massimo Vignelli，1934-）等。尤尼马克设计公司的设计思想基本是国际主义的：强调平面设计上的标准化，采用方格网络为设计依据，目的是良好的视觉传达功能。这家公司发展很快，不久就成为一家拥有402名工作人员、在全世界设有48个设计事务所的大型国际设计公司。国际主义平面设计在这家公司的业务中得到很大的成功，而企业的规模又使得这个风格在世界各地得到进一步推广。
现在，大多数平面设计软件都有“网格”功能。
栅格简概
栅格的意义
统一产品的视觉认知，减少学习成本。提升布局规律性，页面更有秩序，信息展示更清晰，以提高用户的体验。
模块化复用，提升协作效率。从设计流程开始，统一规则，制定规范， 避免各种主观上的“感觉”造成视觉上不统一的现象，比如：模块大小、间距等。在开发阶段栅格设计系统提高了设计还原度，使网页更具备规范性，开发对组件和模块的复用，进一步提升了效率。
栅格的组成
列、水槽、边距
列Column：也被称为栏，用来盛放文本、表格、图片等内容及元素。列的宽度称为列宽，常用百分比来定义，而不是固定值（使用固定删格的时候会采用固定值，会在下篇响应式栅格中讲到），前端同学通过百分比可以灵活适应屏幕大小
水槽 Gutter：也被称为沟/间距，水槽是相邻两个列宽之间的间隔，用来分割内容，水槽的值越大，页面中留白部分的面积越多，视觉效果越松散；反之，页面越紧凑。水槽通常设为固定值
边距 Margin：网页内容和屏幕边缘之间的间隔，通常为固定值。左右大边距是计算在栅格的总宽之内的，边距值的大小决定了每个屏幕尺寸的最小呼吸空间，一般边距值≥水槽值。
此外还有最小单位、总宽度、列数三个计算因子
最小单位：栅格的基础单位，栅格内容元素和布局规则（如水槽、边距的值）都是基于它的整数倍递增的。如最小单位是8px，水槽的宽度可设为8n
列数：列的数量即栅格数量，如12栅格就有12列、24栅格就有24个列。列数n越多，那么排布在版面内的内容就越精细，通过控制列数，就可以控制版面的留白和呼吸感
总宽度：页面中自适应内容部分容器宽度，而非屏幕宽度，总宽度=列宽*列数n+水槽*（n-1）+边距*2
三、案例-搭建栅格
以下图「数据总览」页面为例，设计稿尺寸为1440*900px，左侧导航栏常驻，该页面是没有用栅格搭建的。乍一看问题似乎不大，但是资深的设计师很容易就能看出实则切割混乱，无规律。另还有一致命的点在于填充内容的容器无法换算成百分比，前端同学无法做自适应，想要适配是很困难的。
那下面将以此页面为案例教大家如何一步步搭建栅格：
Step 1: 确认容器范围
设计师在规划产品用户界面时，首先需要考虑页面的整体布局，以便确认布局栅格的容器。栅格容器不一定是整个屏幕或界面，需要根据真实场景判断，一般只需要在内容层进行栅格化，约束内容自适应比例。
1) 单页基础布局：栅格容器=屏幕宽度
2) 存在固定控件布局：栅格容器<屏幕宽度
存在常驻的控件，如侧边导航栏一般属于固定占位的控件，不会跟随屏幕尺寸或内容量的变化而变化，属于全局控制层，其占据的界面区域也不需要用来布局其他功能及内容，所以其不属于栅格区域。有赞的帮助中心同理
案例属于侧边导航布局，所以案例容器范围=屏幕宽度-侧边导航=1440-侧边导航
Step 2:确定列数、水槽值、边距
1）确定栅格列数
目前有两种比较主流的等分方式：12等分与24等分。
12等分的栅格系统：在流行的前端开发开源工具库Bootstrap与Foundation中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计；12栅格的优势在于其在相对较小的数字中最容易被整除，保证了设计师切分区块的灵活性，同时又不至于使页面过于琐碎
24等分的栅格系统：适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计；相对12栅格系统，24栅格系统变化更加灵活，更适合内容比较多样复杂的场景。我们常见的中后台设计发布于 PC 平台，且功能复杂，内容繁多，且考虑到后期的扩展性，因此中后台常用灵活性更高的 24 栅格，比如ant design和zan design，栅格系统大小=24列+23列间距+2大边距
所以，案例中我们将采用24栅格系统
2）确立栅格的最小单位
由于列跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的重要一步就是需要先定义好栅格的原子单位「网格」的大小。中后台中目前最普适易用的就是 8 点网格，我们可以建立 8点为一个单位的网格，使用 8 的倍数来定义模块的间距与元素的尺寸。
在适用性方面，4、6、8、10 这四个数值都是基本可以满足的，在灵活性方面，4pt表现最佳，那为什么不选4而是8呢？8 点网格有如下几点优势：
目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被 8 整除，使用 8 作为最小原子足够普适。可以确保不同布局之间的视觉一致性，同时可以灵活的适配多种尺寸的设计
灵活性方面，4pt最佳，8pt次之。但是使用4pt页面就会被分割的非常细碎，在设计时比较难于把控，它比较适合页面内容信息较多，布局排版比较复杂的产品。而8pt栅格一般的设计场景都可以很好的满足，比较适合大多数的项目，因此是比较推荐使用的
开发工程师使用的前端开源组件库比如 Metronic、Antdesign 等也是基于 8 的原子单位来设计，因此如果设计师也使用以 8 为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质地去还原我们的设计。
3）确定水槽宽度和页边距
按照亲密性原则，我们可以按照8n定义几个常用的间距值。人眼对于距离的认知不是均匀、等分的，而是渐变的，通过对比几种经典的数列模型，选择基于斐波那契数列生成一组数组作为间距值，得到8、16、24、40系列数值，为了区分它们的使用场景我们依次为其命名为XS、SM、MD、LG、XL。
经过实践经验，在中后台系统下，水槽宽度为16px时，页边距为24px时视觉效果最佳。
水槽=16px：此时列间距在保证页面空间被高效利用的同时，也可以维持良好的呼吸感，不至于让内容过于紧凑。
页边距=24px：需要通过距离区分模块与模块之间的信息，同时也让内容区更加紧凑
Step 3:利用栅格公式计算栅格体系
栅格计算公式如下：内容区宽度=24栏+23水槽+2页边距=屏幕宽度-左侧导航宽度
基于前文屏幕宽度为1440px，采用24栅格布局，页边距取24px，水槽取16px的前提下。通过对栅格公式的计算，将具体的值带入公式：
1440-左侧导航宽度=24栏+23*16+2*24
Step 4:组织内容，分配页面比例
建立好栅格系统后，就可以根据自己的实际业务，在栅格系统上组织内容分配页面比例了。我们把页面上最终承载内容称为“盒子（Box）”,这个盒子的宽度则由栏目与水槽按比例组合得到，高度则由内容多少决定。
拓展小知识：盒子的概念
在栅格系统上容纳业务内容的容器我们把它称之为盒子（Box），栅格系统上的盒子其实跟前端工程师写页面时用到的盒子是一致的。如图所示，当我们浏览任何一个网页时，右键>检查元素（审查元素），然后在style菜单下就可以看到这个盒子结构了。
Padding就是主体内容距离盒子外侧的距离，（主体内容可以是一个按钮、一段文本、一张图片或者一个表格等）；Margin就是相邻两个盒子的距离，对应在后台栅格系统就是水槽的大小
了解完栅格系统的盒子模型之后，下一步我们需要根据具体业务内容来确定盒子的宽度。以24栅格系统为例，一个24栅格系统可以根据业务需要被2等分、3等分、4等分、6等分、8等分、12等分，还可以被1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5等不对称分割。
上图中只列举了部分比例，同一个页面上控制在5组以内的比例值组合来布局比较合适，组合形式过多页面就会显得琐碎、杂乱，不利于阅读和使用。因为盒子的高度根据内容来定，故图中没有体现高度这一维度的变化规律
根据具体业务内容最终得出下图中的盒子的具体比例
最终效果如下：
到此，我们的栅格系统就搭建完成了，但是这就结束了？