arrange

评估并改善单调、拥挤或结构薄弱的布局与间距，将普通的排列转变为有意设计、富有节奏感的构图。

当问题主要在于空间构图时使用。如果更大的问题在于优先级不明确、重点相互冲突、区块标题过于醒目，或标签与数值的权重失衡，请使用 hierarchy。

必须完成的准备工作

阅读 frontend-design，并遵循其中的上下文收集流程。复用现有上下文，只针对影响重大的信息缺口提问。

---

评估当前布局

分析当前空间设计的薄弱之处：

1. 间距：

   • 间距是一致的，还是随意设置的？（随机的内边距／外边距值）
   • 所有间距都一样吗？（到处都是相同的内边距 = 缺乏节奏）
   • 相关元素是否紧密分组，而组与组之间留有充足空间？
   • 组与组之间的空间是否大于组内元素之间的空间？如果不是，分组可能会显得模糊。

2. 视觉层级：

   • 使用眯眼测试：模糊你的视线（只是比喻）——你还能辨认出最重要的元素、第二重要的元素和清晰的分组吗？
   • 层级是否有效？（仅靠空间和视觉权重就足够，但当前方法是否有效？）
   • 留白是否引导视线关注重要内容？

3. 网格与结构：

   • 是否有清晰的底层结构，还是布局显得杂乱无章？
   • 是否到处都在使用相同的卡片网格？（图标 + 标题 + 文本，不断重复）
   • 是否所有内容都居中？（左对齐和非对称布局会让设计感更强，但并非一成不变的规则）

4. 节奏与变化：

   • 布局是否有视觉节奏？（紧凑与宽松的间距交替出现）
   • 每个区块的结构是否都一样？（单调重复）
   • 是否有刻意安排的意外感或强调点？

5. 密度：

   • 布局是否过于拥挤？（缺少呼吸空间）
   • 布局是否过于稀疏？（留白过多且没有目的）
   • 密度是否与内容类型相匹配？（数据密集型 UI 需要更紧凑的间距；营销页面则需要更宽松）
   • 从更多留白开始再逐步减少，是否比事后被动地增加留白更能得到清爽的效果？

关键：即使颜色和字体都没问题，布局问题往往也是界面感觉“不对劲”的根本原因。空间是一种设计素材——要有意识地运用。

制定布局改进计划

参考 frontend-design 技能中的 空间设计参考，获取有关网格、节奏和容器查询的详细指导。 当布局与层级问题重叠时，参考层级检查清单，了解灰度测试、操作优先级和标签／数值处理。 在决定如何分隔相邻区域时，参考表面分隔，判断卡片、边框、阴影、间距或背景变化哪种方式更合适。

制定系统化的计划：

• 间距系统：使用一致的比例体系——可以是框架内置的比例（例如 Tailwind）、基于 rem 的设计令牌，或自定义体系。具体数值不如一致性重要。
• 密度策略：应该从宽松开始再逐步收紧，还是因为产品需求而有意采用紧凑布局？
• 层级策略：如何通过空间传达重要性？
• 布局方式：什么结构适合内容？一维布局用 Flex，二维布局用 Grid，复杂页面布局用命名区域。
• 节奏：哪些地方应该紧凑，哪些地方应该宽松？

系统化地改善布局

建立间距系统

• 使用一致的间距刻度——框架刻度（Tailwind 等）、基于 rem 的令牌或自定义刻度都可以。关键是数值来自一套定义好的集合，而不是随意设定。
• 选择间隔有意义的刻度；如果相邻数值过于接近，这套系统就无法帮助你快速做出选择。
• 使用自定义属性时，采用语义化的令牌名称：--space-xs 到 --space-xl，而不是 --spacing-8
• 同级元素之间使用 gap，而不是外边距——这样可以避免使用外边距折叠技巧
• 使用 clamp() 实现流动间距，让间距在较大屏幕上更宽裕

营造视觉节奏

• 先留出稍多的留白，再逐步缩减，直到页面达到平衡
• 紧密分组相关元素（同级元素之间留出 8-12px）
• 不同区块之间留出充足间距（48-96px）
• 区块内部的间距要有所变化——并非每一行都需要相同的间隔
• 采用不对称构图——合适时打破可预测的居中内容布局
• 明确分组边界：一组元素周围的间距应大于组内间距

选择合适的布局工具

• 一维布局使用 Flexbox：项目行、导航栏、按钮组、卡片内容和大多数组件内部布局。对于大多数布局任务，Flex 更简单也更合适。
• 二维布局使用 Grid：页面级结构、仪表盘、数据密集型界面，以及需要协调控制行和列的布局。
• 不要默认使用 Grid，如果使用带有 flex-wrap 的 Flexbox 会更简单、更灵活。
• 使用 repeat(auto-fit, minmax(280px, 1fr)) 创建无需断点的响应式网格。
• 复杂的页面布局使用命名网格区域（grid-template-areas）——并在断点处重新定义。
• 当内容有明显的理想宽度时，使用固定宽度或最大宽度；并非所有元素都应始终流动缩放。

打破卡片网格的单调感

• 不要默认所有内容都使用卡片网格——间距和对齐本身就能自然地形成视觉分组
• 仅当内容确实独立且可操作时才使用卡片——绝不要在卡片中嵌套卡片
• 调整卡片尺寸、跨列布局，或混合使用卡片与非卡片内容，以打破重复感

强化视觉层级

• 使用尽可能少的维度来建立清晰的层级。仅靠空间就足够——元素周围充足的留白能吸引视线。一些最精妙的设计仅凭空间和字重就能营造节奏。只有在更简单的方式不足以达到效果时，才增加颜色或尺寸对比。
• 留意阅读动线——对于从左到右书写的语言，视线通常会从左上自然扫向右下，但主要操作的位置取决于上下文（例如，对话框中位于右下方，导航中位于顶部）。
• 通过邻近和间隔来清晰地划分内容组。
• 不要仅仅因为网格暗示了缩小尺寸，就缩小组件；让组件保持理想尺寸，直到约束迫使你做出妥协。

管理深度与层级

• 建立语义化的 z-index 刻度（下拉菜单 → 粘性元素 → 模态背景层 → 模态框 → toast → 工具提示）
• 建立一致的阴影刻度（sm → md → lg → xl）——阴影应保持微妙
• 使用层级来强化层次，而不是作为装饰

光学调整

• 如果图标虽然几何居中，但视觉上看起来偏离中心，可以微调它——但只有在你确信它确实看起来不对时才这样做。不要凭猜测调整。

切勿：

• 使用超出间距比例的任意数值
• 让所有间距都相等——变化能营造层次
• 在间距是唯一分隔方式时，让组内间距与组间间距相等
• 把所有内容都放进卡片——并非所有内容都需要容器
• 在卡片内嵌套卡片——在卡片内部使用间距和分隔线来建立层次
• 到处使用相同的卡片网格（图标 + 标题 + 文本，反复重复）
• 把所有内容都居中——左对齐并保持不对称，会让设计更出彩
• 默认套用主视觉指标布局（大数字、小标签、统计数据、渐变）。如果要展示真实用户数据，醒目的指标可以很好用，但必须展示实际数据，而非装饰性数字。
• 默认使用 Tailwind 网格工具类；如果 Tailwind 弹性布局工具类更简单，就使用它，选择最简单的布局工具来完成任务
• 强行让布局填满所有可用宽度
• 使用任意 z-index 值（999、9999）——建立语义化的层级

验证布局改进

• 眯眼测试：视线模糊时，你能分辨出主要内容、次要内容和各个分组吗？
• 节奏：页面是否有令人舒适的节奏，既有紧凑的间距，也有宽松的间距？
• 层次：最重要的内容是否能在 2 秒内一目了然？
• 留白空间：布局是否舒适、不拥挤也不浪费空间？
• 一致性：间距系统是否得到统一应用？
• 响应性：布局能否在不同屏幕尺寸下自然适配？

请记住：空间是最未被充分利用的设计工具。节奏和层次恰到好处的布局，即使是简单的内容也能显得精致且经过深思熟虑。