information-architecture

此技能定义产品或站点的结构骨架。它位于设计简报和构建之间。在简报编写完成后、任务创建之前运行。

示例提示

• “在我开始构建之前，规划这个应用的 IA”
• “规划导航和页面结构”
• “我需要为文档站点组织内容”
• “定义新用户引导体验的用户流程”

流程

1. 在 .design/*/DESIGN_BRIEF.md 查找现有的设计简报。如果存在多个子文件夹，使用最近修改的那个，或询问用户正在处理哪个功能。如果不存在简报，询问用户正在构建什么以及为谁构建。

2. 探索现有代码库以了解已有的结构：

   • 路由：Next.js 的 app/ 或 pages/ 目录、React Router 配置、Vue Router、SvelteKit 路由或静态 HTML 页面文件
   • 导航组件：页头、侧边栏、导航栏、面包屑、页脚组件
   • 布局组件：根布局、嵌套布局、页面包装器、容器组件
   • 页面目录：页面在文件系统中的当前组织方式
   • URL 模式：现有的 slug、动态段、查询参数约定
   • CMS 或数据层：内容模型、API 路由、数据获取模式、MDX/内容目录
   • 如果存在结构，此技能将扩展和改进它。不要提出忽略已有构建内容的新架构。

3. 就结构决策与用户进行访谈。对于每个问题，提供你的推荐答案。

   至少涵盖：

   • 用户需要查找或执行的主要事项是什么？按频率排序。
   • 可接受的导航深度层级是多少？
   • 哪些内容会随时间增长，哪些是固定的？
   • 是否存在需要不同入口点的不同用户类型？
   • 用户花费 80% 时间的页面/视图是哪个？

4. 一旦达成共识，使用下面的模板生成 IA 文档，并将其保存为与设计简报相同的 .design/<feature-slug>/ 子文件夹中的 INFORMATION_ARCHITECTURE.md。

IA 文档模板

# 信息架构：[产品/站点名称]

## 站点地图

每个页面或视图的层级地图。使用缩进显示嵌套。包括每个页面的 URL 模式。

- 首页 `/`
  - 功能 A `/feature-a`
    - 子页面 `/feature-a/detail`
  - 功能 B `/feature-b`
- 设置 `/settings`
  - 个人资料 `/settings/profile`

## 导航模型

描述导航系统：
- **主导航**：主导航中显示什么？最大项目数。
- **次级导航**：侧边栏、标签页或部分内的上下文链接。
- **实用导航**：账户、设置、帮助以及主内容层级之外的任何内容。
- **移动端导航**：导航如何适配。汉堡菜单、底部标签页或其他方式。

## 内容层级

对于每个主要页面或视图，定义内容优先级：

### [页面名称]
1. [最高优先级内容] -- 为什么放在首位
2. [第二优先级] -- 为什么放在第二位
3. [第三优先级] -- 理由
4. [折叠下方/次要内容]

## 用户流程

产品中的关键路径。每个流程是一系列步骤，并标注决策点。

### [流程名称]（例如“新用户引导”或“创建项目”）
1. 用户进入 [页面]
2. 用户看到 [内容/提示]
3. 用户执行操作：[操作]
   - 如果 [条件 A] -> [结果]
   - 如果 [条件 B] -> [结果]
4. 用户到达 [目的地]

## 命名约定

界面中使用的术语词汇表。一致性很重要。选择一个词并在所有地方使用。

| 概念 | 界面中的标签 | 备注 |
|------|--------------|------|
| [事物] | [我们如何称呼] | [为什么用这个词] |

## 组件复用映射

哪些结构组件（布局、容器、导航元素）在页面间共享。

| 组件 | 用于哪些页面 | 行为差异 |
|------|-------------|---------|
| [布局/组件] | [页面] | [任何变化] |

## 内容增长计划

站点的哪些部分会随时间积累内容，以及 IA 如何适应这种增长（分页、过滤、搜索、归档模式）。

## URL 策略

URL 构建规则：
- 模式：[例如 `/section/subsection/item-slug`]
- 动态段：[哪些是参数化的]
- 查询参数：[过滤、排序、分页]