视觉层级

Visual Hierarchy

也常被叫作：主次分明重点突出信息层级第一眼看什么阅读顺序

风格与视觉通常止于「主路径」约 1 分钟读完

你可能会这么说

「让用户第一眼看到最重要的东西，而不是什么都抢眼。」

视觉层级 Visual Hierarchy

用大小、深浅、间距、位置排出「先看哪、再看哪」，重要内容不用喊也最抢眼。

视觉层级是把页面信息排出先后顺序：最重要的东西最大、最重、最靠前，次要的退后，不重要的安静待着。手段有四个：大小（字号）、深浅（颜色对比）、间距（离得多开）、位置（页面左上、屏幕中央优先）。层级不是靠某一个手段，是靠四个手段叠加——主标题比正文大两档、字更黑、上下留白更多，三重叠加，一眼就看到它。

层级失败的两种典型：一是平均——所有文字一样大一样黑，用户找不到重点，只能全部扫一遍；二是过载——每样东西都加了强调，加粗、变色、加大全上，结果全是重点等于没有重点。还有个隐藏问题：把最抢眼的位置让给了不重要的东西，比如促销横幅做得比主功能还大。

判断层级有个 3 秒测试：站远一点看页面（或把截图缩小到 30%），3 秒内说出「这个页面最重要的是什么」。说得出、说得对，层级及格；说不出来或说错，就是层级没做对。给 AI 下单时，别只说「把重点突出」——告诉它哪个信息是重点、用哪几个手段（大一号 + 加重 + 留白），并明确哪些东西不许抢眼。

长什么样真实可交互，不是截图

✓ 3 秒能看到重点

主标题 32 / 黑→副标题 18 / 半粗→正文 15 / 灰→辅助 12 / 浅灰

✕ 平均或过载所有文字一样大一样黑
或者每样都加粗变色
促销横幅比主功能还大

左：从 32 到 12、从黑到浅灰的四级阶梯，缩到 30% 一眼就看到标题。右：要么全都一样大找不着重点，要么全都强调、重点和噪音混在一起。

拆开看，里面有这几块

1
大小 Size
字号差是层级的主干。差一档不够，通常差 2-4 档才分得开。
2
深浅 Weight & color
文字黑 → 灰 → 浅灰，用颜色深浅分级，比单纯加粗更细腻。
3
间距 Spacing
重要内容的四周留白更多，呼吸空间本身就是强调。
4
位置 Position
页面左上、屏幕中央是优先位置，重要内容放这里。

常见的有哪几种

文字层级Text hierarchy

用字号 + 字重分级。

用在：文章、文档等纯内容型页面

组件层级Component hierarchy

用背景色深浅 + 阴影分级。

用在：卡片、面板、工具型页面

混合层级Mixed

文字与组件同时分级。

用在：营销页、产品首页

容易搞混？这样区分

视觉层级 ≠ 对比度 Contrast

对比度是「看得清看不清」的技术指标（正文至少 4.5:1）；视觉层级是「先看哪后看哪」的排布。层级靠的是相对大小和深浅差，不是单纯把每个字都调得更清楚。

视觉层级 ≠ 装饰 Decoration

突出是让重要信息更大更重；花哨是给不重要信息加装饰。把按钮做成页面最抢眼的元素，往往是把装饰当成了重点——按钮是手段，不是用户该先看到的信息。

什么时候用得上

产品首页

一句话主标题最大最黑，副标题次之，功能特性再退一档，促销信息压到最小。

文章页

标题、导语、正文、图注四档，读者扫一眼就知道从哪读起。

数据面板

核心指标最大，次要指标次之，图表的辅助信息最小。

你可以这样跟 AI 说

直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。

【任务】优化 [页面 / 区块] 的视觉层级，让用户 3 秒内看到重点
【重点】这个页面最重要的是 [具体信息]，它要在不滚动时第一眼看到
【手段】按顺序叠加：
  1. 主标题字号比正文大 2-4 档，字重加重
  2. 重点内容的四周留白明显大于其他内容
  3. 次要信息用灰色或浅灰，从颜色上退后
【禁止】
  - 不许给非重点内容加同样的强调（加粗 / 变色 / 加大）
  - 不许让按钮、横幅、装饰抢过重点信息的视觉地位
  - 不动布局结构、颜色语义、间距体系
【交付】动手前先告诉我你打算怎么排这四档（标题 / 副标题 / 正文 / 辅助），我确认后再改；列出改了哪些文件；我打开哪个地址用 3 秒测试能看到区别；你没验证的部分单独说

关键是把「重点是什么」和「用哪几个手段叠加」写清，再写「不许让什么抢眼」。这样它不会把整个页面都加粗一遍，也不会把按钮做得比主标题还大。

它说「做好了」，你怎么自己验

这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。

要亲眼看到这些，才算数

3 秒测试：把页面截图缩小到 30%（或站远点），3 秒内你能说出最重要的信息，且说得对。
重点信息同时用了多个手段：更大、更黑（或更深）、留白更多，而不是只有加粗。
非重点内容（辅助文字、横幅、装饰）没有比重点更抢眼。
缩小页面后，标题 → 正文 → 辅助的三级顺序仍然清晰，没有在某处倒过来。
同一屏内重点不超过 1-2 个，没有「每个模块都很大」的过载。

它常这么糊弄你

「重点已突出」——但页面所有标题都一样大，只有第一个碰巧大一点。3 秒测试立刻穿帮。
「我加粗了重点」——但正文也整段加粗，等于没加。层级靠多手段叠加，不是单靠加粗。
「把按钮做成了最醒目的元素」——但用户该先看到的信息被按钮盖过。按钮是手段，不是重点。
「每块内容都做了强调，用户不会漏」——全是重点就是没有重点，这是最常见的过载翻车。

视觉层级这类任务最高能验到「主路径」层：3 秒测试和缩小截图都是你自己能做的。重点查「重点信息是否用了多手段叠加」和「非重点是否真的退后了」，不要接受「已突出」这种无法反证的口头汇报。

考考你选一个你觉得对的

做完层级优化后，最有效的自测方法是？

想再深挖一点靠谱出处

Visual Hierarchy（视觉层级定义）Nielsen Norman Group ↗

# 视觉层级 (Visual Hierarchy)

> 用大小、深浅、间距、位置排出「先看哪、再看哪」，重要内容不用喊也最抢眼。

**你可能会这么说**：让用户第一眼看到最重要的东西，而不是什么都抢眼。

视觉层级是把页面信息排出先后顺序：最重要的东西最大、最重、最靠前，次要的退后，不重要的安静待着。手段有四个：大小（字号）、深浅（颜色对比）、间距（离得多开）、位置（页面左上、屏幕中央优先）。层级不是靠某一个手段，是靠四个手段叠加——主标题比正文大两档、字更黑、上下留白更多，三重叠加，一眼就看到它。 层级失败的两种典型：一是平均——所有文字一样大一样黑，用户找不到重点，只能全部扫一遍；二是过载——每样东西都加了强调，加粗、变色、加大全上，结果全是重点等于没有重点。还有个隐藏问题：把最抢眼的位置让给了不重要的东西，比如促销横幅做得比主功能还大。 判断层级有个 3 秒测试：站远一点看页面（或把截图缩小到 30%），3 秒内说出「这个页面最重要的是什么」。说得出、说得对，层级及格；说不出来或说错，就是层级没做对。给 AI 下单时，别只说「把重点突出」——告诉它哪个信息是重点、用哪几个手段（大一号 + 加重 + 留白），并明确哪些东西不许抢眼。

**也叫**：主次分明、重点突出、信息层级、第一眼看什么、阅读顺序

## 你可以这样告诉 AI

```text
【任务】优化 [页面 / 区块] 的视觉层级，让用户 3 秒内看到重点
【重点】这个页面最重要的是 [具体信息]，它要在不滚动时第一眼看到
【手段】按顺序叠加：
  1. 主标题字号比正文大 2-4 档，字重加重
  2. 重点内容的四周留白明显大于其他内容
  3. 次要信息用灰色或浅灰，从颜色上退后
【禁止】
  - 不许给非重点内容加同样的强调（加粗 / 变色 / 加大）
  - 不许让按钮、横幅、装饰抢过重点信息的视觉地位
  - 不动布局结构、颜色语义、间距体系
【交付】动手前先告诉我你打算怎么排这四档（标题 / 副标题 / 正文 / 辅助），我确认后再改；列出改了哪些文件；我打开哪个地址用 3 秒测试能看到区别；你没验证的部分单独说
```

## 怎么验证他真的做到了

通常止于层级：**主路径** — 真实用户的正常操作能走通，不靠特殊参数

- [ ] 3 秒测试：把页面截图缩小到 30%（或站远点），3 秒内你能说出最重要的信息，且说得对。
- [ ] 重点信息同时用了多个手段：更大、更黑（或更深）、留白更多，而不是只有加粗。
- [ ] 非重点内容（辅助文字、横幅、装饰）没有比重点更抢眼。
- [ ] 缩小页面后，标题 → 正文 → 辅助的三级顺序仍然清晰，没有在某处倒过来。
- [ ] 同一屏内重点不超过 1-2 个，没有「每个模块都很大」的过载。

常见糊弄：
- 「重点已突出」——但页面所有标题都一样大，只有第一个碰巧大一点。3 秒测试立刻穿帮。
- 「我加粗了重点」——但正文也整段加粗，等于没加。层级靠多手段叠加，不是单靠加粗。
- 「把按钮做成了最醒目的元素」——但用户该先看到的信息被按钮盖过。按钮是手段，不是重点。
- 「每块内容都做了强调，用户不会漏」——全是重点就是没有重点，这是最常见的过载翻车。

来源：https://mickerbook.com/reference/t/visual-hierarchy/