建站百科

十分钟搞懂响应式网格系统，开启高效设计之旅

无论是初入UI设计领域的新人，还是经验丰富的设计“老炮儿”，响应式网格系统都是一个绕不开的关键知识点。对于这个概念，想必大家都有不少疑问：什么是响应式？网格系统具体是怎样的？需要设置多少个栅格？不同尺寸的页面又该如何调整设计？别着急，今天我们就用十分钟的时间，把这些问题一次性讲得明明白白，并且手把手教你在FIGMA中设置一个响应式网格系统，为你的设计项目打造一个完美的开端。

一、认识网页设计中的网格系统

在网页设计里，网格系统是由一系列横向和纵向的辅助线构成的，它就像是设计师手中的“秘密武器”，能够帮助我们对页面元素进行精准的排版和对齐，从而打造出美观、有序且一致的页面布局。在实际的应用场景中，横向辅助线的使用频率相对较低，所以我们今天重点介绍纵向辅助线，也就是栅格。

栅格系统主要由三个部分组成：

1. 栅格（Column）：这是用来放置内容的区域，在数量上，12个栅格的系统最为常用。至于栅格的宽度，它既可以是固定值，也可以根据窗口宽度自动调整，这取决于你的网站是否采用响应式布局，稍后我们会详细讲解。

2. 水槽（Gutter）：它指的是栅格之间的距离，通常是一个固定值，主要用于调整元素之间的间距，营造出设计中的留白效果，让页面拥有“呼吸感”。

3. 边距（Margin）：即页面内容到窗口两边的距离，同样是固定值。

在进行排版工作时，一定要记住，页面元素或模块的外轮廓要始终对齐栅格，而不是水槽。水槽的作用是调节元素间的距离，决定页面的留白和视觉上的舒适度。

二、应对不同显示尺寸的页面布局类型

在实际应用中，用户会使用各种各样的设备来访问网站，移动端有不同的手机屏幕分辨率，PC端每个人的浏览器窗口尺寸也不尽相同。那么，我们该如何利用栅格系统，根据不同的显示尺寸来完成页面布局呢？这就需要了解目前最常见的两种页面布局类型。

1. 自适应布局（Adaptive Layout）：这类网站的后台会自动检测用户的设备类型，比如是PC、平板还是移动端，然后调用不同版本的网页。也就是说，用户通过不同设备打开的网页是不一样的。举个例子，当你用手机查看某个自适应布局的网站时，看到的页面和网址都与在PC端查看时有所不同。

2. 响应式布局（Responsive Layout）：这是目前应用最广泛的页面布局方式，它的最大特点是只需要一套设计和代码，就能根据窗口的宽度，实时自动调整页面中内容的尺寸和布局方式。当你改变浏览器窗口大小时，会发现页面上的元素会随之动态调整。

这两种布局方式各有优劣。自适应布局的优势在于能够针对不同设备开发定制化的内容和排版，从而优化不同平台的用户体验；但缺点是需要多套设计和代码，工作量较大。响应式布局的优点是一套代码就能适配所有设备，包括PC和移动端，工作量相对较小；然而，由于无法做到完全定制化，在某些尺寸下可能会出现元素排版混乱的情况，对于信息量大、交互复杂的网站，比如电商、新闻类网站，很难保证在所有尺寸上页面内容都能正确、合理地显示。

在实际项目中，我们需要综合考虑网站的用途、用户的使用习惯、项目的周期和预算以及未来的维护成本等因素，来决定采用哪种布局方式。而且，现在越来越多的网站采用自适应和响应式相结合的方式，即针对不同平台开发不同版本，每个版本再根据屏幕尺寸进行相应的响应式布局。

三、在FIGMA中建立响应式栅格系统

接下来，我们就以响应式布局为例，在FIGMA中建立一套栅格系统。

1. 确定断点（Break Point）：断点可以理解为一个临界点，当屏幕宽度达到这个点时，我们就需要调整页面的布局，以确保在该区间内页面内容能够正常显示。以ebo的网站为例，当我们缩小窗口时，会发现页面中的元素，如卡片的宽度会逐渐缩小，文本也会缩短。而且，当达到某个特定的宽度时，页面排版会突然发生变化，比如卡片从每行四个变为三个、两个，最后变成单列。每一次页面布局发生变化的地方就是断点。断点的数值和数量并不是固定的，需要根据目标用户使用的设备类型和屏幕尺寸来确定。常见的断点从小到大依次为320、480、768、1024和1440。不同的断点，栅格数量也会随之改变，进而影响页面元素的布局。在前端开发中，实际上是通过CSS3中的媒体查询（Media Query）来检测当前设备的浏览器窗口尺寸，判断是否达到断点，然后相应地调整布局。

2. 不同断点区间内栅格系统的响应方式：

- 手机屏幕（320）：水槽宽度为12，边距为16。在屏幕宽度增加的过程中，栅格宽度会随着屏幕宽度增加而增加，但数量不变。

- 480断点：当屏幕宽度达到480时，栅格数量变为8，页面横向上可以容纳更多的内容，栅格宽度继续随着屏幕宽度的增加而增加。

- 768断点：屏幕宽度达到768时，栅格数量变为12，边距（Margin）增加为24，之后保持栅格数量不变，栅格宽度继续增加。

- 1024断点：栅格数量不变，水槽（Gutter）增加为16，边距为32，栅格宽度继续随屏幕宽度增加。

- 1440断点：为了避免页面内容过宽影响用户体验，当屏幕宽度达到1440时，我们会将页面内容宽度限制在这一数值，不再随屏幕宽度增加。

这只是一种常见的小型网站的布局方式，当然，并没有一成不变的规则，每个网站都需要根据自身情况找到最适合的布局方式。

3. 实际操作步骤：

- XS断点（320）：创建一个画框，在右侧点击“添加自动布局（Add Auto Grade）”，选择“列（Column）”，将数量改为4，类型选择“拉伸（Stretch）”，这意味着栅格的宽度会随着屏幕的变化而变化，将边距改为16，水槽改为12。然后为这个画框添加最小宽度和最大宽度，选择画框，在右侧点击“添加自动布局（Auto Layout）”，在宽度下方点击“添加最小宽度（Add Minimum Width）”，设置为320，再点击“添加最大宽度（Add Maximum Width）”，设置为479，这样画框就被限制在了320到479这个范围内。

- S断点（480）：点击“添加自动布局（Add Auto Grade）”，选择“列（Column）”，数量改为8，类型选择“拉伸（Stretch）”，边距保持16，水槽保持12，然后添加自动布局，将宽度限制在480到767。

- 以同样的方式完成M和L断点的设置。

- XL断点（1440）：这个断点有所不同，因为从这里开始栅格宽度固定不再变化。点击“添加自动布局（Add Auto Grade）”，将类型修改为“居中（Center）”，宽度改为96（固定值），然后设置一个最小屏幕宽度。设置完成后，会发现XL断点下栅格的宽度不再随屏幕变化而变化。

最后，别忘了在设计中可能会用到很多页面，为了避免每次都重新设置网格系统，我们需要把刚才设置好的网格系统保存起来。选择一个画框，在右侧的自动网格系统中点击“样式（Style）”标志，然后点击加号，创建样式，命名为“XS”并创建。这样，当有新页面时，只需选择该页面，在右侧自动网格系统中点击“样式（Style）”，选择刚才设置好的样式即可。在实际设计时，可以取消自动布局，以便更灵活地操作；如果熟悉自动布局，也可以利用它实现响应式设计。

有了响应式网格系统和断点，我们就能提前针对不同尺寸进行设计，这不仅方便与团队成员交流，还能根据设备尺寸优化内容和设计，有效提升网站整体的用户体验。

写在最后，以上就是对于“十分钟搞懂响应式网格系统，开启高效设计之旅”的一些看法，欢迎指正、交流。