Spacing 间距
间距像文章里的段落和标点。距离近的东西看起来属于一组,距离远的东西看起来被分开。用户很多时候不是先读文字,而是先通过间距判断哪里是一块、哪里是下一块。
关键结构图
三组元素用小、中、大三种间距排列,旁边标注同组、同区块、不同区块。
What
Spacing 是界面用留白表达分组、层级和呼吸感的距离规则。
Spacing 间距是界面中元素、组件、区块和页面边界之间的距离系统。它通过大小不同的留白表达亲疏、分组、优先级和阅读节奏。它的边界是组织空间关系,不是单纯把页面变“空”或变“高级”。
StructureSpacing = 元素距离 + 分组关系 + 阅读节奏 + 系统一致性
When
当页面看起来拥挤、模块分不清、按钮和说明像粘在一起,或不同组件间距不一致时,应该检查 spacing。
How
先定义一套间距阶梯,例如 4、8、12、16、24、32。小间距用于同组元素,大间距用于区块分隔。再把这些距离变成 token 或组件规则,避免每个页面临时决定。
Examples
表单里标签和输入框距离近,表示它们属于同一字段;两个字段之间距离稍大,表示进入下一项。
卡片之间的间距如果太小,用户会误以为它们连成一个大模块;间距太大,又会让比较变困难。
来源
类型:设计系统实践 / 视觉设计
事实线:成熟设计系统通常会定义 spacing scale,让组件间距、页面容器和布局节奏保持一致。
依据:Material Design spacing、Carbon spacing scale、常见 UI 设计系统 token 实践。
边界:适合组织页面和组件空间;不能替代标题、标签、颜色和交互状态。
常见误读:不要把间距理解成“看感觉拖一拖”。间距需要成为可复用规则。