前言:
前段时间,我们帮某基金公司做了个后台系统,因为涉及到基金业务,所以需要展示的专有名词很多,因此我们在整个系统里,大量使用了表格(table)这种数据载体。
但是因为需要展示的数据太多了,需要监控的状态也非常多,我们对表格的设计可能没有把握得很好,导致客户对表格的可读性,易用性不是太满意。所以,我也趁此机会,把之前遇到的问题,或者用户的反馈,都整理了一下,看看有什么可以改进和提高的地方。
以下就是我总结的一些问题,原因分析,以及现有解决方案的弊端。如果嫌长,可以只看红字的问题部分。我把所有问题都经过分析归类后,产生了4类问题,分别是“表格的全部/部分展示问题”,“表格按钮位置问题”,“表格信息比对问题”,“表格查询功能模块”。下面我们就来一个一个问题去分析。

表格的全部/部分展示问题:
为什么会有这个问题,就是因为想展示的信息太多了,这些信息真的需要完全展示吗?或者说需要同时完全展示吗?我的答案可能是否定的。毕竟人的注意力是有限的,大量数据会造成页面看起来杂乱无章,无法入手。而且我们想想表格的特点,他是由表头和表体组成的,为什么会有表头,原因是,表格通常用来呈现标准化的数据。为什么标准化的数据会放在一起,有一部分原因是因为我们需要将前后几条数据进行对比嘛。所以,如果我需要左右移动滚动条才能看完整条数据,这样不是给数据对比造成了很大麻烦吗?
所以,我的建议是给表格的数据划分优先级,只展示重要,必要的部分,隐藏,或者逐渐呈现次要的部分。我们隐藏的通常是次要信息,当前不需要的信息,子数据,附属信息等等。展现形式也有几种:
1.详情页展示(适用于详情复杂的情况)
有新页面展示和弹层展示两种常用的方式。
新页面展示,比较适合用于详情页较复杂,需要展示很多信息的。例如【我的淘宝】页面。这种形式其实已经不算是标准的表格(table),算是列表(list)了。所以我们也可以模仿这种交互方式,把最需要关注的信息用列表展示,其他信息放在详情页。其实现在这种非典型的列表越来越普遍,反而标准表格比较少见了。


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

2.上下展开/收起(适用于控制单条数据)
这里隐藏的,通常是主要数据的子数据,附属数据等。类似【网易云】【知乎-评论】,点击“展开”按钮,可以查看子数据。这种交互要注意的是,要区分好子信息是属于上面这条数据,还是下面这条数据,不然容易看花眼,例如网易云,数据之间多一个间隔可能会更好。
当时做项目的时候,我们也用了上下展开/收起的方式。用户提出,需要一个“全部展开/全部收起”的操作。现在想想,其实作用并不是很大。因为我们展开的信息并不少,我们阅读的习惯也是一条一条来的,如果做了“全部展开/收起”的操作,页面信息量瞬间变化太大,用户容易失去方向,系统也容易卡。而且,我觉得用户更想要的是全部收起,刷新页面也可以达到这个目的。


3.左右收起(不推荐)
因为表格太长,我们当时做了一种点击后,对整个表格进行左右收起/展开的交互,展开后还是需要用滚动条去浏览,并没有从根本上解决问题,所以不推荐使用这种方法。
4.分状态展示(逐渐呈现)
很多表格太长,状态过多也是一个原因之一。但是状态,往往都和流程有关,既然和流程有关,我们就可以按步骤显示,每一步只显示当前需要关注的内容,其他内容,可以用上面说的几种方法隐藏。能不展示所有信息,尽量就别展示所有信息,信息太多真的是灾难啊。
我们还可以在每种状态旁边用气泡表示一些待完成的任务,或者新的数据。


5.表格配置(让用户决定哪些重要)
如果你真的不能决定,或者你调研的用户也不能决定,哪些是重要的信息,那就把选择权交给他们自己吧。除了配置可见度,还可以让用户配置显示顺序。

6.试试竖版表格
如果你一定要展示全部信息,可以试试竖版表格。如果你的数据使用用竖版展示的话,它应该也能节省不少空间。

7.非得展示全部数据
如果非得展示全部数据,那么你一定得注意一些细节。比如让表格的区域大小固定,千万不要让表格有2个滚动条,然后本来页面又有2个滚动条,简直是灭顶之灾。还比如表头应该冻结,列表应该用斑马型(颜色相间)等等。尽量保持好的用户体验。


表格按钮位置问题:
这个问题,就是关于每条数据的操作问题。对于列表,主要有单条操作和批量操作两种。
1.批量操作
批量操作肯定不是“行内操作”,需要在显眼的位置,并且不能和列表离得太远。例如【QQ邮箱】的批量操作区域,在头部和尾部都有,操作起来非常方便,但是当列表移动到中间的时候,还是会有盲区。

2.单条操作
a.位置放左边:人眼的浏览习惯通常是从上到下,从左到右的。按钮放最左边,用户没有看到信息,首先看到操作,也许会不习惯,所以我们如果解决了第一个问题(列表过长),那么把操作放右边,还是比较主流一点的,只要按钮不要随着数据左右移动就好。
b.鼠标悬停展示:适时呈现的例子,让页面保持简洁。

c.编辑操作:这个操作方式也取决于你的列表展现方式,是新页面,还是弹层,还是扁平化。下图为扁平化的操作方式。

d.其他操作:可以在数据下方添加下划线,把整条数据当成可点击的热区,或者双击数据等等

表格信息比对问题:
信息比对分为相同数据来源和不同数据来源。相同数据来源,直接就在表格里比对就好,本来表格就有数据比对的功能。而不同数据来源,意味着表头有可能不一样。所以当时做过上下机构和左右结构的附属表。但是无论是哪种结构,比对的时候,视觉单元都会来回扫两个不同的区域,比较累。
所以,无论数据来源是否一样。最合适的数据比对方式,还是两条数据连在一起,需要比对的项也排列在一起,像表格里的第1,2条数据那样排列。比对完后,隐藏子数据,只显示结果既可。

表格查询功能模块:
前面遇到的问题,是搜索条件太多,导致查询模块占位太大。其实当查询条件多到一定程度,也可以对查询条件做一个分类,如下图。如果觉得占位大,可以隐藏,点击查询按钮,再展现。总之,查询模块的目的,就是通过筛选,使表格的信息更精确。

其他常见的表格交互:
1.缩图分格

2.旋转木马

3.用字母标记列表

网友评论