EDITORIAL LIST / 清单文章
2026 布局趋势：七大值得关注的网页布局模式
7 条 · 少于 10 席；缺少可核实证据的位置留空
这一版记录 2026 年编辑关注的布局议题，重点落在两处：多面板如何随尺寸重组，以及对话式产品把内容放在哪里。
选择标准
- 2026 年前后有可核实的设计系统文档、产品发布或实验研究在讨论它。
- 它解决的是结构问题，不是某个组件的样式更新。
- 证据不足的位置留空，不用相邻概念顶替。
本版席位
标注“编辑重建席位”的位置由本仓库编辑判断补上；其余席位来自计划 issue #1 的清单账本。
辅助面板布局
在较宽的主内容旁保留一条较窄的辅助面板，用来呈现与当前任务相关的参考资料、引用来源，或生成内容所依据的片段；面板内容随主内容本身变化，而不是靠在列表中选中某一项来决定——这与主从布局的选择联动不同。其中“对齐来源侧栏”是常见变体：把引用或来源与正文并排显示，帮助核查生成内容。
为什么在这一版里：2026 年围绕引用与依据呈现的讨论落在这里：辅助信息不由列表选择决定。
别和它混淆：辅助面板与主从布局都呈现主区加副区，但主从中侧列表的选择驱动详情内容；辅助面板的内容跟随当前任务、段落或生成结果变化，不经过对象选择这一步。它也不同于侧栏布局：侧栏是跨页面持续存在的导航或工具区，内容基本不随主内容变化；辅助面板则与当前主内容强相关，通常聚焦参考资料、引用或来源，而非站点级导航。把引用与来源对齐显示在旁的“对齐来源侧栏”，属于辅助面板的一种呈现变体，而不是另一种独立布局。
自适应多面板布局
让同一组面板依据可用宽度或容器尺寸增减、合并或拆分显示的栏数——宽窗口并排两栏或三栏,窄窗口收作单栏并辅以导航返回;它只约束这一重组过程本身,不改变各面板内部承载的信息类型。
为什么在这一版里：描述面板随尺寸增减合并的重组规则，不重复各面板自身的语义。
别和它混淆：自适应多面板布局描述的是一组面板在不同屏幕宽度或窗口形状下如何增减、合并或拆分栏数,以及重组前后必须保留什么、可以推迟什么;它不重新定义任何一个面板内部该放什么内容或如何联动——列表选择驱动详情属于主从布局,较窄的参考或引用面板属于辅助面板布局,跨页面持续存在的导航或工具区属于侧栏布局。换句话说,这几种布局各自回答“面板里是什么、面板之间怎么联动”,而自适应多面板布局只回答“同样这组面板在变窄或变宽时如何重排”。
卡片网格
把一组结构相同的卡片按重复的行列网格排列，每张卡片代表一个可点开的内容单元，通常由图片、标题、摘要与操作组成。
为什么在这一版里：在年度语境里，它是生成内容与推荐结果最常见的承载结构。
别和它混淆：是页面级布局，不是卡片这一组件本身；与 Bento 网格的区别在于卡片同构且尺寸一致，不靠块面大小制造层级。卡片若结构各异、字段位置不可预期，就失去可扫视性。
对话与工作区并置
把对话面板与承载持久产物的工作区面板并排呈现的页面布局：工作区保存对话生成或修改的对象（文档、代码、看板等），对话是改变该对象的手段，而不是需要被保留的产物本身。
为什么在这一版里：补上“对话与持久产物并置”的结构，区别于输入框加结果列表。
别和它混淆：与主从布局的区别在于驱动第二个区域内容变化的输入：主从布局里详情内容由用户在列表中选中的项目决定；本布局里驱动工作区变化的是用户发送的一条消息，不经过从列表选择一项这一步。与辅助面板布局的区别在于哪一侧承载主任务：辅助面板中主内容区自身就是主任务，面板只提供参考资料或来源；本布局中工作区面板才承载用户真正要保留和交付的持久对象，对话面板只是修改它的手段，即使对话在视觉上占据不小的空间。轮次对话本身如何组织、如何呈现能力边界，属于对话式界面负责的范畴；本布局只关注对话面板与工作区面板的空间并置关系，以及两者之间的同步契约，不重复定义对话轮次的呈现方式。
单列布局
把页面内容与表单字段自上而下排成一列，让视线沿单一方向前进；表单研究指出单列比多列更少出现跳过、误读字段与填错。
为什么在这一版里：在年度语境里承担长篇生成内容的阅读结构。
别和它混淆：指有意选择的单列阅读或任务页面结构，如文章、表单、移动优先页面，而不是主从布局在窄屏上被迫塌缩成的一栏；也不同于分步的线性流程——向导是流程，单列是承载每一步的页面结构。少量逻辑上属于同一实体的短字段（如城市/邮编）并排放在一行，仍算单列表单。
编辑式版面
把标题、导语（副标题/引言段）、正文、引文与图片说明按印刷编辑的做法组织成一篇长文页面，靠真实的标题层级与字号、字重差异共同表达谁是标题、谁是正文；引文从正文中摘出放大展示，用于强调而非替代信息，图片与其说明作为一个整体单元出现。
为什么在这一版里：补上标题、导语、正文、引文与图注之间的编辑关系，这是长文页面的结构问题。
别和它混淆：关注的是长文页面内部标题、导语、正文、引文、图注之间的排版关系与阅读顺序，不是网格本身的行列力学（模块化网格）或单一顺序内容流的取舍（单列布局）——编辑式版面通常搭在单列或模块化网格之上，但讨论的是页面内部的文本层级和图文关系，不是承载它的坐标系。瑞士风格是可选的视觉语言，跨越版式与视觉两个类别；编辑式版面不预设某一种视觉风格。
层级导航结构
把内容组织成由父子分区构成的一棵树，用户从顶层类别逐级下钻到子类和具体条目，并通过面包屑或返回控件回到上层；NN/g 指出面包屑展示的是站点的层级结构而非浏览历史，并说明层级在宽与深之间需要权衡——扁平结构让内容更易被发现，过深的结构则要求点击太多层、每层的类别也更笼统。
为什么在这一版里：在年度语境里提示：即便主入口是对话，内容仍需要可浏览的组织。
别和它混淆：层级导航结构是信息架构层面的组织方式，指一棵父子分区树以及沿树上下移动的导航关系，而不是某个具体的界面部件。侧栏布局是它的一种页面呈现（侧栏分组常映射树的前一两层），面包屑则是它的位置指示器。它不同于轮辐式结构（从一个中心页出发、每次回到中心再去别处）和线性流程（按固定顺序前进）；这两者尚无独立词条，此处仅作边界说明。它可以与渐进披露组合——子层按需展开而不是一次全部摊开。主从布局能承载只有两层的树，但主从强调选择驱动详情，而非逐级下钻。
与另一版本的关系
与《布局与信息架构 · 经典基础》相比，这一版更贴近当前产品形态；重合的条目说明老结构在新语境里被重新启用。
证据范围
设计系统文档说明某种布局被推荐，不说明它被广泛采用；实验研究的结论限于其研究条件。两者都不支持名次判断。