{
  "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "zh-CN",
  "id": "hierarchical-navigation",
  "name": {
    "zh": "层级导航结构",
    "en": "Hierarchical Navigation Structure"
  },
  "page": "https://designvocabulary.com/zh/entries/hierarchical-navigation/",
  "self": "https://designvocabulary.com/zh/entries/hierarchical-navigation.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/hierarchical-navigation.json",
    "en": "https://designvocabulary.com/en/entries/hierarchical-navigation.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 158,
    "index": "https://designvocabulary.com/zh/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=zh",
    "guide": "https://designvocabulary.com/zh/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.relations",
      "entry.implementationNote",
      "entry.behavior"
    ],
    "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。",
    "editorialStatus": "drafted",
    "specimenData": "fictional",
    "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。",
    "sources": [
      {
        "id": "hierarchical-navigation-nng-breadcrumbs",
        "url": "https://www.nngroup.com/articles/breadcrumbs/",
        "title": "Nielsen Norman Group · Breadcrumbs: 11 Design Guidelines for Desktop and Mobile",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260916034911/https://www.nngroup.com/articles/breadcrumbs/",
          "capturedAt": "2026-09-16T03:49:11Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/breadcrumbs/"
        }
      },
      {
        "id": "hierarchical-navigation-nng-flat-vs-deep",
        "url": "https://www.nngroup.com/articles/flat-vs-deep-hierarchy/",
        "title": "Nielsen Norman Group · Flat vs. Deep Website Hierarchies",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260916034935/https://www.nngroup.com/articles/flat-vs-deep-hierarchy/",
          "capturedAt": "2026-09-16T03:49:35Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/flat-vs-deep-hierarchy/"
        }
      },
      {
        "id": "hierarchical-navigation-nng-top-10-ia-mistakes",
        "url": "https://www.nngroup.com/articles/top-10-ia-mistakes/",
        "title": "Nielsen Norman Group · Top 10 Information Architecture Mistakes",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260916034959/https://www.nngroup.com/articles/top-10-ia-mistakes/",
          "capturedAt": "2026-09-16T03:49:59Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/top-10-ia-mistakes/"
        }
      }
    ],
    "lists": [
      {
        "id": "L-C",
        "edition": "classic",
        "seat": 8,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/zh/lists/L-C/",
        "json": "https://designvocabulary.com/zh/lists/L-C.json"
      },
      {
        "id": "L-Y",
        "edition": "2026-focus",
        "seat": 10,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/zh/lists/L-Y/",
        "json": "https://designvocabulary.com/zh/lists/L-Y.json"
      }
    ],
    "ordered": false,
    "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。"
  },
  "entry": {
    "id": "hierarchical-navigation",
    "type": "layout",
    "name": {
      "zh": "层级导航结构",
      "en": "Hierarchical Navigation Structure"
    },
    "aliases": [
      "树状导航",
      "Tree Navigation",
      "Drill-down Navigation"
    ],
    "granularity": "experience",
    "intents": [
      "navigate-sections",
      "organize-content"
    ],
    "tags": [
      "层级",
      "导航",
      "面包屑",
      "信息架构",
      "树状结构"
    ],
    "definition": "把内容组织成由父子分区构成的一棵树，用户从顶层类别逐级下钻到子类和具体条目，并通过面包屑或返回控件回到上层；NN/g 指出面包屑展示的是站点的层级结构而非浏览历史，并说明层级在宽与深之间需要权衡——扁平结构让内容更易被发现，过深的结构则要求点击太多层、每层的类别也更笼统。",
    "boundary": "层级导航结构是信息架构层面的组织方式，指一棵父子分区树以及沿树上下移动的导航关系，而不是某个具体的界面部件。侧栏布局是它的一种页面呈现（侧栏分组常映射树的前一两层），面包屑则是它的位置指示器。它不同于轮辐式结构（从一个中心页出发、每次回到中心再去别处）和线性流程（按固定顺序前进）；这两者尚无独立词条，此处仅作边界说明。它可以与渐进披露组合——子层按需展开而不是一次全部摊开。主从布局能承载只有两层的树，但主从强调选择驱动详情，而非逐级下钻。",
    "signature": [
      "顶层是少量彼此互斥的类别，每一层的项目打开下一层，直到具体条目",
      "每一层都显示当前位置及其祖先路径：面包屑，或带上级标题的返回控件",
      "同一层的兄弟项目共用一致的标签体系与样式，层级越深页面标题越具体"
    ],
    "when": [
      "内容数量大，能按稳定的分类体系归入互斥类别，且用户可以预测某个项目属于哪一类",
      "用户以浏览为主而非精确查找，需要在逐层缩小范围时保持方向感",
      "移动端等空间受限的场景，无法同时摊开所有分区，只能一次展示一层"
    ],
    "when_not": [
      "层级只有一两层，或内容本身是顺序流程，面包屑与逐级下钻只会增加步骤",
      "大量条目同时属于多个类别，硬塞进单一父节点会让用户在顶层反复猜测",
      "用户已经知道目标的名称，直接搜索或扁平列表更快，逐层点击只是障碍"
    ],
    "tradeoff": "每层选择少、结构可预测、位置感清晰；但层数越深，到达目标的点击越多、上层类别越笼统，而且兄弟分区之间的横向移动需要额外的捷径或路径导航，否则用户只能反复回到根节点。",
    "comparison": {
      "focus": "让大量内容按可预测的父子分区逐级可达",
      "mechanism": "一棵由互斥类别构成的树，加上当前位置与路径的指示",
      "cost": "深度带来点击成本与笼统标签，横向移动需要另设捷径"
    },
    "sources": [
      {
        "id": "hierarchical-navigation-nng-breadcrumbs",
        "title": "Nielsen Norman Group · Breadcrumbs: 11 Design Guidelines for Desktop and Mobile",
        "url": "https://www.nngroup.com/articles/breadcrumbs/",
        "claim": "说明面包屑用于展示站点的层级结构（当前页及其父级、祖父级直到首页），而不是会话中的浏览历史；面包屑只是对主导航的补充而非替代；应把当前页作为面包屑的最后一项但不做成链接；对只有一两层的扁平结构或线性结构的站点，面包屑没有必要也没有用处。",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/breadcrumbs/",
          "status": "available",
          "checkedAt": "2026-09-16T03:48:36.049Z",
          "jobId": "spn2-ad432ac868e4d98a016061fa3b0ac1a444a5fe51",
          "url": "https://web.archive.org/web/20260916034911/https://www.nngroup.com/articles/breadcrumbs/",
          "timestamp": "20260916034911"
        }
      },
      {
        "id": "hierarchical-navigation-nng-flat-vs-deep",
        "title": "Nielsen Norman Group · Flat vs. Deep Website Hierarchies",
        "url": "https://www.nngroup.com/articles/flat-vs-deep-hierarchy/",
        "claim": "把扁平层级描述为\"宽而浅\"、深层级描述为\"高而窄\"，指出扁平结构的内容不会被多层中间页面掩埋、更易被发现，而深层级每层类别少、标签更笼统也更容易混淆，让用户逐层点击通常效果不好；同时强调没有唯一正确答案，走向任一极端都会适得其反，扁平结构适合明确可辨的类别，深层站点应提供直达下层的捷径并使用面包屑，并通过可用性测试、分析与搜索日志观察用户来决定结构。",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/flat-vs-deep-hierarchy/",
          "status": "available",
          "checkedAt": "2026-09-16T03:48:56.919Z",
          "jobId": "spn2-174abfb352eedfbf877399075373386235c4b544",
          "url": "https://web.archive.org/web/20260916034935/https://www.nngroup.com/articles/flat-vs-deep-hierarchy/",
          "timestamp": "20260916034935"
        }
      },
      {
        "id": "hierarchical-navigation-nng-top-10-ia-mistakes",
        "title": "Nielsen Norman Group · Top 10 Information Architecture Mistakes",
        "url": "https://www.nngroup.com/articles/top-10-ia-mistakes/",
        "claim": "列出的信息架构错误包括：没有组织原则的\"一片沼泽\"式无结构；用大量弱类别并把条目重复放在多处的极端多重层级，使用户在顶层类别上耗费过多时间且更难前进；缺少类别落地页导致用户误解站点范围；看不见的导航几乎等同于没有导航；以及选项忽隐忽现的不一致导航让用户失去控制感；并主张结构与导航必须相互支撑并与搜索整合。",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/top-10-ia-mistakes/",
          "status": "available",
          "checkedAt": "2026-09-16T03:49:21.133Z",
          "jobId": "spn2-024828b020cc4156fd2abd84924c838cc862a635",
          "url": "https://web.archive.org/web/20260916034959/https://www.nngroup.com/articles/top-10-ia-mistakes/",
          "timestamp": "20260916034959"
        }
      }
    ],
    "relations": [
      {
        "target": "sidebar-layout",
        "kind": "realized_by",
        "condition": "桌面端需要把树的前一两层持久地摊开供随时切换",
        "reason": "侧栏是层级结构最常见的页面呈现之一，分组标题对应父类、组内行对应子类；但同一棵树也可以用逐页下钻或顶部菜单来呈现。",
        "basis": "editorial"
      },
      {
        "target": "progressive-disclosure",
        "kind": "composes_with",
        "condition": "树较深或某些分支很少被访问",
        "reason": "把下层分支折叠起来按需展开，可以在保持结构完整的同时减少每次看到的选项数量；但折叠后仍要有可识别的入口。",
        "basis": "editorial"
      },
      {
        "target": "master-detail",
        "kind": "composes_with",
        "condition": "树的最后两层是\"列表加详情\"的关系",
        "reason": "层级的叶子层常用主从布局承载：左列是兄弟条目，右侧是所选条目的内容，用户不必回到上层就能在兄弟之间切换。",
        "basis": "editorial"
      },
      {
        "target": "search-and-filter",
        "kind": "alternative",
        "condition": "用户已知目标名称或属性，或者条目难以归入互斥类别",
        "reason": "搜索与筛选绕过逐级下钻直接到达条目；NN/g 也主张结构与搜索应相互整合，而非二选一。",
        "basis": "editorial"
      },
      {
        "target": "recognition",
        "kind": "informs",
        "condition": "为每一层设计路径指示与标签",
        "reason": "面包屑和带上级标题的返回控件把\"我在哪里、从哪里来\"变成可识别的信息，而不是要求用户回忆点击过的路径。",
        "basis": "editorial"
      }
    ],
    "rules": [
      {
        "when": "用户位于树中除根以外的任何一层",
        "instruction": "显示当前位置及其路径——桌面端用面包屑（当前页为最后一项、不做链接），移动端至少用带上级标题的返回控件；不要只靠浏览器后退。",
        "strength": "must",
        "basis": "editorial"
      },
      {
        "when": "规划层级的宽度与深度",
        "instruction": "让深度保持足够浅，使每一层的类别彼此互斥、标签具体可预测；宁可顶层多几个明确的类别，也不要为了减少选项而把内容藏到笼统的多层之下。",
        "strength": "recommend",
        "basis": "editorial"
      },
      {
        "when": "用户需要在同一层的兄弟分区之间移动",
        "instruction": "提供横向捷径（可点击的面包屑父级、兄弟切换或侧栏），不要强迫用户先回到根节点再重新下钻。",
        "strength": "recommend",
        "basis": "editorial"
      }
    ],
    "behavior": {
      "states": [
        "root",
        "branch",
        "leaf"
      ],
      "a11y": [
        "面包屑放在带名称的 navigation 地标内，当前项以 aria-current=\"page\" 标记且不是链接",
        "返回控件有指向上级的文字名称，可键盘操作，不只是一个无名图标",
        "下钻到新一层时页面标题随之更新，供屏幕阅读器播报当前位置"
      ],
      "motion": "下钻与返回可用方向一致的短促过渡表达层级方向，并尊重减少动态偏好"
    },
    "demo": null,
    "version": "0.1.0",
    "editorialStatus": "drafted",
    "requirements": [],
    "demoCapabilities": [],
    "implementationNote": "尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：每一层是否都能看到当前位置与路径、面包屑当前项是否不可点击且带 aria-current、返回控件是否有文字名称、类别是否真正互斥（用卡片分类或树测试检验）、以及兄弟分区之间是否有不经根节点的横向通路。",
    "image": {
      "src": "/images/hierarchical-navigation.webp",
      "alt": "一个虚构的 FIELDNOTES 移动端界面：顶部标题栏左侧有返回箭头，下方是三级面包屑，末级以陶土色高亮；再往下是一列带右向箭头的子分区行，整体为奶油、陶土、鼠尾草绿的扁平配色。"
    },
    "searchTerms": [
      "hierarchy",
      "navigation",
      "breadcrumbs",
      "information architecture",
      "tree structure"
    ]
  }
}