表格交互思考

2017-07-09 16:55:00

前言：

前段时间，我们帮某基金公司做了个后台系统，因为涉及到基金业务，所以需要展示的专有名词很多，因此我们在整个系统里，大量使用了表格（table）这种数据载体。

但是因为需要展示的数据太多了，需要监控的状态也非常多，我们对表格的设计可能没有把握得很好，导致客户对表格的可读性，易用性不是太满意。所以，我也趁此机会，把之前遇到的问题，或者用户的反馈，都整理了一下，看看有什么可以改进和提高的地方。

以下就是我总结的一些问题，原因分析，以及现有解决方案的弊端。如果嫌长，可以只看红字的问题部分。我把所有问题都经过分析归类后，产生了4类问题，分别是“ 表格的全部/部分展示问题 ”，“ 表格按钮位置问题 ”，“ 表格信息比对问题 ”，“ 表格查询功能模块 ”。下面我们就来一个一个问题去分析。

表格问题总结

表格的全部/部分展示问题：

为什么会有这个问题，就是因为想展示的信息太多了，这些信息真的需要完全展示吗？或者说需要同时完全展示吗？我的答案可能是否定的。毕竟人的注意力是有限的，大量数据会造成页面看起来杂乱无章，无法入手。而且我们想想表格的特点，他是由表头和表体组成的，为什么会有表头，原因是，表格通常用来呈现标准化的数据。为什么标准化的数据会放在一起，有一部分原因是因为我们需要将前后几条数据进行对比嘛。所以，如果我需要左右移动滚动条才能看完整条数据，这样不是给数据对比造成了很大麻烦吗？

所以，我的建议是给表格的数据划分优先级，只展示重要，必要的部分，隐藏，或者逐渐呈现次要的部分。我们隐藏的通常是次要信息，当前不需要的信息，子数据，附属信息等等。展现形式也有几种：

1.详情页展示（适用于详情复杂的情况）

有新页面展示和弹层展示两种常用的方式。

新页面展示，比较适合用于详情页较复杂，需要展示很多信息的。例如【我的淘宝】页面。这种形式其实已经不算是标准的表格（table），算是列表（list）了。所以我们也可以模仿这种交互方式，把最需要关注的信息用列表展示，其他信息放在详情页。其实现在这种非典型的列表越来越普遍，反而标准表格比较少见了。

我的淘宝

详情页

如果详情页只是把表格里的内容重新陈列，或者内容不那么复杂，那倒不如就直接使用弹层，还避免的页面切换的麻烦。例如【QQ空间】。但是弹层多多少少都会遮挡掉本页面的一些内容，所以我们就继续寻找更轻的交互方式（请看2）

QQ空间

2.上下展开/收起（适用于控制单条数据）

这里隐藏的，通常是主要数据的子数据，附属数据等。类似【网易云】【知乎-评论】，点击“展开”按钮，可以查看子数据。这种交互要注意的是，要区分好子信息是属于上面这条数据，还是下面这条数据，不然容易看花眼，例如网易云，数据之间多一个间隔可能会更好。

当时做项目的时候，我们也用了上下展开/收起的方式。用户提出，需要一个“全部展开/全部收起”的操作。现在想想，其实作用并不是很大。因为我们展开的信息并不少，我们阅读的习惯也是一条一条来的，如果做了“全部展开/收起”的操作，页面信息量瞬间变化太大，用户容易失去方向，系统也容易卡。而且，我觉得用户更想要的是全部收起，刷新页面也可以达到这个目的。