做了这么久设计,间距还在凭感觉调?难怪总觉得"差点意思"
分享一个大厂都在用的间距系统,学会了界面立刻变整齐👇
🔢 基础单位: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% 的场景
你会发现,间距对了,整个设计的质感直接上一个台阶✨






