编辑导语：无论是在学校还是公司，我们每个人应该都接触过表格。表格不仅可以迅速的收集信息，还是一种高效的信息展示方式。本文作者基于过去的创业经验，为我们分析总结了数据表格设计的一些关键点，希望看后能够对你有所启发。

过去的创业经历中，我接触了不少 SaaS（Software as a Service，软件服务化）平台，如 Mailchimp 、 Shopify 、 Klaviyo 、 Zendesk 等。

它们虽功能各异，但是ToB 管理后台中有一个共同点——大量使用表格，这可能是效率最高的信息展示方式了。表格可以高效组织信息和数据，让用户方便阅览、对比和分析。

这篇文章将会根据我的经验，总结一下数据表格设计的关键要点。

一、长表格冻结表头

超过30行时，用户就必须向下滚动查看信息了。此时如果没有固定的表头就会很难阅读。固定的表头可以让用户阅读起来更加轻松，不至于翻着翻着就忘记自己在看什么了。

设计技巧：我喜欢用8点网格系统，因此通常将表头的内边距设置为16px，这样整体看起来不会太拥挤。

二、宽表格冻结首列

当我们查阅表格时，有2类信息是统领全局的：

1. 每种数据类型，即首行/表头（例如状态、结果、预算等）；
2. 每项数据的标题，即首列（名称、ID等）。

数据项太多可以冻结首行，那么数据类型太多可以冻结首列。

设计技巧：对于冻结首列的表格，建议可以加一个阴影效果，给一个“可以滑动”的视觉隐喻。

三、分步展示

我从一位程序员朋友说，只要缩减单次加载的数据量，就可以缩短等待加载的时间，从而达到少量多次的高效体验。这就是为什么哪怕是移动时代了，很多表格还是使用分页组件。

少量多次的加载还有一种——滚动加载，用户滑到页底时，自动加载下一批数据，更加符合移动时代的轻量交互趋势。

然而我个人还是更加喜欢第一种分页组件，因为我可以用它跳跃查看数据，灵活性更高、步骤更短。

第二种滚动加载，也许更加适合 ToC 的快速阅读场景。

设计技巧：如果每页数据高度可能超过用户屏幕，而分页有没有吸顶/底，可以将表格的首尾都放上分页组件，这样用户就不需要为了翻页而上下滚来滚去。

四、自定义列展示

当数据类型过多时，简单粗暴地冻结首列并不能够长久地解决用户体验问题，毕竟无论是PC还是手机，我们都不习惯横滑。

此时自定义列展示就成了一种不错的解决方式，让用户根据自己的喜好来定制表格的信息。

这个功能的运用挺广的（尤其是广告投放系统），例如 Facebook Ad Manager 、 Google Ads 、 AdRoll 等，在太多数据类型的情况下，允许用户自行选择需要的部分。

五、筛选（自定义行展示）

既然可以自定义列展示，那肯定也可以自定义行展示，或者说就是筛选功能。最基本是如果是数字类型的数据，就可以根据数据范围来筛选（例如价格范围：100~200元）。

复杂一点，可以根据将单列中重复出现的字段整成几个选项（例如订单状态：审核中/进行中/已完成）。如果选项过多，可以考虑用复选框实现多选。

六、排序

和筛选类似，排序也是根据用户需求展示信息。通常我们要预判用户的可能需求，提供一个默认排序方式。

如果用户不满意，可以通过点击表头来选择不同的排序方式。

你可以默认给大部分表头加一个排序功能，不过也没有必要每个都加。例如：根据首字字母排列类型、状态之类的文本信息实在不太有必要。

设计技巧：建议不要用单线箭头，而是使用实心的，这样更容易辨识。最好把整个表头作为点击和鼠标悬浮反馈区域，而不仅仅是图标那一小块。

七、批量操作

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

如果把相同的按钮放在每一行的尾部，如果少量还好，多了一不小心就会显得复杂冗余。

设计技巧：我一般使用至少边长24px的复选框，以确保点击的可用性。选中时，整列会用不同的背景色来高亮展示。

八、简约至上

虽然“极简主义”一词已被大量使用，并且留白似乎已成设计趋势，但在表格设计中，肯定少即是多。

设计数据表单时，重点应该是数据本身而不是界面。试想一下，用户已经全身心投入大量的数字和信息中时，界面太过复杂只会增加没有必要的认知负担。

设计技巧：去除没必要的视觉干扰，例如不必要的图标、背景斑马线，无规律的色彩等。

九、无衬线字体

在产品的品牌设计中，字体是规范中的重要一环。然而在设计表格时，简约至上才是关键，尽量避免任何装饰性字体。

设计技巧：虽然不能够建议你具体使用哪种字体，但最好不要使用任何衬线字体（serif fonts），因为很容易把人的注意力吸引到不重要的地方，造成视觉干扰。然后英文的话，也要避免过多的大写字母。

十、文字链接

有些表格会把项目名称做成链接，这也是符合用户习惯的的场景交互方式，用户不用猜就可以知道链接的跳转目标。

设计技巧：请使用不同的颜色来标明文字链接——加粗和下划线是不太够的。

十一、悬停操作

通常来说，我们会把操作按钮放在最右侧。但如果表格需要左右滑动才能完整显示，这种布局就不方便理解和使用了。

如果表格过宽，可以将操作按钮放在首列或第二列展示。为了保持表格在大部分情况下的整洁性，可以默认隐藏操作按钮，鼠标悬停时才出现。

十二、总结

本文给表格设计提供了一个基本的指南，在具体项目中，你可能需要根据产品特性和用户需求进行调整。

如果你还有什么好的想法和建议，可以在评论里留言讨论。

本文提供的是表格样式设计的建议，对于如何整理表格信息，之前写过一篇文章获得了不错的反馈，提供给大家《手机端表格设计：我整理了一套循序渐进的处理方法》

原文作者：Jeremiah Lam

原文地址：https://uxdesign.cc/11-table-design-guidelines-adb27ac01c8e

译者：圆子，公众号：体验进阶。

本文由 @Z Yuhan 翻译发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。