information-architecture

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Information Architecture

信息架构(Information Architecture)

Design the structure that holds the content. Stack-agnostic. Applies to marketing sites, product surfaces, knowledge bases, e-commerce, and editorial content.
A well-designed IA makes the rest of the project easier. A poorly-designed IA forces every downstream decision to fight the structure.

设计承载内容的结构。与技术栈无关。适用于营销网站、产品界面、知识库、电商平台和编辑类内容。
设计良好的信息架构能让后续项目推进更顺畅,而设计糟糕的信息架构会让所有下游决策都受限于不合理的结构。

When to use

适用场景

  • Designing a new site or major section from scratch
  • Restructuring an existing site
  • Adding a new content type or category
  • Designing site navigation or menu systems
  • Defining URL structure and slug patterns
  • Building taxonomies or tag systems
  • Auditing an existing IA for problems
  • 从零开始设计新网站或核心板块
  • 重构现有网站结构
  • 添加新的内容类型或分类
  • 设计网站导航或菜单系统
  • 定义URL结构和slug规则
  • 构建taxonomy(分类法)或标签系统
  • 审核现有信息架构的问题

When NOT to use

不适用场景

  • Single-page design (use
    design-standards
    )
  • Content production (use
    content-and-copy
    )
  • SEO-driven content planning (use
    seo-keyword
    )
  • Initial brand and audience discovery (use
    brand-discovery
    )

  • 单页设计(使用
    design-standards
  • 内容创作(使用
    content-and-copy
  • SEO导向的内容规划(使用
    seo-keyword
  • 初始品牌与受众调研(使用
    brand-discovery

Required inputs

必要输入

  • The site or product scope
  • The audience and what they're trying to do
  • The content that exists or is planned
  • Any constraints (parent IA, regulatory, technical)
If audience is unclear, run
brand-discovery
first. If content scope is unclear, run
content-strategy
first.

  • 网站或产品的范围
  • 受众群体及其需求目标
  • 已有的或规划中的内容
  • 任何约束条件(上级信息架构、合规要求、技术限制)
若受众群体不明确,先执行
brand-discovery
;若内容范围不明确,先执行
content-strategy

The framework: 6 layers

框架:6个层级

Information architecture has six layers. Each builds on the one below.
信息架构包含6个层级,每个层级都建立在下层基础之上。

1. Mental models

1. 心智模型(Mental models)

Before structure, understand how the audience thinks about the domain.
  • What concepts do they group together naturally?
  • What words do they use? (Often different from what the company uses.)
  • What is the dominant frame of reference? (By task? By role? By topic? By time?)
  • What do they expect to find where, based on conventions in similar products?
Methods:
  • Card sorting (open or closed): Give the audience the content items, ask them to group them. Open card sorts surface natural groupings. Closed card sorts validate proposed groupings.
  • Tree testing: Give a proposed structure, ask users to find specific items. Surfaces where the structure breaks down.
  • First-click testing: Given a goal, where do users click first? If first clicks are wrong, the labels and structure are wrong.
在构建结构之前,先理解受众对领域的认知方式。
  • 他们会自然地将哪些概念归为一类?
  • 他们使用哪些词汇?(通常与企业内部使用的词汇不同)
  • 主要的参考框架是什么?(按任务?按角色?按主题?按时间?)
  • 基于同类产品的惯例,他们期望在哪里找到特定内容?
方法:
  • Card sorting(卡片分类法)(开放式或封闭式):向受众提供内容条目,让他们进行分组。开放式卡片分类法可呈现自然的分组方式,封闭式卡片分类法用于验证预设的分组逻辑。
  • Tree testing(树状测试):提供一个预设结构,让用户查找特定内容条目,以此发现结构存在的问题。
  • First-click testing(首次点击测试):给定目标,观察用户首次点击的位置。如果首次点击错误,说明标签和结构存在问题。

2. Sitemap

2. Sitemap(站点地图)

The map of all pages and how they relate.
Sitemap deliverables:
  • A hierarchy diagram showing parent-child relationships
  • Indication of page types (static, dynamic, listing, detail)
  • Cross-references showing how pages relate beyond the hierarchy
  • Sometimes a separate user-flow overlay for key journeys
Sitemap types:
  • Hub-and-spoke (cornerstone content + supporting content): Common for content marketing
  • Tree (strict hierarchy, every page has one parent): Common for product documentation
  • Faceted (content lives in many overlapping categories): Common for e-commerce
  • Flat (everything reachable from the home): Common for small sites
Most sites blend types. Pick the dominant pattern and document the exceptions.
所有页面及其关联关系的映射图。
Sitemap交付物:
  • 展示父子层级关系的结构图
  • 标注页面类型(静态页、动态页、列表页、详情页)
  • 显示层级之外的页面关联关系的交叉引用
  • 有时会为关键用户旅程添加单独的用户流覆盖层
Sitemap类型:
  • Hub-and-spoke(中心辐射型)(核心内容+支撑内容):常见于内容营销类网站
  • Tree(树状型)(严格层级,每个页面仅有一个父页面):常见于产品文档类网站
  • Faceted(分面型)(内容可归属于多个重叠分类):常见于电商平台
  • Flat(扁平型)(所有内容均可从首页直接访问):常见于小型网站
大多数网站会混合使用多种类型。选择主导模式并记录例外情况。

3. URL structure

3. URL结构

URLs are part of the IA. They are user-facing, indexed by search engines, and shape how content is referenced.
URL principles:
  • Reflect the content hierarchy
  • Lowercase, hyphen-separated
  • Predictable (same pattern across same content type)
  • Stable (URLs don't change without redirects)
  • Short (under 60 characters where possible)
  • Descriptive (slug indicates the content)
  • Free of dates unless time-bound
  • Free of session IDs and tracking parameters in canonical form
Common patterns:
/                                   home
/[section]                          section landing
/[section]/[subsection]             subsection landing
/[section]/[subsection]/[item]      detail page
/blog                               blog index
/blog/[slug]                        blog post
/blog/category/[category]           category index
/blog/tag/[tag]                     tag index
/products                           product catalog
/products/[category]                category page
/products/[category]/[product]      product detail
Pick a pattern and stick to it. Inconsistent URL patterns confuse users, crawlers, and analytics.
URL是信息架构的一部分,面向用户、被搜索引擎索引,还会影响内容的引用方式。
URL设计原则:
  • 反映内容层级
  • 小写字母,连字符分隔
  • 可预测(同类内容类型使用相同规则)
  • 稳定(URL变更必须配置重定向)
  • 简短(尽可能控制在60字符以内)
  • 描述性(slug能体现内容主题)
  • 除非内容具有时效性,否则不包含日期
  • 规范形式中不包含会话ID和跟踪参数
常见模式:
/                                   home
/[section]                          section landing
/[section]/[subsection]             subsection landing
/[section]/[subsection]/[item]      detail page
/blog                               blog index
/blog/[slug]                        blog post
/blog/category/[category]           category index
/blog/tag/[tag]                     tag index
/products                           product catalog
/products/[category]                category page
/products/[category]/[product]      product detail
选定一种模式并保持一致。不一致的URL模式会让用户、爬虫和分析工具产生混淆。

4. Navigation

4. 导航

The chrome that gets users where they need to go.
Primary navigation:
  • The top-level structure of the site
  • Should reflect what the audience cares about, not what the org chart looks like
  • 5 to 7 items maximum (more becomes cognitively heavy)
  • Each label is recognizable in 2 to 3 words
  • Order matters (left/first gets the most attention)
Secondary navigation:
  • Within-section navigation
  • Often shown as sidebars, sub-menus, or in-page tabs
  • Supports the primary nav, doesn't duplicate it
Utility navigation:
  • Account, search, login, support
  • Visually subordinate to primary nav
  • Often top-right (LTR languages)
Breadcrumbs:
  • For nested hierarchies (3+ levels deep)
  • Always linked except the current page
  • Match the URL hierarchy or the conceptual hierarchy
  • Marked up with BreadcrumbList schema
Footer navigation:
  • Comprehensive; sometimes includes everything
  • Organized by category for findability
  • Includes secondary content (privacy, terms, contact)
帮助用户到达目标页面的界面组件。
主导航:
  • 网站的顶层结构
  • 应反映受众关心的内容,而非企业组织架构
  • 最多5-7个选项(过多会增加认知负担)
  • 每个标签使用2-3个易于识别的词汇
  • 顺序很重要(左侧/第一个选项获得最多关注)
次导航:
  • 板块内的导航
  • 通常以侧边栏、子菜单或页内标签形式呈现
  • 辅助主导航,不重复其内容
实用导航:
  • 账户、搜索、登录、支持等功能入口
  • 视觉上从属于主导航
  • 通常位于右上角(左文右语环境下)
Breadcrumbs(面包屑导航):
  • 适用于深度超过3层的嵌套层级
  • 除当前页面外,所有层级均需设置链接
  • 匹配URL层级或概念层级
  • 使用BreadcrumbList schema进行标记
页脚导航:
  • 内容全面,有时包含所有页面入口
  • 按分类组织以提升可查找性
  • 包含次要内容(隐私政策、条款、联系方式)

5. Taxonomy and metadata

5. Taxonomy(分类法)与元数据

The classification system applied to content.
Categories:
  • A small, controlled list (typically 5 to 15)
  • Mutually exclusive ideal (one item, one category)
  • Used for structural navigation
Tags:
  • A larger, often growing list (50+)
  • Multi-assignment (one item, many tags)
  • Used for cross-cutting connections, related-content, and long-tail discovery
Metadata fields:
  • Author, date, content type, audience segment
  • Whatever is useful for filtering, sorting, and surfacing
Common failures:
  • Categories that overlap (item could go in 3 different categories)
  • Tags that are unmaintained (sprawl into thousands, become useless)
  • Metadata fields that get filled inconsistently
  • Different content types using different taxonomies for the same thing (chaos)
应用于内容的分类系统。
分类(Categories):
  • 数量较少的受控列表(通常5-15个)
  • 理想状态下互斥(一个内容条目仅属于一个分类)
  • 用于结构性导航
标签(Tags):
  • 数量较多且持续增长的列表(50+个)
  • 可多分配(一个内容条目可属于多个标签)
  • 用于跨领域关联、相关内容推荐和长尾内容发现
元数据字段:
  • 作者、日期、内容类型、受众细分
  • 任何有助于筛选、排序和展示的字段
常见问题:
  • 分类重叠(一个内容条目可归入3个不同分类)
  • 标签缺乏维护(泛滥成数千个,失去效用)
  • 元数据字段填写不一致
  • 不同内容类型对同一事物使用不同分类法(导致混乱)

6. Labeling

6. 标签系统(Labeling)

What you call things.
Label principles:
  • Audience language, not internal language
  • Specific enough to be useful, short enough to scan
  • Consistent across the site (call it "Product" or "Solutions" but not both)
  • Tested with real users (closed card sort or tree test surfaces label problems)
Common label problems:
  • "Solutions" (vague; usually means "products with marketing copy")
  • "Resources" (catch-all; everything ends up there)
  • Internal jargon ("PRD," "OKRs") that doesn't match user vocabulary
  • Labels that change meaning across the site

内容和组件的命名规则。
标签设计原则:
  • 使用受众的语言,而非企业内部术语
  • 足够具体以发挥作用,同时足够简短便于扫描
  • 在整个网站保持一致(统一称为“产品”或“解决方案”,不要混用)
  • 与真实用户一起测试(封闭式卡片分类法或树状测试可发现标签问题)
常见标签问题:
  • "Solutions"(过于模糊;通常指“带有营销文案的产品”)
  • "Resources"(万能分类;所有内容都归入此处)
  • 内部行话(如“PRD”、“OKRs”)与用户词汇不匹配
  • 标签在网站不同区域含义不同

Workflow

工作流程

  1. Understand the audience and content. Use existing discovery and content strategy if available.
  2. Card sort or interview to surface mental models.
  3. Draft the sitemap. Hierarchy, page types, cross-references.
  4. Define URL patterns. One pattern per content type.
  5. Design navigation. Primary, secondary, utility, footer, breadcrumbs.
  6. Build taxonomy. Categories (controlled, small) and tags (open, large).
  7. Validate labels. Tree test or closed card sort with target users.
  8. Document. Use the template in
    references/ia-document-template.md
    .
  9. Hand off to design and development. IA decisions inform navigation components, URL routing, and taxonomy implementation.

  1. 了解受众与内容:使用已有的调研和内容策略成果(如有)。
  2. 卡片分类或用户访谈:挖掘受众的心智模型。
  3. 起草Sitemap:包含层级、页面类型、交叉引用。
  4. 定义URL规则:为每种内容类型制定一套规则。
  5. 设计导航系统:主导航、次导航、实用导航、页脚导航、面包屑导航。
  6. 构建Taxonomy:分类(受控、少量)和标签(开放式、大量)。
  7. 验证标签:与目标用户进行树状测试或封闭式卡片分类法测试。
  8. 文档记录:使用
    references/ia-document-template.md
    中的模板。
  9. 交付给设计与开发团队:信息架构决策为导航组件、URL路由和分类法实现提供依据。

Failure patterns

常见失败模式

  • IA designed by org chart. "Engineering" and "Marketing" sections make sense to the company, not to the audience.
  • Categories that proliferate. Every team adds a category for their thing. Becomes unscannable. Hold the line at 5 to 15.
  • Tags that sprawl. No tag governance. Tags become a junk drawer.
  • Inconsistent URL patterns. Some posts at /blog/[slug], some at /[slug], some at /articles/[slug]. Pick one.
  • Navigation that hides primary content. The most important pages should be one click from home.
  • Search as a substitute for IA. "Just use search" is not a structure. Search supports IA, doesn't replace it.
  • No validation. Card sorts, tree tests, and first-click tests are cheap and surface huge problems early.
  • Treating IA as a one-time deliverable. IA evolves with content. Plan for evolution.

  • 按企业组织架构设计信息架构:“工程”和“营销”板块对企业内部有意义,但对受众毫无价值。
  • 分类数量失控:每个团队都为自己的内容添加分类,导致分类过多无法扫描。严格控制在5-15个以内。
  • 标签泛滥:缺乏标签管理,标签沦为“杂物抽屉”。
  • URL规则不一致:部分博客文章位于/blog/[slug],部分位于/[slug],部分位于/articles/[slug]。选定一种规则并坚持使用。
  • 导航隐藏核心内容:最重要的页面应从首页一键可达。
  • 用搜索替代信息架构:“直接用搜索”不是一种结构。搜索是信息架构的补充,而非替代品。
  • 缺乏验证:卡片分类、树状测试和首次点击测试成本低,能在早期发现重大问题。
  • 将信息架构视为一次性交付物:信息架构随内容演变而发展,需规划迭代方案。

Output format

输出格式

Default output is an IA document at
information-architecture.md
plus visual assets:
  1. Executive summary
  2. Audience and mental models (synthesized)
  3. Sitemap (hierarchical diagram)
  4. URL structure (per content type)
  5. Navigation specification (primary, secondary, utility, footer, breadcrumbs)
  6. Taxonomy (categories and tag governance)
  7. Labels (validated wording for navigation, categories, content types)
  8. Implementation notes for design and development
Visual deliverables:
  • Sitemap diagram (Whimsical, Figma, OmniGraffle, etc.)
  • Navigation wireframes for primary surfaces
  • Optional: card sort and tree test results

默认输出为
information-architecture.md
格式的信息架构文档,加上视觉资产:
  1. 执行摘要
  2. 受众与心智模型(综合分析)
  3. Sitemap(层级结构图)
  4. URL结构(按内容类型划分)
  5. 导航规范(主导航、次导航、实用导航、页脚导航、面包屑导航)
  6. Taxonomy(分类与标签管理规则)
  7. 标签(经过验证的导航、分类、内容类型用词)
  8. 设计与开发实现说明
视觉交付物:
  • Sitemap示意图(使用Whimsical、Figma、OmniGraffle等工具制作)
  • 核心页面的导航线框图
  • 可选:卡片分类和树状测试结果

Reference files

参考文件

  • references/ia-document-template.md
    - Template for the IA deliverable.
  • references/url-pattern-library.md
    - URL pattern conventions for common content types.
  • references/ia-document-template.md
    - 信息架构交付物模板。
  • references/url-pattern-library.md
    - 常见内容类型的URL规则规范。