学步园

面向用户查询的数据表格设计

• 原文：Refining Data Tables :: UXmatters
• 作者：Luke Wroblewski
• 译者：JunChen Wu

表单可能是当今 Web
应用里面最常见的界面元素了，有很多这方面的文章。表单受到如此的重视，是因为它们对从用户那里取得信息起着关键的作用。如：用户注册（表单）是加入社区
的第一步；确认订单（表单）是买卖成交的关键。但是，用户输入伴随而来的是系统的输出，且用户提交的信息常会以列表数据（tabular
data，列表状的数据）的形式反馈给用户。

数据表格可能是继表单后第二常见的界面元素了，数据表格也常被用来构建 Web 应用。用户通常需要增加、修改、删除、搜索和浏览比如人名列表、地名列表或者其他类似的列表。所以在这里，表格的设计对应用的有效性、可用性起着关键作用。和表单的设计一样，也有很多方式设计列表数据。

在之前的专栏中，我写过一篇文章 So the Necessary May Speak，讨论了怎样减少表格的内容元素和视觉设计，实现用最少的“设计”进行高效的沟通。我不会再复述之前的观点，本文主要集中在如何通过界面设计来帮助用户面对大量数据单元时找到所需要的信息。

过滤器

当表格呈现的数据量很大时，用户很需要一些筛选条件来过滤信息。在这种情况下，准备一个完整的数据筛选条件列表是十分有效的，可以很快地告诉用户有哪些细化的选项。

图一是 Shopping.com
使用的数据筛选条件设计。在这个例子里，一份完整且可用的筛选条件列表通常显示在每组产品搜索结果的上方。并且也有分组——如价格、品牌、尺寸、类别、附
注，这样也可以让用户迅速知道选择其中一项过滤结果后，还有哪些条件剩余。这种位于表格上方的设计，垂直空间就显得非常珍贵，因为你也不会想弱化表格的数
据。所以，一般针对这种方案，不会显示每组所有的条件，而是固定显示多少个，然后在后面增加“查看所有”的链接。（可以看淘宝网的例子，译者注）

图一 表格上部的数据筛选条件

当然，你也可以把筛选条件列表放置在表格的右侧或左侧，如图二所示。虽然这给每组条件提供了更多的空间，但也因此部分筛选条件可能需要滚动页面才能看到。

图二 表格左侧的数据筛选条件

在一些情况下，很可能是有限个数或常用的筛选条件，那么只显示那么几个条件就可以了。如图三所示，一组 Tab、链接或者下拉菜单，提供了少量的但高权重的筛选条件。

图三 选项式的筛选条件

触发器

当有筛选条件太多不能一次显示或者数据的筛选在产品设计中只是次要的——比如，仅仅为了获得所有数据的一览而不是要挑选出某条记录，那么不错的方法就是既让选项可以操作，又不是一直出现在界面上。（即需要用户触发）

举个例子，一个用户可能可以通过点击类似于搜索选项之类的链接，来展开一组筛选条件，就是说仅当用户需要精确搜索的时候才显示那些筛选条件。如图四种的例子，当用户点击搜索选项的时候，一组筛选条件即会动态的出现在表格的上方。默认情况下，三个最常用的搜索决定了三个筛选条件。当然用户也可以选择另外一组或者增加一个筛选条件。

图四 需要用户触发的筛选条件

有时候，最快的从表格中找到想要的记录是查询特定的字段值。在这种情况下，可以给表格的每一列（即字段）增加值搜索，如图五所示。这样设计的缺点就是会增大表格的宽度，特别当一些字段由短小的数字或字母组成时。

图五 给每一列增加搜索（筛选）

当筛选条件之间存在明显的关系时，最好能够在操作上也体现出来。比如图六所示，从界面上明显的表现出了筛选条件及交互操作的层级关系。

图六 筛选条件间的层级关系

图四至图六的例子中，都是关于触发式的筛选条件，小结如下：

• 显示和隐藏筛选条件，如图四；
• 提供用户搜索每一列特定值的输入框，如图五；
• 根据用户操作，设计具有层级关系的筛选条件，如图六；

当然，这些方法也不是任何情况都通用的，还是得视情况而定。

排序

提供对数据的排序也是非常有效的。排序可以通过用户单击表头或者单击预设的排序链接，如图七所示：

图七 两种常见的排序设计

虽然上文讨论了那么多例子，但肯定不是全部。如果你有好的方案，请不吝告知

延伸阅读

• Faceted browsing

英文原文的评论也值得一看。

查看或发表评论