Saas产品中，表格设计有哪些要点
过去的创业经历中，我接触了不少 SaaS（Software as a Service，软件服务化）平台，如 Mailchimp 、 Shopify 、 Klaviyo 、 Zendesk 等。
它们虽功能各异，但是ToB 管理后台中有一个共同点——大量使用表格，这可能是效率最高的信息展示方式了。表格可以高效组织信息和数据，让用户方便阅览、对比和分析。
这篇文章将会根据我的经验，总结一下数据表格设计的关键要点。
一、长表格冻结表头
超过30行时，用户就必须向下滚动查看信息了。此时如果没有固定的表头就会很难阅读。固定的表头可以让用户阅读起来更加轻松，不至于翻着翻着就忘记自己在看什么了。
设计技巧：我喜欢用8点网格系统，因此通常将表头的内边距设置为16px，这样整体看起来不会太拥挤。
二、宽表格冻结首列
当我们查阅表格时，有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 。
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
