大型站点的导航设计
问题
随着文档站点从几十页增长到几百或几千页,简单的侧边栏往往会变成深层嵌套文件夹的混乱迷宫。当用户被迫展开多层级目录仅仅为了寻找一个特定的参考信息时,他们会丢失上下文,感到挫败,并往往会放弃文档而转向“试错法”。
为什么重要
导航是您产品功能的“地图”。如果导航难以使用,用户将完全依赖搜索栏,这可能导致知识的碎片化。一个结构良好的导航系统可以在用户浏览时向其传授产品的逻辑和分类,帮助他们随着时间的推移变得更加熟练和自给自足。
方法
优先考虑 顶级上下文切换 (Top-Level Context Switching) 而不是深层嵌套。目标是将左侧边栏限制在不超过两到三个层级的深度。使用水平 菜单栏 (Menubar) 分隔不同的文档“领域”(例如:指南、API 参考和社区),这允许每个单独的侧边栏保持聚焦、相关且易于管理。
实施
1. 基于领域的划分
在您的 docmd.config.js 中,使用 菜单栏 (Menubar) 将您的内容划分为高级类别。这种方法允许您为每个领域呈现完全不同的侧边栏,防止单一导航树变得过于臃肿。
2. 扁平化层级结构
与其将一个单一的概念拆分为许多零散的 Markdown 页面,不如将相关信息整合到综合性的父页面中。使用清晰的 标题层级,允许用户使用自动生成的右侧目录 (TOC) 在页面内进行导航。
- ❌ 糟糕的信息架构 (IA):一个名为“安全”的文件夹,包含十个独立的、只有一个段落的各种协议文件。
- ✅ 更好的信息架构 (IA):一个结构良好的“安全概述”页面,涵盖所有协议,并使用标题提供整洁的目录 (TOC)。
3. 利用可折叠部分
对于不经常访问的大组相关内容,在您的 导航配置 中使用 collapsible 属性。这通过隐藏次要信息直到用户明确请求,来保持界面的整洁。
// navigation.json
{
"title": "API 参考",
"collapsible": true,
"collapsed": true,
"children": [
{ "title": "身份验证", "path": "api/auth" },
{ "title": "端点", "path": "api/endpoints" }
]
}
权衡
将内容整合到更少、更长的页面中,要求作者在结构清晰度和标题使用方面保持严谨。如果一个页面太长而没有适当的内部导航 (TOC),它本身可能变成一面“文字墙”。然而,对于大型文档集来说,显著减少“点击疲劳”和改进相关内容的发现,使得扁平的、基于领域的层级结构更具优势。