VOCABULARY / 词条
斑马纹
Zebra Striping
数据表或列表中相邻两行使用交替的背景色（通常一行无底色、一行浅灰），帮助用户在横向扫读一整行时不串到上下行。
识别特征
- 相邻行底色交替出现，对比度低，不抢夺数据本身的注意力
- 条纹覆盖整行宽度，从第一列延伸到最后一列
- 排序、筛选或增删行后条纹仍然严格交替
概念边界
斑马纹是一种静态的行区分手段，不是状态：它不随用户操作变化，这一点与悬停高亮、选中行不同——后两者标记的是“我正在看/已选中这一行”。它也不是分组：交替底色只表示“这是另一行”，不表示这几行属于同一类，用它暗示分组会误导。关于它是否真的提升阅读的证据并不一致：一项 2008 年的在线实验未发现它在准确率上有显著差异，速度上的差异也不稳定，但偏好有条纹表格的参与者（46%）多于其他选择；因此本词条把它视为一种低成本、偏好驱动的辅助，而不是已被证实的效率提升。
什么时候考虑它
- 表格很宽、列间距大，或需要横向滚动，视线容易在一行中途串行
- 行数多、行高小，相邻行的数据在形状上相似
- 表格没有横向分隔线，又需要帮助用户保持在同一行
什么时候慎用
- 表格只有寥寥几行或几列，条纹只增加视觉噪声
- 交替底色与选中、悬停或状态色过于接近，用户分不清哪一行被选中
- 行本身有分组或层级，交替条纹会打乱分组带来的节奏
取舍
斑马纹几乎不占空间、实现成本低，在宽表上能减轻用户用手指或鼠标“压着行”读的负担，也常被用户认为更好看；代价是可测量的效率收益并不稳定，而且它会与悬停、选中、状态色争夺同一种视觉通道，颜色体系越复杂越容易混淆。
条件规则 · 编辑建议
相关词条
斑马纹帮助视线沿着同一属性行横向移动，不串到上下行。
当列间距大、接近律不足以把一行的单元格连起来时，交替底色借共同区域补上这一行的整体感。
条纹行上的文字对比度会低于无底色行，须对两种行底色分别检查文字对比度。
相似律会让用户把同色的行读成同一类，交替底色若与语义色相近，就会被误读为状态或分组。
来源与支持范围
该使用指南把斑马纹列为数据表的一种可选修饰：用交替颜色为表格行着色，目的是让用户更容易横向扫读信息；指南未规定具体在何种条件下必须使用。本词条据此给出定义与用途，使用条件属编辑意见。
检索日期：2026-10-20 · 快照待确认作者在为期两周的在线实验中收集了 244 名参与者的有效数据，用 15 行 9 列的虚构表格比较有无斑马纹；排除不可靠题目后，准确率没有统计显著差异，六道题中两道在条纹下更慢、四道更快，仅一道的差异显著；46% 的参与者偏好条纹、33% 无偏好。作者结论是没有一致证据表明条纹提升准确率或速度，也没有证据表明它有害，并指出研究只用了一组数据、宽列距或横向滚动时效果可能更明显。本词条据此如实标注证据不一致。
检索日期：2026-10-20 · 快照待确认该文在“定位相关信息”任务下指出，视觉设计需要让用户在横向移动视线时保持在原来的行上，并把边框、斑马纹和悬停高亮列为可以帮助做到这一点的手段。本词条据此把斑马纹放在一组可替代、可组合的行定位手段之中，而不是唯一答案。
检索日期：2026-10-20 · 存档于 2026-09-16定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。
类型扩展与实现说明
本词条尚无可操作示例；插画为编辑示意，表格中的数据以占位条表示。应用到产品前仍须在每种行底色上检查文字对比度，确认条纹与选中、悬停状态可区分，并在排序与筛选后复查交替是否正确。
{
"states": [
"odd-row",
"even-row",
"hover",
"selected"
],
"a11y": [
"每种行底色上的文字都满足对比度要求",
"选中与悬停状态不只依赖与条纹相近的底色表达",
"条纹只是视觉辅助，行列关系仍由表格语义结构表达"
],
"motion": "条纹是静态的，不做动画；排序或筛选后条纹随行重排即时更新"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。