{ "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。", "schemaVersion": "1.0.0", "kind": "entry", "locale": "zh-CN", "id": "sidebar-layout", "name": { "zh": "侧栏布局", "en": "Sidebar Layout" }, "page": "https://designvocabulary.com/zh/entries/sidebar-layout/", "self": "https://designvocabulary.com/zh/entries/sidebar-layout.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/sidebar-layout.json", "en": "https://designvocabulary.com/en/entries/sidebar-layout.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": "sidebar-layout-nng-vertical-nav", "url": "https://www.nngroup.com/articles/vertical-nav/", "title": "Nielsen Norman Group · Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan", "checkedAt": "2026-09-15", "archive": { "status": "available", "confirmed": true, "url": "https://web.archive.org/web/20260915184207/https://www.nngroup.com/articles/vertical-nav/", "capturedAt": "2026-09-15T18:42:07Z", "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/vertical-nav/" } }, { "id": "sidebar-layout-aria-landmarks", "url": "https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/", "title": "W3C WAI · ARIA Authoring Practices Guide · Landmark Regions", "checkedAt": "2026-09-15", "archive": { "status": "available", "confirmed": true, "url": "https://web.archive.org/web/20260915184238/https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/", "capturedAt": "2026-09-15T18:42:38Z", "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/" } } ], "lists": [ { "id": "L-C", "edition": "classic", "seat": 5, "origin": "issue-1-ledger", "page": "https://designvocabulary.com/zh/lists/L-C/", "json": "https://designvocabulary.com/zh/lists/L-C.json" } ], "ordered": false, "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。" }, "entry": { "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" ] } }