在后台系统、数据类产品、B端产品中，表格作为最常用的一种数据整理的组件

在后台系统、数据类产品、B端产品中，表格作为最常用的一种数据整理的组件，其重要性不用过多赘述。但如何更好的设计表格呢？想必多数刚接触 B 端的设计师都有过这个困扰。

今天，我给大家整理了一份关于表格的攻略，希望能帮到你。

一、什么是表格

表格是一种数据可视化的一种形式，可以查看和处理大量数据，它主要承载了数据的收集、整理、组织、展示、对比和归纳。

二、表格的设计原则

易读性：

表格的层级一定要划分的非常清晰，层级分明。你要让用户更关注的是数据本身，而不是花里胡哨的样式。

可寻性：

列表以易于浏览的逻辑排序，提供合适的搜寻组件帮助用户快速查找信息。

高效性：

表格要用最短的时间告诉用户想要得到的信息。

灵活性：

可以让用户根据自己的习惯及兴趣自定义自己的表格展示，比如排序、筛选、调整表头顺序等功能。

三、表格的构成

外部区域：标题、操作区、筛选区；

内部区域：表头、表体、表尾。

介绍完表格的构成，我们再来把每一个元素拆解出来详细介绍。

四、表格元素解析

1）标题

标题是整个表格内容概述的名称，此名称尽量简洁明了，不要太长，能两个字写清楚绝对不用三个字。

如果标题名称难以理解的话，可以加二级提示，有两种常用样式：tooltips（常用）、二级提示语。

标题的位置一般在左上角。

2）操作区

对表格内容的增删改等操作的区域。

使用建议：

有且只有一个主操作：

特殊情况下可以没有主操作，但不能有两个主操作。

样式统一：

同一个产品中，操作区样式规范要保持一致。

操作的优先级：

根据使用的优先级，把常用的操作放到一级展示，不常用的收到二级展示。

不同操作状态区分要明确：

不是所有的操作都是可以直接用的，比如有的操作在没有选择内容的时候是 Disable 状态，那这时候就要和其他可操作的有明显的样式区别，否则容易让用户分不清可不可以操作。

刷新按钮：

有很多同学对这个操作是不是有些疑惑？有人觉得浏览器都有刷新功能啊，干嘛还要多此一举再加个刷新。其实这个刷新功能还是很有必要的，这个刷新只针对于列表内的内容。

在有的后台管理界面中，因为数据量很大，如果每次刷新都用浏览器自带刷新的话，他会重新加载整个页面的内容，很不好用。很多情况下，用户只想重新加载一下列表的内容，那这个刷新就很好用啦。

同时刷新后要有即时反馈，告诉用你他点完操作后目前处于哪个阶段中。