Interface Lab
返回知识库
Visual Foundations

间距尺度与节奏

少量可重复的间距刻度能让页面安静、可预测,也能减少 UI 临时感。

设计原则

间距应表达结构关系,而不是凭感觉逐项微调。

原则

间距应表达结构关系,而不是凭感觉逐项微调。

设计动作

使用有限 spacing token;相邻元素、组内、组间、section 间距必须递增,并给工具栏和网格设置稳定尺寸。

正反例

正向示例:需要统一卡片、表单、表格、工具栏。 反向示例:大量随机 margin 值。

适用场景

需要统一卡片、表单、表格、工具栏。 页面信息密度较高但仍要清晰。

来源提示

来源提示:综合 Apple HIG、Material Design、NN/g 可用性原则和成熟设计系统中的布局/层级实践整理。 Apple HIG Layout: https://developer.apple.com/design/human-interface-guidelines/layout Material Design Layout: https://m3.material.io/foundations/layout/applying-layout NN/g Visual Design Principles: https://www.nngroup.com/articles/principles-visual-design/

Agent 指令

使用有限 spacing token;相邻元素、组内、组间、section 间距必须递增,并给工具栏和网格设置稳定尺寸。