【UI设计】Figma —— 响应式栅格系统

目录

• 什么是栅格系统
• 如何设置栅格系统
• 响应式设计的定义
• 如何实现响应式布局
• 小结

什么是栅格系统

栅格系统（Grid Systems），或称网格布局体系，是由一系列水平和垂直基准线构成的结构化框架。

此系统旨在优化页面内容的组织方式，确立统一的对齐准则与元素排列顺序。

为什么栅格在网页设计中很重要？

栅格系统为设计师提供了一种强大且可复用的基础架构，使得设计师能够精确地控制页面元素的位置、大小以及相互之间的关系。

这种高度结构化的框架不仅简化了设计流程，还有效地帮助设计师确保页面布局的平衡与整体设计的一致性。

如何设置栅格系统

1. 创建页面

   首先打开 Figma，新建草稿后，点击快捷键 “F” 创建页面。

   设计页面时，我们通常从小尺寸做起，缘由后续详述。

   • 网页常用的页面宽度有 1024、1480、1920 等，高度不限。
   • 有效可视区为 950px ~ 1200px 宽度。

2. 添加栅格（竖直）

   选中画布，点击 Layout grid，选择 Columns（垂直参考线），调节参数。这样，竖直方向的栅格就添加好了。

   

   属性	含义
   Count	列数。电脑端一般为 12； 平板一般为 8； 手机移动端一般为 4
   Type	对齐方式
   Margin	左右两边的空白区域大小
   Gutter	每列之间的间隙

3. 添加栅格（水平）

   我们一般不添加水平栅格，而是用参考线替代。如果要添加的话，同理，在设置中选择“Rows”即可。

响应式设计的定义

响应式指的是一种设计理念和实现方式，其核心在于同一套网页代码能够智能地识别并适应不同设备和屏幕尺寸，从而为用户提供最适宜、最舒适的浏览体验。

这种适应性不仅限于屏幕尺寸的变化，还包括分辨率、方向（横屏或竖屏）等多种因素。

响应式设计在网页设计的作用

响应式设计在网页设计中扮演着至关重要的角色，它不仅极大地简化了设计师的工作流程，提高了设计效率，还显著降低了后期开发和维护的复杂度与成本

为什么要用响应式设计？

在设计与开发沟通的过程中，为了确保开发团队能够准确理解并实现设计意图，我们需要主动提供详尽且明确的不同规格界面设计稿。

这些设计稿应清晰展示各种屏幕尺寸和分辨率下的布局细节，以便开发团队能够直接参考，无需猜测或试错。

通过这种方式，我们可以有效减少沟通误解，提高开发效率，确保最终产品与设计愿景高度一致。

如何实现响应式布局

为什么设计页面要“从小做起”?

我们应避免一开始就创建固定为 1980×1080 像素的页面，因为这样的设计往往难以灵活适应不同设备和屏幕尺寸。相反，我们建议先从一个较小的、更基础的页面布局开始设计。

因为小尺寸的设计更容易适配到更大的屏幕上，实现响应式布局。而直接从大尺寸设计开始，则可能面临难以向下适配到小屏幕设备的挑战。

此外，值得注意的是，现代浏览器普遍支持向上兼容的页面，即能够较好地渲染和展示为更大屏幕尺寸设计的网页内容。因此，我们仍应优先考虑从小尺寸出发

当我们的小页面设计好后，我们应该去做更大的页面。

这时，就可以使用 Figma 的 Auto layout （自动布局） 功能来实现。

我们以这个低保真原型网页为例子，来实现响应式布局。

可以发现，当我们拖拉改变页面大小时，页面内的元素是混乱无序的。

那么我们如何使内部的元素仍然按原先的布局排布呢？

Auto layout 可以帮我们实现。

我们以中间这个版块为例：

1. 首先，为每个子元素分别点击 Shift + A，添加自动布局。

2. 这里因为想把右边两个元素当成一部分，所以选中元素，按 Shift + A 给右边部分添加一个小框架。

   

3. 选中全部元素，按 Shift + A添加外部的大框架。

   

这时我们会发现，内部的元素间距有些混乱。

所以，我们要进一步操作。

4. 选中子元素外的小框架，在右边的操作栏中调节 padding，这里调为 0。

   

5. 选中小框架，调节元素之间的间距 gap

   

6. 重复步骤（4），调节左侧元素的 padding

   

7. 选中外部大框架，修改 gap 为 10。

如此，我们就完成了基本框架，接下来只需修改每个小框架的对象尺寸和对齐方式。

8. 选中每个小框架，在右边的的操作栏中修改对象尺寸。

   分别点击 W（水平调整大小）和 H（垂直调整大小），选择 Fill container（填充容器）。

   

9. 选中外框架，修改对齐方式为 left and right

属性	含义
Left / Right	保持对象距框架左 / 右侧距离不变
Left and right	保持对象距离框架左右两侧的距离不变
Center	保持对象在框架中水平居中
Scale	缩放时将以百分比形式固定对象水平上的大小和位置

这样，我们就处理好了，拖拽页面测试一下：

我们还可以再做一个 1024 的页面，最终三个版本的效果图如下：

小结

• 栅格系统

  • 由一系列水平和垂直基准线构成的结构化框架。
  • 电脑端一般设置为 12、平板端为 8、手机端为 4，具体按实际情况调整。

• 响应式布局：使用 Auto Layout 功能

  1. 为每个子元素分别添加“小框架”（自动布局 Shift + A）
  2. 调节小框架的 padding
  3. 调节小框架之间的间隙 gap
  4. 将每个小框架的对象尺寸修改为 Fill container
  5. 按需调整外框架的对齐方式

ps: 如果有更多的 适应新版的响应式布局方法，欢迎一起分享讨论！