条纹表格(Striped tables),Zebra 条纹(Zebra striping)。

一、问题总结

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

二、截图示例

image.png

三、参考用法

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

四、解决方案

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

五、基本原理

表格中相邻两行之间使用不同的背景色,从视觉上辅助用户从左往右已经从右往左查看一行内容,避免看差行,这样不会严重改变表格的设计。

表格中相邻两行之间使用不同的背景色,这种做法的副作用是表格在页面上特别显眼。背景色使表格不同行的内容相互隔离。

附录

查看原文