流体间距系统 (Fluid Spacing System)

流体间距系统

目的

流体间距系统技能提供了一种创建响应式白空间（边距、内边距、缝隙）比例的方法，该比例可根据用户的视口平滑调整。通过使用 CSS clamp() 函数，间距在定义的最小值和最大值之间线性缩放，无需过多媒体查询即可保持视觉和谐与比例一致性。

使用场景

• 为新的设计系统建立基础间距比例。
• 现代化网站，改善跨移动端、平板和桌面的视觉一致性。
• 设计高质量的布局，使白空间在大屏幕上得以呼吸，但在小屏幕上保持紧凑。
• 用更灵活、可感知实现的系统替换固定的像素间距。

何时不使用

• 简单、无响应需求的页面： 如果布局极其基础或没有响应式要求。
• 严格固定布局： 当设计规范要求在每种分辨率下都使用精确、不可变通的像素值时。
• 旧版浏览器支持： 如果目标用户主要使用不支持 CSS clamp() 的浏览器（例如 Internet Explorer）。

输入

要生成一个流体间距系统，你需要：

1. 视口范围：
   • min-width：缩放开始的屏幕宽度（例如 320px）。
   • max-width：缩放停止的屏幕宽度（例如 1280px）。
2. 基础间距单位：
   • min-size：在 min-width 时的基本单位（例如 16px）。
   • max-size：在 max-width 时的基本单位（例如 20px）。
3. 缩放比例：
   • 用于确定比例步长（step）的乘数（例如 Major Third 比例为 1.25，或线性 2x/3x/4x 递增）。

输出

1. 流体间距比例： 一组使用 clamp() 定义从“极小”到“极大”值的 CSS 变量。
2. 语义映射： 关于如何应用这些 token 的指南（例如 --space-m 用于组件内边距，--space-xl 用于区域外边距）。
3. 使用文档： 组合这些单位以保持垂直节奏和水平对齐的规则。

工作流程

1. 定义缩放参数

根据项目的目标设备设置流体系统的边界。 示例： 320px（移动端）到 1440px（桌面端），基础单位从 16px 缩放到 24px。

2. 选择间距比例

决定间距步长应如何增长。

• 线性/乘法型： 步长是基础单位的倍数（例如 0.5x、1x、1.5x、2x、4x、8x）。最适合可预测的对齐。
• 几何比例： 每一步是上一步乘以一个比例（例如 1.25）。最适合高对比度、艺术化的布局。

3. 计算缩放步长

创建一个尺寸范围。典型的缩放比例包括：

• 3XS 到 XS： 用于微小细节、紧凑列表和按钮内边距。
• S 到 M： 用于标准组件间距和沟槽。
• L 到 3XL： 用于区域外边距、区块间距和主要布局缝隙。

4. 生成 CSS clamp() 公式

将像素值转换为流体公式。 clamp(min_rem, intercept_rem + slope_vw, max_rem)

斜率计算： (max_px - min_px) / (max_viewport - min_viewport) * 100

5. 分配语义角色

将抽象比例映射到功能角色，以确保团队间的一致性。

• space-component：--space-s
• space-layout-gutter：--space-m
• space-section：--space-xl

决策规则

• 8pt 网格原则： 只要可能，确保你的最小/最大值是 4 或 8 的倍数，以便与标准 UI 模式对齐。
• 邻近性原则： 相关的元素之间的空间应比不相关的元素之间的空间小。
• 移动端压缩： 保持较小的间距单位（3XS-S）相对稳定；仅较大的单位（L-3XL）应积极缩放，以防止移动布局感觉“爆炸”。
• 无障碍性： 确保即使在最小比例下，交互元素也能保持足够大的点击区域（根据 WCAG 2.2 SC 2.5.8，最小 24x24px，包括内边距；主操作建议 44x44px）。
• 容器相对间距： 对于应根据组件的容器而非视口响应的间距（例如，可以放在窄边栏或宽主列中的卡片），在 clamp() 公式中使用容器查询长度单位（cqi/cqw）而不是 vw。

约束

• 响应式： 间距不应导致水平溢出。
• 一致性： 一旦定义了比例，就不要使用“一次性”像素值。
• 层级： 较大的间距应始终用于分隔较大的内容块（例如区域），而较小的间距用于内部组件细节。
• 范围： 此技能仅涵盖间距值——它不创建布局网格（请使用 responsive-grid-system），也不定义排版大小（请使用 fluid-typography-system），也不管理 z-index/层级。

常见失败模式

• 同等缩放所有内容： 过多缩放小的内边距（如 4px）会导致组件在桌面上看起来变形。
• 忽略布局沟槽： 组件间距是流体的，但网格沟槽是固定的，导致对齐“漂移”。
• 比例过于庞大： 有 20 多个不同的间距步长使系统难以使用和维护。目标是 7-9 个步长。
• 没有逻辑步长： 使用任意数字而不是一致的比例或比率。

验证标准

• 当视口调整大小时，间距平滑缩放。
• 在所有主要断点处保持垂直节奏。
• 实现中不使用“一次性”像素值；所有间距都使用定义的变量。
• 系统使用 rem 单位作为 clamp() 函数的最小和最大边界。
• 间距选择增强了邻近性和层级。
• 交互元素在流体比例的每个点上至少保持 24x24px 的点击区域（WCAG 2.2 SC 2.5.8），包括最小视口。