层级导航结构

尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：每一层是否都能看到当前位置与路径、面包屑当前项是否不可点击且带 aria-current、返回控件是否有文字名称、类别是否真正互斥（用卡片分类或树测试检验）、以及兄弟分区之间是否有不经根节点的横向通路。

{
  "states": [
    "root",
    "branch",
    "leaf"
  ],
  "a11y": [
    "面包屑放在带名称的 navigation 地标内，当前项以 aria-current=\"page\" 标记且不是链接",
    "返回控件有指向上级的文字名称，可键盘操作，不只是一个无名图标",
    "下钻到新一层时页面标题随之更新，供屏幕阅读器播报当前位置"
  ],
  "motion": "下钻与返回可用方向一致的短促过渡表达层级方向，并尊重减少动态偏好"
}

{
  "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"
  ]
}