好的目录导航让读者一直知道自己在哪里、下一步会去哪里,以及如何回到原来的列表。先建立普通链接和清楚的标题,再考虑交互增强,能够让短时浏览、手机阅读和辅助技术使用者都更容易找到内容。
为发现、阅读和返回各留一条路径
汇总页主要帮助发现内容,详情页负责讲清一个问题,返回链接帮助继续比较。三者职责明确,页面就不必把所有文章全文同时塞在首页。海角社区网址汇总围绕目录编辑主题,可以让字段、分类、维护、来源、导航和变更六个主题形成一组稳定入口。
教学演示:读者在首页看到“失效、重复与重定向”,进入相应详情,再通过文章底部的“来源与核对时间”学习如何记录证据,最后回到目录继续查找。这条路径有主题关系,不需要把所有链接都放进同一个拥挤的导航栏。
链接文字应预告目标内容
W3C WAI 对链接目的的解释指出,链接文字或相邻上下文应让使用者理解链接用途。对于文章目录,直接用主题名称通常比反复出现“点击这里”“更多”“马上进入”更清楚。若必须用短按钮,附近也要有可关联的标题和摘要。
同一个目的地尽量使用一致名称,不同目的地避免都叫“查看详情”。下载文件要写格式,外部资料要说明来源类型;没有实际文件或报名功能时,就不展示相应操作按钮。目录页面的动作应与真实可完成的阅读任务相符。
用标题表达文章结构,而不只改变字大小
W3C 的标题教程说明,标题能传达内容组织方式,并帮助页内导航;通常应按层级组织,避免无理由跳过层级。实践中,详情页可有一个明确主标题,每个主要问题用二级标题,细分步骤再用三级标题。
若文章比较长,可以在开头放一个指向各节的目录。标题应简洁且含义完整,例如“处理重复条目”,比“第二部分”更容易定位。锚点名称保持稳定,文章增加段落时不必随意更改,方便已有书签继续指向相同主题。
| 位置 | 推荐内容 | 阅读目的 |
|---|---|---|
| 首页导航 | 少量主要栏目名称 | 快速确认本站范围 |
| 分类卡片 | 文章主题、简短摘要和普通链接 | 决定是否打开详情 |
| 详情页开头 | 所在位置、主标题和简明答案 | 确认进入正确页面 |
| 文章目录 | 指向各节的描述性标题 | 跳到当前关心的问题 |
| 文章底部 | 返回目录与相关主题 | 继续阅读并减少迷路 |
手机导航应把最常用任务放在前面
在窄屏上,桌面导航可以收进抽屉,但文章入口和正文不能依赖菜单展开才能出现。底部操作栏若固定显示,应只承载少量常用动作,并给正文预留空间。目录卡片中的标题、摘要和链接要能自然换行,避免长地址把页面撑出屏幕。
目录的可用性不只看“菜单能打开”。还应考虑键盘焦点、触摸目标、链接是否有可见文字,以及返回后能否继续理解所在位置。将样式和交互当成阅读的帮助,而不是用动画替代信息组织。
实践检查清单
- 发现、阅读、返回是三个都需要照顾的导航任务。
- 链接名称与目标内容应一致,标题层级表达真实结构。
- 相关内容要有主题关系,不能靠堆数量增强导航。
参考资料与适用边界
参考资料用于解释公开的技术概念,不表示来源机构与本站或任何同名社区存在合作关系。
- W3C WAI:Headings
支持标题结构和层级的说明。资料阅读日期:2026-11-13。
- W3C WAI:Understanding Link Purpose (In Context)
支持描述性链接文字的说明;页面组织方案为本站编辑建议。资料阅读日期:2026-11-13。