设计更出色的数据表格

最近手头上也在做管理后台相关的事情,碰巧就看到了这篇文章,比较全面的列举了一些数据表格的设计套路,较有启发,于是汉化存档。

Design Better Data Tables
The ingredients of a successful data table user interface design

Andrew Coyle

不具有可视化与操控能力的数据是没什么价值的。以后的设计趋势,将会是更先进的数据采集与更好的用户体验相结合,并且数据表格的用户体验又占据了很大比重。

出色的数据表格应允许用户对信息进行浏览、分析、对比、过滤、排序等操作,以便透过表格洞悉数据背后的趋势,并采取对应的策略。本文介绍了有关的交互形式及设计技巧,以帮助你设计出更出色的数据表格。

浮动固定表头

在滚动的时候固定表头,方便用户在查看数据时定位对应的数据项。

水平滚动

当呈现大量数据项时,就不可避免的会出现水平滚动。把标识数据放在第一列是个不错的套路, 要是套路再深点,可以对这一列进行单独锁定,以便用户在多个数据内容之间进行定位比较。

可调整的列宽

调整列的宽度能让用户完整查看被缩略的数据。

行样式

常见的样式有斑马条纹间隔,线条间隔,无间隔样式。

行样式有助于用户浏览数据。通过去除分隔线或斑马条纹来减少视觉噪声,在少量数据时是有效的。当数据量较大时,用户就会很容易看跳行。分隔线能帮助用户进行定位,交替背景(斑马条纹)则能帮助用户在浏览过长的水平数据时保持定位。不过当行数太少时,交替背景可能会导致一些可用性问题,因为用户可能会纠结于不同的背景颜色是否有什么特殊含义。

显示密度

较小的行高能让用户查看更多的数据,而无需滚动,但是,这也会增加视觉扫描时的困难。这就是为什么许多出色的数据表格,还设计了调整显示密度的功能。

可视化摘要

可视化的数据摘要能起到表格概览的作用,它能让用户在深入分析之前,就发现数据中的规律和问题。

分页行数

分页是指在一个视图中显示一组固定行数的数据,并可以切换到其它组。上图的示例中就提供了自定义每页显示行数的功能,这种形式经常被无限滚动所取代,它会随着用户滚动而逐渐加载结果。无限滚动很适合探索型内容的网站,但对于顺序型的内容来说,通常是灾难性的。

悬停操作

当用户悬停时显示额外的操作可以减少视觉杂乱。 但是,它也可能导致可见性问题,因为用户需要与表格进行交互才能显示操作动作。

内联编辑

内联编辑允许用户直接修改数据,而不用跳转到单独的详情页面。

可扩展行

可扩展的行允许用户在保持上下文的情况下浏览额外信息。

快速浏览

与可扩展行类似,快速浏览可让用户在保持上下文的同时查看额外信息。

模态

模态窗口允许用户停留在表格视图的同时,又能关注到额外的信息和操作。

多模态

多模态特性对于主动型用户来说是很有用的,可以很方便的完成一系列操作,或者比较多个不同项目的细节。

列表加详情

通过点击行链接将表格转换为左侧列表与右侧详情的视图,这能方便用户浏览大量数据,同时又不会在众多数据项中失去定位。

可排序列

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

基础筛选

基础筛选允许用户操控表格中显示的数据。

可筛选列

这种设计方式允许用户给特定的列指定筛选参数。

可搜索列

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

可添加列

这种设计方式允许用户从数据项集合中添加列。通常会限制表格只显示必需信息,但允许用户根据需要添加更多的列。

可自定义列

可自定义列功能让用户可以选择需要查看的列,并进行相应排序,这种方式一般可以保存为预设以备以后使用。

为什么表格很重要

数据正在成为全球经济的原材料,对数据的追求驱使着传统行业的革新。能源、媒体、制造业、物流业、保健业、零售业、金融业甚至政府都正在进行着数字化转型。

然而,如果没有可视化和操控能力的数据是没有价值的。在未来十年中幸存下来的公司,不仅拥有卓越的数据,而且还必须拥有卓越的用户体验。

出色的用户界面设计需要立足于用户的目标和行为,用户界面反过来又会影响行为,这种行为又成为进一步设计的决策基础。用户体验以微妙或潜移默化的方式,影响着用户如何作出决定。显示什么内容,在什么地方显示,以及如何交互,这都会影响用户行为。

重要的是,我们做出的设计可以让这个世界更美好,现在就从设计一个数据表格开始。


最后说点题外话,是在翻译过程中想到的。

电影《降临》里的外星生命“七肢桶”使用的是一种非线性表达的语言,人类女主理解了这种语言,学会了它们的思维模式,于是就获得了能感知未来的能力。

汉语是从整体到局部、从现象到结论的表达逻辑,而英语刚好相反。当然,人类的语言是强调因果关系的是线性序列的。一门语言的表达逻辑会对使用者的思维模式造成什么样的影响?哪种思维模式更有助于发现事物的潜在规律?再过数百年后是否会出现更进化的语言体系?