欢迎关注团队公众号：
在B端项目中，表格是B端数据最重要的载体容器。本篇文章一起来聊聊B端表格设计，本文大纲如下：
1、整体布局
2、筛选区域
3、操作区域
4、表头
5、表格数据
6、分页
1、整体布局
通常而言，整体布局从上到下分别为：筛选区域、操作区域、表头、表格数据和分页。如下图所示：
筛选区域，是对表格数据的展示进行筛选。从全部的数据按照一定的条件快速找到想要的数据。
操作区域，如果表格可以进行批量操作，则左侧的操作按钮组是与勾选相关的操作。右侧的操作按钮组则是对表格新增相关的。
表头，数据内容的标题。有时候通过表头，对列表进行升降序排列。
表格数据，具体的数据展示。
分页，通过分页组件，进行表格数据的跳转。
2、筛选区域
筛选区域的组件一般由三大类型组成。分别为：input（文本框）、select（选择器）和datepicker（日期选择器）。如下图所示：
通常而言，input（文本框）输入文本后，需要点击查询按钮，表格才进行刷新数据。或者文本输入后，点击回车触发刷新。
select（选择器）和datepicker（日期选择器），选择完成后，触发刷新，这时候就不用点击查询按钮。
重置按钮的作用，将页面重置到初始状态，当用户筛选后，如果想回到最初的展示表格， 则点击重置按钮即可。避免去通过浏览器刷新，进行整个页面的刷新。
查询和重置按钮，更多的是提供一个明确的按钮操作。让小白用户无障碍地进行操作。
当筛选项比较多的时候，占据空间较大，影响表格的呈现，这时候需要对非高频的筛选项进行隐藏，如下图所示：
3、操作区域
操作区域是针对整个表格的操作。
当表格不需要批量操作时，则操作按钮组适合放在表格左侧。如下图所示：
因为用户视觉流大部分都是从上往下，从左往右浏览。添加、批量添加和导出操作按钮，放在左侧更符合b端用户频繁添加或导出数据行为。
如果表格支持批量操作的话，那么如果添加、导出依旧放在左侧，则会导致按钮操作逻辑混乱，如下图所示：
由于多选框在左侧，则和多选操作相关的也应该放在左侧，这样关联性则更强，用户也更容易理解。
如果将添加也放在左侧，虽然有分割线分割，也会当作和多选框操作相关。
所以针对这种情况，则将非多选操作相关的按钮，放置于右侧。如下图所示：
所以考虑到整个网站，有的表格有批量操作，有的没有批量操作，那么为了操作按钮组布局的易理解性和统一性。则将添加等非批量操作按钮统一放置于右侧。
4、表头
表头，相当于表格数据中每个字段的标题。
根据场景需求，表头可提供升序降序排列，如下图所示：
第一次点击，则表格的数字，从上到下按照从小到大排列。
第二次点击，则降序排列。从上到下按照从大到小排列。
第三次点击，回到最初状态。
有些表头提供搜索功能，目前这个功能基本很少出现，被筛选项所取代。
当表格高度大于一屏时，则可以将表头冻结，使表头一直固定悬浮。如下图所示：
5、表格数据
表格数据，是内容详情的简化版，通过表格数据可以快速提炼内容详情的关键信息。
操作选项比较多的时候，通过更多隐藏，点击更多，出现下拉菜单。如下图所示：
有时候为了让操作选项尽可能少，通过名称作为文字链，以此代替查看操作，如下图所示：
当表头宽度大于内容区时，且有些信息很重要，需要一直展示，这时候通过冻结列达到目的，如下图所示：
6、分页
当表格数据比较少时，分页组件通常使用基础分页就可以，如下图所示：
当表格数据被删除时，分页处于最后一页，这时候，分页组件跟随数据内容会更合适一些，如下图所示：
当使用复杂分页组件，限制一页展示固定条数时，当处于最后一页时，这时候就没办法保证一页展示固定条数，如下图所示：
如果处于非最后一页时，有删除操作时，所有的表格内容需要重新加载刷新，以此保证每页固定条数。对于开发来说，资源是比较大的挑战。
所以正常情况下，分页固定条数这个组件尽量减少使用。
以上就是表格的所有内容，如果你有其他建议，欢迎在评论区留言。
推荐阅读：
欢迎关注团队公众号：
本文来自微信公众号“Echo的设计笔记”（ID：uxecho）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
