怎样统一间距与尺寸？

用少量有规律的间距和尺寸，表达内容关系，并保持部件容易使用。

间距规则是给内容之间的空白安排一组可重复使用的选择。它帮助读者看出哪些内容属于一组，哪些内容是下一部分。

先记住这几件事

• 间距尺度 是一组约定的距离，例如紧凑、普通、宽松；选择应有规律，方便复用。
• 内边距 是部件边缘到内部内容的距离； 部件间距 是两个部件之间的距离。
• 同组内容通常靠近，组与组之间通常留出更多空白。空白表达关系，不只是装饰。
• 尺寸还要容纳文字、操作区域和内容变化，不能为了整齐而把内容挤掉。

间距表达关系和配合页面布局的用法见 Spectrum 布局间距指南 ； 《平面设计新基础》 将分组、层级和网格列为视觉基础主题。

安排间距的流程

间距调整的示意

数值是教学示例；px 指网页布局使用的 CSS 像素，不是设备物理像素。

用一个例子走一遍

联系表单原先每行的空白都不同。团队先把标签和输入框视为一组，再把姓名、邮箱视为同一段资料，选择表中的示例距离。缩窄浏览器后，如果两个字段并排太挤，就改为上下排列，继续保留清楚的分组关系。

边界与常见误解

并不是所有尺寸都必须是 8 的倍数。文字、边框和小图标可能需要其他取值。规律服务于阅读和操作；具体尺度可以不同，但例外应有清楚原因，避免随手增加新数值。