【译】如何设计更好的数据表

如何设计更好的数据表

原文地址： https://uxdesign.cc/design-better-data-tables-4ecc99d23356

原文作者：Andrew Coyle

当我们在设计数据表UI及交互时，如果没有对数据进行可视化设计，或者用户无法对信息进行操作，那么这些数据将会毫无用处。在这个大数据时代，能够将高级数据收集与更好的用户体验结合起来的企业才能取得更大的成功，而数据表包含了大部分用户体验。

一个良好的数据表会允许用户浏览、分析、比较、过滤、排序和操作信息，通过这些来获取对自己有用的信息。下文提供了几种常见的数据表样式类型、交互模式及交互动效，以便帮助你设计出更好的数据表。

1. 固定表头类

这种是最常见的表格类型，将表头固定，可以让用户在滚动鼠标时能清楚知道自己所浏览信息的每一列的标题是什么。

2. 水平滚动模式

这种水平滚动的交互模式适用于大型的数据集，数据表字段过多时，就需要水平滚动来解决这一问题，这种模式最好将标识符数据放在第一列中，作为高级功能，对这一列单独锁定，方便用户针对这些标识符对每一字段下的数据进行比较。

3. 可调整宽度的列

用户可以通过调整列的宽度，完整地查看被缩写的数据。

4. 行样式

斑马条纹、线条分割、无分割自由形式是在数据表设计中比较常见的几种行样式。

行样式可以辅助用户浏览数据。删除行线或斑马条纹可以在一定程度上减少视觉噪声，但这种方式只适用于小型数据集。当表格涉及到的数据比较庞大时，使用这种样式可能会造成用户在浏览数据时失去焦点。这时交替行（又名斑马条纹）可以帮助用户在浏览时更好的定点信息位置。

5. 显示密度

较小的行高度使用户无需滚动即可查看更多数据。但是，它会影响信息的可阅读性，造成不好的用户体验，甚至导致用户对信息的分析出现错误。这就是为什么许多成功的数据表设计会包含控制显示密度的功能。

6. 可视化图表

一般来说将数据可视化的同时，还需要给用户提供详细数据信息附表，可视化图表的作用主要是让用户清楚地看到数据的大致趋势，和统计对比情况。

7. 分页

分页一般需要有以下几个功能：

• 1.提供自定义页面视图行数的功能。
• 2.指定跳转到其他页。
• 3.显示总页数以及当前所在页码。

分页有时候会被瀑布式滚动加载所代替，瀑布式加载会在用户滚动时逐步加载结果，这种加载方式很适合微博、Tweeter、Facebook等发现类网站，用户浏览目的性不强的网站。但对于信息管理类应用来说却是一种很不好的交互模式。用户很难定位自己想要的信息。

8. 悬停操作

当用户鼠标悬停在某一行时，显示更多的操作，这样的交互模式可以减少页面的视觉干扰。但是，它可能会导致可发现性问题，因为用户需要与表交互才能发现这些操作。

9. 内联编辑

内联编辑可以让用户不用到某条信息的单独详情页，就可以对表内信息进行编辑，方便用户编辑、修改操作。

10. 可展开的行

可展开的行允许用户在不丢失上下文的情况下评估附加信息。

11. 快速浏览

与可展开的行非常相似，快速查看使用户能够在保持上下文的同时查看其他信息。

12. 弹窗

弹窗允许用户保持在表视图中，但更多地关注其他信息和操作。

13. 多弹窗

多弹窗功能对于主动、高频使用的用户来说非常有用，用户可以通过这种操作来比较不同项目的细节。

14. 查看行信息细节

当用户单击行，右侧会侧滑出改行的详细信息视图，这种交互模式适用于用户解析大型数据集的情况。

15. 可排序的列

可排序的列允许用户按照字母顺序和数字顺序等多种排序方式，对信息进行排序，以便用户更好的查找信息。

16. 筛选过滤

用户可以通过对数据地筛选过滤来缩小范围，快速定位对自己有用的信息。

17. 过滤字段

当图表数据量过于庞大，字段过多时，这种交互模式允许用户将过滤参数配置给特定的列。

18. 可搜索的列

这种交互模式允许用户搜索每列中的特定值。

19. 添加列

此模式允许用户给数据表添加列。这时一种自由度比较高的交互模式，允许用户根据自己的用例添加额外的字段。

20. 自定义字段

可自定义字段的功能，使用户可以选择他们想要查看的字段，并对这些字段进行相应的排序。这种交互模式一般还会配合保存预设之类的功能，方便用户以后使用。

为什么表格很重要

数据正成为全球经济的原材料。对数据的追求推动了陈旧工业的再造。能源、媒体、制造业、物流、医疗、零售、金融甚至政府都在经历数字化转型。

但是，如果没有能够对其进行可视化和操作的能力，数据就毫无意义。未来10年能幸存下来的公司不仅需要拥有大量优质的数据; 还需要拥有卓越的用户体验。

良好的用户界面设计需要将人的目的和行为作为基础。 用户界面反过来也会影响行为，从而推动进一步的设计决策。 用户体验以微妙和无意识的方式改变人类的决策方式。视觉呈现以及交互方式，都会影响用户行为。重要的是我们需要做出良好的设计，让世界变得更美好。