来源：Medium网站

作者：Jeremiah Lam

翻译：奥创

阅读时长：10min

对于大多数SaaS平台而言，数据表是必不可少的组件，允许用户获得洞察力，从而实现后续操作。

作为前企业家，我使用过各种SaaS平台，如Mailchimp，Shopify，Klaviyo，Zendesk等等。它们都提供不同的服务 - 电子邮件解决方案，订单管理，客户服务等 - 但所有这些服务之间的共同点是需要向用户反馈数据，并且没有比使用数据表更好的方式来传递大量数据。

数据表是有效的，因为它们能够以有序的方式组织信息和数据，允许用户轻松扫描，比较和分析他们选择的信息。这篇文章的目的是强调我在设计更好的数据表时遵循的一些关键设计模式。

由Ouch.pics的插图

固定标题

当涉及到超过30行的表时，这一点尤为重要，用户必须向下滚动才能查看所有可用信息。如果没有固定的标题，用户很难理解和解读多行数据 - 其中大多数可能是随机数。固定的标题将不断允许用户轻松理解您的数据表，而无需在他们不理解某个数据字段时向上滚动。

设计提示

我倾向于在设计时使用8点网格系统，因此我通常将标题的填充保持在16px最小值 - 这将防止您的设计看起来太沉重和挤满。

只要您的用户不理解某个数据字段，固定标题就不需要向上滚动。

固定柱

说到数据表，有两个组件需要按顺序对所有信息进行排序。首先，标题标题用于理解所显示的数据。第二，是与一行中的各个数据形成连接的项目名称; 广告系列名称，产品名称，库存名称等

有时您的数据表有太多列导致需要水平滚动，通过修复通常用于项目名称的第一列，您将获得与固定标题相同的好处。

设计提示

在设计固定列时，在列的右侧添加阴影和垂直分隔符，以充当表格可以水平滚动的视觉提示。

当您的数据表包含太多列时，修复第一列将使您获得与固定标头相同的好处。

可自定义的列

可自定义的列允许用户根据他们的偏好个性化数据表。当涉及多个度量和数据集时，以及当您的用户在使用数据表时具有不同的目标时，将使用此方法。在大多数自助广告平台上都可以看到此功能; Facebook广告管理系统，Google广告，AdRoll等，其中有多个营销指标，每个用户都有不同的优先顺序。

可自定义的列允许用户根据他们的偏好个性化数据表。

分页

我学会了从我的一个开发者朋友那里使用分页表，因为他说如果我们要限制正在处理的信息量，它会减少加载时间。克服此问题的另一种方法是使用渐进式加载，当用户滚动到末尾时，加载下一组行。虽然我个人更喜欢使用分页，因为它具有灵活性，因为它允许用户在需要时直接跳到最后几组。

设计提示

由于大多数数据表往往每页显示超过30行，因此将分页组件放在表的顶部和底部非常重要。这将允许您的用户轻松切换页面而无需过多滚动。

使用分页来减少加载时间，因为它限制了正在处理的信息量。

过滤

过滤器组件对于根据用户的要求减少显示的数据量至关重要。使用的最基本过滤器是日期范围过滤器，用户可根据特定日期范围选择显示的信息。您还可以根据具有固定输入字段的每个列包含过滤器; 意思是输入不是随机的，并且有一个固定的选择。

在过滤器下拉列表中包含复选框以允许用户选择多个变量也是很好的 - 过滤系统越灵活，用户就越容易操纵他们的信息。

过滤器组件对于根据用户的要求减少显示的数据量至关重要。

数据排序

排序类似于过滤，其方式是根据用户的需要重新排列信息。在大多数情况下，左列默认对表进行排序 - 然后用户可以单击标题标题以相应地对表进行排序。

您可以对大多数标题标题添加排序，以按数字或字母顺序对相应数据进行排序。但请注意不要滥用此功能，因为对于某些指标（如状态或类别）而言可能是多余的 - 过滤将是处理这些数据的更好方法。

设计提示

尽量避免使用V形符号并坚持使用箭头图标来提高可见度。使用悬停状态提供标题标题可单击的视觉提示 - 使整个区域可单击。

排序类似于过滤，其方式是根据用户的需要重新排列信息。

集体行动

复选框可用于允许用户选择多个项目并对所有项目执行操作。这允许用户节省时间和精力，而不是一遍又一遍地重复相同的步骤。

想象一下，你所有的行都有相同的重复选项 - 这会让你的表看起来多余的混乱。

设计提示

我通常将复选框大小保持在最小24px并以行为中心以提高可用性。此外，所选行应具有不同的背景颜色以突出显示它。

复选框可用于允许用户选择多个项目并对所有项目执行操作。

简单而简约

我知道“minimalistic”一词已被大量使用，而且空白似乎是现在的趋势，但在这种情况下肯定更少。在设计数据表时，重点应放在数据本身而不是用户界面上。考虑一下，用户已经在与大量的数字和信息进行交互 - 具有复杂的界面只会增加用户的认知负担。

设计提示

没有必要增加额外的视觉干扰; 不必要的图标，斑马行，随机颜色。

当你的UI设计师疯狂时会发生什么。

纯字体样式

在设计中，排版是风格指南中的关键元素之一，对您的产品品牌至关重要。但是在设计表时，您应该遵循上面的指针（简单和简约），而不是在表中使用任何精细的字体样式。

设计提示

我不会说哪种字体最好用但是尽量避免使用衬线字体，因为它们往往引起注意 - 产生额外的视觉噪音。此外，避免大写单词，因为它会使您的设计看起来很重。

Serif字体在表格上看起来很奇怪 - 如果你们看过任何使用serif字体的数据表，请告诉我。

物品链接

对于某些表，项目名称也可用作链接，这是用户习惯的非常常见的交互。用户根据表的性质猜测链接将在何处带来它们并不难。

设计提示

在设计中包含文本链接时，请使用其他颜色向用户突出显示此内容 - 只是粗体或下划线文本无法提供足够的视觉提示。

在设计中包含文本链接时，请使用其他颜色向用户突出显示该链接。

悬停行动

行动作倾向于放在最后一列中，只要没有太多列导致需要水平滚动，这种模式就可以了。如果是这样，您可以将行动作放在第一列或第二列中，以便用户在滚动时不需要跟踪行，这可能会因认知过载而导致不必要的错误。

悬停操作用于保持简约外观 - 仅当用户将鼠标悬停在相应行上时，才会显示操作图标和文本。

这是为了防止显示太多会增加用户认知负荷的信息。

最后的想法

谢谢你的阅读直到最后！在设计数据表时，这个列表只是表面上的问题。以上指针主要是一般性建议，应根据您的产品要求和用户目标进行调整。