前面我们讲的列网格和模块网格，都建立在"等分"的基础之上。列网格把页面切成等宽的栏，模块网格在等宽的栏上再加等高的行，每个栏和每个模块的尺寸都是一样的。但有些页面的内容天然不适合等分。

比如一个产品的落地页，头部是一张全宽的品牌大图，中间是两栏功能介绍，底部是三栏的用户评价，再往下是一个单栏的行动号召区域。每个区块的宽度不同、高度不同、内部结构也不同。如果硬套 12 栏的等分网格，头部的全宽图还好处理，但中间两栏和底部三栏的切换就需要在同一套网格上做不同的列数安排，行动号召区域又要回到全宽，整个页面的布局跳来跳去，网格的"等分"反而变成了限制。

一个新闻首页也是类似的问题。头条新闻需要占据页面上最大的面积来吸引注意力，次要新闻占中等面积，普通新闻只需要小卡片。如果用列网格，所有新闻卡片都对齐到等宽的栏上，头条和普通新闻的面积差异只能靠横跨不同的栏数来实现。但栏数是整数，能切出来的面积比例就那么几档，12 栏网格里，一块区域只能占 1 栏、2 栏、3 栏……没法精确地表达出"这条新闻比那条重要三倍"这种程度差异。

层级网格为这类场景提供了一种不同的思路。它不从等分出发，而是从内容的重要性出发，根据信息的优先级来分配区域的大小和位置。

1. 层级网格和前几种网格的区别

列网格和模块网格的工作方式是"先定结构，再填内容"。设计师需要先决定栏数、间距、边距、行高，再把网格搭好，最后把内容放进网格的格子里。内容必须适应网格的尺寸，如果内容和格子不匹配，要么调整内容，要么接受不完美的适配。

层级网格的工作方式正好相反，是"先看内容，再定结构"。设计师需要先分析页面上有哪些内容区块、每个区块的重要性如何、区块之间的关系是什么，然后根据这些分析来划分页面区域。重要的内容占大面积，次要的内容占小面积，区域的大小和位置直接反映信息的优先级。

在层级网格中，不同区域的大小是不相等的，而且这种不相等是有意为之的。在列网格中，所有栏等宽是网格的基本特征，栏与栏之间的平等关系是网格秩序的一部分。在层级网格中，区域之间的不平等才是秩序的核心，大小差异本身就在传达信息。

但"不等分"不等于"没有规则"。层级网格仍然需要规则来维持页面的秩序，只是这些规则和列网格的规则不同。列网格的规则是"所有元素对齐到等宽的栏线上"，层级网格的规则是"区域的大小反映信息的优先级，区域之间的对齐关系和间距保持一致"。

2. 层级网格的布局逻辑

层级网格的核心逻辑是：区域的面积大小和信息的重要性成正比。最重要的内容占最大的区域，次要的内容占较小的区域，辅助性的内容占最小的区域。用户打开页面时，视线最先落在面积最大的区域上（和大小对比那篇讲的逻辑一致），从那里开始阅读，再逐步移向较小的区域。

这个逻辑要求区域之间的大小差异必须足够明显。如果两个区域的面积接近，用户就无法从布局中感知到优先级的差异，不知道该先看哪个。这和大小对比中的感知阈值是同一个道理。在层级网格中，相邻优先级的区域之间，面积比例至少要达到 1.5 倍以上，用户才能在扫视时清楚地感知到"这个区域比那个区域更重要"。

举一个例子。一个新闻首页有三个优先级内容：头条（最重要）、次要新闻（中等重要）、普通新闻列表（最不重要）。如果头条区域占页面可视区域的 50%，次要新闻占 30%，普通新闻列表占 20%，用户的视线会自然按照"头条→次要新闻→普通新闻"的顺序扫视，因为面积差异足够大，优先级一目了然。但如果三个区域各占 33%，用户面对三个大小相等的区域就不知道该先看哪个，层级网格就失去了意义。

区域的位置也在传达优先级。在从上到下、从左到右的阅读习惯中，靠近页面顶部和左侧的区域天然拥有更高的注意力权重。层级网格通常会把最重要的内容放在页面的顶部或左上方，既利用了面积上的优势，也利用了位置上的优势。

3. 什么场景适合层级网格

层级网格不是一种通用的网格类型，它适合内容优先级差异大、区块结构不规则的页面。

产品落地页是层级网格最常见的应用场景。落地页的通常主要用来说服用户采取某个行动（注册、购买、下载），页面上的不同区块承担着不同的说服任务。头部的品牌区域需要大面积来帮助用户建立第一印象，功能介绍区域需要中等面积来展示产品价值，用户评价区域需要较小的面积来提供社会证明，底部的行动号召按钮需要突出，但面积不需要太大。这些区块的功能不同、权重不同、视觉需求也不同，层级网格可以让每个区块获得与它的重要性相匹配的空间。

新闻和内容聚合首页也很适合层级网格。内容平台的首页需要同时展示大量内容，但不是每条内容都同等重要。头条需要大面积来吸引点击，编辑推荐的内容需要中等面积来获得曝光，普通内容只需要标题加缩略图就够了。层级网格让设计师可以通过区域大小来直接表达内容的编辑权重，用户看一眼就能看出哪些是今天最值得关注的内容。

作品集和案例展示页也适合层级网格。设计师展示自己的作品时，不是每个作品都需要同样大的展示空间。最有代表性的作品可以用大图甚至全宽展示，次要作品用中等大小的缩略图，其他作品用小缩略图排列。层级网格让作品展示的主次关系从布局中自然流露出来。

但也有很多页面不适合层级网格。后台管理系统、表单页、设置页这类页面，内容结构是规整的，每个表单项、每个设置项的重要性差异不大，用列网格或模块网格整齐排列反而更高效。如果在这类页面上使用层级网格，设计师需要为每个区块单独分配大小，但区块之间其实没有明显的优先级差异，分配大小就会变成一个无意义的决策。

4. 层级网格怎么保持秩序

区域大小不等，不代表可以随意摆放。如果大区域和小区域之间没有对齐关系、间距也不统一，页面就只是一堆大小不同的色块，谈不上网格。设计师需要在不等分的布局中引入一套规则，让不同大小的区域之间仍然保持结构上的关联。

第一种做法是在层级网格底下铺一层细粒度的列网格。区域大小虽然不同，但每个区域的边界都对齐到这层列网格的栏线上。比如底层铺了一个 12 栏的列网格，头条区域占 8 栏，次要新闻区域占 4 栏，普通新闻列表占 12 栏（全宽）。区域大小不等，但它们的左右边界都落在栏线上。

这是实际项目中最常用的做法，这种做法的好处是设计师无需从零开始定义对齐规则，已有的列网格就是现成的对齐参照系。设计师只需要在这个参照系上灵活分配区域，不必严格遵守"每个元素占整数栏"的要求，只需让区域边界对齐到最近的栏线上即可。

第二种做法是定义几条主对齐线。设计师在页面上确定 3 到 5 条垂直的参考线，所有区域的左边界或右边界至少要对齐到其中一条。这种做法比铺设完整的列网格更轻量，适合布局特别自由的页面，比如创意类的落地页或品牌展示页。

主对齐线的位置不是随意定的，通常选在页面的几个关键分割点上。比如一个 1200px 宽的内容区域，设计师可以在 0px（左边界）、300px（1/4 处）、600px（中线）、900px（3/4 处）和 1200px（右边界）各放一条对齐线。只要每个区域的边界至少对齐到其中一条线上，即使区域大小参差不齐，整个页面就会呈现出一种隐含的结构感。

第三种做法是保持间距一致。区域的大小可以不同，但区域和区域之间的间距必须统一。比如所有相邻区域之间的间距都是 24px，不管是大区域和小区域之间，还是两个小区域之间。统一的间距给不规则的布局提供了一种节奏感，用户在扫视页面时，即便是区域大小不同，但因为"区域之间的空隙"是均匀的，所以看起来也不会感到杂乱。

这三种做法可以组合使用。常见的组合是底层铺列网格加统一间距：区域的边界对齐到栏线上，区域之间的间距保持一致。这样既有横向的对齐秩序，又有间距上的节奏感，即便是区域大小有很大的差异，页面整体仍然是有结构的。

层级网格的"自由"是在区域划分上的自由，不是在对齐和间距上的自由。设计师可以灵活决定每个区域占多大面积，但区域的边界对齐关系和区域之间的间距仍然需要遵守规则。放弃了对齐和间距的约束，页面就不是层级网格，而是没有网格。

5. 层级网格的设计流程

层级网格不像列网格那样有一套固定的参数（栏数、间距、边距）可以直接设置。它的设计过程更像是一个分析和推导的过程。设计师需要先理解内容，再根据内容来决定布局。

第一步是列出页面上所有的内容区块，按信息优先级排序。产品落地页上可能有品牌区域、功能介绍、用户评价、定价表、行动号召、页脚六个区块。设计师需要明确这六个区块的优先级排序。品牌区域和行动号召的优先级最高（一个是入口，一个是出口），功能介绍和定价表次之，用户评价再次之，页脚最低。

第二步是根据优先级分配区域大小。最重要的区块占最大的面积，优先级低的区块占较小的面积。分配时要确保相邻优先级的区块之间面积差异足够大，用户能从布局中感知到主次关系。如果设计师发现某两个区块的优先级几乎相同，那么可以给它们分配相近的面积，但需要通过位置（上 vs 下、左 vs 右）来区分先后。

第三步是确定对齐规则。选择上文所讲三种方法中的一种或几种，为区域之间建立对齐关系。如果页面结构不太复杂，底层铺一套 12 栏的列网格加上统一的间距就足够了。如果页面特别自由（比如创意型的品牌展示页），可以只用几条主对齐线即可。

第四步是检验。检验的方法是遮住区域里的具体内容，只看区域的形状和大小分布。如果只看形状就能判断出哪个区域最重要、哪个次要、哪个最不重要，说明层级网格的优先级表达是成功的。如果遮住内容之后，分不清哪个区域更重要，说明区域之间的面积差异不够大，或者位置安排没有配合优先级，需要重新调整。

这个检验方法和大小对比那篇讲的"眯眼测试"逻辑相似。眯眼测试检验的是文字层级是否成立，层级网格的检验方法检验的是区域层级是否成立。两者的共同点是：如果用户不需要读内容就能从视觉结构中感知到优先级，那么设计就算成功了。