{
  "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "zh-CN",
  "id": "zebra-striping",
  "name": {
    "zh": "斑马纹",
    "en": "Zebra Striping"
  },
  "page": "https://designvocabulary.com/zh/entries/zebra-striping/",
  "self": "https://designvocabulary.com/zh/entries/zebra-striping.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/zebra-striping.json",
    "en": "https://designvocabulary.com/en/entries/zebra-striping.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": "zebra-carbon",
        "url": "https://carbondesignsystem.com/components/data-table/usage/",
        "title": "Carbon Design System · Data table usage",
        "checkedAt": "2026-10-20",
        "archive": {
          "status": "unconfirmed",
          "confirmed": false,
          "url": null,
          "capturedAt": null,
          "lookupUrl": "https://web.archive.org/web/20261020*/https://carbondesignsystem.com/components/data-table/usage/"
        }
      },
      {
        "id": "zebra-alistapart-enders",
        "url": "https://alistapart.com/article/zebrastripingdoesithelp/",
        "title": "A List Apart · Jessica Enders, Zebra Striping: Does it Really Help? (2008-05-06)",
        "checkedAt": "2026-10-20",
        "archive": {
          "status": "unconfirmed",
          "confirmed": false,
          "url": null,
          "capturedAt": null,
          "lookupUrl": "https://web.archive.org/web/20261020*/https://alistapart.com/article/zebrastripingdoesithelp/"
        }
      },
      {
        "id": "zebra-nng-data-tables",
        "url": "https://www.nngroup.com/articles/data-tables/",
        "title": "Nielsen Norman Group · Page Laubheimer, Data Tables: Four Major User Tasks (2022-04-03)",
        "checkedAt": "2026-10-20",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260916054518/https://www.nngroup.com/articles/data-tables/",
          "capturedAt": "2026-09-16T05:45:18Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/data-tables/"
        }
      }
    ],
    "lists": [],
    "ordered": false,
    "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。"
  },
  "entry": {
    "id": "zebra-striping",
    "type": "micro",
    "name": {
      "zh": "斑马纹",
      "en": "Zebra Striping"
    },
    "aliases": [
      "Zebra Stripes",
      "Alternating Row Colors",
      "隔行变色",
      "交替行底色"
    ],
    "granularity": "component",
    "intents": [
      "read-content",
      "find-item"
    ],
    "tags": [
      "表格",
      "隔行",
      "数据表",
      "横向扫读",
      "行背景"
    ],
    "definition": "数据表或列表中相邻两行使用交替的背景色（通常一行无底色、一行浅灰），帮助用户在横向扫读一整行时不串到上下行。",
    "boundary": "斑马纹是一种静态的行区分手段，不是状态：它不随用户操作变化，这一点与悬停高亮、选中行不同——后两者标记的是“我正在看/已选中这一行”。它也不是分组：交替底色只表示“这是另一行”，不表示这几行属于同一类，用它暗示分组会误导。关于它是否真的提升阅读的证据并不一致：一项 2008 年的在线实验未发现它在准确率上有显著差异，速度上的差异也不稳定，但偏好有条纹表格的参与者（46%）多于其他选择；因此本词条把它视为一种低成本、偏好驱动的辅助，而不是已被证实的效率提升。",
    "signature": [
      "相邻行底色交替出现，对比度低，不抢夺数据本身的注意力",
      "条纹覆盖整行宽度，从第一列延伸到最后一列",
      "排序、筛选或增删行后条纹仍然严格交替"
    ],
    "when": [
      "表格很宽、列间距大，或需要横向滚动，视线容易在一行中途串行",
      "行数多、行高小，相邻行的数据在形状上相似",
      "表格没有横向分隔线，又需要帮助用户保持在同一行"
    ],
    "when_not": [
      "表格只有寥寥几行或几列，条纹只增加视觉噪声",
      "交替底色与选中、悬停或状态色过于接近，用户分不清哪一行被选中",
      "行本身有分组或层级，交替条纹会打乱分组带来的节奏"
    ],
    "tradeoff": "斑马纹几乎不占空间、实现成本低，在宽表上能减轻用户用手指或鼠标“压着行”读的负担，也常被用户认为更好看；代价是可测量的效率收益并不稳定，而且它会与悬停、选中、状态色争夺同一种视觉通道，颜色体系越复杂越容易混淆。",
    "comparison": {
      "focus": "在宽表上横向扫读时不串到相邻行",
      "mechanism": "相邻行使用交替的低对比背景色，覆盖整行宽度",
      "cost": "效率收益证据不一致，且会与选中、悬停、状态色争夺视觉通道"
    },
    "sources": [
      {
        "id": "zebra-carbon",
        "title": "Carbon Design System · Data table usage",
        "url": "https://carbondesignsystem.com/components/data-table/usage/",
        "claim": "该使用指南把斑马纹列为数据表的一种可选修饰：用交替颜色为表格行着色，目的是让用户更容易横向扫读信息；指南未规定具体在何种条件下必须使用。本词条据此给出定义与用途，使用条件属编辑意见。",
        "checkedAt": "2026-10-20",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20261020*/https://carbondesignsystem.com/components/data-table/usage/",
          "status": "unconfirmed",
          "checkedAt": "2026-10-20T07:58:52.445Z",
          "error": "save-request-failed"
        }
      },
      {
        "id": "zebra-alistapart-enders",
        "title": "A List Apart · Jessica Enders, Zebra Striping: Does it Really Help? (2008-05-06)",
        "url": "https://alistapart.com/article/zebrastripingdoesithelp/",
        "claim": "作者在为期两周的在线实验中收集了 244 名参与者的有效数据，用 15 行 9 列的虚构表格比较有无斑马纹；排除不可靠题目后，准确率没有统计显著差异，六道题中两道在条纹下更慢、四道更快，仅一道的差异显著；46% 的参与者偏好条纹、33% 无偏好。作者结论是没有一致证据表明条纹提升准确率或速度，也没有证据表明它有害，并指出研究只用了一组数据、宽列距或横向滚动时效果可能更明显。本词条据此如实标注证据不一致。",
        "checkedAt": "2026-10-20",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20261020*/https://alistapart.com/article/zebrastripingdoesithelp/",
          "status": "unconfirmed",
          "checkedAt": "2026-10-20T07:58:53.139Z",
          "error": "save-request-failed"
        }
      },
      {
        "id": "zebra-nng-data-tables",
        "title": "Nielsen Norman Group · Page Laubheimer, Data Tables: Four Major User Tasks (2022-04-03)",
        "url": "https://www.nngroup.com/articles/data-tables/",
        "claim": "该文在“定位相关信息”任务下指出，视觉设计需要让用户在横向移动视线时保持在原来的行上，并把边框、斑马纹和悬停高亮列为可以帮助做到这一点的手段。本词条据此把斑马纹放在一组可替代、可组合的行定位手段之中，而不是唯一答案。",
        "checkedAt": "2026-10-20",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/data-tables/",
          "status": "available",
          "checkedAt": "2026-09-16T05:44:47.270Z",
          "jobId": "spn2-0cc4fc46527b310e11d25305239adc9893614208",
          "url": "https://web.archive.org/web/20260916054518/https://www.nngroup.com/articles/data-tables/",
          "timestamp": "20260916054518"
        }
      }
    ],
    "relations": [
      {
        "target": "comparison-table",
        "kind": "composes_with",
        "condition": "对比表的行数多、列宽，用户需要横向读完一个属性在各选项上的取值",
        "reason": "斑马纹帮助视线沿着同一属性行横向移动，不串到上下行。",
        "basis": "editorial"
      },
      {
        "target": "proximity",
        "kind": "related",
        "condition": "表格依靠行内单元格的排列让用户把它们读作一条记录",
        "reason": "当列间距大、接近律不足以把一行的单元格连起来时，交替底色借共同区域补上这一行的整体感。",
        "basis": "editorial"
      },
      {
        "target": "contrast-legibility",
        "kind": "conflicts_when",
        "condition": "条纹底色较深，或与文字颜色对比不足",
        "reason": "条纹行上的文字对比度会低于无底色行，须对两种行底色分别检查文字对比度。",
        "basis": "editorial"
      },
      {
        "target": "similarity",
        "kind": "related",
        "condition": "条纹颜色与表示选中、警告或分类的颜色接近",
        "reason": "相似律会让用户把同色的行读成同一类，交替底色若与语义色相近，就会被误读为状态或分组。",
        "basis": "editorial"
      }
    ],
    "rules": [
      {
        "when": "为表格添加斑马纹",
        "instruction": "让条纹与选中、悬停及状态色在视觉上明确可区分，并在每种行底色上分别检查文字对比度。",
        "strength": "recommend",
        "basis": "editorial"
      },
      {
        "when": "表格支持排序、筛选或增删行",
        "instruction": "按渲染后的可见行序重新计算交替，而不是把条纹绑定在数据记录上。",
        "strength": "recommend",
        "basis": "editorial"
      }
    ],
    "behavior": {
      "states": [
        "odd-row",
        "even-row",
        "hover",
        "selected"
      ],
      "a11y": [
        "每种行底色上的文字都满足对比度要求",
        "选中与悬停状态不只依赖与条纹相近的底色表达",
        "条纹只是视觉辅助，行列关系仍由表格语义结构表达"
      ],
      "motion": "条纹是静态的，不做动画；排序或筛选后条纹随行重排即时更新"
    },
    "demo": null,
    "version": "0.1.0",
    "editorialStatus": "drafted",
    "requirements": [],
    "demoCapabilities": [],
    "implementationNote": "本词条尚无可操作示例；插画为编辑示意，表格中的数据以占位条表示。应用到产品前仍须在每种行底色上检查文字对比度，确认条纹与选中、悬停状态可区分，并在排序与筛选后复查交替是否正确。",
    "image": {
      "src": "/images/zebra-striping.webp",
      "alt": "一张示意图：虚构的 FIELDNOTES 数据表有八行七列，单元格内容以灰色占位条表示，相邻行交替使用奶油色与极浅的石板蓝底色；其中一行以赤陶色细边框标出选中状态，一条虚线沿着某一行从左端延伸到右端，示意视线横向扫读。"
    },
    "searchTerms": [
      "table",
      "alternating rows",
      "data table",
      "horizontal scanning",
      "row background"
    ]
  }
}