布局
在阅读任何文字之前，位置、间距和对齐就已经传达了层次结构。本技能用于构建这种结构并对其进行压力测试：调整尺寸、翻译文本、为 RTL 镜像翻转布局。
所有修复都应使用项目自身的样式系统编写。以下数值是对于没有既定密度系统的界面的起点；如果项目已有一套密度系统，则使用其定义的值，而不是看起来熟悉的替代值。保留有意的平台特色、紧凑的专业工具以及项目令牌，只要它们能通过压力测试。
点击区域和焦点行为属于 hr-better-accessibility。圆角、阴影和动画不在本技能范围内。行宽和文本间距属于 hr-better-typography。
用空间分组，而非线条
优先使用空间进行分组，其次是背景形状，最后才是分隔线，且仅当空间本身无法承载结构时才使用分隔线。组之间的间距必须至少是组内间距的 2 倍（例如组内 8px，组间 16px 或更大），否则分组就会变成噪音。对齐边和重要性排序详见 grouping-and-alignment.md。
保持控件与内容区分明确
每个可交互元素都应具有背景形状、边框或一致的放置区域。样式与旁边静态文本相同的控件不会被视为控件。
对齐到共享边缘
选择对齐边缘并保持一致；任何偏离的边缘都会被视为噪音。根据从属层级使用一个项目间距步长，16px 是一个有用的默认值。
对于依赖方向的布局，使用逻辑属性：padding-inline-start、margin-inline-end。仅在真正涉及物理几何时才使用物理的 left 和 right。
按重要性排序
最重要的内容位于顶部和起始边缘附近。阅读顺序从上到下，从起始到结尾。思考起始和结尾，而不是左和右。
提示隐藏内容
渐进式披露需要可见的提示。使用项目既定的提示方式，或者让下一个项目从滚动边缘露出 16–32px，或者显示一个展开控件。没有任何提示的隐藏内容等同于不存在。
目标之间的呼吸空间
如果没有既定密度系统，相邻的带边框或填充控件之间至少保留 12px，无边框的纯文本和图标控件周围至少保留 24px。紧凑型布局可以使用更小的间距，只要 hr-better-accessibility 的点击区域不重叠，且控件保持清晰可辨。布局边距和断点方案详见 spacing-and-adaptivity.md。
按钮内嵌于边缘
在内容布局中，全宽按钮应保持在布局边距内，并具有可见的圆角，在移动端上内边距从 16px 左右开始。当遵循既定平台特色、考虑安全区域且与系统 UI 保持可区分时，边缘到边缘的操作是可行的。
内容延伸，控件浮动
背景和媒体延伸到视口边缘。控件和文本保持在布局边距和安全区域内（env(safe-area-inset-*)）。粘性定位的 chrome 元素浮动在内容层之上，而不是遮挡它。
在布局断裂前保持结构
断点应基于内容，而非设备预设。只要布局真正合适，就尽可能保持展开状态，并尽量推迟折叠。在组件级自适应中优先使用容器查询，并首先在最小和最大尺寸上进行测试。
为增长和裁剪做规划
翻译后的字符串会变长，短字符串增长比例更大，因此一个单词的按钮标签是屏幕上风险最高的元素。不要给文本容器设置固定宽度或高度，并让行能够自动换行。使用伪本地化测试和一个代表性语言环境进行测试，而不是预算一个百分比。
切勿将关键操作放置在调整大小或滚动时会将其裁剪掉的位置。将其保留在正常流中，或放置在适合产品的稳定 chrome 元素中。
完成之前
| 错误 | 修复 |
|---|---|
在可本地化布局中使用 margin-left / padding-right | 使用 margin-inline-start / padding-inline-end |
| 内容布局按钮接触视口边缘 | 内嵌到项目边距内；保留有意的平台特色 |
| 断点设为 768/1024 因为是默认值 | 在内容实际无法适配的地方断掉 |
| 针对一种语言设置了固定宽度的文本容器 | 使用 max-width 和换行；测试伪本地化 |
| 主要操作位于易于裁剪的面板底部 | 使用粘性定位或带安全区域填充的稳定 chrome |
在移动端使用 100vh 的应用外壳或首屏 | 对于跟随浏览器 chrome 的外壳使用 100dvh，对于首屏使用 100svh |
| 长文本将行尾的操作推出屏幕或挤压其头像 | 在文本列上设置 min-width: 0，在固定尺寸项上设置 flex-shrink: 0 |
报告
严重性。 HIGH 在支持的视口下阻止了内容或操作。MEDIUM 损害了层次结构、阅读顺序或自适应性。LOW 是孤立的对齐或间距调整。
验证。 无浏览器时：检查逻辑属性是否替代了物理属性，容器查询和媒体查询是否针对支持的视口列表，以及 DOM 顺序是否匹配预期的阅读顺序。有浏览器时：测试每一个支持的宽度、200% 缩放和 RTL 镜像。对于每个无法运行的检查，报告为 Not verified。
格式。 将发现结果按其违反的原则分组，按严重性排序，每个根因一行，列出其出现的每个位置：
| 严重性 | 位置 | 之前 | 之后 | 原因 |
|---|
位置 为 path/to/file:line。原因 指出违反的原则和用户影响。
如果存在任何 HIGH 问题，报告为 Block；否则报告为 Approve，并将剩余问题留在表格中作为待办事项。切勿对未检查的覆盖范围报告 Approve。若无任何报告内容，则声明“未发现可操作的布局问题”并报告验证结果。