对比表布局

本词条尚无可操作示例；插画为编辑示意，展示列与行的对齐关系，不代表已验证的实现。插画中的方案与取值均为虚构。应用到产品前仍须确认每一行的口径一致，并在窄屏上检查属性名是否保持可见。

{
  "states": [
    "wide",
    "compact"
  ],
  "a11y": [
    "使用真正的表格标记，单元格与行列标题建立关联",
    "横向滚动区域可键盘操作，并有可访问的名称"
  ],
  "motion": "无动效；列的显隐切换直接生效"
}

{
  "id": "comparison-table",
  "type": "layout",
  "name": {
    "zh": "对比表布局",
    "en": "Comparison Table"
  },
  "aliases": [
    "Comparison Matrix",
    "Feature Comparison",
    "比较表",
    "功能对比表"
  ],
  "granularity": "component",
  "intents": [
    "browse-detail",
    "organize-content"
  ],
  "tags": [
    "对比",
    "表格",
    "属性",
    "方案",
    "决策"
  ],
  "definition": "把几个可选项放在列、把它们共有的属性放在行的表格：同一属性的取值在同一行横向排开，用户不必记忆就能逐项比较少量选项。",
  "boundary": "判定标准是\"同一属性在同一行、可横向比较\"，而不是\"用表格排版\"。它不是商品列表：列表用来筛选与发现，对比表用来在已经缩小的候选之间做决定。对比表也不是价格页的同义词，价格方案只是它最常见的一种内容。表中的属性必须对所有选项如实填写；只列出对自家方案有利的行，或用空白暗示\"不支持\"，都会把比较工具变成说服工具。",
  "signature": [
    "列是可选项，行是它们共有的属性",
    "同一行的取值口径一致，可以直接横向对照",
    "选项数量少，属性经过挑选而不是全部罗列"
  ],
  "when": [
    "用户已经把候选缩小到少数几个，需要逐项权衡",
    "决策依赖多个属性，单看某一个属性无法得出结论",
    "同样的属性在各个选项的详情页中分散，需要集中呈现"
  ],
  "when_not": [
    "候选数量很多，用户此时需要的是筛选而不是对比",
    "属性行被挑选过，只保留对某一方案有利的部分",
    "属性的取值口径不同，横向对照会得出错误结论"
  ],
  "tradeoff": "把属性对齐成行能大幅降低比较的记忆负担，代价是表格的宽度随选项数量增长：窄屏上可同时看到的列很少，用户又回到了必须记忆的状态。",
  "comparison": {
    "focus": "在少数候选之间做出取舍",
    "mechanism": "选项成列、属性成行，取值横向对齐",
    "cost": "宽度随选项增长，窄屏上难以同时看到"
  },
  "sources": [
    {
      "id": "comparison-nng",
      "title": "NN/g · Comparison Tables for Products, Services, and Features",
      "url": "https://www.nngroup.com/articles/comparison-tables/",
      "claim": "该文（2024 年 2 月 9 日）把对比表描述为一种在需要权衡少量选项的多个属性时使用的界面工具，指出这类信息常分散在各个详情页、迫使用户记忆或开多个标签页，并提醒小屏上可见的行更少、对短期记忆的压力更大；本词条的定义与窄屏取舍据此转述。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://www.nngroup.com/articles/comparison-tables/",
        "status": "available",
        "checkedAt": "2026-09-16T13:27:45.051Z",
        "jobId": "spn2-ee4e9770dca209ad9d34997db1423ded5640e9d1",
        "url": "https://web.archive.org/web/20260916132810/https://www.nngroup.com/articles/comparison-tables/",
        "timestamp": "20260916132810"
      }
    },
    {
      "id": "comparison-w3c-tables",
      "title": "W3C WAI · Tables Tutorial",
      "url": "https://www.w3.org/WAI/tutorials/tables/",
      "claim": "该教程说明数据表格需要用标记表达单元格与其行列标题的关系，读屏用户才能在移动到某个单元格时知道它属于哪一行哪一列；本词条据此给出结构化标记的要求，不引用其对具体标记方式的全部细节。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://www.w3.org/WAI/tutorials/tables/",
        "status": "available",
        "checkedAt": "2026-09-16T13:27:49.759Z",
        "jobId": "spn2-fa150e20224ba3dc7d3956cd9de7d4493623801a",
        "url": "https://web.archive.org/web/20260916132814/https://www.w3.org/WAI/tutorials/tables/",
        "timestamp": "20260916132814"
      }
    }
  ],
  "relations": [
    {
      "target": "landing-page",
      "kind": "composes_with",
      "condition": "落地页的方案或价格段落需要逐项比较",
      "reason": "着陆页负责整页的说服顺序，对比表负责其中\"比较\"这一步的结构。",
      "basis": "editorial"
    },
    {
      "target": "card-grid",
      "kind": "alternative",
      "condition": "呈现多个同类选项",
      "reason": "卡片网格利于浏览与发现，每张卡独立成块；对比表利于逐项对照，属性必须对齐。数量多时用前者，需要决定时用后者。",
      "basis": "editorial"
    },
    {
      "target": "hidden-costs",
      "kind": "conflicts_when",
      "condition": "表中的价格行不包含必然产生的附加费用",
      "reason": "对比表的价值来自口径一致；把必然发生的费用排除在价格行之外，会让横向比较得出错误结论。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "表格在窄屏上无法完整显示所有列",
      "instruction": "让属性名保持可见（固定首列或每块重复标题），不要只提供横向滚动而让用户失去参照。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "某个选项在某个属性上没有取值",
      "instruction": "明确写出\"不支持\"或\"不适用\"，不要留空让用户自行猜测。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "wide",
      "compact"
    ],
    "a11y": [
      "使用真正的表格标记，单元格与行列标题建立关联",
      "横向滚动区域可键盘操作，并有可访问的名称"
    ],
    "motion": "无动效；列的显隐切换直接生效"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意，展示列与行的对齐关系，不代表已验证的实现。插画中的方案与取值均为虚构。应用到产品前仍须确认每一行的口径一致，并在窄屏上检查属性名是否保持可见。",
  "image": {
    "src": "/images/comparison-table.webp",
    "alt": "一张名为 FIELDNOTES 的虚构对比表示意：最左一列是灰色的属性名占位条，右侧三列分别是三个方案，同一行内的取值以对钩、叉号或短占位条横向对齐。"
  },
  "searchTerms": [
    "comparison",
    "table",
    "attribute",
    "plan",
    "decision"
  ]
}