前言：
前段时间，我们帮某基金公司做了个后台系统，因为涉及到基金业务，所以需要展示的专有名词很多，因此我们在整个系统里，大量使用了表格（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.用字母标记列表
