设计系统中的间距是指刻意利用留白或元素间的间隔，来构建平衡且视觉舒适的用户界面。通过在不同组件间提供清晰的边界与分隔，该技术确保了内容易于阅读、交互和浏览。间距有助于建立元素间的关联，引导用户的视线流动，并提升界面的整体可用性。设计系统通常通过设定标准尺寸、外边距 (margin) 和内边距 (padding) 来定义间距原则，以保持产品的一致性。
核心概念解析
设计系统中的间距就像整理货架上的物品，通过保持足够的间隔来避免杂乱和困惑。想象一个排列整齐的货架，每个物体都有指定的存放位置，且周围留有充足的空间；这种布局能帮助你快速找到目标，并理解物品间的逻辑关系。同样，在 UI 设计中，间距利用留白营造出整洁有序的版面。文字、图像和按钮等元素周围的留白，使用户能够轻松区分不同内容，并理解其重要性或功能。
正如货架上排列有序的物品更易于存取和欣赏，用户界面中处理恰当的间距能带来更好的用户体验。它们有助于建立清晰的视觉层级，引导用户注意力，并使交互过程更舒适自然。
如何在设计系统中使用间距？
例如，Microsoft 的 Fluent Design System 利用间距来确保其应用程序和界面的一致性。Fluent Design 定义了多种间距 Token，例如 sizeNone = 0px, size20 = 2px, size40, 直到 size560 = 56px，每一个都对应具体的像素值。这些 Token 被应用于外边距和内边距，以控制元素间的距离。例如，size120 间距可能用于图标等紧凑元素的组合，而 size480 或 size520 间距则可用于分隔较大的内容块，或在交互组件周围提供充裕的留白。通过标准化这些间距，Fluent Design 确保了所有 Microsoft 产品在外观上的统一与和谐，从而增强了产品的可用性和视觉连贯性。
