📌 4px 基准网格原理: 所有间距都用 4 的倍数:4、8、12、16、20、24、32、40、48……
为什么是 4?因为 4 能被大多数屏幕分辨率整除,不会出现半像素。
📌 间距怎么用:
组件内间距(Padding) 按钮内部的上下左右留白:通常 8-12px。 卡片内部内容到边框的距离:通常 16-24px。
组件间间距(Margin / Gap) 紧密相关的元素:8px 普通间距:16px 区块之间:24-32px 大区块分隔:40-48px
📌 建立间距梯度表: 在设计系统里定义一组间距变量: space-xs: 4px space-sm: 8px space-md: 16px space-lg: 24px space-xl: 32px
所有设计稿只用这几个值,不要随手拖。
💡 间距一致 = 界面整洁。这是性价比最高的设计提升。
📚下面这份《UIUX 学习指南》,是我花 1 年时间整理,萃取苹果、谷歌等大厂设计智慧搭建而成的:
• 体系完整又系统,从视觉、交互到用研、产品,覆盖 UI/UX 全链路
• 不管是零基础入门、中级进阶还是冲资深,都能精准适配
• 每天花 5~10 分钟,就能稳步搭建起专业认知框架
爬出低谷,不需要惊天动地的顿悟。👇文末加入「UIUX 学习指南」,每天 5~10 分钟,去学、去拆解、去浸泡。
你会发现,焦虑和迷茫会被“坚实的确定性”一点点挤出去,你重新理解了设计的重量。






