复杂表格设计案例研究

我刚刚发布了一个新版本的Actual，一个很大的变化是重写了预算表。这看起来可能不是很多，但它偿还了大量的技术债务，在许多方面都是一个很大的改善。之前的设计尽管用意良好，但用户体验很差。这是关于我如何处理产品设计以及你需要考虑的所有问题。

从表面上看，这是一个非常微妙的变化。现在，标题被附加到表中，顶部的摘要部分被分隔到自己的空间中。还有另一个微妙的变化--你能猜出是什么吗？

在小屏幕截图中可能很难看到，默认字体已经从Mac上的旧金山默认系统字体更改为Inter字体。旧金山是一种很棒的字体，但它只在Mac电脑上可用，而且对数据的可读性较差。INTER是一种漂亮的可读性字体-即使当你使用固定宽度的功能设置来处理交易金额之类的内容时也是如此。

这里是不同之处的特写。在旧金山之前(上)，在国际米兰之后(下)：

它们看起来非常相似，但几个小的不同就会产生很大的影响。字体稍高一些，这有助于提高可读性，而且字符没有挤在一起。看看1，000.00的数字：旧金山(左)的零几乎汇聚在一起，而国际米兰(右)提供的间距恰好足以让它们清晰起来。

新的设计有一个主要的不同之处：动画。在旧设计中，该月被视为一个完整的列，包括该月的摘要和预算值。这是通过在跨月移动时滑动整个月列的动画来实现的：

目的是给出视觉反馈。如果没有它，很难判断月份实际上是移动的，特别是如果大多数数字是相同的。当你一次浏览几个月时，情况会变得更糟，这项功能非常适合一次浏览更长的时间段。下面是一个多月的例子：

动画在现实中很流畅(视频质量较低)。将其与没有动画进行比较：

当预算值没有改变时，唯一改变的是顶部的月份名称。我不希望反馈依赖于有足够的不同数据。然而，无可争辩的是，第二个视频更好，原因有几个：

它更快。用户无需等待动画结束即可立即查看新数据。

用户可以更容易地比较数据。他们可以在跨月导航时密切关注某一类别的余额值，并轻松看到它的变化。有了动画，很难跟踪这些值，因为它们会四处移动。

不过，我并不想完全放弃视觉反馈。新的设计是一个折衷方案，在可用性和用户体验之间取得了更好的平衡：

现在，预算表保持不变，而汇总节处于动画状态。这使得它成为一种更轻量级的交互，感觉也好多了。一个巨大的好处是实现也简单得多。前面的动画对DOM结构造成了严重破坏。听我解释。

问题是表格也需要是可滚动的。当用户有很多类别时，他们需要上下滚动。因此，桌子既可以水平移动，也可以垂直移动：

当然，我们希望使用本地滚动，这意味着我们必须将整个预算表放入它自己的可垂直滚动的容器中。那是没有办法绕过的。为了水平滑动月份，我们将摘要视图呈现在可滚动区域之外，而在可滚动区域内部，每个月呈现为一列。整个动画看起来像这样。紫色区域是在其中呈现内容的可滚动容器：

我真的很自豪能让这件事奏效。我现在仍然是！问题是这是一种糟糕的数据行呈现方式。通常情况下，您希望一行数据放在一个容器中，这使得很多事情变得很容易。最初，我认为为了更好的用户体验而牺牲是值得的，但事实证明，这甚至不是一个很好的用户体验。

为什么这是一种糟糕的行呈现方式？仔细看看我们重点使用的DOM的结构。每列呈现其内部的数据列表：

因为一行是由多个不相连的元素组成的，所以不可能在悬停时做一些简单的事情，比如背景颜色。只有行的每一部分都将处于悬停状态。突然之间，.row：hover{back-color：#f0f0f0}变成了在Reaction中跟踪悬停状态并不断重新渲染的非凡壮举。

更糟糕的是，每当有任何变化时，它都会重创渲染。在呈现数据列表时，通常您可以记下每一行，如果没有任何变化，则取消呈现，仅在类别名称之类的内容发生更改时才重新呈现一行。您可以将相同的技术应用于上面的布局，但它需要对每一列都这样做(在上面的示例中，有3列，所以有3倍的记忆检查)。

由于预算表在新设计中是静态的，因此每一行都按照您预期的方式呈现：每一行都在一个div中。制作摘要动画很容易，因为没有滚动要求。再来看看新的设计：

我花了太多的时间在老设计上，这甚至不是很好的用户体验，我真希望我能早点退后一步。至少我有东西可以写。

新布局让一切变得多么简单的另一个例子是拖放。您可以在侧边栏中拖动类别以重新排序。以前，不可能在整个预算表中呈现任何内容，因为您只在侧边栏中拖动。这是它以前的样子：

请注意，当您开始拖动时，预算表是如何灰显的。这是我唯一能想到的事情，因为我实际上不能移动侧边栏之外的任何东西。在扩展组时，还有一个奇怪的行为：表不会随之扩展。

这里是新的实现。虽然它不能很好地滑动内容，但它要清晰得多。蓝线横跨整个预算表，展开和折叠组也可以处理所有数据，而且效果更好：

这项工作带来了其他几个小的改进。如果您想要为类别提供更多空间，现在可以折叠摘要视图。与多个月视图相结合，您可以真正获得一个很好的预算缩略视图：

因为新版面的性能要高得多，一次观看的最大月数从4个月增加到6个月。看看这个美丽的怪物就知道了：

忽略行边框的不一致宽度，我不得不缩小以适应所有这些，这会导致一些小故障。

此版本还包括许多其他更改，如将注释附加到类别和月份的功能。查看发布说明，您可以随时尝试该应用程序的演示。

致力于实际工作并引导它。我写的是我一路走来所学到的东西。