📌 栅格系统的本质: 把页面宽度等分成若干列,设计元素按列来对齐和排布。
📌 三个核心概念: Column(列):页面被分成的等宽区块。 Gutter(间距):列与列之间的间距。 Margin(边距):内容区域到页面边缘的距离。
📌 常见的栅格规格: 移动端:4 列(375px 宽度) 平板端:8 列(768px 宽度) 桌面端:12 列或 24 列(1440px 宽度)
为什么 12 列最流行?因为 12 可以被 2、3、4、6 整除,布局灵活度最高。
💡 新手快速上手: 在 Figma 里直接用 Layout Grid 功能,设置 12 列、Gutter 24px、Margin 自定义,然后所有元素对着列来放就行了。
不需要每个元素都严格卡格子,但大的区块和对齐关系一定要跟着栅格走。
📚下面这份《UIUX 学习指南》,是我花 1 年时间整理,萃取苹果、谷歌等大厂设计智慧搭建而成的:
• 体系完整又系统,从视觉、交互到用研、产品,覆盖 UI/UX 全链路
• 不管是零基础入门、中级进阶还是冲资深,都能精准适配
• 每天花 5~10 分钟,就能稳步搭建起专业认知框架
爬出低谷,不需要惊天动地的顿悟。👇文末加入「UIUX 学习指南」,每天 5~10 分钟,去学、去拆解、去浸泡。
你会发现,焦虑和迷茫会被“坚实的确定性”一点点挤出去,你重新理解了设计的重量。






