作为前企业家，我使用过各种SaaS平台，例如Mailchimp，Shopify，Klaviyo，Zendesk等。它们都提供不同的服务（电子邮件解决方案，订单管理，客户服务等），它们之间的一个共同点是需要将数据反馈给用户，尤其在展示大量数据的时候，没有比使用数据表格更好的方法了。
数据表格之所以有效，是因为它们能够以有序的方式组织信息和数据，从而使用户可以轻松地浏览，比较和分析他们需要的信息。这篇文章将重点介绍设计数据表格所遵循的一些关键原则。
Ouch.pics的插图
表头固定
固定表头对多于30行的数据表格尤为重要，因为用户必须向下滚动以查看所有信息，如果没有固定的标头，用户将很难理解数据的意思，尤其是其中大多数可能是意义不明确的随机的数字。固定的表头可让用户轻松地了解您的数据表格，而无需在不了解特定数据字段的情况下向上滚动。
设计技巧
在设计时，我倾向于使用8像的素网格系统，因此我通常将表头的上下间距设置为最小16px，足够的空间可以防止您的表格看起来太笨拙和拥挤。
固定的表头将使您避免在不了解某个数据字段的意义时向上滚动
固定列
数据表格需要通过两个组成部分来对所有信息进行有序排序。首先，是列的标题，用于理解显示的数据代表的含义。其次，是与行中的各个数据相关联的项目名称。比如，营销活动的名称，产品的名称，以及库存的名称等。
有时，数据表中的列过多，需要进行水平滚动，通过固定与行中的各个数据相关联的项目名称所在的第一列，您将获得与固定标题相同的效果。
设计技巧
在设计固定列时，请在该列的右侧添加垂直分隔线和阴影，作为一种视觉提示，暗示可滚动的效果。
当数据表中的列过多时，固定第一列将使您获得与固定标头相同的好处
可自定义的列
可自定义的列使用户可以根据自己的偏好来设置个性化的数据表格。当不同的用户需要不同的数据组合，或者用户在使用数据表时具有不同的目标时，可以使用这个方法。在大多数自助广告平台上都可以看到这个功能，比如，Facebook的广告管理系统，Google Ads，AdRoll等，这些系统的表格涉及多个营销指标，但是每个用户对不同指标的优先级不同。
可自定义的列使用户可以根据自己的偏好来个性化定制数据表
分页器
我从一位开发人员朋友那里学到了对表使用分页的方法，他说，我们可以通过限制每次处理的信息量来减少加载时间。解决此问题的另一种方法是使用渐进式加载，当用户滚动到末尾时，它将加载下一组行。我个人更喜欢使用分页器，因为它具有灵活性，它能够让用户直接跳到最后几组数据进行查看。
设计技巧
由于大多数表格会在每页显示超过30行数据，因此将分页组件同时放在表的顶部和底部非常重要。这将使您的用户可以轻松地在页面之间切换，而无需频繁进行滚动。
使用分页可以减少加载时间，因为它限制了正在处理的信息量
过滤器
过滤器组件对于筛选用户需要显示的数据至关重要。使用的最基本的过滤器是日期范围过滤器，用户可以在其中基于特定的日期范围选择对应的信息。您还可以设计针对每一列的过滤器，这种过滤器中的内容不是随机的，下拉框中的选择都是固定的选项。
最好在过滤器下拉列表中包含复选框，以允许用户选择多个变量。过滤系统越灵活，用户就越容易掌控他们的信息。
过滤器对于减少数据量并根据用户需求筛选数据至关重要
字段排序
排序类似于过滤，它可以根据用户的需求重新排列信息。在大多数情况下，列表会根据左侧的列进行默认排序，之后，用户可以根据需要单击标题以对表进行相应排序。
设计技巧
您可以对大多数标题添加排序，以按数字或字母顺序对各个数据进行排序。但是请注意不要滥用此功能，因为它对于某些指标（例如状态或类别）可能是多余的。
批量操作
复选框可用于选择多个项目并对所有选择的项目同时执行操作，使用户节省时间和精力，而不必一次又一次地重复相同的步骤。
想象一下，针对所有的行重复进行相同的操作，会使您的表显得复杂而混乱。
设计技巧
我通常将复选框的大小保持为最小24px，并放在行的中心以提高可用性。此外，选中的行应使用不同的背景色来做区分。
复选框允许用户选择多个项目并同时执行操作
简单且简约
我知道，“极简主义”一词已被广泛使用，并且空格现在似乎已成为趋势，在大多数情况下，少即是多。在设计数据表时，重点应放在数据本身而不是用户界面上。试想一下，用户已经在与大量的数字和信息进行交互，而复杂的界面只会增加用户的认知负担。
设计技巧
不要添加多余的视觉干扰。比如，不必要的图标，两种颜色交替的行，随意设置的颜色。
UI Designer抓狂的设计
纯字体样式
在设计中，排版是对产品品牌至关重要的关键元素之一。但是，在设计表格时，应遵循上述原则（简单且简约），不要在表中使用任何复杂的字体样式。
设计技巧
我不会说哪种字体最适合，只是需要尽量避免使用衬线字体，因为它们容易引起人们的注意，从而产生额外的视觉干扰。另外，避免大写单词，因为这会使您的设计看起来很沉重。
衬线字体在表格上看起来很奇怪
文字链接
对于某些表格，项目名称等文字也被用作链接，这已成为用户习惯的一种非常常见的交互方式。用户很容易就可以根据链接的暗示来猜测该链接将把它们带到何处。
设计技巧
在设计文本链接时，请使用其他颜色，仅仅加粗或使用下划线不会提供足够的视觉提示。
表格中包括文本链接时，请使用其他颜色
悬停动作
针对整行的操作通常放在最后一列，只要没有太多列，不需要水平滚动，这种模式就可以了。如果需要滚动，您也可以将行操作放在第一列或第二列中，这样用户在滚动时就不需要跟踪行，用户也不会因为认知超负荷而导致不必要的操作错误。
悬停动作用于保持简约的外观，操作图标和文本仅在用户将鼠标悬停在相应行上时才会出现。
这是为了防止显示太多信息，增加用户的认知负担
感谢您阅读到最后！当谈论数据表格的设计时，这些建议只讨论了一些表象。以上原则仅做为一般性建议供参考，应根据您的产品要求和用户目标进行相应调整。
网友评论