B端表格设计总结

Lilly举了个栗子

南京/设计爱好者/3年前/6307浏览

版权

B端表格设计总结

Lilly举了个栗子

作为TOB系统中出现频率能排到前三的组件，本文主要从认识表格、表格视觉设计、表格交互设计三部分，进行拆分和理解。

表格，是贯穿TOB产品始末、不可或缺的“必需品”。

作为TOB系统中出现频率能排到前三的组件，为了更好的理解和应用，本文分别从认识表格、表格视觉设计、表格交互设计三部分，结合我自己对表格设计的理解，进行拆分和理解。

1. 认识表格

1.1 什么是表格？

在线下日常生活中，表格主要使用的环境：

🌰：去新公司面试，需要填写个人信息表格；在疫情的大环境下，去到某家餐厅，需要在表格上登记个人信息；发工资时的工资条，也是以表格的形式呈现工资构成...

由于电脑的普及，表格的使用场景也逐渐发展到工作中，以Excel作为最早的线上表格工具，工作中常用做：考勤记录、绩效考核、人员名单、客户清单...

至今为止，随着互联网行业的发展，B端产品为企业、各个行业赋能。其中，表格在B端产品和业务场景之间，起着承上启下的作用。

不论是生活中，还是工作中，表格通常用于信息收集、数据统计类似的应用场景，主要作用于前期信息收集、配合工作，进行后期数据查询和提取。

1.2 表格的构成

表格由行列组合而成，在我们常用的操作系统中，构成包括：表头、内容区、操作区、翻页器。

1.2.1 表头

表头位于表格第一行，每一个表头都对应其下方的一列数据，因此，表头信息需精简且准确，切勿冗长，起到引导的作用即可。

1.2.2 内容区

表格的行由横向的单元格组成，每一行的上下叠加组合成表格的内容区，集中展现数据，也是用户工作时，视觉聚焦时间最长的位置。

1.2.3 操作区

内容区最右侧的那一列，是表格操作区的分布位置。

每一行最右侧的操作区可针对每一行数据，进行操作。

除了右侧的操作区外，每一行数据的最左侧会放置一个多选框，通常是当多行数据需要被批量操作时，联结表格外的按钮配合使用。

1.2.4 翻页器

表格作为承载数以千万数据的容器，当进入新的表格页面，如果需要loading的数据过载，那么对于系统来说，难以快速响应，且会出现“卡顿”、“崩溃”的问题。

为了解决这样的问题，用翻页器切换页面，固定每一页数据显示的数量（通常一页十条数据，分页器组件可以自定义每一页的数据展示条数），灵活对口用户操作习惯的同时，完成快速查询数据的工作目标。

2. 表格视觉设计

举个🌰，女孩子的化妆品很多，为了化妆台更整洁，会购买好看的收纳盒，按照自己的需求把化妆品分门别类放置，以便需要时快速找到要使用的物件。

分门别类化妆品物件，就类似于向表格输入数据的工作；按照需求找到对应需使用的化妆品，对应查询表格类似的工作。

表格在tob系统中起着分类信息、承载数据的作用。可对表格进行设计的空间不多，毕竟表格在工作中的职能主要是增删改查，功能性的占比远超美观。

即便如此，依旧期望能够在保证其功能完善的基础上，秉持通过视觉层面的设计，提升表格在操作和查看方面的易用性。

2.1 字体

表格中的字体需整体统一，保持视觉上的一致性。字体的多样性，会导致整个页面嘈杂，没有重点，无法聚焦信息，扰乱用户注意力。

由于内容区所占篇幅本就较多，用户的视觉查看面积主要凝聚于此，长时间盯看，第一无法辨别表头和内容区域的主次，第二，会造成用户视觉疲劳，无法划分页面重点。

因此，绘制表格时，表头和表格内容需要进行主次关系的处理。

为了凸显表头信息，通常会给表头一个medium/semibold的字重和较深的字体颜色，表格内容区字体运用regular，使字体颜色稍浅于表头，以此达到区分的效果（字体颜色可结合系统的品牌主色进行调取）。

2.2 分割线

在一些系统中，依旧在使用斑马线和分割线，这样设计的初衷也是为了用户在浏览时可以专心聚焦行、列的数据，但无巧不成拙，这样反而使表格看起来更厚重，用户的反而会注意斑马线和分割线，而不是表格中的数据。

在表格设计中，需酌情考虑是否采用分割线，当在某些场景下必须使用时，需酌情考虑。以下简单说明横向、竖向分割线的基本使用情形，可作为设计参考。

横向分割线，横向对齐数据，其实从左往右的浏览顺序早已是约定俗成的（排除某些国家的阅读顺序），所以横向分割线的颜色可以适当清淡一些，起到一个浏览时的数据切割对齐和引导作用即可。

竖向分割线，将垂直方向的数据做视觉上的对齐。绘制表格时，很多时候会结合前端盒子模型原理进行工作，基本不存在数据不对齐的问题，所以在非必要的情况下，可以默认去除竖向分割线，用户具备自觉分层数据的能力。

🌰（必要情况）：

当表格表头存在一级二级类似的树状结构，单纯的以数据对齐方式分割表格是无法达成预期效果的，并且上述分割线的使用建议无法在当下继续复用，出现这种情况时，通常会用最原始的横竖分割线来辅助划分表格，分割线的颜色依旧遵循清淡的原则，起到数据浏览时的引导作用。

2.3 标签

在表格设计中，标签用于展示数据内容状态。与同一行的其他数据相比，用户不需要进行筛选操作，就可以自主对当前数据状态信息做分层处理。

常用的标签形式有：带颜色的文字、面性、线性、图形+文字的组合。

这些标签形式有利有弊，利在于，根据不同标签的颜色、表现形式，向用户直观的传达信息；

弊在于，当标签使用不适度时，就会出现喧宾夺主的情况，抢占用户视觉，影响数据信息读取时间，并且在视觉上，显得页面厚重、不透气、累赘。

所以在表格中，需要使用标签时，一定要结合页面设计的实际情况，把握好“度”。

2.4 内容区

表格由行和列组成，行列均分别由数个单元格组成，这里的区域称为表格的“内容区”。

在绘制表格时，为了加快工作效率，多引用“盒子模型”，绘制表格成型，固定每个盒子的padding距离，形成合适的视觉引导线，保证视觉平衡，在后期需要调整表格内容和前后顺序时，在表格已建立好的秩序基础上，快速实现内容编辑。

2.4.1 表格内容区-行

为保证每一行整齐统一、视觉均匀，每个单元格内的数据排列在大多数情况下都会设计为左对齐。除非是金额相关数据，才会以右对齐的形式展示，方便做数值对比。

当列内容过多时，不予全部展示，需固定每个单元格内能够展示的数据的长度，多余的内容以“...”代替。如果需要查看当前单元格数据，可通过鼠标hover到该单元格上后，以小气泡形式展示所有数据内容。

2.4.2 表格内容区-行-操作区

表格每行的最右一列，控制每一行数据的操作。

操作区的表头和数据位置右对齐，最左侧左对齐，左右两列各形成一条隐形的“数据对齐线”。

2.4.3 表格内容区-列

列数据展示的是同一类型数据的值，有时候要展示的数据密度高，需全部平铺出来，整个表格会十分拥挤，查看数据时，视觉浏览路线可能会发生错位。

但这些数据又很有必要展示出来，所以需要将这些数据由高到低，先进行优先级的排列，将主要的数据平铺外置展示。

最右侧（🌰有时候是最左和最右两侧）的操作区悬浮，通过拖动滚动条，查看优先级低一些的数据，具体以几列作为主要数据展示，应以不同项目每个单元格内容的多少作为评判标准,建议最多不超过7个。

3. 表格交互设计

表格在视觉上的修正只能作为辅助，优秀的表格能够为用户考虑到多样性的使用场景，提供丰富的操作维度。

设计师需要深入理解产品，跟踪业务动向，发现用户操作痛点，通过设计交互，优化操作、减少用户对产品的学习和认知成本，提升工作效率。

帮助用户在面对表格“数据海”时，依旧能够清晰的查阅数据，高效的完成工作，从而更加信任和依赖产品，提升用户粘度。

3.1 表头操作区

表头操作区中，筛选和排序是最常见的操作功能，位于表头标题的右侧，控制表头下同一列单元格的数据内容。

筛选功能，可选多个约束条件，根据约束条件判定，并只显示符合约束条件的数据，过滤其余数据，当约束条件过多，无法快速选取时，可结合搜索功能进行操作。

排序功能，根据已设定的约束条件，对某一类型数值做排序，可升序或降序，不具备过滤能力。但排序具有排他性，不能同时选定表头和其他数值的属性后，进行同等效力的排序工作，否则一定会打乱前一个属性的排列顺序。

如果非要根据几个不同的属性进行合并排序，则需要首先对判定排序条件的属性进行优先级的排序，之后再进行数值排序。

3.2 表格内容区操作

为了使数据编辑的操作过程更直接，通常在单元格中采用“原位编辑”的方式，达到数据编辑所见即所得的效果。

原位编辑功能需配合交互提示，当鼠标hover到单元格上时，出现编辑图标，点击图标后，单元格展示填写框和输入光标。

当然，原位编辑有利有弊，当表格内容区可编辑的单元格非常多，多次的hover、点击、输入的过程会让用户感到肌肉和视觉疲劳，且满屏的内容编辑，难免会在使用时，出现视觉错位和填写失误的情况，那么这种情况下，就可用弹窗形式替代原位编辑，避免操作混乱。

3.3 表格首列操作区

除了最右的操作区，有时根据业务需求，会碰到多条数据需进行相同功能的重复性操作。但如果每次只能操作单条数据，十分浪费时间。所以，一般这种情况下，会在表格的最左侧一列设置多选框，配合表格外相关操作功能按钮批量设置多行数据。

3.4 表格尾列操作区

表格尾列操作区控制其一整行的数据操作，“编辑”、“删除”、“查看”为最常见的操作功能，结合前后页面功能的递进和当前需完成的任务，设置更具体的、贴合业务的操作功能。

但有时业务过于复杂，操作功能数量多，权衡和梳理后，所有操作区功能都必须保留，无法割弃，否则任务无法推进，此时需由高到低，划分所有的操作功能的权重，保留使用频次最高的3个功能，并根据频次的高低，从右往左排列，其余的功能收起，当需要使用时，点击展开后，选择相应的功能。

（🌰：关于系统表格中常见的行内查看功能，表格内容展示区域有限，通过点击每一行数据的查看功能，以弹窗的形式获取更详细的相关数据内容）

如果能够以视觉的形式准确的呈现操作功能所要表达的语义，则建议用图标代替文字，辅以小气泡名词提示，如此表格更整洁，也可以挪出更多的位置给除操作区外的内容区，降低内容区的数据密度；如果操作功能名词过于专业，则建议保留文字，避免歧义和影响后续操作。

3.5 表格外部操作区

表格外部的功能比表格内更全面，操作功能划分的颗粒度更细，通常以搜索、筛选为主。

3.6 筛选

3.6.1 表单筛选

为了对表格的庞大数据进行精确的数据定位，表格外的筛选功能通常由多个与表内容相关的条件属性构成，通过对既定的筛选条件的选择，点击查询完成用户查询数据的工作需求。

当页面筛选条件多，占据页面一屏的面积较大时，会将权重较高的表格区域往下挤，降低屏效，增加操作负担，影响用户浏览数据的流畅性。当出现这种情况时，会根据埋点数据判别不同筛选条件的被使用频率，将使用频率较高的筛选条件进行展示；将频率较低的筛选条件收起，当用户需要使用时再点击展开，进行操作。

3.6.2 tab筛选

这类筛选一般位于表格上方，是表格信息状态属性的筛选功能。通过切换tab标签选项，查看不同状态属性的表内容信息，也能让用户了然当前表格的所有分类信息状态。

3.6.3 表格列筛选

一些表格数据信息量非常庞大，于是在设计时，会给表格配置了能够左右滑动查看信息的滚轮，但痛点在于通过滑动滚轮来查看信息，用户还是需要自己盯着屏幕，在“数据海”中查找自己需要的信息。

首先来分析一下，我们日常在表格中，查询某类数据时的流程：先横向浏览，锁定和目标数据类型相关的表头，再查看该表头下面的数据，最后找到需要的数据信息。

以此为切入，针对前面提到的查询数据时的痛点，查询数据时，我们最先关注的是表头信息，不同用户捕捉数据的需求和类型的侧重点不同，自然有很多数据会在浏览时被略过。

就近原则，可以在表格的上方设置一个按钮，通过点击该按钮，选择需要展示的表头信息，这样不仅能够提升用户查询数据时的工作效率，避免迷失在“数据海”中，同时也能降低系统加载数据时的压力。（同样的，当需要对表格内容进行批量操作时，也会在表格附近设置相应的操作按钮）

3.7 搜索

表格外搜索包括带筛选条件的多维搜索和普通搜索。

普通搜索，结合表单筛选使用，与筛选属性共同对表内数据进行降维，缩小数据范围，搜索框都具备模糊搜索的功能，因为用户不可能每次都输入完全准确的搜索条件，不然用户的认知成本太高。

带筛选条件的多维搜索，这种搜索框在细分了数据属性的前提下，对同一属性的数据查询，同时通过输入模糊字段来进行搜索工作。

这类带筛选条件的搜索框，一般置于表格上方，用户选择筛选条件，表格响应操作后，符合用户查看数据的视觉浏览动线和习惯。

3.8 拖拽排序

上文有概述过，通过表头操作，可让表格内容按照预设好的条件展示排列，但这样的排列是固定且单一的。

在一些业务场景下，录入表格每一行的内容后，需要对表格内行的顺序做调整，常用方法是：在表格每行最右操作区设置上移、下移按钮，通过点击按钮，上下移动行的位置。

这种方式的弊端在于，如果被移动的行，距到达的目标位置相隔数行，那么需要点击数次上移或者下移按钮。

于是衍生出了第2种操作方式：

通过直接选中某一行，鼠标垂直拖拽该行到目标位置，从而更快速的完成操作动作，达成目标。目前这是使用体验更流畅，用户反馈多为正面的操作方式。

3.9 子列表格（嵌套）设计

子列表格的共性是，存在一级、二级、三级...这样的不同级别的数据。

有时表格中会出现表头过多，一屏放不下，需操作左右滚动条来查看数据的情况，当表头超乎合理的数量时，首先用户体验很差。（具体原因前文有说过，在此不赘述）

其次，是最初规划和设计表格内容时，由于没有考虑过实际使用场景，也没有对表格内容做优先级的排列所导致的。

为了解决这样的问题，日常使用频次较高的子列表格分为两种：

第一种，所有不同级别的数据共用同一个表头。当存在一级、二级、三级数据时，展示相同属性不同级别的数据数值，且每一级别的数值相互关联。