众力资讯网

设置间距,用这一套4px网格系统就够了📐

做了这么久设计,间距还在凭感觉调?难怪总觉得"差点意思" 分享一个大厂都在用的间距系统,学会了界面立刻变整齐👇 🔢 基础单位:4px 所有间距都是 4 的倍数:4、8、12、16、20、24、32、40、48… 📏 怎么用: 元素内间距(padding)→ 常用 12/16/20 同组元素之间 → 用 8/12(紧凑关系) 不同模块之间 → 用 24/32/40(松散关系) 卡片内边距 → 统一 16 或 20 🧠 核心原则:亲密性 关系近的元素 → 间距小 关系远的元素 → 间距大 有时不需要分割线、不需要背景色,光靠间距就能建立视觉层级 ❌ 常见错误: 到处都是 16px,没有节奏感 间距用了 13、17、21 这种奇怪数字 标题和正文的间距 = 模块和模块的间距(这样会糊成一坨) 建议把 4/8/12/16/24/32 这六个数字背下来,覆盖 90% 的场景 你会发现,间距对了,整个设计的质感直接上一个台阶✨