交互设计案例分析3-表格Table

今天要说的是界面中另一个非常常见的元素，表格/Table的交互设计。表格大家应该都不陌生，但是你能很具体的说出表格设计中应考虑的各种细节吗？如果你不是很清楚，不妨和我一起来梳理一下这些细节。...



这两周由于工作比较忙没有发布新的文章，今天周末了，终于可以静下来写点东西。

今天要说的是界面中另一个非常常见的元素，表格/Table的交互设计。

表格大家应该都不陌生，但是你能很具体的说出表格设计中应考虑的各种细节吗？如果你不是很清楚，不妨和我一起来梳理一下这些细节。

一、界面中常见的表格类型

1. 标准表格

标准的表格是最基本的表格形式，它由表头/Header、行/Row、列/Column、格/Cell四要素组成，如图：

2. 层级表格/Tree Table

层级表格是在标准表格基础上加上层级结构形成的。简单的层级表格有两层，复杂的层级表格有多层。层级表格最大的特点是根据一定的标准将行/Row进行了分组，方便用户查询信息。3. 宽行表格/Table with Fat Rows

宽行表格是什么意思？下图给出了直观的解释。其中第一列对应的内容是由两行文字组成的而不是一行，并且它们属于不同类型的信息。按照标准表格的做法，这些信息应该安排在不同的列中，但是为了简化表格，增加易读性，那些显而易见的信息通常被合并到某一列中，比如日期、姓名、状态说明等。更极端的做法是完全去掉表头，得到无表头表格/Headerless Table。当内容具有自解释性时，表头的意义就不大了。这时的表格更像是列表/List，如图：4. 纵向表头表格/Table with Vertical Header

这种表格是把标准表格的行与列交换位置得到的，这种表格的使用率相对较低，通常在列数明显大于行数且行数非常有限的情况出现。如下图是京东的商品对比页面中的表格：5. 多行合并表格/Table with Merge Cells

所谓多行合并表格是指某一列中的单元格跨了若干行，如下图：这种表格的结构与层级表格非常相似，可以看做是层级表格的变形。其最大特点是合并了内容相同的单元格。虽然也达到了群组的效果，但是这种形式不像层级表格那样方便展开和合拢。当行数不多时这种方式使表格信息趋于扁平化，方便浏览，但当行数比较多时反而不利于查看表格信息。

二、表格样式

从视觉设计的角度来说，表格样式有太多的可能，因此这里只说几点主要原则。

首先，表头要与内容区分开，比如表头采用加粗的字体，或更显著的背景等；另外，相邻行之间要在背景颜色上稍做区分；第三，每列数据的对齐方式要根据数据类型确定，比如数值型数据一般右对齐，文字描述型数据左对齐，日期一般也是左对齐。三、表格交互

表格交互按照目的分为：查询和操作两个部分。

查询

1. 排序/Sort

排序是表格中的基本功能之一。排序最大的好处是能够帮助用户比较每一行信息，同时帮助用户快速定位到所关心的行。排序操作通常放在表头，点击列名称来排序，并且用箭头指示当前是升序还是降序。当然，更好的做法是默认按照最重要的列进行排序。

2. 筛选/Filter

筛选也是表格的基本功能，同时也是帮助用户快速定位信息的有效方式。一般来说，我们都是选中某一列，以这一列所包含的信息为范围进行筛选。这属于常规的筛选方式。除了常规方式，还有一种叫灵活筛选/Live Filter，这种方式类似搜索，系统根据用户输入的关键字对表格中所有数据进行筛选。这种方式非常灵活，适合于用户不清楚当前表格的数据范围或表格内容比较复杂，有些内容很相似的情况。

3. 查看更多/Load More

当表格的数据量很大时在一屏中显示不了所有数据，于是用户要么通过滚动的方式，要么通过切换页数的方式来查看更多数据。

首先来看滚动。滚动可以是水平的也可以是垂直的，需要注意到是，为了帮助用户更好的阅读，通常表头要始终可见。如果支持水平滚动，也要将关键的列固定。

固定表头或者关键列是界面友好性的体现，不过这还不够。回到用户体验最重要的影响因素之一，系统性能/加载速度，我们会发现，一次性加载大量的数据会使系统变得缓慢，哪怕你为用户提供了再多的方便，没有数据，这一切都是徒劳。所以，在表格设计中设计师还要考虑的是合理的数据加载方式。

常见的做法是先加载部分信息，当用户向下滚动到这部分数据的底部时再加载更多信息并提示用户。或者用分页器来触发加载更多信息。操作

1. 自定义列/Customize Column

这个特性针对的是列数很多的情况——要显示所有列，表格宽度会超过屏幕宽度。其实给表格加上这样的特性已经是最后的选择，如果可能的话最佳方案是尽可能减少列数，简化信息。比如合并列或者直接去掉不重要列。

除了通过控制列的数量来减小表格宽度之外，让用户改变列的宽度也能达到减少宽度的效果。这种方式多见于桌面应用或网页应用中，一般的网站很少需要提供这样的交互特性。2. 编辑内容/Inline Edit

这一点很好理解，用过Excel你就知道它是怎么操作的。



3. 单行操作/Single Row Action

要让用户对某一行进行操作有几种常用的交互方式。

第一种是操作按钮直接包含在每一行中；



第二种是默认隐藏操作选项，当鼠标悬浮时在这一行显示操作选项。



第三种和第二种类似，只是当选项比较多时不是直接显示在行中，而是以菜单的形式显示。



4. 多行操作/Multiple Row Action

要实现多行操作，一般会在表格的顶部或底部提供一个集中的区域放置操作选项，另外在每一行最左边会有一个复选框让用户进行选择。



值得注意的一个细节是，除了每一行前面有复选框，在表头最左边通常也有复选框来支持快速全选或取消全选。

四、表格实际应用案例

以上梳理了表格交互设计的主要细节，包括表格的类型、样式和有可能的各种交互操作。其中哪些细节你有体验过？网上购物时？查看邮件时？查看报表时？……接下来我挑选了几家主流的电商网站，来看看它们是怎样设计表格的。这里以购物车为例。

1. 淘宝购物车



2. 京东购物车



3. 1号店购物车



4. 亚马逊CN购物车



观察这些表格会发现，它们都没有采用标准的表格形式，而更像是列表/List和表格/Table结合的产物。尽管如此，它们还是应用了层级表格，列合并，省略某些表头信息，行内操作选项，多行操作等细节。那么哪一家做得更好呢？

个人认为以上四种表格中，最简洁的要数亚马逊的购物车，它的字段很精简，重要信息在视觉上都得到强化，很容易阅读。相比较而言，其它三种或多或少都存在一些干扰因素，比如赠品说明，促销信息等等。当然我相信这并非全是设计师的问题，更多的是受到这些电商平台业务需求的影响。如果要同时考虑商业运作上的效果，谁比谁好就不是那么容易评价了，只能靠数据来说话。

如果有兴趣你可以对以上四家电商网站的购物车进行可用性测试，看看用户实际上有怎样的反馈。

    关注 凯文说