PSUI栅格系统教程：规范化排版方法
UI设计里“看起来舒服”的界面，本质不是审美问题，而是栅格系统在起作用。
没有栅格，排版就靠感觉；有栅格，设计就变成“可计算的秩序”。
一句话总结：
栅格系统 = 视觉秩序的数学框架
一、为什么UI必须用栅格系统
1. 解决排版混乱
元素随意摆放
对齐不一致
2. 提升设计效率
不再“凭感觉排版”
有规则直接套用
3. 保证全局一致性
所有页面统一结构
可扩展性强
4. 方便开发对接
设计=规则
开发=实现
二、PS UI栅格系统核心结构
栅格系统由三部分组成：
1. 容器系统（Container）
决定整体宽度范围
2. 列系统（Columns）
决定水平分区
3. 间距系统（Gutter）
决定元素之间距离
三、PS栅格系统标准类型
1. 12列栅格（最常用）
适用于：
Web UI
APP界面
电商后台
特点：
灵活性强
适配性高
2. 8列栅格
适用于：
移动端设计
简洁UI系统
特点：
更稳定
更规整
3. 4列栅格（极简布局）
适用于：
卡片式设计
内容型APP
特点：
极简结构
强节奏感
四、PS栅格系统搭建步骤
第一步：确定画布尺寸
常见尺寸：
APP：375px / 414px
Web：1440px / 1920px
第二步：建立安全边距（Margin）
推荐：
左右边距：16 / 24 / 32px
作用：
防止内容贴边
提升呼吸感
第三步：设置列系统（Columns）
以12列为例：
列数：12
间距（Gutter）：16px 或 24px
第四步：建立基线系统（Baseline Grid）
推荐：
4px / 8px系统
作用：
控制垂直节奏
保持排版一致
第五步：定义间距体系（Spacing System）
标准体系：
4px
8px
12px
16px
24px
32px
48px
规则：