Web页面中的表格设计,远没那么简单

发布时间:2017-04-27 15:00:29 编辑:站点网

表头固定,目的在于向下滚动表格时,表头出现在页面顶部,时刻指示出该列数据的类别属性。该案例中每列数据具有明显的差异,数据本身体现出了类型,在不需要表头情况下,用户能够清楚的知道数据类型及意义,不会出现混淆,故没有采用固定表头的设计。表格中的数据列差异不大,用户不能直观的根据表格中的数据分辨出数据类型,因此采用固定顶部表头,指示出数据类型。
  1. 在数据显示超过 40 条时(电脑屏幕一屏无法完全显示,需要滚动查看时),且表格中的数据不能直观的展示出数据类型,建议采用固定表头的形式,时刻显示数据类型;
  2. 当字段数量过多,需要横向滚动表格,且需要对比数据时,采用固定属性列字段。

表格的字段过多,且数据分类不明显,因此采用横向滚动形式,将重要数据放在表格左侧,次要数据放到表格右侧。与案例 1 相同,字段过多,采用横向滚动形式。但相比案例一,在向右滚动数据时,纵标签固定,指示数据类型。第一列是时间需要进行对比,固定了第一列使得阅读起来存在一个基础。对数据进行分类显示,做成下拉选择切换形式。将重点数据放置在默认显示页面,次要数据放置在下拉选择的类别中。页面简洁,功能完备且有序。相较于案例3,同样对数据进行分类显示,并制成table切换形式。数据的类型较少,且不存在主次关系,仅进行数据罗列展示。
  1. 对于字段数据没有明确分类,或者有些数据不太重要,可以采用横向滚动条,进而固定左侧属性列,便于数据对比;
    更多相关内容:
      无相关信息
[!--temp.cy--]