辅助面板布局

尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：辅助面板中是否存在只能在面板内完成的必需操作或信息、窄屏下面板收起后的展开入口是否可达且有文字标签、主内容与面板条目之间的关联标记在辅助技术下是否可识别，以及“对齐来源侧栏”变体在引用密度提高时是否仍然可读、是否会被用户忽略。

{
  "states": [
    "expanded",
    "collapsed",
    "drawer"
  ],
  "a11y": [
    "主内容与辅助面板条目的对应关系除颜色高亮外，还应有文字或结构化标记（如编号、说明文字）",
    "面板内容随任务变化时，不应打断主内容区域的焦点顺序或屏幕阅读器朗读顺序",
    "收起状态下的展开控件有文字名称并可键盘操作"
  ],
  "motion": "面板展开或收起可使用短促过渡，并尊重减少动态偏好"
}

{
  "id": "supporting-pane",
  "type": "layout",
  "name": {
    "zh": "辅助面板布局",
    "en": "Supporting-Pane Layout"
  },
  "aliases": [
    "辅助面板",
    "Supporting Pane",
    "Aligned Sidebar"
  ],
  "granularity": "page",
  "intents": [
    "organize-content",
    "consult-reference"
  ],
  "tags": [
    "辅助面板",
    "参考内容",
    "分栏",
    "来源侧栏",
    "页面级布局"
  ],
  "definition": "在较宽的主内容旁保留一条较窄的辅助面板，用来呈现与当前任务相关的参考资料、引用来源，或生成内容所依据的片段；面板内容随主内容本身变化，而不是靠在列表中选中某一项来决定——这与主从布局的选择联动不同。其中“对齐来源侧栏”是常见变体：把引用或来源与正文并排显示，帮助核查生成内容。",
  "boundary": "辅助面板与主从布局都呈现主区加副区，但主从中侧列表的选择驱动详情内容；辅助面板的内容跟随当前任务、段落或生成结果变化，不经过对象选择这一步。它也不同于侧栏布局：侧栏是跨页面持续存在的导航或工具区，内容基本不随主内容变化；辅助面板则与当前主内容强相关，通常聚焦参考资料、引用或来源，而非站点级导航。把引用与来源对齐显示在旁的“对齐来源侧栏”，属于辅助面板的一种呈现变体，而不是另一种独立布局。",
  "signature": [
    "主内容占据更宽的一栏，辅助面板在旁边只占较窄的宽度",
    "辅助面板的内容随当前任务、段落或生成结果变化，而不是由列表选择驱动",
    "主内容与面板条目之间有明确的关联标记（如高亮、连线或编号），不只靠并排位置暗示关联"
  ],
  "when": [
    "用户在阅读或核对内容时需要随时查看对应的参考资料、引用或来源",
    "辅助信息需要在浏览主任务时保持可见，但这些信息不是通过选中列表项获得的",
    "内容涉及生成式或引用密集的场景，需要保留深入核查的空间"
  ],
  "when_not": [
    "辅助内容本应由用户在列表中选中的项目决定，这时应按主从布局设计",
    "辅助面板会成为完成任务所必需的唯一入口，关键操作不应只存在于这里",
    "屏幕窄到无法容纳面板，且产品没有为它设计可达的收起或展开方式"
  ],
  "tradeoff": "参考资料或来源可以随时可见、便于核查，但会占用主内容的横向空间；窄屏下必须收起为可达的入口而不是直接消失，且主内容与面板条目之间的关联需要额外的视觉标记来维持清晰，否则容易被用户忽略。",
  "comparison": {
    "focus": "让参考或辅助信息在浏览主内容时保持可见、可核查",
    "mechanism": "与主内容并排、但不由列表选择驱动的较窄面板，面板条目与主内容有显式关联标记",
    "cost": "占用横向空间，窄屏需收起为可达入口，还要维护关联标记的清晰度"
  },
  "sources": [
    {
      "id": "supporting-pane-nng-right-rail",
      "title": "Nielsen Norman Group · Fight Against \"Right-Rail Blindness\"",
      "url": "https://www.nngroup.com/articles/fight-right-rail-blindness/",
      "claim": "指出用户会对侧栏或右栏内容形成类似“广告盲视”的回避反应，因此侧边面板应只承载次要、辅助性内容；核心内容与用户必须完成的操作不应只存在于这类面板中，面板更适合扮演补充性的“客服角色”而非主要导航或关键信息的唯一载体。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/fight-right-rail-blindness/",
        "status": "available",
        "checkedAt": "2026-09-16T04:27:22.005Z",
        "jobId": "spn2-0471fc9d28ae899ed3a9f639dbf21f9c60f661d7",
        "url": "https://web.archive.org/web/20260916042832/https://www.nngroup.com/articles/fight-right-rail-blindness/",
        "timestamp": "20260916042832"
      }
    },
    {
      "id": "supporting-pane-arxiv-source-transparency",
      "title": "arXiv 预印本 (2601.14611) · Seeing to Think? How Source Transparency Design Shapes Interactive Information Seeking and Evaluation in Conversational AI",
      "url": "https://arxiv.org/abs/2601.14611",
      "claim": "该预印本（2026-01-21 提交，尚未经同行评审）比较了四种来源呈现方式，其摘要指出把引用与生成内容对齐显示的“Aligned Sidebar”方案缓解了引用密度增加带来的信息过载，采用该方案的用户在批判性思维与综合评分上显著更高；由于尚未同行评审，这一结论只作为“对齐来源侧栏”变体的编辑参考，不构成已证实的事实。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://arxiv.org/abs/2601.14611",
        "status": "available",
        "checkedAt": "2026-09-16T04:27:22.464Z",
        "jobId": "spn2-faeadc21fa1a6f55dc59856e2043d40785f16f4b",
        "url": "https://web.archive.org/web/20260916042836/https://arxiv.org/abs/2601.14611",
        "timestamp": "20260916042836"
      }
    }
  ],
  "relations": [
    {
      "target": "master-detail",
      "kind": "related",
      "condition": "判断辅助内容是否由列表选择驱动",
      "reason": "两者都呈现主区加副区，但主从布局中侧列表的选择驱动详情内容；辅助面板的内容跟随当前任务或生成结果变化，并不经过对象选择这一步。",
      "basis": "editorial"
    },
    {
      "target": "sidebar-layout",
      "kind": "related",
      "condition": "判断该区域承载的是跨页面的持久导航/工具，还是与当前主内容绑定的参考信息",
      "reason": "侧栏布局是跨页面保持位置和内容基本不变的导航或工具区；辅助面板的内容与当前主内容强相关，随任务或生成结果变化，通常聚焦引用、来源或依据，而非站点级导航。",
      "basis": "editorial"
    },
    {
      "target": "progressive-disclosure",
      "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": [
      "expanded",
      "collapsed",
      "drawer"
    ],
    "a11y": [
      "主内容与辅助面板条目的对应关系除颜色高亮外，还应有文字或结构化标记（如编号、说明文字）",
      "面板内容随任务变化时，不应打断主内容区域的焦点顺序或屏幕阅读器朗读顺序",
      "收起状态下的展开控件有文字名称并可键盘操作"
    ],
    "motion": "面板展开或收起可使用短促过渡，并尊重减少动态偏好"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：辅助面板中是否存在只能在面板内完成的必需操作或信息、窄屏下面板收起后的展开入口是否可达且有文字标签、主内容与面板条目之间的关联标记在辅助技术下是否可识别，以及“对齐来源侧栏”变体在引用密度提高时是否仍然可读、是否会被用户忽略。",
  "image": {
    "src": "/images/supporting-pane.webp",
    "alt": "一个虚构的 FIELDNOTES 应用界面：左侧是较宽的主内容列，右侧是一条较窄的辅助面板，展示几段参考摘录；一条淡淡的连线从其中一段摘录指向主内容中被高亮的段落，整体为暖色调的扁平插画风格。"
  },
  "searchTerms": [
    "supporting pane",
    "reference content",
    "split view",
    "source sidebar",
    "page layout"
  ]
}