每日发现好设计2020-06-09

超多列表格的终极解决方案

相信大多数设计师都会遇到一个非常头疼的需求，那就是在表格设计中，要展示超多列（超多10列）的数据，一般都会超过横向屏幕展示的空间。解决方案一般是：

1.增加滚动条，通过触摸板或者移动鼠标，左右滚动表格看到更多列。
2.把长字段折叠，一行字段变两行；或者字段省略（用"..."省略长字段的后部分）争取不用滚动条可以展示全部信息。

看下面两个目前我觉得比较好的解决方案：

自定义配置表格显示列

3. 让用户自定义配置表格显示列。

人一般的注意力有限，在有限的时间和空间内，眼睛能摄入的信息也有限。所以这也是为什么设计师经常要做的事情就是把信息排优先级/按次重点设计排版。

在这种解决方案中，出发点在于只有用户自己本身才知道哪些信息对他来说是重要的。用户会自己配置对他来说最重要的表格列在当前有限的屏幕空间展示。从而极有可能省去了左右滑动的麻烦，和长字段被折叠导致的视觉凌乱。

 信息归类，一格显示

4.信息归类，把相关的信息放在一个格子展示，一列展示多组数据

这是我在一个银行对账的内部系统看到的案例。上图每个格子展示的都是两个相关的数据，如果按照常规的做法，每一列展示一个数据，那么横向的空间将需要多一倍。

如果说你的用户每天都要面对大量的数据，不希望数据被折叠被隐藏，想一览无遗，在一个表格里面，按列展示的话，可能超过20列。那么可以换个思路，能不能两个信息放在一个格子展示，这样相当于列数减半了，变成10列，刚好是一般横向屏幕可以支持展示的表格。

能这么设计的一个关键点在于，这个表格的大部分信息都是互相有联系，可以归类的。比如Amount/Currency（数额/币种），在一起展示（例如：900 RMB）不但不会分散注意力，反而能帮助用户理解。再比如，身份证号和姓名，放在一个格子展示，人就会很自然地把这两组数据当作一个实体来进行纵向对比。一切皆因姓名和身份证号是紧密关联的一组数据。

一列展示2-3组数据我觉得已经是极限了，不要过于贪心哦。