（翻译）斑马纹模式（Alternating Row Colors）

问题概述

  用户想直观地区分表格中形式相似的行，以便识别同一行的内容。[1]

示例

用途

• 用于当表格中有多列数据时；
• 用于当表格中每列内容都差不多时；
• 用于当表格每行存在多排内容时[2]；
• 用于当表格每行行高不一致时；

解决方案

  为区分表格中的不同行，相邻两行之间使用不同的颜色作为背景色。为了让用户感觉良好，将这两种颜色之间的差异降到最小。这两种颜色应该值相近，饱和度不同，一个深色，一个浅色，通常其中一种颜色与页面的背景色相同[3]。

说明

  表格中相邻两行之间使用不同的背景色，从视觉上辅助用户从左往右已经从右往左查看一行内容，避免看差行，这样不会严重改变表格的设计。
  表格中相邻两行之间使用不同的背景色，这种做法的副作用是表格在页面上特别显眼。背景色使表格不同行的内容相互隔离。[4]

原文地址：http://ui-patterns.com/patterns/AlternatingRowColors
[1]原文：The user needs to visually separate similar looking rows in a table apart, in order to match the values of each row.
[2]原文：Use when there are multiple lines for each row
[3]原文：The colors should be similar in value and low in saturation – the one should be slightly darker or lighter than the other. It is often seen that one of the two colors is the background color of the page itself.
[4]原文：A side effect of shading every second row with an alternating color is however that the table will stand out from the rest of the page. The shading in this way boxes in the table.