EDITORIAL LIST / 清单文章
网页布局 Top 10：10 大经典页面与信息架构
10 条 · 席位已收满
这一版收录的是布局与信息架构里的基本骨架：在画一个界面之前，你先要决定内容按什么结构摆放。这些结构彼此不是替代关系，而是回答不同的问题。
选择标准
- 描述的是内容之间的结构关系，而不是某个组件的外观。
- 能和同类里相邻的结构区分开：区别落在“谁决定显示什么”，而不是“看起来像不像”。
- 既适用于页面排布，也适用于跨页面的导航组织，两者在这一类里都算布局问题。
本版席位
标注“编辑重建席位”的位置由本仓库编辑判断补上；其余席位来自计划 issue #1 的清单账本。
主从布局
保留可选择的项目列表，并呈现当前所选项目的详情。
为什么在这一版里：给这一类立一个基准：由列表选择决定详情显示什么。
别和它混淆：分栏本身不等于主从；关键是列表选择与详情内容之间的联动。
Bento 网格
使用不同尺寸但对齐于共同网格的内容块，组织一组可概览的信息。
为什么在这一版里：补上“同时概览多块信息”的结构，与逐项查阅形成对照。
别和它混淆：是布局，不是材质或风格；卡片大小不同也不自动构成良好的信息层级。
模块化网格
用横向的行与纵向的列同时切分页面，行列交叠处形成统一尺寸的模块；内容按可预期的数量跨越若干模块放置，而不是只靠列宽变化的单向网格。IxDF 指出模块化网格由上到下的横向分割与由左到右的纵向分割共同构成，Müller-Brockmann 等瑞士平面设计师在此基础上确立了这套系统；Smashing Magazine 的网格方法文章说明网格单元需保持统一尺寸,短内容对齐到网格边界，长内容则跨越多个单元或收缩到标准单元内。
为什么在这一版里：说明网格本身可以是一种结构约定，而不只是对齐工具。
别和它混淆：模块化网格要求行列都参与切分，得到可两维度计数的模块；只按列宽分栏、行高随内容自由伸缩的网格不算模块化网格。Bento 是建立在模块化网格之上的一种具体构图风格，用不同大小的块面主动制造视觉层级；模块化网格本身不预设哪个模块更重要，只提供统一的坐标系。卡片网格是模块化网格的一种同构、重复的特例：每张卡片占据相同的模块数、结构一致；模块化网格允许不同区块跨越不同数量的模块，不要求彼此同构。三者需要分开讨论。
单列布局
把页面内容与表单字段自上而下排成一列，让视线沿单一方向前进；表单研究指出单列比多列更少出现跳过、误读字段与填错。
为什么在这一版里：补上最简单的结构，并提示它在窄屏上是多种布局的收敛结果。
别和它混淆：指有意选择的单列阅读或任务页面结构，如文章、表单、移动优先页面，而不是主从布局在窄屏上被迫塌缩成的一栏；也不同于分步的线性流程——向导是流程，单列是承载每一步的页面结构。少量逻辑上属于同一实体的短字段（如城市/邮编）并排放在一行，仍算单列表单。
侧栏布局
在主内容旁保留一条持久的纵向侧区，用来放置导航、筛选或工具；NN/g 指出左侧纵向导航便于扫视、容纳更多类别，且更容易在不同屏宽下重排。
为什么在这一版里：把“持久侧区”与主从布局分开：侧栏不一定是对象列表。
别和它混淆：侧栏是页面级的持久区域，其内容可以是导航、筛选器或工具面板，不一定是对象列表；因此它不同于主从布局——主从中的侧列表选择会驱动详情内容，而侧栏与主内容之间没有这种选择联动。它也不同于单列布局：单列刻意只保留一条内容列，侧栏则始终把辅助区域与主内容并排。窄屏下折叠成抽屉的侧栏仍属侧栏布局。
卡片网格
把一组结构相同的卡片按重复的行列网格排列，每张卡片代表一个可点开的内容单元，通常由图片、标题、摘要与操作组成。
为什么在这一版里：补上同构单元的重复排列，区别于尺寸各异的信息块。
别和它混淆：是页面级布局，不是卡片这一组件本身；与 Bento 网格的区别在于卡片同构且尺寸一致，不靠块面大小制造层级。卡片若结构各异、字段位置不可预期，就失去可扫视性。
圣杯布局
用全宽页头、三栏正文（固定宽度左侧导航、弹性宽度中间内容、固定宽度右侧边栏）与全宽页脚组成的经典网页构图；历史上用浮动和无表格 CSS 很难同时做到中间内容列先出现在源码中、页脚全宽、标记精简这几个目标，因而被戏称为『圣杯』，如今用 CSS Grid 或 Flexbox 已经很容易实现，这个名字本身是那段历史留下的说法。
为什么在这一版里：保留一个有具体历史名称的三栏构图，说明它不是列表详情关系。
别和它混淆：圣杯布局关注的是全宽头尾加三栏正文这个具体的页面级构图，两个固定宽度侧栏与中间弹性内容之间没有选择联动，因此不同于主从布局——主从中的侧列表选择会驱动详情内容更新。它也不同于侧栏布局：侧栏布局只讨论一条持久的侧区与主内容的关系，圣杯布局则同时约定了左右两个侧栏、全宽页头页脚，以及中间内容在源码中优先出现这一具体排布规则。
层级导航结构
把内容组织成由父子分区构成的一棵树，用户从顶层类别逐级下钻到子类和具体条目，并通过面包屑或返回控件回到上层；NN/g 指出面包屑展示的是站点的层级结构而非浏览历史，并说明层级在宽与深之间需要权衡——扁平结构让内容更易被发现，过深的结构则要求点击太多层、每层的类别也更笼统。
为什么在这一版里：把跨页面的树状组织收进这一类，说明布局不止于单页排布。
别和它混淆：层级导航结构是信息架构层面的组织方式，指一棵父子分区树以及沿树上下移动的导航关系，而不是某个具体的界面部件。侧栏布局是它的一种页面呈现（侧栏分组常映射树的前一两层），面包屑则是它的位置指示器。它不同于轮辐式结构（从一个中心页出发、每次回到中心再去别处）和线性流程（按固定顺序前进）；这两者尚无独立词条，此处仅作边界说明。它可以与渐进披露组合——子层按需展开而不是一次全部摊开。主从布局能承载只有两层的树，但主从强调选择驱动详情，而非逐级下钻。
中心辐射结构
把一个中心枢纽屏幕作为唯一入口，把各自独立、彼此隔离的任务分区（辐条）挂在它周围：用户从枢纽出发进入某个分区，完成或放弃后再回到枢纽才能进入另一个分区，分区之间没有直接通路；NN/g 把这种导航中枢描述为通常是主页、列出全部导航选项，前往新位置必须先回到中枢再从中选择；Smashing Magazine 把中心屏幕描述为探索的发射台，链接指向彼此隔离的其他分区或独立应用。
为什么在这一版里：补上以单一枢纽连接互相隔离任务的结构，与逐级下钻不同。
别和它混淆：中心辐射结构是一种信息架构：只有一个中心枢纽屏幕，辐条彼此独立、不共享导航通路，切换任务必须先回到枢纽。它不同于层级导航结构——层级导航是一棵可以逐级下钻、且兄弟分支之间可以横向移动或往返浏览的树，中心辐射结构里的辐条则彼此隔离，没有兄弟关系可言，回到中枢是切换的唯一方式，而不是树里的一个中间层级。它也不同于线性流程结构——线性流程只有一条预定顺序、没有可供选择的分支，中心辐射结构则是从一个点向多个独立分支放射，用户在分支之间做的是选择而非顺序推进。
线性流程结构
把完成一次任务所需的屏幕排成唯一预定的先后顺序、不设分支或旁路，用户只能沿这一条路径依次前进，如账号引导、结账或分步设置；Baymard 的结账流程优化指南主张流程要完全线性、不重复展示同一屏幕，并让返回操作保留已填写的数据。
为什么在这一版里：补上不设分支的固定顺序，明确它与按需展开不是一回事。
别和它混淆：线性流程结构描述的是信息架构层面的顺序关系——把一次任务的屏幕排成唯一路径，本身不规定具体交互控件。分步向导是实现这种结构最常见的交互模式，向导提供下一步/上一步与进度指示；但同一条线性路径也可能只用简单的『继续』链接或整页跳转来呈现，此时结构仍是线性的，只是没有采用向导这种模式。它不同于渐进披露：渐进披露由用户自行决定何时展开次要内容，屏幕数量与顺序并不固定；它也不同于层级导航结构：层级导航是一棵可探索的树，用户能在兄弟分支之间横向移动、可以往返浏览，而线性流程只有一条路径，没有兄弟节点可供选择，也不打算被重复访问。
与另一版本的关系
与《布局与信息架构 · 2026 关注》相比，这一版更少依赖某一年的产品形态；重合的条目说明这套结构既是基础，也正被重新使用。
证据范围
入选理由说明这条结构在这一类里补上了哪一块，不构成推荐顺序。结构之间常可组合，选择取决于任务，而不是清单位置。