B端系统中的表格设计解析

在B端的系统中，表格是我们使用频率比较高的数据展示形式。一个设计合理，易读易用的表格，有助于提升用户的使用体验。

那么在设计时应该遵循什么原则？构成表格的每一个元素应该怎么设计呢？

本文从「定义」「结构」「设计原则」「设计关键点」四个部分来来对表格设计进行解析。对表格的全面解析也是希望大家在做具体设计时，能够清晰的知道为什么要这样设计，而不是“凭感觉”或“本来就长这样”的情况出现。

一、系统中的表格

从形式上来看表格是由一组排列、分类有序的“格子”组成的“表”，在系统中表格是“表”的一种，经常见到的“表”还有表单、列表。

我们先来看一下列表、表格、表单的的定义。

1、表格：英文为Table。即是一种可视化交流模式，又是一种组织整理数据的手段。主要承载数据的归纳、展示与对比的功能，是列表的一种。

2、列表：英文为List。以表格为容器，装载着文字或图表的一种形式，叫列表。

3、表单：英文为Form。表单在系统中主要负责数据采集功能。

我们本次只讨论关于表格相关的内容。

表格是以展示数据为目的的矩阵式UI样式，表格这种形式有助于将数据有规律的展现出来，方便用户对数据进行读取、查询、对比、分析、操作。在B端系统展示数据内容的场景中，表格是使用频率比较高的形式。表格也被公认为数据最为清晰、高效的表现形式之一。

在具体使用场景中表格通常会与，页头、筛选工具栏、操作按钮等元素同时出现，以满足不同的需求。所以我们这里讨论的也不仅仅限制在表格本身。

在做设计之前先要梳理一下，表格是由哪些部分构成的。

二、表格的构成

表格主要是由标题、筛选操作区、表头、内容、底栏，五大部分内容构成。下面依次来看看每一部分的作用是什么。

1、标题

定义：标题是对表格信息内容的概括；

作用：为了使用户快速的了解表格的用途及内容范围；

规则：标题内容可以包含数据来源、日期、地区等信息。在样式上不仅限于纯文字，可以是层级最高的tab分
类，有图标或颜色辅助的样式等，没有固定的样式限制。只要可以达到对表格信息内容概括的目的就是可
以的。

2、筛选操作区

定义：针对表格中相同属性内容的查找和操作；

作用：筛选是用于方便用用户对数据内容快速定位、查询的功能，操作则承载了用户对数据内容的“增删改查”等
动作；

规则：筛选和操作在布局上通常会布局在同一个区域，由搜索框、选择器、按钮等组件组成，也可称“工具栏”。

3、表头

定义：表头是对表格中列内容中的数据属性的概括；

作用：表头相当于每一列内容的标题，用户可以快速了解表格中包含了哪些类型的数据信息；

规则：表头通常为文本标题，也可以承载列信息的筛选、排序等作用，方便用户针对特定列的内容来进行操作。

4、内容

定义：内容区域是表格的主体区域，由单元格组成；

作用：起到承载数据内容的作用；

规则：单元格以矩阵的形式排布，每个单元格都是承载数据内容的基本单位，可以承载文字、数字、百分比、图
片、标签、行操作等不同样式的信息元素。

5、底栏

定义：位于底部的工具栏；

作用：承载对表格的翻页或其他辅助信息；

规则：该区域中最常见的就是表格的「翻页器」。在有些场景下也可放置一些表格内容的统计信息、备注说明等
内容。

三、设计原则

了解了表格的结构之后还要明确设计原则。设计原则可以指导表格中的每一个部分应该如何来进行设计，每个部分要到达什么样的目标。

目标：用户能够清晰快速的读取、查找信息，并且能够高效的完成决策并完成操作。那么想要达到这个目标在设计时就要按照一下原则来进行设计。

1、清晰易懂

内容清晰明确，文字表达言简意赅；界面结构清晰直观，间距适中；相同视觉元素保持一致；减少多余的视觉装饰元素；清晰易懂的内容可以减少用户心力的消耗，使其专注在决策的思考过程中。

2、操作便捷

简单直接的交互方式，尽量减少非必要的交互动作，对于一些高频操作可以针对性的设计一些快捷操作；相同或类似的功能，交互逻辑需保持一致；当用户进行操作后应该快速的响应，并给予必要的反馈，避免“不知所以”的状况出现；适当的将低频操作进行收纳，可减少对高频操作的干扰。

四、设计时的关键点

1、标题的样式

标题区域内容只要可以达到对表格信息内容概括的目的就是可以的，不仅限于只有标题，同时可以承载大类切换、辅助说明等功能。

例如下图所示的几种类型的表头：

2、表头怎么优化

一个设计优秀的表头，对挺升整个表格的使用体验起着这关重要的作用，主要有以下关键点。

A、简化名称

表头的作用是让用户可以快速了解表格中包含了哪些类型的信息。如果表头的描述文案过长，势必降低可读性、可识别性，所以要尽量简化表头名称文案的长度。在简化时有一个标准就是“少一个字就会改变愿意”就不能再简化了。

B、增加提示

当表头中的名称文案很专业，存在一定的认知壁垒就需要通过添加提示来进行解释说明。通常的做法为在名称右侧添加一个提示icon，鼠标hover时显示「气泡提示」，这种方式也不会影响老用户阅读体验。

C、表头筛选

对于一些存在单独筛选需求的数据内容，可在表头区域添加「表头筛选」功能。表头筛选相对于「筛选操作区域」的筛选要更加直接快速，能够节省时间和空间。

D、表头排序

通过对某一类型的数据进行排序，可以使用户快速的抓取有用的信息。比如时间的排序、数值大小的排序等等。

表头排序的方式通常会采用「升序」、「降序」两种排序方式。交互方式为通过点击表头区域进行，默认—升序—降序—默认之间的循环切换，细致一点的交互可以在鼠标hover表头时通过「气泡提示」显示下次点击的排序方式。

排序方式较多时可以将全部排序方式集合在「筛选操作区域」采用「下拉选择器」来实现，这样可以减少用户的操作次数和避免排序条件的冲突。

E、可配置列

可配置列其实是针对表格中数据类型（列）的筛选，当表格中的数据类型很多时，不同角色的用户查看数据的视角和关心的数据类型也不同，不关心的数据就会对用户产生视觉干扰。

F、固定表头

当一页中行数过多需要垂直滚动时，可以将表头区域固定，这样可以帮助用户快速找到单元格的数据类型，特别是单元格中的内容没有特征时（例如：纯数字、百分比等），固定表头可以提高使用效率。

3、单元格的规范

A、样式规范

单元格的样式决定了整个「内容区域」视觉体验的优劣，也影响着表格整体的使用体验。可以从以下四个方面来制定单元格的样式规范。

a、字号

单元格中的字号需控制在12-16px之间，通常使用14px大小的正文字号最为合适。

b、文字行高

文字的行高与文字字号的面积无关，是文字及其边距在页面上所占的位置高度，一般设置为字号的1.2-1.8倍大小，文字内容垂直居中。

c、上下左右边距

上下边距可以设置为字号大小的1-1.5倍大小，左右边距根据视觉风格设置固定大小12-24px或者更宽均可，但要注意同一产品的各表格中要保持相同。

d、单元格高度

上面三个规范确定之后，就能得出单元格的高度，单元格的高度常见的区间在56-80之间。

由于显示设备、用户个人喜好的不同，有些表格会允许用户自己选择单元格的行高。通常是设计师调整出紧凑、舒适、宽松三档高度供用户自行选择，并不会让用户自行输入高度值。

B、合并单元格

有些特殊数据类型的表格中，会存在多行、多列公用同一数据内容的情况，这种情况就可以将单元格合并。这样可以减少重复数据内容的出现，对视觉造成干扰。

C、关键数据

单元格中的数据内容往往有些数据内容是很重要的，例如：数据状态、数据的上升或下降、进度等。在具体的业务数据中，找出关键数据并将其突出展示可大大提高用户体验，降低了用户查找数据的成本（在表格这种形式中，使用成本最高的就是查找数据）。

这也要求设计师能够充分了解业务，做好前期调研还原用户使用场景，尽可能充分的站在用户角度来进行设计。

D、编辑

单元格的编辑是指针对单个单元格的数据修改。编辑的形式有很多，体验较好的通常为直接在单元格上进行编辑。常见的交互类型主要有文本编辑、下拉切换，通常都比较轻量。也可以针对特定的数据内容来进行设计，但是要尽可能的简单，避免交互路径冗余。

E、信息完整度

在现实场景中很难避免单元格中的数据内容很多，无法完整展示的情况出现。通常对于单字段文本类可采用“控制最大显示字数，超出…展示，鼠标hover时使用气泡显示完整字段。对于复杂的数据结构可以采用“显示缩略信息，鼠标hover时使用气泡卡片显示完整的内容”。

4、行的规范与操作

A、行高

定义单元格的行高，首先要定一个参照标准，通常以文字内容单元格的高度为标准。

最小高度：如果单行文字内容单元格的高度为58px，那58px就是单元格的最小高度。

最大高度：最大高度通常不超过单行文字内容单元格的高度的2.5倍，超过3倍整行视觉效果就会过于空旷。

行高规则及对其方式：同一行单元格的高度与最高的单元格保持统一，内容居中对齐。

B、视觉强调

我们都知道在表格中一行信息为一个整体信息组，为了强调单行内容信息的连续性和整体性，避免在读取信息时读错行，通常会使用斑马纹、分割线来分割行与行。

斑马纹和分割线尽量使用清亮的颜色，避免颜色过重对内容造成干扰。在深色模式下可将单元格底色的亮度提高2%-8%，作为斑马纹或分割线的颜色。为了进一步强调在读行，还可以增加行的鼠标hover效果。

C、行编辑

新增：对于编辑填写类型的表格，用户通常可以自己添加一个空白行来添加内容，新增操作通常集成在表格上方的操作区域中。

删除：删除是将一整行的单元格全部删除掉，删除按钮通常集成在最右侧的操作单元格中，为了防止误操作，删除功能需增加二次确认。

拖拽：拖拽为用户自定义排序，拖拽时页面布局保持不变。拖拽适合用于数据量较少的表格中。在设计拖拽功能时要注意设计清楚，拖拽前—拖拽时—拖拽后的样式及交互方式。

展开：行的展开这种形式并不多见，但是在使用体验上很友好，用户无需跳转页面中断浏览。通常使用在用户需要关注一些与行内容相关的辅助信息场景下，这些辅助信息可能会影响用户的决策。行的展开操作通常放在行的最左侧单元格中。

5、列的规范与操作

A、宽度

列宽设计的是否合理，对用户的阅读体验也很重要。由于每个业务场景的数据类型数量不尽相同，列宽就没有一个统一的数值规范。

但是可以根据数据类型来设计列宽。第一类为内容长度固定（例如：手机号、身份证号等）的内容，可以根据具体场景来设置固定宽度。

第二类为内容长度不固定（例如：店铺名称、驳回原因等）的内容，可以设置一个最小宽度和最大展示字符数（注意：最大展示字符数一定是可以识别内容信息的，不可限制的太短从而造成整列信息不可读。

B、视觉强调

对于数据类型很多都是数值的表格中，用户通常需要对一列数据进行纵向对比，这时就要保证列内容信息的阅读时的连续性。

上文中提到行的做法时斑马纹、分割线，但是在列中不建议这么做，可以采取列hover效果的形式。列的hover触发区域通常在列的表头区域，但要注意与表头的筛选、排序操作热区区分开。

C、对齐

对齐指的是一列中表头和每一个单元格中内容应该如何来对齐，目前通常采用左对齐的方式，左对齐符合人从左到右的阅读习惯，开始的视觉焦点会比较整齐。

但是对于数值类（例如：金额、百分比等）的数据类型列，需要右对齐。因为这类数值起始字符在最右侧，右对齐方便进行数据对比。

D、列编辑

在针对列的编辑中通常也会遇到「新增」和「删除」。基本上分为两大类，第一类为编辑填写类型的表格，与行新增一样新增一个空白列来添加内容，删除也是将整行内容进行删除。操作通常集成在表格上方的操作区域中。

第二类就是在表头中提到的「可配置列」，这形式严格意义上不算「新增」和「删除」，上文提到了，这里就不展开说了。

E、滚动与固定

在表格的数据内容类型中，最左侧的列通常是比较重要的具有识别性的内容，最右侧的列通常是重要的操作列。

在列数过多时，就需要表格可以在可视区域内横向滚动，在滚动的同时为了保持重要列的持续露出，就要将重要的列进行冻结。

6、字符的规范

在设计的过程中有些字符的格式也是需要规范的，不去规范可能导致同一类型的字符展示形式产生差异，影响阅读效率。

A、数字单位

首先是金额，金额要保留两位小数（如：1000.00）、较大的金额可以增加千分位或增加文字单位（如：10,000.00、10万），对于文字单位可以添加在表头中（例如：保证金(万)）。百分比数据中的%，不建议放在表头，直接放点单元格内即可。

B、空数据处理

当单元格中的数据为空时，需要使用空状态占位符（例如：—），不要使单元格为空，这样会降低用户阅读的连续性。

C、字体的使用

表格中字体保持一致，文字信息字体统一、数字信息字体统一即可。数字信息字体选择建议等宽等高字体，方便数字比较。

7、整体视觉降噪

表格的特性就决定了表格承载的信息量是非常大的，那么在设计的过程中就需要克制，避免出现不必要的信息出现。

A、颜色

尽量减少颜色的数量，过多的颜色会造成视觉层级混乱，使用户无法快速获取重要内容。对于重要的数据内容可以适当通过颜色来进行强化。

B、图标

图标是个双刃剑，对于一些通用认知的操作或内容（例如：添加、删除、上涨、下降）可以使用图标来表示，可以形象的传达信息。

但是还是要尽量克制图标的使用量，过多重复的图标会使本就复杂的表格更加复杂。在有些场景下使用图标还需要文字来进行解释，就更没必要使用图标了。

去除不必要的元素，减少视觉干扰对于表格设计来说是十分必要的。

8、分页

分页可以将表格中全部数据内容，按照规定的量划分成多个独立的集合来进行显示，这样可以减少用户读取、查找内容的心理压力和使用成本。

分页并不属于表格当中的必要构成，可以设置但当数据超过所设定的阈值时，就需要使用分页来进行数据内容划分。分页也有多种类型，可以根据数据的类型、数量来进行选择。

五、总结

表格设计可深挖的东西太多了，以上的内容肯定不是面面俱到的，但都是在日常设计时会遇到的或容易忽略的。

表格就像「人行道上的地砖」。看似是简单的排布，但如果想要达到平坦整齐、结实耐用、又比较美观的状态，就需要施工师傅掌握一定量原理和技巧，这样才不会铺出下雨时溅一脚水的地砖。

设计表格或是做其他设计时也是一样的，只有掌握了正确的设计原理和技巧才能设计出用户体验优秀的产品。在学习一项知识的时候，去全面了解并且深挖，才能真正的学会并学以致用。