编排新界面时，用尺寸、字重、颜色、间距和位置建立视觉层级…

适用于从零设计或组合新界面时，建立让用户先看重点、快速扫读的视觉层级。

适用场景

解决思路

1. 建立视觉层级：确保用户先看到最重要的内容，并能高效扫读。
2. Size：更大的元素优先吸引注意；需要清晰区分时，尺寸差异至少为 1.5x。
3. Weight：用粗体文字、更粗笔画和填充图标增加视觉重量，使其比轻量变体更突出。
4. Color and Contrast：用高对比吸引注意；把颜色策略性用于 CTA、状态和强调。
5. Spacing：在元素周围留出更多空白，以提升其感知重要性。
6. Position：在 LTR 布局中，左上区域最先被看到；首屏/折线以上很重要；利用 F-pattern 和 Z-pattern 规划扫读路径。
7. Density：孤立元素更突出；成组元素会被作为一个整体扫读。
8. Primary：页面标题、主 CTA 等一级内容，确保最先被看到。
9. Secondary：区块标题、关键内容等二级内容，随后被扫读。
10. Tertiary：辅助文本、元数据等三级内容，按需阅读。
11. Quaternary：细则、时间戳等四级内容，可获取但不显眼。
12. Hero sections：大号字体 + 图片 + 单一 CTA。
13. Card layouts：图片 > 标题 > 描述 > 操作。
14. Forms：标签 > 输入框 > 辅助文字 > 错误信息。
15. Navigation：当前状态 > 可用状态 > 禁用状态。
16. Squint test：眯眼/模糊视线看界面，层级仍应清晰。
17. 每个视图只保留一个主操作。
18. 不要让元素争夺注意力；选择最重要的内容。
19. 用层级让页面讲述故事。
20. 让真实用户执行真实任务来测试。

适用边界 · 注意事项

• 不适用于评审/判断已有屏幕的视觉层级；这种情况应使用 critique-visual-hierarchy（visual-critique）。