媒介：
前段时间，我们帮某基金公司做了个后台系统，因为涉及到基金营业，所以需要展现的专有名词良多，因而我们在整个系统里，大量利用了表格（table）那种数据载体。
但是因为需要展现的数据太多了，需要监控的形态也十分多，我们对表格的设想可能没有掌握得很好，招致客户对表格的可读性，易用性不是太满意。所以，我也趁此时机，把之前碰到的问题，或者用户的反应，都整理了一下，看看有什么能够改良和进步的处所。
以下就是我总结的一些问题，原因阐发，以及现有处理计划的短处。若是嫌长，能够只看红字的问题部门。我把所有问题都颠末阐发归类后，产生了4类问题，别离是“表格的全数/部门展现问题”，“表格按钮位置问题”，“表格信息比对问题”，“表格查询功用模块”。下面我们就来一个一个问题去阐发。
—————————————————朋分线———————————————————
表格的全数/部门展现问题：为什么会有那个问题，就是因为想展现的信息太多了，那些信息实的需要完全展现吗？或者说需要同时完全展现吗？我的谜底可能能否定的。究竟结果人的留意力是有限的，大量数据会形成页面看起来杂乱无章，无法动手。并且我们想想表格的特点，他是由表头和表体构成的，为什么会有表头，原因是，表格凡是用来呈现尺度化的数据。为什么尺度化的数据会放在一路，有一部门原因是因为我们需要将前后几条数据停止比照嘛。所以，若是我需要摆布挪动滚动条才气看完好条数据，如许不是给数据比照形成了很大费事吗？
所以，我的建议是给表格的数据划分优先级，只展现重要，需要的部门，隐藏，或者逐步呈现次要的部门。我们隐藏的凡是是次要信息，当前不需要的信息，子数据，从属信息等等。展示形式也有几种：
1.详情页展现（适用于详情复杂的情况）
有新页面展现和弹层展现两种常用的体例。
新页面展现，比力合适用于详情页较复杂，需要展现良多信息的。例如【我的淘宝】页面。那种形式其实已经不算是尺度的表格（table），算是列表（list）了。所以我们也能够模拟那种交互体例，把最需要存眷的信息用列表展现，其他信息放在详情页。其实如今那种非典型的列表越来越遍及，反而尺度表格比力少见了。
http://b.mashort.cn/feab4152-84fc-4154-9811-ca8d9b0334ae (二维码主动识别)
若是详情页只是把表格里的内容从头陈列，或者内容不那么复杂，那倒不如就间接利用弹层，还制止的页面切换的费事。例如【QQ空间】。但是弹层多几少城市遮挡掉本页面的一些内容，所以我们就继续寻找更轻的交互体例（请看2）
2.上下展开/收起（适用于控造单条数据）
那里隐藏的，凡是是次要数据的子数据，从属数据等。类似【网易云】【知乎-评论】，点击“展开”按钮，能够查看子数据。那种交互要留意的是，要区分好子信息是属于上面那条数据，仍是下面那条数据，否则容易看花眼，例如网易云，数据之间多一个间隔可能会更好。
其时做项目标时候，我们也用了上下展开/收起的体例。用户提出，需要一个“全数展开/全数收起”的操做。如今想想，其实感化并非很大。因为我们展开的信息其实不少，我们阅读的习惯也是一条一条来的，若是做了“全数展开/收起”的操做，页面信息量霎时变革太大，用户容易失去标的目的，系统也容易卡。并且，我觉得用户更想要的是全数收起，刷新页面也能够到达那个目标。
3.摆布收起（不保举）
因为表格太长，我们其时做了一种点击后，对整个表格停止摆布收起/展开的交互，展开后仍是需要用滚动条去阅读，并没有从底子上处理问题，所以不保举利用那种办法。
4.分形态展现（逐步呈现）
良多表格太长，形态过多也是一个原因之一。但是形态，往往都和流程有关，既然和流程有关，我们就能够按步调显示，每一步只显示当前需要存眷的内容，其他内容，能够用上面说的几种办法隐藏。能不展现所有信息，尽量就别展现所有信息，信息太多实的是灾难啊。
我们还能够在每种形态旁边用气泡暗示一些待完成的使命，或者新的数据。
5.表格设置装备摆设（让用户决定哪些重要）
若是你实的不克不及决定，或者你调研的用户也不克不及决定，哪些是重要的信息，那就把选择权交给他们本身吧。除了设置装备摆设可见度，还能够让用户设置装备摆设显示挨次。
6.尝尝竖版表格
若是你必然要展现全数信息，能够尝尝竖版表格。若是你的数据利用用竖版展现的话，它应该也能节省很多空间。
7.非得展现全数数据
若是非得展现全数数据，那么你必然得留意一些细节。好比让表格的区域大小固定，万万不要让表格有2个滚动条，然后原来页面又有2个滚动条，几乎是没顶之灾。还好比表头应该冻结，列表应该用斑马型（颜色相间）等等。尽量连结好的用户体验。
——————————————————朋分线——————————————————
表格按钮位置问题：那个问题，就是关于每条数据的操做问题。关于列表，次要有单条操做和批量操做两种。
1.批量操做
批量操做必定不是“行内操做”，需要在显眼的位置，而且不克不及和列表离得太远。例如【QQ邮箱】的批量操做区域，在头部和尾部都有，操做起来十分便利，但是当列表挪动到中间的时候，仍是会有盲区。
2.单条操做
a.位置放右边：人眼的阅读习惯凡是是从上到下，从左到右的。按钮放最右边，用户没有看到信息，起首看到操做，也许会不习惯，所以我们若是处理了第一个问题（列表过长），那么把操做放右边，仍是比力支流一点的，只要按钮不要跟着数据摆布挪动就好。
b.鼠标悬停展现：适时呈现的例子，让页面连结简洁。
c.编纂操做：那个操做体例也取决于你的列表展示体例，是新页面，仍是弹层，仍是扁平化。下图为扁平化的操做体例。
d.其他操做：能够在数据下方添加下划线，把整条数据当成可点击的热区，或者双击数据等等
————————————————————朋分线—————————————————
表格信息比对问题：信息比对分为不异数据来源和差别数据来源。不异数据来源，间接就在表格里比对就好，原来表格就有数据比对的功用。而差别数据来源，意味着表头有可能纷歧样。所以其时做过上下机构和摆布构造的从属表。但是无论是哪种构造，比对的时候，视觉单位城市来回扫两个差别的区域，比力累。
所以，无论数据来源能否一样。最适宜的数据比对体例，仍是两条数据连在一路，需要比对的项也摆列在一路，像表格里的第1,2条数据那样摆列。比对完后，隐藏子数据，只显示成果既可。
——————————————————朋分线——————————————————
表格查询功用模块：前面碰到的问题，是搜刮前提太多，招致查询模块占位太大。其实当查询前提多到必然水平，也能够对查询前提做一个分类，如下图。若是觉得占位大，能够隐藏，点击查询按钮，再展示。总之，查询模块的目标，就是通过挑选，使表格的信息更切确。
————————————————————朋分线————————————————
其他常见的表格交互：1.缩图分格
2.扭转木马
3.用字母标识表记标帜列表
以上纯属本身总结YY，欢送斧正