关于 间距系统
间距系统是设计系统的基础,定义了margin、padding、gap等所有间距的统一规则。良好的间距系统能保证设计的一致性,让界面有节奏感。
常见间距系统
- 线性系统:4的倍数线性递增,简洁易用。
- Tailwind系统:Tailwind CSS的间距系统,社区标准。
- 8pt网格:Google Material Design的8pt网格系统。
- 斐波那契:基于斐波那契数列,自然递增。
- 幂次:4的幂次(4,16,64...),强烈对比。
8pt网格原则
8pt网格是Google Material Design推荐的标准。所有间距使用8的倍数(8,16,24,32...),偶尔使用4作为微调。这种系统的好处是:
- 所有间距协调一致。
- 设计与开发沟通简单。
- 屏幕缩放时像素对齐。
- 容易记忆和使用。