【前端】设计更好的数据表

1.概述

翻译：https://medium.com/nextux/design-better-data-tables-4ecc99d23356

如果没有可视化和对其采取行动的能力，数据就毫无用处。未来行业的成功将把先进的数据收集与更好的用户体验结合起来，而数据表包含了大部分用户体验。

好的数据表允许用户扫描，分析，比较，过滤，排序和处理信息，以得出见解并采取行动。 本文列出了设计结构，交互模式和技术的列表，以帮助您设计更好的数据表。

固定头

在用户滚动时修复行标题提供了用户所在列的上下文。

水平滚动

在呈现大型数据集时，水平滚动是不可避免的。将标识符数据放在第一列是一种很好的做法。作为一项高级功能，启用单独的列锁定，以便用户可以将数据与多个锚定标识符进行比较。

可调整大小的列

调整列大小允许用户查看完整的缩写数据。

行样式

斑马条纹，线条分割，自由形式。

行样式帮助用户扫描数据。通过去除行线或斑马条纹来减少视觉噪音对于小数据集非常有效。用户在解析较大的数据集时可能会失去他们的位置。线划分帮助用户保持他们的位置。交替行（又名斑马条纹）可帮助用户在扫描长水平数据集时保持原位。尽管当行数较少时，它们会导致可用性问题，因为用户可能会将含义归因于突出显示的行。

显示密度

较小的行高使用户无需滚动即可查看更多数据。但是，它会影响可扫描性，从而导致解析错误。这就是为什么许多成功的数据表设计都包含控制显示密度的能力。

可视化表格摘要

直观的数据摘要提供了随附表格的概述。它允许用户在采取行动总结洞察之前聚合发现模式和问题。

分页

分页通过在视图中显示一组行数来工作，并能够导航到另一组。上面的示例提供了自定义每个视图的行数的功能。无限滚动经常取代这种模式。随着用户滚动，无限滚动逐渐加载结果。无限滚动适用于发现网站，但对于优先级应用程序通常是灾难性的。

悬停动作

当用户悬停时呈现额外的动作可以减少视觉混乱。但是，它可能会导致可发现性问题，因为用户需要与表交互以公开操作的表示。

内联编辑

内联编辑允许用户更改数据而无需导航到单独的详细信息视图。

可扩展行

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

快速浏览

与可扩展行非常相似，快速视图使用户能够在保持上下文的同时查看附加信息。

模态

模态允许用户停留在表格视图中，但更多地关注附加信息和操作。

多模式

多模式功能对于活跃用户来说非常强大，可以通过许多操作或比较不同项目的详细信息。

行到详细信息

单击行链接会将表格转换为左侧为列表项和右侧为其他详细信息的视图。它使用户能够解析大型数据集，以及引用许多项目而不会丢失它们的位置。

可排序的列

列排序允许用户按字母顺序和数字顺序组织行。

基本过滤

基本过滤允许用户操作表中显示的数据。

过滤列

这种设计模式允许用户将过滤参数分配给特定的列。

可搜索列

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

添加列

此模式允许用户从数据集中添加列。这是一种将表的数据限制为基本信息的方法，并使用户可以根据用例添加其他列。

可定制的列

可定制的列功能使用户可以选择他们想要查看的列并进行相应的排序。该功能可能包括保存预设供以后使用的能力。

为什么表格很重要

数据正在成为全球经济的原材料。对数据的追求推动了过时的行业的重塑。能源、媒体、制造、物流、医疗保健、零售、金融，甚至政府都在经历数字化转型。
然而，如果没有可视化数据并对其采取行动的能力，数据就毫无意义。未来十年幸存下来的公司不仅将拥有卓越的数据；他们将拥有卓越的用户体验。
良好的用户界面设计基于人类的目标和行为。用户界面反过来会影响行为，从而推动进一步的设计决策。用户体验以微妙和无意识的方式改变了人类的决策方式。所见的、呈现的位置以及交互的方式，都会影响行动。重要的是我们要做出能够带来更美好世界的设计决策，一次一个数据表设计。