更新时间：2026年10月09日

画网站信息架构图，可以先列出用户要找的内容，把它们按任务分组，再确定栏目、列表页和详情页的关系；给每个页面一个稳定编号，最后用真实查找任务检查名称和路径。不要一上来就画首页菜单，也不要把每一次点击都画成一个新页面。

以职业课程网站为例，可以在Pixso协同白板中把课程、学习路径、学员作品和帮助条目摆成卡片，先讨论关系，再连成页面树。这个阶段要解决的是“内容在哪里、从哪里找到”，不是按钮颜色和页面动效。

信息架构图不等于导航菜单

网站有几十个页面，不代表顶部导航就需要几十个入口。信息架构描述内容怎样组织，导航是把其中的关系呈现给用户的方式。一个课程详情可以从课程列表、学习路径和搜索结果进入，但仍是同一份内容。

NN/g对信息架构与站点图的说明也把内容组织、命名和查找关系与可视化图本身分开。图的作用是让团队看见决定，不是用一张树状图代替全部研究。

还要分清三个容易混淆的产物：

先拿内容卡片，暂时不要定栏目名

假设课程网站已有这些材料：UI基础课、交互设计课、网页布局课、课程大纲、上课时间、讲师介绍、学员作品、报名说明、发票说明、退款规则、课程回放说明，以及学员登录后的学习进度。资料散落在不同文件时，先用网站内容清单记录来源、负责人和缺项，再把确认过的条目变成卡片，避免为尚不存在的内容先建栏目。

逐张卡片补两个信息：用户为什么会找它、它需要独立页面还是可以作为页面中的一部分。例如“网页布局课”值得有独立详情；这门课的上课时间通常属于该详情内容，不必单独建一个“时间页面”。“发票说明”服务多门课程，可以作为公共帮助文章。

不要先把内容塞进团队部门名称。运营、教学、教务是内部职责，用户往往想找“选什么课”“能学会什么”“怎么报名”，不一定知道哪一个部门管理答案。

下面是一版可供讨论的结构。“栏目”表示一组内容，“页面”表示具体页面类型；编号用于评审引用，不是强制URL格式。

H：首页
- C：课程
  - C1 课程列表：按主题与学习条件查找。
  - C2 课程详情：介绍目标、适合人群、大纲、安排和报名条件；每门课复用同类页面结构。
- P：学习路径
  - P1 路径列表：按学习目标浏览。
  - P2 路径详情：说明先后关系，连接对应课程详情，不复制课程介绍。
- W：学员项目
  - W1 项目列表：按主题查找成果。
  - W2 项目详情：展示作品背景、过程和课程关联。
- S：学习帮助
  - S1 选课与报名。
  - S2 上课与回放。
  - S3 发票与退款。
- A：我的学习
  - A1 已加入课程。
  - A2 学习进度与课程内容；需相应账号权限。

“UI基础课详情”只画一个节点。它既可由C1课程列表进入，也可由P2“从零学习UI”的路径进入。若为了每个入口复制一份详情，价格、时间或课程大纲更新时容易出现不同版本。图上用额外连线表达访问关系，并在图例中说明它与父子层级线的区别。

帮助内容也不只从“学习帮助”进入。报名页可以在费用附近连接发票说明，课程播放页可以连接回放说明。这些上下文入口服务当下任务，不必因此改变文章的主要归属。

名称是否好，不只看字数短不短。“成长中心”可能包含课程、作品、学习进度或会员权益，用户难以判断；“学习路径”则更明确地指向课程先后安排。“服务支持”很宽泛，若站内内容只是报名、上课和退款，叫“学习帮助”更贴近当前任务。

同一种内容在不同入口尽量沿用可识别的名称。顶部叫“学员项目”，页脚又叫“优秀案例”，未必不能使用，但需要判断读者是否会把它们当成两个栏目。名称有争议时，可以先保留候选，拿给未参与设计的人做查找任务，不只由会议中的表达能力决定。

把用户选错的节点、犹豫的名称和绕路的位置记录下来。找不到内容可能是分类不合预期，也可能是条目名不清；不要看到失败就不断新增一个顶级栏目。还应检查空栏目：若“行业学院”暂时只有一门课，是否真需要一个单独层级？

为每一种页面类型补上必须出现的内容和下一步操作：课程列表帮助比较，详情帮助判断是否适合，报名流程帮助完成加入，个人学习页帮助继续进度。然后再设计顶部导航、侧栏、面包屑和手机菜单，而不是把页面树原样挤进所有导航组件。

页面编号可以延续到画板名称和评审记录中，例如“C2课程详情：新增课程安排区”。后续布局与交互要求可参照Web设计规范中的导航与响应式规则。内容变化时回到这张图确认归属：它是已有页面的新内容、新的详情实例，还是确实值得建立的新栏目。