element-ui的表格增加行_设计更好的数据表格（译文）

题图：Statistics on a laptop photo by Carlos Muza (@kmuza) on Unsplash

作者：Andrew Coyle
原标题：Design better data tables, the ingredients of a successful data table UI
于2017年5月7日发表在UX Collective
原文链接：https://uxdesign.cc/design-better-data-tables-4ecc99d23356
译者：张韵仪
本文不接受转载

如果数据不能被视觉化呈现，也不能引出下一步的行动，那么这样的数据就是无用的。今后行业的成功需要丰富的数据和优秀的用户体验，在这体验之中数据表格占有重要的地位。

为什么表格很重要

数据正在成为全球经济的原材料。对数据的追求推动了传统行业的重塑。能源、媒体、制造、物流、医疗保健、零售、金融、甚至政府都在经历数字转型。

然而，如果不能视觉呈现数据，也不能由数据引出下一步的行动，那么数据就是没有意义的。在未来十年幸存下来的公司不仅有高质量的信息，还有优秀的用户体验。

好的用户界面设计基于人们的目标和行为。用户界面也会反过来影响行为，从而推动更多设计决策。用户体验以微妙和无意识的方式改变着人们做决定的方法。所看到的数据、所呈现的位置和交互的方式都会影响人们的决定。重要的是我们可以做出能够让未来更好的设计决策，一个数据表格接着另一个。

固定表头

用户向下滚动页面的时候固定的表头可以展示出每列的信息类型。

水平滚动

在展示较大数据集的时候不可避免会用到水平滚动。比较好的方式是把具有标识作用的数据放在第一列。一个进阶的功能可以是允许用户锁定单独的列，这样可以用来比较几个列的数据。

调整列宽

通过调整列的宽度用户可以看到本被省略的数据。

行样式

三个不同方式是斑马纹、分割线和无格式。

行的视觉样式可以帮助用户浏览数据。对于较小的数据集，移除分割线或斑马纹可以减少视觉干扰。在分析很多数据的时候，用户可能会因此而很难锁定视线在表格中的位置。分割线则可以帮助到这点。如果要浏览水平方向很多数据的表格，那么交替行背景色（又叫斑马线）可以帮助眼睛锁定数据。要注意的是，如果使用斑马线的时候行数很少，那么可能会造成使用性的问题，因为用户有可能认为不一样颜色的列是被高亮了。

显示密度

缩小表格的行高可以减少屏幕的滚动。同时，这会影响快速浏览，从而可能导致数据分析错误。因此很多优秀的数据表格产品都可以调整数据显示密度。

表格数据视觉总结

用视觉数据总结为下面的表格提供一个概览。这可以让用户在总体上看到趋势和问题所在。

分页

通过分页控件把很长的列表分成很多页。这些页面里的条目数一致，每次显示一页并可以跳转到另一页。这个例子可以改变每页的条目数。分页可以被无限滚动取代。当用户滚动屏幕的时候通过无线滚动机制会逐步加载条目。无限滚动很适合探索型的网站，对于有信息优先级的程序来说不会很成功。

悬停操作

用鼠标悬停的方式展示操作可以减少视觉干扰。而与此同时这也会产生发现性问题，因为用户需要和表格互动才能展示操作。

内联编辑

内联编辑可以让用户在改变数据的同时不用跳转到一个不同的细节页面。

可扩展的条目

可扩展条目可以让用户看到更多信息的同时不脱离其上下文。

快速视图

与可扩展条目类似，快速视图可以让用户看到更多信息的同时不离开上下文。

对话框

对话框可以让用户停在表格页面的同时聚焦在更多的信息和操作上。

多个对话框

多个对话框可以让用户一下进行很多操作或者对比不同条目的信息。

条目切换到细节信息

通过点击条目链接可以把整个页面变成条目在左信息在右的呈现方式。这可以让用户处理很大的数据量的同时参考其他条目而不丢失当前页面位置。

可排序列

用户可以依据某列来按照字母表顺序或数字大小排列来排列条目。

基本筛选

基本筛选可以让用户控制表格里的信息。

筛选列

这个方式可以给按列指定筛选要求。

可搜索列

这个方式可以按列搜索特定值。

添加列

用户可以给数据集增加列。这样能让表格信息尽可能得精简，同时用户可以根据需求增加列。

自定义列

用户可以选择想要看到的列并给他们排序。这个功能也可以包含保存现有设定给以后使用。