lunasun

设计更好的数据表格 – uxdesign.cc

lunasun · 2017-08-30翻译 · 1949阅读 原文链接 betsey审校

如果没有办法对数据进行可视化和操作,那么这个数据就毫无用处。未来行业对于成功的定义,将会把数据收集与更好的用户体验结合在一起,而数据表格包含了诸多此类的用户体验。

优秀的数据表格让用户能够快速浏览、分析、对比、过滤、排序以及处理信息,汇聚成个人的见解从而进一步采取行动。这篇文章展示了一系列的设计结构,互动模式和技巧,来帮助你更好地设计数据表格。


固定表头

在用户滚动表格时,将表格首行表头固定能让用户了解所在的表格列的内容信息。


横向滚动

在展示一个大型数据集的时候,横向滚动在所难免。将标识数据放在第一列是一个很好的习惯。作为一种高级功能,锁定几个单列则让用户能够用多个固定的定义标签比较数据。


Resizable columns 调整列宽

调整列宽允许用户完整看见被缩略掉的数据信息。


行样式

斑马条,分割线,自由表单

设置行样式可以帮助用户快速浏览数据。去除行的分割线或者斑马条纹可以对小型数据效果明显。但在大型的数据集中,这样做用户可能会一头雾水。分割线让用户能够准确定位;行交替样式(又称斑马条纹)则能够帮助用户在快速浏览一行数据的时候避免看串行。虽然当行数很少时,出于用户可能会把高亮的行赋予特别意义的原因,这两者可能会产生易用性问题。


显示密度

更小的行高让用户能够无需滚动看到更多的数据。但是,这一方便扫视的操作也会增加出错的几率。因此,许多成功的数据表格设计具有控制现实密度的功能。


可视化表格摘要

一个可视化的表格摘要能够为附加的表格提供一个预览效果,让用户在能够在对概括有深刻洞见前,整体地聚焦一些图表和问题。


分页

分页可以实现在同一页中展示一定行数的数据。在上图的例子中,用户能够自定义每个视图显示的行数。这种方式通常会被无限滚动加载所取代。无限滚动加载会在用户滚动的时候逐步加载结果。这在发现类的网站上很好用,但在存在优先级的app里则通常表现糟糕。


悬停行为

鼠标悬停在表格上时来展示一些内容,可以让用户减少视觉上的杂乱感。但是,如何使用户发现这一行为也会是一个问题,因为它的出现需要用户与表格有所互动。


行内编辑

行内编辑允许用户能够在不进入单独的编辑页面的情况下改变表格数据。


可展开/收缩的行

可展开的行允许用户在保证表格内容紧凑的条件下看到更多的额外信息。


快速查看模式

和可展开行类似,快速查看模式让用户能够在不离开现有表格内容的情况下查看额外信息。


模态框

模态框允许用户停留在表格页面的同时,可以关注与额外的信息和行为。


多个模态框

显示多个模态框的功能对于高效率的用户而言非常有用,他们因此能够同时做许多操作,或者比较不同条目的细节。


行细节切换

在点击一个行链接后,表格切换为左边显示条目列表,右边显示额外细节。这一功能让用户在分析大型的数据对象的同时,也能顺畅地参考多个条目。


可排序列

列排序功能允许用户按照字母或者数字进排序。


基础过滤

基础过滤功能允许用户对表格中的数据进行过滤操作。


筛选列

这一设计模块允许用户为特定的列选择过滤参数。


可搜索列

这一设计模块允许用户在每列搜索特定的值


添加列

这一设计模块允许用户从数据组中添加新列。通过这一方式能够限制表格只显示必要信息,并让用户在需要的情况下添加额外的列。


自定义列

自定义列的功能让用户能够选择他们想要看到的列,并依次排序。用户也可为之后的使用保存预设。


为什么表格如此重要

数据正成为全球经济的原材料。对数据的追逐驱动了旧工业的革新。能源、媒体、制造业、物流、医疗、零售、金融,甚至政府都正在经历一场数字转型。 但是,如果没有办法进行可视化和操作,那数据就毫无用处。那些在下个十年生存下来的公司不仅会拥有优质的数据,也需要优质的交互体验。 优秀的用户界面设计是基于人类的目标和行为。更深层设计则是基于用户界面对用户行为的影响。在潜移默化中,用户体验改变了人们做决定的方式、呈现什么、在哪里呈现以及交互如何实现,都影响着用户的行动。重要的是,我们的设计决策会带来一个更好的世界,就从一次设计一张数据表格开始吧。


我是 Flexport的设计总监。在这里,我们设计全球贸易的未来。如果你也那些对影响着世界,并且基于复杂数据的问题有兴趣,可以申请Flexport开放职位


相关文章