摹客
产品
下载
在现代设计中，栅格系统作为一种重要的布局方案，能够有效提升设计的秩序感。对于 UI 设计领域，栅格系统也广泛用于跨屏幕的响应式设计，帮助设计师打造更好的多端体验。本文将简要介绍栅格系统的基本概念和搭建方法，并提供 8 个实际应用案例，让大家快速通关栅格系统。
栅格系统是一种将页面划分为多个列和行的布局结构，能显著提升视觉一致性和组织性。它的主要好处是：
提高可读性：通过合理的布局，用户可以更容易地浏览和理解内容。
简化设计过程：减少设计决策的复杂性，提升设计师排版效率。
便于开发对接：栅格系统符合现代前端开发人员的编程习惯，更容易实现合理的响应式布局
在数字设计中的“栅格”相比平面设计的“网格”更灵活一些，常常只制定纵向的分割规则。因为数字界面的高度不像纸张等实体媒介，不需要严格确定纵向高度。
下图中就是最常见的一个数字界面栅格结构，包括：
列（Column）
水槽（Gutter）
边距（Margin）
栅格总宽（Container）
容器盒子（Col-n）
在实际使用时，尽量让内容（容器盒子）在横向占满（N）列和（N-1）列水槽。比如上图中的左侧的容器盒子占据了 2 列和 1 列水槽，右侧的容器盒子占据了 3 列和 2 列水槽。注意，尽量不要让列和水槽数量相等，而是要让水槽数量比列少一个，这样可以让内容之间留出更自然的间隙。
目前市面上主流的界面设计工具都支持栅格功能，我用的是摹客DT，搭建栅格系统的步骤如下：
打开摹客DT，使用快捷键 A 添加初始容器，并选择合适的尺寸。
在右侧属性面板中，找到并展开“布局网格”模块，激活“显示布局”选项即可打开栅格功能。设置面板中“间距”即水槽值，在类型中可以按需选择拉伸（列宽自动）还是居中（手动设定列宽）。
直接在编辑窗口绘制设计内容，元素靠近列时会有自动吸附效果。合理地安排界面中的元素、文字等，让他们恰好覆盖整数倍的列，就能保证设计最大化利用了栅格的优点。
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个应用案例，我们不仅展示了栅格系统在设计和布局中的重要性，还揭示了如何在真实设计和开发中去使用栅格系统，并提升工作效率和视觉美感。
实践出真知，栅格系统的灵活性和适应性使其成为设计师和开发者不可或缺的工具。无论是在网页设计、平面设计，还是在产品开发中，掌握栅格系统都将为你的工作提供坚实基础。通过本篇文章，相信你已经更深入地理解了栅格系统的价值，愿你在项目中大胆应用这些知识，将知识转化为项目成果，在实战中去体会栅格系统的独特优势吧！
摹客协作
摹客RP
摹客DT
摹客超级版