视觉层级
Visual Hierarchy
初级通用视觉层级（Visual Hierarchy）是通过大小、位置、间距、颜色等线索，安排页面内容被注意到的先后顺序。它解决的是用户扫一眼却找不到重点的问题，比如让报表里的异常数据先于次要说明进入视线。
你可能会说：「这个后台页面信息太多了，能不能让人一眼看到异常数据，再找到处理入口？」
动手看看支付监控报表
支付监控 · 今日截至 14:30，与近 7 日同期对比
支付失败率
8.6%
高于近 7 日均值 3.2 个百分点
支付请求
12,480
平均处理时间
1.2 秒
异常数据颜色
先扫一眼报表，看看你最先注意到什么；再调整字号、颜色和间距。异常数据应当先被看到，说明和常规指标随后才进入视线。
要点视觉层级是怎么形成的？
- 1
先决定用户要看什么
我们得先确定这页的任务，再谈字体和颜色。比如告警页要让你先发现异常、再判断影响、最后找到处理入口；如果所有内容都一样显眼，用户就得逐项阅读。
- 2
用差异安排注意顺序
字号、字重、位置、留白和颜色都能制造差异。比如把异常数量放大，并与说明文字拉开间距，视线就更容易先落在那里。重点不必处处加粗，否则差异会消失。
- 3
在真实内容里检查顺序
层级不是设计稿里看着整齐就够了。我们可以换上较长的标题、真实数据和手机尺寸，再快速扫一遍：最先看到的，是不是用户此刻最需要的信息？
容易混淆的地方
视觉层级讨论的是人看页面时先注意什么，不等于对比度：对比度是形成层级的手段之一，也关系到文字是否容易辨认。它也不是 z-index；后者控制元素在屏幕上谁盖住谁，弹窗盖住表格，不代表弹窗内部的信息顺序就清楚了。
什么时候用
适合用
- 做运营后台首页时，你想让异常指标、变化原因和处理入口按任务顺序被看见。
- 做 AI 工具的结果页时，你想让结论先于推理过程和补充信息被用户发现。
- 做手机端表单时，字段较多，你想让当前步骤和主要操作更容易被找到。
不适合用
- 接口返回的 JSON 字段需要确定结构和含义时，视觉层级帮不上忙；改用数据结构和字段说明来约定。
- 弹窗被页头遮住时，问题是元素的叠放关系；先检查定位、堆叠上下文和 z-index。
- 团队还没决定首页该展示哪些指标时，先讨论用户任务和内容取舍，而不是安排视觉层级。
练一练选一个答案，看看解释
你在改一个告警后台。用户反馈打开页面后，要找很久才能发现待处理的严重告警。以下哪种改法最能解决这个问题？
让 AI 帮你做复制给 AI Agent 直接用
请调整这个告警后台的视觉层级：让待处理的严重告警最先被注意到，其次是影响范围和处理入口，历史记录放在后面。你可以调整字号、字重、位置和间距，但保留现有信息；完成后说明用户扫视页面时会按什么顺序看到它们。