跳到正文
cccskills
免费在 GitHub 公开

information-architecture

设计产品整体信息架构和导航结构时使用。适用于多页面产品、复杂功能模块、内容组织。优先使用卡片分类 + 树状结构 + 导航模式选择。

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(2)

  • SKILL.md4.2 KB
  • templates/information-architecture-template.md812 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

信息架构(Information Architecture)

参考来源:Rosenfeld《Information Architecture》、NNGroup IA 方法

适用场景

  • 多页面产品的整体组织
  • 复杂功能模块的内容分组
  • 导航和菜单结构设计
  • 重新组织已有产品的信息架构

核心原则

1. 用户心理模型优先
   按用户怎么找信息组织,不是按团队怎么开发

2. 7±2 原则
   一级菜单不超过 7 项
   一组列表不超过 9 项

3. 一致的命名
   同一概念用同一术语
   不要混用"个人中心"/"我的"/"账户"

4. 层级不要太深
   桌面端:3 层以内
   移动端:2 层以内

三个核心组件

1. 组织系统(Organization)

分类方式:
  - 按主题(产品分类)
  - 按任务(要完成什么)
  - 按用户角色(不同角色看不同的)
  - 按时间(最新/历史)
  - 按字母(A-Z)
  - 按地理位置

2. 标签系统(Labeling)

要求:
  - 用户语言(不是技术术语)
  - 简洁(2~4 个字)
  - 一致(不混用同义词)
  - 可识别(看到就知道是什么)

3. 导航系统(Navigation)

导航模式:

全局导航(Global)
  顶部导航栏 / 侧边栏
  适合:主功能模块切换

局部导航(Local)
  二级菜单 / 标签页
  适合:当前模块内的细分

上下文导航(Contextual)
  面包屑 / 相关链接
  适合:表明位置 + 提供回退

工具栏(Utility)
  搜索 / 通知 / 用户头像
  适合:辅助功能

卡片分类法

1. 列出所有内容/功能(30~50 张卡片)
2. 让 5~10 个用户分组(线下或线上工具)
3. 分析共性 → 形成分类
4. 命名分类(用户语言)
5. 验证(树测试)

输出格式

树状结构

## 信息架构

首页
├─ 商品(一级菜单)
│  ├─ 全部商品
│  ├─ 服装
│  │  ├─ 男装
│  │  └─ 女装
│  └─ 配饰
├─ 订单
│  ├─ 我的订单
│  └─ 退款管理
├─ 个人中心
│  ├─ 个人信息
│  ├─ 收货地址
│  └─ 账户安全
└─ 帮助

Mermaid 图

flowchart TD
    Home[首页]
    Home --> Products[商品]
    Home --> Orders[订单]
    Home --> Profile[个人中心]
    Home --> Help[帮助]
    
    Products --> All[全部商品]
    Products --> Clothing[服装]
    Products --> Accessories[配饰]
    
    Clothing --> Men[男装]
    Clothing --> Women[女装]
    
    Orders --> MyOrders[我的订单]
    Orders --> Refunds[退款管理]
    
    Profile --> Info[个人信息]
    Profile --> Address[收货地址]
    Profile --> Security[账户安全]

工作流程

1. 收集所有内容/功能(来自 PRD)
2. 进行卡片分类(理想 5~10 个用户参与)
3. 提炼分类
4. 命名分类(用户语言)
5. 设计层级(不超过 3 层)
6. 选择导航模式
7. 输出树状结构和 Mermaid 图
8. 转交 page-structure 设计具体页面

质量自检

□ 一级菜单是否 ≤ 7 项
□ 层级是否 ≤ 3 层
□ 命名是否一致(无同义词混用)
□ 命名是否用户语言(无技术术语)
□ 是否选择了合适的导航模式
□ 是否考虑了移动端的退化

常见坑

  1. 按部门组织信息——团队结构 vs 用户心理模型
  2. 菜单过多——一级菜单超过 7 项
  3. 层级太深——3 层以上用户找不到
  4. 命名混乱——同一功能多个名字
  5. 技术术语——"实体管理" vs "我的资源"
  6. 不验证——没做卡片分类,凭直觉
  7. 忽略移动端——桌面端的多级菜单在移动端崩溃

配套模板

  • templates/information-architecture-template.md — 树状结构 + 卡片分类记录模板

与其他 skill 的协作

上游:
  user-flow → 提供流程节点
  product-manager 的 PRD

下游:
  page-structure → 每个节点设计具体页面
  enterprise-patterns → 复杂导航模式

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

A/B 测试设计与分析时使用。适用于产品实验、功能验证、转化率优化。融合假设驱动 + 样本量计算 + 置信度判断。

中文简介正在准备中。当前显示原文说明。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

上线前业务方/产品方验收时使用。适用于功能交付确认、UAT、发布会签。融合 BDD Given-When-Then、Specification by Example、ATDD。

中文简介正在准备中。当前显示原文说明。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

设计无障碍可访问的界面时使用。适用于满足 WCAG 标准、键盘导航、屏幕阅读器支持。优先使用 WCAG 2.2 AA 级标准 + 键盘 + 焦点 + 对比度 + ARIA。

中文简介正在准备中。当前显示原文说明。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

实现可访问性(无障碍)时使用。覆盖 WCAG 2.2 AA / ARIA / 键盘导航 / 屏幕阅读器 / 颜色对比 / 焦点管理。融合 React Aria / Radix UI / Headless UI 实践 + axe-core 自动化测试。

中文简介正在准备中。当前显示原文说明。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

AI 模型部署时使用。适用于推理服务 / GPU / TensorRT / 监控 / 扩缩容。

中文简介正在准备中。当前显示原文说明。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

数据分析报告输出时使用。适用于业务分析报告、周报、专项分析、决策支持。融合洞察 + 建议 + 行动项。

中文简介正在准备中。当前显示原文说明。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

查看 zhaoxuya520 的全部技能

报告此技能的问题