ux-layout-spacing-grids

布局、间距与网格技能

此技能的工作方式（请先阅读）

这是一项生成式基础技能。布局是 AI 助手输出悄然显得业余的地方：Claude 会随手使用任意间距（这里 13px，那里 27px），凭感觉留白，混用对齐方式，在没有网格的画布上放置内容，还让每个元素的视觉权重都相同，以至于没有任何内容显得更重要。解决方法是系统性的，而非表面修饰——设定基础单位、比例尺和网格，保持对齐一致，并有意运用留白来分组和排序。

因此，此技能会把关以下步骤：

1. 明确上下文——平台/密度、内容类型，以及布局是否必须响应式（这些因素决定基础单位、网格类型和分栏模型）。
2. 应用始终适用的核心原则——采用一个基础单位及间距/尺寸比例尺，对齐到网格，利用邻近关系和留白进行分组，并通过空间建立层级。
3. 说明依上下文而定的决策（基础单位、网格类型、分栏模型、尺寸方案、黄金比例/三分法、令牌层、打破网格），并解释其中的取舍；由用户选择。

之后，它会交接给 ux-aesthetics-audit（构图/间距/层级审查）和 ux-accessibility-audit（触控目标、文本缩放、重排），并在布局具有响应式/移动端适配时交接给 ux-mobile-responsiveness-audit。

此技能还负责空间视觉层级、对齐和构图的基础知识（它吸收了已弃用的 visual-hierarchy 生成式内容）：通过尺寸、位置和空间建立层级；对齐和邻近关系；留白；三分法/黄金比例布局。它将字体比例尺/可读性交由 ux-typography 处理，将强调所需的颜色/对比度交由 ux-color 处理，并将评估性构图审查交由 ux-aesthetics-audit 处理。

---

步骤 0 — 布局前明确上下文

如果尚不清楚，请先询问；若在没有答案的情况下继续，请说明所作假设：

• 平台与密度——移动端还是桌面端，以及 UI 的密集程度。密集/紧凑型工具可能适合使用 4px 基础单位；大多数产品 UI 使用 8px。移动端应缩小边距，同时保留触控目标之间的间距。
• 内容类型——统一的项目（图库、仪表板卡片）、长篇文本、混合媒体或表格数据。这会影响网格选择（分栏式、模块式、文稿式或层级式）。
• 响应式还是固定场景——布局是否会随断点变化，还是运行于受控环境（自助服务终端、标牌）？响应式布局需要分栏模型和断点；固定布局是例外，而非默认方案。

---

始终适用的核心原则（几乎适用于所有布局）

以一个基础单位和比例尺为基准

• **选定一个基础单位，并让所有间距/尺寸值都成为它的倍数。**默认使用 8px（可整除为二分之一/四分之一；Material 按 8dp 对齐；Apple 使用 8/16/32 pt 增量）；密集型界面使用 4px。不要使用任意数值——13px 或 27px 的间距就是布局缺乏系统性的明显迹象。
• **将比例尺表示为令牌，而不是一次性值。**数字比例尺（spacing-01…，例如 4、8、16、24、32、48、64），可选配语义层（xs/sm/md/lg）。保持一致，才能让一次更改贯穿各处，也能消除猜测。
• 让间距和尺寸都采用相同的基础单位，这样边距槽、分栏和组件尺寸就能彼此对齐，让页面呈现为一个统一系统。
• **将不符合比例尺的值作为标记出来的例外处理。**如果确实需要介于刻度之间的值，为其指定功能性名称（card-media-height），或使用不规则数字，以明确表明它不属于比例尺——例外过多会让系统逐渐失效。

用间距分组并建立层级

• 邻近分组。 较小的间距将相关元素联系起来；较大的间距则区分不同分组。用户会将彼此靠近的项目视为一个整体（格式塔邻近原则）。
  • ❌ 标签、字段和下一个字段之间的间距相同——表单看起来像一串没有区分的内容。✅ 标签与字段之间的间距较小，字段之间的间距较大。
• 外部间距 ≥ 内部间距。 如果组件周围的间距小于内部的间距，无关元素在视觉上就会融合。确保外部间距 ≥ 内部间距。
• 间距能建立层级。 更多间距和更醒目的位置（顶部/前导位置，符合阅读顺序）会让元素显得更重要；主要内容应留出充足空间，次要内容则应与之区分。可结合尺寸使用，但单靠间距就足以体现优先级。
• 留白是主动设计，而非浪费。 宏观留白用于区分版块；微观留白有助于阅读并扩大触控目标。不要填满每处空隙。

所有内容都对齐网格

• 将内容放在网格上，并保持对齐。 列用于容纳内容；栏间距是列与列之间的空隙；页边距是外侧边缘——内容不应放在栏间距或页边距中。保持栏间距一致。
• **区分这三种间距：**页边距（外部/元素之间）、内边距（内部）和栏间距（列之间）。混淆它们是造成不一致的常见原因。
• 让相似元素在两个轴向上保持一致对齐——图片与图片对齐，文本基线与文本基线对齐——让视线沿着可预期的边缘移动。保持垂直节奏。
• 让容器适应网格，而不是让网格适应内容。 稳定的网格搭配灵活的容器尺寸，可让布局更易预测和扩展。仅在有意为之时才打破网格（见下文的调节手段）。

让布局适应变化

• 围绕网格规划响应式布局。 在断点处调整容器大小并重新排列列，而不是重建结构；标准列数为：桌面端 12 列 / 平板端 8 列 / 移动端 4 列。
• 让间距随文本缩放（动态字体）。 用户放大文本时，页边距/内边距/间隙和行高也应相应缩放，以保留层级关系和触控目标。遵循安全区域和平台页边距。

依赖上下文的决策（展示，不要自动应用）

逐项呈现，并说明权衡和与步骤 0 相关的建议；让用户自行选择。一次应用所有网格类型和比例系统是失败的做法。

决策	适用情况	避免／调整情况	默认建议
基本单位（8px 与 4px）	大多数产品 UI 使用 8px；需要更精细控制的高密度／数据密集型界面使用 4px	混用两者，或为了方便而脱离网格	以 8px 为基本单位；只有在确实需要更高密度时才改用 4px
网格类型	列网格 适用于通用布局；模块网格（列 × 行）适用于图库／表格／电商；稿纸网格 适用于长篇文本；层级网格 适用于以内容为主的编辑类版面；复合网格（两个网格）适用于媒体 + 文本	在简单内容上强行套用模块网格（徒有严谨），或在仪表板上使用稿纸网格	默认使用列网格；统一的卡片／数据布局使用模块网格
对称与非对称	对称布局适用于均匀、优先级相同的内容（平静、经典）；非对称布局可突出重点并增添动感	非对称布局破坏阅读模式，导致混乱	除非需要强调／对比，否则采用对称布局；保持比例一致
列模型（固定／流式／响应式）	响应式（调整大小 + 断点）适用于跨设备；流式（%）可平滑缩放；仅在受控环境中使用固定布局	在开放网络上使用固定像素布局（小屏幕出现水平滚动，大屏幕留下空白）	默认采用响应式；提前规划断点
尺寸设置方式	元素优先（固定尺寸）适用于需要统一规格的按钮／输入框／图标；内容优先（固定内边距，尺寸随内容增长）适用于文本块、表格行和内容不可预测的情况	对内容可变的元素固定高度（导致裁切／溢出）	交互基础组件采用元素优先；内容容器采用内容优先
黄金比例／三分法	将焦点元素（主视觉、CTA）放置在活跃区交点；推导和谐的比例	将其视为必须遵守的规则，凌驾于内容需求或基本单位尺度之上	用于放置焦点；间距仍遵循单位尺度
语义令牌层	大型团队／设计系统可从 xs/sm/md 别名中受益，而不必使用原始数字	别名层会给小型项目带来额外负担	始终使用数值尺度；为设计系统添加语义别名
打破网格	有意让主视觉／元素突破网格，以吸引注意力	无意打破网格，或频繁打破，以致网格失去意义	有意且少量地打破网格；其他所有内容都保持对齐

---

验证结果（编排）

交接时按可安装技能的 name 指定每个审查视角。只有安装了相应技能时才调用；如果未安装，此技能的核心规则已涵盖这些要求，无需因此停下，继续即可。

完成布局或修改后，将结果交给审查视角审核，不要直接宣告完成。这些是候选审查视角——审核立场由 docs/orchestration-policy.md 设定，也可以将整个任务交由 ux-design-review。此处，没有 Tier A；aesthetics 和 accessibility 属于 Tier B（可选），mobile-responsiveness 属于 Tier B（可选，仅限移动端）——在现有设计系统下，aesthetics 不适用，accessibility 则聚焦于使用体验；mobile-responsiveness 仅适用于移动端。如果用户调用此技能是为了处理某一件特定事项，请遵循该范围。

• ux-aesthetics-audit （Tier B — 可选；在设计系统下不适用） — 此技能旨在实现的构图审查：间距是否一致且符合比例、层级是否清晰、对齐是否整齐、留白是否均衡（不拥挤，也不空旷）？Aesthetics 负责构图和层级的评估。
• ux-accessibility-audit （Tier B — 可选；在设计系统下缩小范围） — 间距和尺寸是否能确保足够大的触控目标？布局在更高缩放比例或更大文本尺寸下能否重新排列而不损失内容？空间分组对辅助技术是否仍然合理？
• ux-mobile-responsiveness-audit （Tier B — 可选，仅适用于移动端）（适用于响应式/移动端）— 边距、槽宽和列数是否能在不同断点间平滑适配？间距是否会随动态字体大小调整？

范围与构图（参见 docs/orchestration-policy.md §9）：在设计系统下继承（仅从头构建时适用）——ux-typography 负责字体比例和可读性，ux-color 负责基于颜色的强调/对比度；存在设计系统时，两者都应采用其设计令牌。层级由空间、字体和颜色共同构建。如果审核发现冲突，应以目的为导向解决：布局旨在让内容便于浏览并体现优先级——如果间距随意、没有网格，或所有内容权重相同，结构就尚未完成。

---

常见的正确与错误做法

❌ 不要	✅ 应当
使用随意的数值（13px、27px）	让所有数值都遵循同一基础单位（8px/4px）和令牌比例
凭感觉设置内边距和间距	定义间距/尺寸令牌并重复使用
为相关和不相关的项目设置相同间距	利用邻近关系：组内间距紧凑，组间间距更大
让外部间距小于内部间距	保持外部间距 ≥ 内部间距，避免各组融为一体
不使用网格，直接将内容放到画布上	将内容与列对齐；避免放入槽区和边距内
混用对齐方式／造成边缘参差不齐	让相似元素在两个轴上保持一致对齐
让每个元素的权重都相同	运用空间和位置（以及尺寸）体现重要性次序
填满每处空隙	将留白视为有效空间——用于分组、留出呼吸空间、设置触控目标
在每个断点重新构建网格	让容器尺寸适应稳定的网格；在断点处重新排列列
在所有地方强行使用同一套网格/比例系统	选择适合内容的网格类型；仅在设置视觉焦点位置时考虑黄金比例
不经检查就交付布局	交由 aesthetics + accessibility（+ mobile-responsiveness）审核

---

来源课程（Uxcel）

• 布局基础与间距
• 设计系统中的间距与尺寸
• 网格设计入门
• 网格设计最佳实践
• 设计中的构成网格
• 在设计中应用构成网格
• 排版网格
• 设计构图基础
• 设计布局入门
• 设计格式属性