一个好的版式，用户一眼就知道该先看什么、再看什么、最后看什么。这种"自动引导"不是凭运气，而是设计者通过视觉层级刻意安排的结果。视觉层级就是利用大小、颜色、位置、对比等手段，让元素之间产生明显的主次差异，从而引导视线按预定顺序流动。没有层级的页面，所有元素都在"抢话"，用户反而什么也抓不住；层级清晰的页面，阅读路径顺畅，信息获取高效。

一、层级的四个维度

建立视觉层级有四个核心维度，它们往往组合使用，共同决定一个元素的"视觉权重"。

1. 大小

大小是最直接的层级手段。越大的元素越先被注意到，所以标题总是比正文大，主图总是比缩略图大。但大小差异要拉开到足够明显——1.2 倍的差异人眼几乎察觉不到，至少要 1.5 倍以上才有层级感。常用的字号阶是 12、14、16、20、24、32、48，每级之间都有明显的跳跃。

2. 颜色

颜色通过色相、明度、饱和度三个层面建立层级。高饱和度的颜色比低饱和度更显眼，深色比浅色更"重"，暖色比冷色更"前进"。所以主标题用深色，辅助说明用浅灰；CTA 按钮用品牌主色的高饱和版本，次要按钮用低饱和的中性色。关键是全页只保留一个最亮的色彩焦点，多了就互相抵消了。

3. 位置

位置决定了元素在阅读路径上的先后。视线习惯从左上角进入，所以左上角是"黄金位置"，常放 Logo 和主标题；右下角是"行动位置"，适合放 CTA。同一区域内，靠上的元素比靠下的更先被看到，居中的元素比边缘的更显眼。利用位置规律，可以把最重要的内容放在视线必经之路上。

4. 对比

对比是层级的放大器。大小、颜色、粗细、留白的差异都是对比。对比要"拉满"——要么差异很大，要么没有差异，最怕半吊子的微弱差别，既不像同级也不像主次，显得犹豫。比如标题和正文，要么字号差一倍以上，要么干脆一样大，不要只差 2px。

/* 字号阶：每级有明显跳跃 */
:root {
  --text-xs:  12px;  /* 辅助说明 */
  --text-sm:  14px;  /* 次要正文 */
  --text-base:16px;  /* 正文 */
  --text-lg:  20px;  /* 小标题 */
  --text-xl:  28px;  /* 区块标题 */
  --text-2xl: 40px;  /* 页面主标题 */
}

/* 颜色层级：从深到浅递减 */
.h-title  { color: #2A3328; }            /* 最深：主标题 */
.h-body   { color: #5A6660; }            /* 中等：正文 */
.h-muted  { color: #8A9690; }            /* 最浅：辅助 */

/* 对比：主按钮高饱和，次按钮低饱和 */
.btn-primary   { background: #7FB069; color: #fff; }   /* 焦点 */
.btn-secondary { background: #F5F1E6; color: #5A6660; }/* 次要 */

二、F 型与 Z 型阅读模式

人的视线在网页上的移动是有规律的，尼尔森诺曼集团的眼动研究证实了两种主要模式：F 型和 Z 型。理解这两种模式，能让你的层级安排有的放矢。

F 型：内容密集型页面

当页面是大量文字内容（如博客、资讯列表、搜索结果）时，视线呈 F 型移动：先沿顶部水平扫视，再沿左侧垂直下移，遇到感兴趣的内容再向右横向阅读，形成横向的"短扫视"。这意味着左侧前几个字格外重要，标题和段落开头要承载关键信息。

Z 型：简洁转化型页面

当页面元素少、以引导转化为目标（如落地页、登录页、注册页）时，视线呈 Z 型移动：从左上到右上，斜向下到左下，再到右下，形成一个 Z 字。这种页面的策略很明确：左上放品牌、右上放导航或次要 CTA、中部放核心信息、右下放主 CTA，让视线终点落在行动按钮上。

/* Z 型落地页布局 */
.landing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.landing .brand  { grid-column: 1; grid-row: 1; }      /* 左上：品牌 */
.landing .nav    { grid-column: 2; grid-row: 1; }      /* 右上：导航 */
.landing .hero   { grid-column: 1 / -1; grid-row: 2; } /* 中部：核心信息 */
.landing .cta    { grid-column: 2; grid-row: 3;        /* 右下：主 CTA */
                   justify-self: end; }

三、信息架构决定层级

视觉层级不是凭空决定的，它的根基是信息架构（Information Architecture）。在动手排版前，先要把内容按重要性分层：哪些是用户必须第一时间看到的（一级），哪些是辅助理解的（二级），哪些是可看可不看的（三级）。这个分层来自业务目标和用户需求，而不是设计师的主观偏好。

分层完成后，用前面讲的四个维度去实现它：一级内容用最大字号、最深颜色、最显眼位置；二级内容缩小一档、颜色变浅；三级内容用最小字号、最浅灰色。这样信息架构就转化成了视觉层级，用户看到的就是你想让他看到的。

四、实战：一个卡片模块的层级搭建

以一个"特性卡片"为例，看看层级是怎么一步步搭起来的。一张卡片通常包含：图标、标题、描述、操作链接。按重要性分层：标题是一级（用户先看这是什么），描述是二级（了解细节），图标是视觉锚点，操作链接是行动出口。

/* 特性卡片：四层视觉层级 */
.feat-card {
  padding: 32px 28px;
  background: #fff;
  border-radius: 16px;
}

/* 图标：视觉锚点，中等权重 */
.feat-card .icon {
  width: 56px; height: 56px;
  background: #E4F0DC;
  border-radius: 14px;
  margin-bottom: 20px;
}

/* 标题：一级，最大最深 */
.feat-card h3 {
  font-size: 20px;          /* 比正文大 1.5 倍 */
  color: #2A3328;           /* 最深 */
  font-weight: 700;
  margin-bottom: 12px;
}

/* 描述：二级，中等 */
.feat-card p {
  font-size: 14px;          /* 比标题小一档 */
  color: #8A9690;           /* 变浅 */
  line-height: 1.8;
  margin-bottom: 20px;
}

/* 操作链接：三级，但用色突出作为行动出口 */
.feat-card .link {
  font-size: 13px;
  color: #4A7C3A;           /* 品牌色：行动信号 */
  font-weight: 600;
}

这张卡片里，标题靠"大+深+粗"成为第一视觉焦点，描述靠"小+浅"退居二线，图标用色块提供视觉锚点，操作链接虽然字号最小却用品牌色制造行动召唤。四个元素各归其位，视线流动自然从图标到标题、到描述、再到链接，形成完整的阅读闭环。这就是层级的力量——不用任何说明，用户也能按你设计的顺序读完。

五、层级与一致性的平衡

最后要强调的是，层级强调"差异"，但差异要建立在"一致"的基础上。同级的元素必须保持视觉一致——所有二级标题用同样的字号字重，所有卡片描述用同样的颜色行高。只有同级一致，跨级的差异才成立。如果每个标题都长得不一样，用户就无法建立"这些都是同一层级"的认知，层级也就失效了。一致性是层级的反面，也是层级的基石，两者相辅相成，共同构成清晰的版式秩序。