VOCABULARY / 词条

主从布局

Master–Detail

加入比较＋

布局与信息架构粒度：页面master-detail · v0.1.0

保留可选择的项目列表，并呈现当前所选项目的详情。

可操作示例 · 虚构产品 FIELDNOTES

当前手记

周末散步

沿着旧街，重新认识城市。

识别特征

明确的当前选择
列表和详情关联
窄屏保留返回路径

概念边界

分栏本身不等于主从；关键是列表选择与详情内容之间的联动。

什么时候考虑它

反复查阅多个项目的详细内容
需要保留列表上下文

什么时候慎用

项目之间需要同时并排比较很多字段
窄屏仍强塞两个不可读的栏

取舍

查阅连贯，但较窄空间需要改成列表与详情之间的导航。

条件规则 · 编辑建议

当选择列表项目后必须持续标明选中项目，并同步详情。

当空间不足必须提供完整列表到详情的可返回路径。

来源与支持范围

Apple HIG · Split views ↗

主面板选择可驱动次面板内容；紧凑环境需要适配。

检索日期：2026-09-15

定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。

类型扩展与实现说明

能力标签只描述本演示；应用到产品时仍须重新验证。

{
  "states": [
    "unselected",
    "selected"
  ],
  "a11y": [
    "列表项目使用有名称的按钮",
    "详情更新不强抢焦点"
  ],
  "motion": "不需要动画"
}

完整 Agent 条目 JSON

{
  "id": "master-detail",
  "type": "layout",
  "name": {
    "zh": "主从布局",
    "en": "Master–Detail"
  },
  "aliases": [
    "List Detail",
    "列表详情",
    "列表与详情"
  ],
  "granularity": "page",
  "intents": [
    "browse-detail",
    "organize-content"
  ],
  "tags": [
    "列表",
    "详情",
    "分栏",
    "导航",
    "查阅"
  ],
  "definition": "保留可选择的项目列表，并呈现当前所选项目的详情。",
  "boundary": "分栏本身不等于主从；关键是列表选择与详情内容之间的联动。",
  "signature": [
    "明确的当前选择",
    "列表和详情关联",
    "窄屏保留返回路径"
  ],
  "when": [
    "反复查阅多个项目的详细内容",
    "需要保留列表上下文"
  ],
  "when_not": [
    "项目之间需要同时并排比较很多字段",
    "窄屏仍强塞两个不可读的栏"
  ],
  "tradeoff": "查阅连贯，但较窄空间需要改成列表与详情之间的导航。",
  "comparison": {
    "focus": "在列表中逐项查阅",
    "mechanism": "选择驱动详情",
    "cost": "需要管理选择状态与窄屏返回"
  },
  "sources": [
    {
      "id": "apple-split",
      "title": "Apple HIG · Split views",
      "url": "https://developer.apple.com/design/human-interface-guidelines/split-views",
      "claim": "主面板选择可驱动次面板内容；紧凑环境需要适配。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.apple.com/design/human-interface-guidelines/split-views",
        "status": "available",
        "checkedAt": "2026-09-15T16:49:14.303Z",
        "jobId": "spn2-84fca51c124f03df7c3e2575ea70e1b5032b0347",
        "url": "https://web.archive.org/web/20260915165049/https://developer.apple.com/design/human-interface-guidelines/split-views",
        "timestamp": "20260915165049"
      }
    }
  ],
  "relations": [
    {
      "target": "bento",
      "kind": "alternative",
      "condition": "决定内容的主浏览结构",
      "reason": "主从偏逐项查阅，Bento 偏概览。",
      "basis": "editorial"
    },
    {
      "target": "inline-edit",
      "kind": "composes_with",
      "condition": "在详情中修改小字段",
      "reason": "编辑可以保留当前查阅上下文。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "选择列表项目后",
      "instruction": "持续标明选中项目，并同步详情。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "空间不足",
      "instruction": "提供完整列表到详情的可返回路径。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "unselected",
      "selected"
    ],
    "a11y": [
      "列表项目使用有名称的按钮",
      "详情更新不强抢焦点"
    ],
    "motion": "不需要动画"
  },
  "demo": "master-detail",
  "version": "0.1.0",
  "editorialStatus": "sample-reviewed",
  "requirements": [],
  "demoCapabilities": [
    "keyboard",
    "reduced_motion"
  ],
  "implementationNote": "能力标签只描述本演示；应用到产品时仍须重新验证。",
  "searchTerms": [
    "list",
    "detail",
    "split view",
    "navigation",
    "browsing"
  ]
}