B端表格设计要点

一、表格结构

表格在B端界面设计中频繁使用到，通常用于数据分析等任务，能够方便地处理大量数据。通常由以下部分组成：

①表头：表格中的第一行通常是表头，用于描述下面每一列的内容。表头通常用较大或较粗的字体呈现，以便读者快速定位。

②列名：表格中每一列的名称或字段通常在表头中列出，用于说明每一列所代表的内容。

③行：表格中的每一行通常表示一个记录或者一个实例，行中的内容与列名对应，列出了该实例的相关信息。

④单元格：表格中每个交叉点称为单元格，其中包括了具体的数据或文本信息。通常单元格中的内容会根据列的不同呈现不同格式。

以下为表格结构图片说明：

二、表格的风格样式

B端表格的风格样式会更加专业、简洁和规范，以提高数据的可读性和有效性，通常B端表格应具备如下特征：

a.简洁明了的排版与合理的间距，让用户更快速地找到所需信息

b.统一的字体和字号：表格中的字体和字号应该保持统一，以减少用户在查看表格时的阅读负担

c.灰度和线条的使用：表格中的灰度应尽量减少以突出表格可塑性，竖线能少用宜少，线条灰度宜淡点突出数据信息

d.色彩的使用：在某些特定场景下，可以适当地使用色彩来凸显重要信息，但应该保持色彩稳定性和规范性

总之，B端表格的风格样式应该更注重实用性和专业性，以便用户更加方便的查看数据和分析数据，以下为表格比较合理规范的风格样式：去除竖线、去除斑马线与灰底，信息降噪提高可读性。

三、表头

表头是表格中最先看到的内容，设计时应该简洁明了，字体大小颜色应该一致统一。表头需注意的设计小点如①表格排序②分组表头

①表格排序（点击上箭头为从小到大排序，点击下箭头为从大到小排序）

②分组表头宜加竖线，如下图所示，若表头没分组，竖线可省略降噪信息。

四、单元格

①单元格的高度一般40-60px之间，信息过多可单行折断或跨行折断，如下图所示：

②表格间的密度可根据用户需要分紧凑、标准、宽松，通过自定义单元格字体上间距下间距大小与字体大小来把控，字体大小设置在12-14px之间。

③单元格操作列一般有多个操作情况下，以三个操作展示+更多来显示，高频操作放出来，低频操作收起来，如下图所示：

④单元格不留空白格，没有数量用“0”，没有该项内容用“-”，如下图所示：

⑤单元格可编辑时的交互设计，可以悬浮时有编辑图标，点击显示气泡框（用于信息较多时），也可以hover时有输入框样式点击修改如下图所示。

五、行

行在多行情况一般信息顶对齐排布，如下图所示：

六、翻页器

翻页器用于展示大量数据时，将数据分成多个页面展示，便于用户查看和管理，由以下几个部分组成：

a.上一页按钮；b.下一页按钮；c.跳转到首页和尾页；d.每页显示数据量；e.总页码显示；f.翻页输入框

在批量导出场景下每页条目数的选择可以方便用户更快选择所需行：

七、列

①列的信息对齐方式一般优先左对齐，数字和操作项列用右对齐。如下图所示：

②在大宽表的场景下优先冻结首页或操作列，也可以根据业务需要自定义多列固定，如下图所示固定操作列：

③列的自适应规则：根据内容长度自动调整列宽，如果内容过长，则可以考虑用省略号或缩略词来代替一部分内容，列宽度要保持均匀，当表格中有多列数据时，要让各列的宽度相等，使表格看起来更整齐美观。如下图可看出自适应调整的是n2值：

④批量操作：未点击复选框前，批量操作的按钮先不用高亮，点击完复选框后则高亮显示可批量操作的按钮，给用户形成反馈效果。如下图所示：

⑤表格详情入口可以在操作列加一个详情操作，也可以在首列高亮显示，更可以以折叠表格的形式展开显示，如下图所示：

以上是我工作过程中表格设计中需要注意的设计干货，文章的图片有些摘自《且慢B端设计》~~

(^-^)感谢大家的阅读，有收获点赞支持一下哦~~(^-^)