layout

布局

仅在获准的目标和范围内进行结构更改。

布局将产品优先级转化为阅读顺序、分组、节奏和可用空间。移动区块之前，先诊断结构问题。

---

访客模式

• 说服 + 体验： 如果所选的视觉风格适合，构图可以不对称、流动，或有意打破常规。
• 操作 + 阅读： 可预测的结构、稳定的信息密度和可导航的线性布局都是易用性优势。
• 原生： 遵循项目平台在导航、内边距、适配和触控目标方面的惯例。

保留既有的视觉风格。布局命令只改变其中的结构；替换视觉身份需要单独授权的设计方向。

两项独立评估

先完成视觉评估，再查看机械检查结果，以免检查结果影响设计判断。仅在获得授权时委派；否则，先记录第一项评估，再开始第二项。

1. 布局评估： 检查有代表性的状态和视口。对以下每个问题，都提供渲染结果或源代码作为证据：
   • 阅读顺序： 执行眯眼测试。模糊细节后，是否仍能按顺序辨认出主要元素、次要元素和主要分组？
   • 分组： 相关项是否彼此靠近，且不同分组之间有明确区隔？还是容器在弥补邻近关系不足的问题？
   • 节奏： 紧凑与宽松的间距是否形成有意设计的节奏？还是反复使用同一个间距值，让所有内容的权重都相同？
   • 结构： 布局拓扑是否符合内容和任务？重复的卡片、列或分区是否确实彼此等同，还是仅仅沿用了框架默认设置？
   • 密度： 每个区域的信息量是否符合使用频率、决策复杂度和访客模式？
   • 适配： 在窄屏、中间尺寸、宽屏、缩放和本地化状态下，哪些内容会重新排序、折叠、换行、滚动或保持固定？DOM 顺序和焦点顺序是否仍与视觉顺序一致？
   • 极端情况： 长内容、空状态、叠加层、粘性元素、安全区域和较小的触控目标，是否暴露了结构性问题？
2. 机械检查： 以只读模式使用项目配置的布局检查工具；如果没有检查工具，则检查源代码。报告无法获取的证据。

还要检查检测器无法判断的任意间距、溢出、堆叠和容器行为。在第一项评估中不要纳入机械证据；编辑前再综合两轮评估的结果。检查无异常并不能证明层级或节奏合理。

明确空间布局主旨

编辑前，明确说明：

• 主要阅读路径或任务路径；
• 哪些内容应归为一组，哪些必须分开；
• 哪个元素起主导作用，哪些元素起辅助作用；
• 预期的信息密度和间距节奏；
• 结构如何适应不同容器、视口、输入模式和极端内容。

选择最简单且能表达这些关系的结构模型。根据布局基元所控制的关系来选择它们，并以语义化的方式命名可复用的间距和容器角色。

应用

• 按含义分组。优先利用邻近关系，再添加容器或装饰。
• 通过有意拉开紧密与宽松间距，营造节奏感。
• 使用有文档记录的间距尺度，而非一次性数值。以 4 个单位为基数，通常能提供实用的中间步长，弥补仅使用 8 单位尺度的不足。
• 层级应遵循产品优先级，而非框架默认设置。
• 让不同内容在视觉上有所区分，但不要把每个组都变成孤立的组件。
• 让响应式行为体现在结构上：根据重要内容进行重排、折叠、重新排布或显示。
• 同一组件出现在不同情境时，优先使用能感知容器的组件。
• 当 gap 比子元素外边距更直接地表达同级元素之间的关系时，使用 gap 营造节奏。
• 即使可见标记很小，也要确保触控目标易于使用。
• 仅在能明确状态或层级时使用深度效果。
• 只有在检查渲染结果后，才进行视觉校正。

变化本身并非目的。重复应有助于识别；只有在内容或优先级发生变化时才打破重复。

验证

• 眯眼观察时，仍能按顺序看出主要内容、次要内容和主要分组。
• 在所有受支持的尺寸下，阅读和任务路径都清晰。
• 相关内容自然地归为一组，无关内容不会混在一起。
• 紧密与宽松的间距营造出有意图的节奏，而不是单调重复。
• 密度与使用频率及内容复杂度相匹配。
• 长文本、空状态、本地化、缩放和动态内容都不会破坏结构。
• 键盘、触控和辅助技术的顺序与视觉顺序一致。
• 最终的机械检查没有无法解释的发现。

针对每项提供渲染结果或源代码证据，然后重新运行检查。不要用一句简单的“是”代替验证。

结构稳定后，推荐可用的 polish 技能。