跳到主要内容

布局与间距

:::tip 核心原则 间距系统基于 4px 基准网格，所有间距值均为 4 的倍数。通过统一的 Spacing Scale 管理，确保视觉节奏一致、层级分明。 :::

Spacing Scale（间距阶梯）​

Token值用途
spacing-44px图标与文字间距、紧凑元素内间距
spacing-88px表单元素内间距、列表项间距
spacing-1212px按钮内间距、卡片内元素间距
spacing-1616px卡片内边距、区域间距
spacing-2424px模块间距、分组间距
spacing-3232px大区域间距
spacing-4040px页面级区域间距
spacing-4848px页面级大间距
spacing-7272px页面顶部/底部大留白

Spacing 编号即像素值：spacing-16 = 16px，直观且无需换算。

Selection Guide（选择指南）​

场景推荐间距说明
紧凑组件 (Inline)4–8px图标间距、标签内间距
列表/表格8–12px行间距、单元格内间距
区域/容器12–16px卡片边距、表单区域
页面区域24–48px模块间距、段落间距
页面级40–72px首屏留白、底部间距

Responsive Grid（响应式网格）​

断点系统​

断点宽度列数间距边距
Desktop Standard≥ 1440px1224pxauto
Desktop Compact1024–1439px1220pxauto
Tablet Landscape768–1023px816px24px
Tablet Portrait600–767px416px16px
Mobile< 600px412px16px

内容最大宽度​

  • Desktop Standard — 最大内容宽度 1440px，居中显示
  • Desktop Large — 最大内容宽度 1200px，居中显示

Page Layout（页面布局）​

页面布局遵循以下结构：

  • 顶部导航栏固定，高度 64px
  • 左侧导航栏宽度 240px（可折叠）
  • 内容区自适应剩余空间
  • 内容区左右内边距 24–48px（响应式调整）

:::info 布局原则

  • 内容区始终居中于可用空间
  • 侧边栏折叠后内容区自动扩展
  • 移动端隐藏侧边栏，使用汉堡菜单 :::

Border Radius（圆角）​

Token值用途
radius-22px小元素（标签、徽章）
radius-44px输入框、按钮
radius-55px默认组件圆角
radius-88px卡片、下拉菜单
radius-1212px大卡片、弹窗
radius-1616px模态框、浮层
radius-full9999px药丸形状、头像

圆角通过 CSS 变量引用：border-radius: var(--Radius_5)

Shadows & Elevation（阴影与层级）​

Drop Shadow（外阴影）​

层级参数用途
Default0 1px 3px rgba(0,0,0,0.08)卡片默认态
Emphasized0 4px 12px rgba(0,0,0,0.12)卡片悬浮态、下拉菜单

Layer Shadow（层级阴影）​

层级参数用途
Layer 10 1px 2px rgba(0,0,0,0.06)微弱分层
Layer 2 (Elevated)0 4px 16px rgba(0,0,0,0.1)浮层、弹窗

Accessibility（无障碍）​

最小点击区域​

所有可交互元素的点击区域不小于 44 × 44px（WCAG 2.1 AA）。

间距一致性​

同一容器内的元素间距必须一致，避免视觉节奏混乱。

触控友好​

移动端间距适当增大，确保手指操作的舒适性。

Design Checklist（设计检查清单）​

在每次设计评审前确认：

  • 所有间距值来自 Spacing Scale（4 的倍数）
  • 圆角使用 Token 引用，非硬编码
  • 响应式断点正确适配 Grid 规则
  • 可交互元素点击区域 ≥ 44px
  • 页面布局遵循 Grid 系统
  • 阴影层级与元素层级匹配

使用方式​

Tailwind Class​

// 间距
<div className="px-16 py-8 gap-8" />    // padding-x: 16px, padding-y: 8px, gap: 8px
<div className="p-24 mb-32" />           // padding: 24px, margin-bottom: 32px

// 圆角
<div className="rounded-[var(--Radius_5)]" />
<div className="rounded-full" />          // 药丸形状

// 阴影
<div className="shadow-sm" />             // Default shadow
<div className="shadow-md" />             // Emphasized shadow