UI DESIGN LAB
  • 首页
  • 社区
  • 资源库
  • 知识库
  • 文档
EN登录
返回知识库
Visual Foundations

间距尺度与节奏

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

spacingrhythmlayout

设计原则

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

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

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

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

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

来源提示 来源提示:综合 Apple HIG、Material Design、NN/g 可用性原则和成熟设计系统中的布局/层级实践整理。

Agent 指令

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

适用场景

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

避免做法

  • 大量随机 margin 值。
  • 按钮和输入框因为内容变化撑开布局。

知识元数据

分类
Visual Foundations
质量分
82%
版本
v1
发布
2026/6/6