侧栏布局

尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：侧栏是否带有地标角色与可访问名称、当前项是否对辅助技术可知、窄屏折叠后一级导航是否仍有文字可辨、以及侧栏宽度与顺序是否在各页面间保持一致。

{
  "states": [
    "expanded",
    "collapsed",
    "drawer"
  ],
  "a11y": [
    "侧栏使用带名称的地标角色，可用地标导航直接跳到或跳过",
    "当前位置以 aria-current 等方式对辅助技术可知，不只靠颜色",
    "折叠状态下展开控件有文字名称并可键盘操作"
  ],
  "motion": "折叠与展开可用短促过渡，并尊重减少动态偏好"
}

{
  "id": "sidebar-layout",
  "type": "layout",
  "name": {
    "zh": "侧栏布局",
    "en": "Sidebar Layout"
  },
  "aliases": [
    "侧边栏布局",
    "Side Navigation",
    "Vertical Navigation"
  ],
  "granularity": "page",
  "intents": [
    "organize-content",
    "navigate-sections"
  ],
  "tags": [
    "侧栏",
    "导航",
    "分栏",
    "持久区域",
    "布局"
  ],
  "definition": "在主内容旁保留一条持久的纵向侧区，用来放置导航、筛选或工具；NN/g 指出左侧纵向导航便于扫视、容纳更多类别，且更容易在不同屏宽下重排。",
  "boundary": "侧栏是页面级的持久区域，其内容可以是导航、筛选器或工具面板，不一定是对象列表；因此它不同于主从布局——主从中的侧列表选择会驱动详情内容，而侧栏与主内容之间没有这种选择联动。它也不同于单列布局：单列刻意只保留一条内容列，侧栏则始终把辅助区域与主内容并排。窄屏下折叠成抽屉的侧栏仍属侧栏布局。",
  "signature": [
    "一条固定在页面一侧、跨页面保持位置与宽度的纵向区域",
    "侧区内是图标加文字标签的行或分组，当前位置有明显高亮",
    "主内容区占据剩余宽度，随视口变化而侧区宽度基本不变"
  ],
  "when": [
    "产品有较多平级的一级分区，需要随时切换且未来可能继续增加",
    "筛选条件或工具需要在浏览主内容时始终可见、可调整",
    "桌面为主的工作台或后台，用户长时间停留并频繁跨分区操作"
  ],
  "when_not": [
    "内容以顺序阅读或逐项填写为主，侧区会挤占正文宽度而无用处",
    "一级分区只有两三个，顶部导航已足够，侧栏只会降低内容与界面的比例",
    "侧列表的选择本应驱动右侧详情，这时应按主从布局来设计"
  ],
  "tradeoff": "导航与工具始终在手边、易于扩展和扫视；但会持续占用横向空间，长菜单可能有项目被折到视线之外，窄屏下还需要另设折叠或抽屉方案。",
  "comparison": {
    "focus": "让分区导航或工具在浏览主内容时始终可达",
    "mechanism": "一条与主内容并排的持久纵向区域",
    "cost": "持续占用宽度，需要处理长菜单与窄屏折叠"
  },
  "sources": [
    {
      "id": "sidebar-layout-nng-vertical-nav",
      "title": "Nielsen Norman Group · Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan",
      "url": "https://www.nngroup.com/articles/vertical-nav/",
      "claim": "指出左侧纵向导航可容纳更多类别而不必重做导航界面，纵向列表比横向更易于视觉搜索，且更容易适配不同屏宽；代价是内容区变小、长菜单项目可能落到首屏之外；建议不要只用图标而隐藏文字标签，桌面上空间允许时不要折叠成汉堡菜单。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/vertical-nav/",
        "status": "available",
        "checkedAt": "2026-09-15T18:40:26.536Z",
        "jobId": "spn2-388ac0cfd714da5185952c4d5b0a215b09ef4952",
        "url": "https://web.archive.org/web/20260915184207/https://www.nngroup.com/articles/vertical-nav/",
        "timestamp": "20260915184207"
      }
    },
    {
      "id": "sidebar-layout-aria-landmarks",
      "title": "W3C WAI · ARIA Authoring Practices Guide · Landmark Regions",
      "url": "https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/",
      "claim": "说明 navigation 地标用于标识页面或站点导航链接组（对应 HTML nav 元素），complementary 地标用于与主内容并列但可独立成立的辅助区域（对应 aside 元素）；页面上同类地标多于一个时，每个都应有唯一的可访问名称。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/",
        "status": "available",
        "checkedAt": "2026-09-15T18:40:47.348Z",
        "jobId": "spn2-7fee77c1ec866b3d7956157b38f2310d2fc743d7",
        "url": "https://web.archive.org/web/20260915184238/https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/",
        "timestamp": "20260915184238"
      }
    }
  ],
  "relations": [
    {
      "target": "master-detail",
      "kind": "related",
      "condition": "判断侧区与主内容之间是否存在选择联动",
      "reason": "两者外形都是分栏，但主从的侧列表选择驱动详情；侧栏承载导航或工具，主内容不由侧区内的对象选择决定。",
      "basis": "editorial"
    },
    {
      "target": "single-column",
      "kind": "alternative",
      "condition": "决定是否为页面保留持久的辅助区域",
      "reason": "单列把全部宽度让给顺序内容；侧栏用一部分宽度换取随时可达的导航或工具。",
      "basis": "editorial"
    },
    {
      "target": "search-and-filter",
      "kind": "composes_with",
      "condition": "筛选条件较多且需要在浏览结果时保持可见",
      "reason": "分面筛选器常放在侧栏中，与结果区并排，调整条件时结果上下文不丢失。",
      "basis": "editorial"
    },
    {
      "target": "progressive-disclosure",
      "kind": "composes_with",
      "condition": "侧栏需要在窄屏或专注模式下收起",
      "reason": "可折叠的侧栏用按需展开来回收宽度，但收起后仍应保留可识别的入口。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "页面存在侧栏区域",
      "instruction": "用地标角色标记侧栏（导航用 nav/navigation，辅助内容用 aside/complementary），并给它一个可访问名称，尤其在同类地标不止一个时。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "视口收窄到无法并排显示侧栏与主内容",
      "instruction": "让侧栏折叠或改为抽屉，但一级导航不要藏在没有文字标签的图标后面；保持文字标签或提供明确的展开入口。",
      "strength": "recommend",
      "basis": "editorial"
    },
    {
      "when": "用户在同一产品的不同页面之间切换",
      "instruction": "保持侧栏的位置、宽度与项目顺序稳定，避免每页重排导致定位失效。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "expanded",
      "collapsed",
      "drawer"
    ],
    "a11y": [
      "侧栏使用带名称的地标角色，可用地标导航直接跳到或跳过",
      "当前位置以 aria-current 等方式对辅助技术可知，不只靠颜色",
      "折叠状态下展开控件有文字名称并可键盘操作"
    ],
    "motion": "折叠与展开可用短促过渡，并尊重减少动态偏好"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：侧栏是否带有地标角色与可访问名称、当前项是否对辅助技术可知、窄屏折叠后一级导航是否仍有文字可辨、以及侧栏宽度与顺序是否在各页面间保持一致。",
  "image": {
    "src": "/images/sidebar-layout.webp",
    "alt": "一个虚构的 FIELDNOTES 应用界面：左侧是一条窄的深色纵向侧栏，排列着图标加标签的导航行，其中一行以陶土色高亮为当前项；右侧是宽阔的主内容区，有一条标题栏和两列卡片。"
  },
  "searchTerms": [
    "sidebar",
    "navigation",
    "split view",
    "persistent region",
    "layout"
  ]
}