中心辐射结构

尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：每个分支是否都能在同一位置找到回中枢的入口、用户在单个会话里实际切换分支的频率有多高（决定往返成本是否可接受）、哪些分支内的重复动作不应被强制经过中枢、以及一旦加入持久标签栏或跨分支直达入口后，是否已经在文档与设计规范里明确改叫标签栏导航而非中心辐射结构。

{
  "states": [
    "hub",
    "spoke"
  ],
  "a11y": [
    "中枢屏幕的每个分支入口都有可读的文字标签，不只依赖图标",
    "分支内的返回中枢控件有指向明确的文字名称（如『返回主页』），可键盘操作，不是无名图标",
    "进入或离开分支时页面标题随之更新，供屏幕阅读器播报当前所处位置是中枢还是某个分支"
  ],
  "motion": "进入分支与返回中枢可用方向一致的短促过渡表达『从中心出发/回到中心』的关系，并尊重减少动态偏好"
}

{
  "id": "hub-and-spoke",
  "type": "layout",
  "name": {
    "zh": "中心辐射结构",
    "en": "Hub-and-Spoke Structure"
  },
  "aliases": [
    "轮辐式结构",
    "Hub and Spoke Navigation",
    "中心枢纽导航"
  ],
  "granularity": "experience",
  "intents": [
    "navigate-sections",
    "organize-content"
  ],
  "tags": [
    "中心辐射结构",
    "导航中枢",
    "返回枢纽",
    "任务隔离",
    "信息架构"
  ],
  "definition": "把一个中心枢纽屏幕作为唯一入口，把各自独立、彼此隔离的任务分区（辐条）挂在它周围：用户从枢纽出发进入某个分区，完成或放弃后再回到枢纽才能进入另一个分区，分区之间没有直接通路；NN/g 把这种导航中枢描述为通常是主页、列出全部导航选项，前往新位置必须先回到中枢再从中选择；Smashing Magazine 把中心屏幕描述为探索的发射台，链接指向彼此隔离的其他分区或独立应用。",
  "boundary": "中心辐射结构是一种信息架构：只有一个中心枢纽屏幕，辐条彼此独立、不共享导航通路，切换任务必须先回到枢纽。它不同于层级导航结构——层级导航是一棵可以逐级下钻、且兄弟分支之间可以横向移动或往返浏览的树，中心辐射结构里的辐条则彼此隔离，没有兄弟关系可言，回到中枢是切换的唯一方式，而不是树里的一个中间层级。它也不同于线性流程结构——线性流程只有一条预定顺序、没有可供选择的分支，中心辐射结构则是从一个点向多个独立分支放射，用户在分支之间做的是选择而非顺序推进。",
  "signature": [
    "有且只有一个中心枢纽屏幕列出全部分支入口，各分支自成一体、彼此不直接相连",
    "从任一分支往回走只会回到中枢，不会横向进入另一个分支，也没有绕开中枢的捷径",
    "分支内部可以有自己的次级导航或状态，但离开该分支去往别处之前必须先经过中枢"
  ],
  "when": [
    "屏幕空间有限（典型如手机），无法把全部分支的导航同时摊开或做成持久入口",
    "单次会话中用户通常只集中使用一个分支完成任务，很少需要在分支间来回切换",
    "各分支彼此独立、不共享上下文或状态，强行打通分支之间的横向通路反而增加复杂度"
  ],
  "when_not": [
    "用户在同一次会话里频繁需要在多个分支之间切换，反复回到中枢会造成大量重复的返回点击",
    "内容其实是一棵可探索的多级树、分支之间存在兄弟关系，这时层级导航结构更合适",
    "任务本身只有唯一固定的先后顺序，这时应使用线性流程结构，而不是分支加中枢"
  ],
  "tradeoff": "结构简单、心智模型清晰：用户永远知道『回到中枢就能去任何地方』，也不必在每个分支页面上都放一份完整的全局导航；但代价是往返成本——切换任务必须先走一趟回中枢的路，分支越常被交替使用，这趟往返就越频繁、越惹人厌，如果为了缓解往返成本而加入持久标签栏，结构就不再是严格意义上的『只能经中枢切换』。",
  "comparison": {
    "focus": "让彼此独立的任务分区共用一个统一的切换入口",
    "mechanism": "唯一的中心枢纽屏幕加上必须经它才能互通的独立分支",
    "cost": "切换分支需要往返中枢，加持久标签栏则打破严格的中枢限制"
  },
  "sources": [
    {
      "id": "hub-and-spoke-nng-mobile-navigation-patterns",
      "title": "Nielsen Norman Group · Basic Patterns for Mobile Navigation: A Primer",
      "url": "https://www.nngroup.com/articles/mobile-navigation-patterns/",
      "claim": "把导航中枢描述为通常是主页、列出全部导航选项的一个页面，前往新位置必须先回到中枢再使用其中一个选项；指出这种模式让每次导航都要途经主页、每用一次就多一步（回到中枢），因此适合任务导向的网站或应用，尤其当用户在一次会话中通常只使用导航层级里的一个分支时（例如联合航空的用户多半只订票或只值机，很少两者都做）；并把标签栏描述为持久停留在屏幕上、可直接互相切换，与中枢每次都要绕回主页形成对比。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/mobile-navigation-patterns/",
        "status": "unconfirmed",
        "checkedAt": "2026-09-16T05:41:39.059Z",
        "error": "save-request-failed"
      }
    },
    {
      "id": "hub-and-spoke-smashing-wayfinding-mobile-web",
      "title": "Smashing Magazine · Wayfinding For The Mobile Web",
      "url": "https://www.smashingmagazine.com/2014/10/wayfinding-for-the-mobile-web/",
      "claim": "把中心辐射模型描述为使用一个中心屏幕作为探索的发射台，链接向外指向网站的其他分区或彼此独立的应用，各分区相互隔离；说明这种模式让每个分区都不需要携带一份完整的全局导航，因为用户预期要先回到中枢才能去往别处，从而适合希望把用户注意力锁定在单一任务、减少分心的场景。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.smashingmagazine.com/2014/10/wayfinding-for-the-mobile-web/",
        "status": "available",
        "checkedAt": "2026-09-16T05:41:59.968Z",
        "jobId": "spn2-a7335c5afb850dce2a079c7d11f73d326c3521a8",
        "url": "https://web.archive.org/web/20260916054320/https://www.smashingmagazine.com/2014/10/wayfinding-for-the-mobile-web/",
        "timestamp": "20260916054320"
      }
    }
  ],
  "relations": [
    {
      "target": "hierarchical-navigation",
      "kind": "alternative",
      "condition": "分区之间其实存在父子或兄弟关系、需要逐级下钻或横向浏览",
      "reason": "层级导航结构允许用户在树的兄弟分支之间横向移动、反复浏览；中心辐射结构里的辐条彼此隔离，没有兄弟关系，回到中枢是切换的唯一方式。",
      "basis": "editorial"
    },
    {
      "target": "linear-flow",
      "kind": "alternative",
      "condition": "任务本身只有唯一预定顺序，不需要在多个独立分支之间做选择",
      "reason": "线性流程结构是一条没有分支的预定路径；中心辐射结构则是从中枢向多个彼此独立的分支放射，用户做的是分支间的选择而非顺序推进。",
      "basis": "editorial"
    },
    {
      "target": "single-column",
      "kind": "composes_with",
      "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": [
      "hub",
      "spoke"
    ],
    "a11y": [
      "中枢屏幕的每个分支入口都有可读的文字标签，不只依赖图标",
      "分支内的返回中枢控件有指向明确的文字名称（如『返回主页』），可键盘操作，不是无名图标",
      "进入或离开分支时页面标题随之更新，供屏幕阅读器播报当前所处位置是中枢还是某个分支"
    ],
    "motion": "进入分支与返回中枢可用方向一致的短促过渡表达『从中心出发/回到中心』的关系，并尊重减少动态偏好"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：每个分支是否都能在同一位置找到回中枢的入口、用户在单个会话里实际切换分支的频率有多高（决定往返成本是否可接受）、哪些分支内的重复动作不应被强制经过中枢、以及一旦加入持久标签栏或跨分支直达入口后，是否已经在文档与设计规范里明确改叫标签栏导航而非中心辐射结构。",
  "image": {
    "src": "/images/hub-and-spoke.webp",
    "alt": "一个虚构的 FIELDNOTES 应用示意图：中央是主页屏幕，四个任务屏幕围绕在四周，每个任务屏幕都有一条箭头指回中央主页，任务屏幕之间没有任何箭头相连，整体为奶油、陶土、鼠尾草绿、石板灰的扁平低饱和配色。"
  },
  "searchTerms": [
    "hub-and-spoke structure",
    "navigation hub",
    "return hub",
    "task isolation",
    "information architecture"
  ]
}