页面结构 · 建议阅读 6 分钟

首页、栏目页与详情页怎样组成一条清晰的阅读路线?

海角网站通过页面层级图、图书借阅教学案例和导航辨认步骤,说明首页、栏目页、详情页、面包屑与页内目录的不同用途。

先看简明回答

首页帮助了解全站,栏目页把相关内容集中起来,详情页回答一个具体问题。导航负责在页面间移动,页内目录帮助跳到同一篇文章的某一节;两者可以配合使用。

首页连接两个栏目,栏目再连接类型、结构、路线和无障碍详情页的树状图
首页连接两个栏目,栏目再连接类型、结构、路线和无障碍详情页的树状图

把三个层级的职责分开理解

首页是全站的概览页,通常介绍网站主题并提供主要入口;栏目页围绕某类主题整理文章;详情页呈现某一条内容的完整说明。这是一种常见组织方式,并不是所有网站都必须具有三层,有些小站会从首页直接链接详情。

阅读时先确认自己位于哪一层。若眼前主要是标题和摘要,可能仍在列表页;若出现围绕单个问题的连续段落、步骤和例子,才更接近详情。页面很长不一定就是详情页,首页也可能容纳大量模块。

四种常见导航,各自回答一个问题

导航不只是顶部的一排栏目。文章前的面包屑、正文旁的目录和文末相关链接,都能帮助确定位置与下一步。W3C WAI 的页面结构教程强调,有意义的区域和标题组织有助于用户定位内容。

页面线索回答的问题适合的动作
全站主导航这个网站有哪些主要内容?切换到另一个主题
面包屑当前文章属于哪个栏目?返回所属栏目
页内目录这篇文章有哪些小节?直接阅读所需段落
相关阅读理解这里后可以接着读什么?补充概念或进入进阶内容

教学案例:从图书馆首页找到续借说明

以下是虚构的网站结构:图书馆首页有“读者服务”栏目,栏目下列出“借阅”“续借”和“预约”三篇说明。小周想知道如何续借,应进入“读者服务”,再选择“续借”,最后在详情页中查看适用条件、操作顺序与例外情况。

如果小周由外部链接直接进入“续借”详情,也不必退回首页重新走一遍。页面上的“首页/读者服务/续借”面包屑能补充当前位置。读完续借条件后,若遇到预约中的图书不能续借这一说明,再通过相关链接了解预约规则,会比随机点击更有方向。

网址变化是线索,内容关系才是重点

普通页面链接通常会带你进入另一个地址;页内目录常将同一页面滚动到某个小节,并在地址末尾出现井号片段。但不能只凭网址有没有变化判断内容是否切换,一些网站采用动态界面,地址与视觉变化不一定一一对应。

更稳妥的判断是同时看页面主标题、栏目标记和正文。浏览器“返回”回到上一段浏览历史,面包屑“返回栏目”则指向网站组织中的上层,两者可能到达不同位置。直接由搜索进入详情时,这个差别尤其明显。

用一次小练习确认自己能找到路

在一个纯阅读页面完成以下练习即可,不需要注册或填写资料。练习重点是能解释路线,而不是要求每个网站都长得相同。若找不到面包屑,可以借助栏目导航或浏览器返回继续阅读。

  • 说出当前页面主要回答的问题,确认自己处在概览、列表还是详情。
  • 找到一个属于本站的上层入口,并阅读其名称。
  • 进入一篇相关详情,检查标题是否与入口文字相符。
  • 用目录跳到一节正文,再回到文章开头。
  • 记录一条能再次找到目标内容的路线,例如首页→知识栏目→具体文章。

常见问题

必须先打开首页才能读详情吗?

不必。详情页应能独立表达主题,你可以直接读正文。需要了解全站范围时,再使用面包屑、主导航或首页链接补充背景。

栏目页与页内目录有什么区别?

栏目页通常列出多篇独立内容,目录则列出一篇内容中的小节。前者帮助换文章,后者帮助在当前文章里定位。

延伸资料

以下原始资料帮助进一步理解相关概念;本文中的练习情境为教学示例。

继续学习

按你的问题选择下一篇,也可以回到课程目录重新安排顺序。

返回六篇课程目录
海角网站 六篇教程 · 从一个问题开始
课程目录