表格是B端产品中最常见的交互组件之一，甚至在某些业务场景下是最核心的交互组件。但由于表格的样式复杂和操作繁琐，用户在使用时会出现诸多体验问题。本文我会以自身的项目经历，分享一下表格组件的优化。enjoy~~

1. 思路

图1

发现问题解决问题是设计的基本思路，图1罗列了部分我们产品中表格组件的现有问题。但是直接针对问题点进行优化可能会有更多的问题：

• 首先，问题未必全面，解决方案可能顾此失彼；
• 其次，没有还原出用户真实的场景，解决未必是对的；
• 最后，单点的解决方案难以形成规范，复用性较低。

所以，在执行前我制定了以下思路，图2。

图2

• 第一步，由于表格组件可能出现于产品内的多个页面。所以，需要对产品内的所有页面进行清查。在清查过程中尽可能地发现组件存在的问题，以及梳理该页面下的使用场景是什么。
• 第二步，将梳理出的组件抽象化并按场景归类，归类的目的在于让组件的优化具有通用性和一致性，而不是针对个别页面的个别优化。而且能让我们分析出该场景下用户的行为模式，由此推导出解决方案。
• 第三步，基于场景发散解决方案。我们可以依据竞品分析、文献研究和用户行为分析等方式，推导出解决方案。在此阶段可以先不判断，而是尽可能穷尽所有情况，这会让我们的优化方案更全面。在项目中，我将表格组件的使用场景归纳为录入场景、数据处理场景、选择场景、数据统计场景、特殊场景和通用场景。基于这6个场景的分析将在下文详细介绍。
• 第四步，聚焦出可执行落地的方案。在第三步所发散的方案不可能全部落实，需要定义出优先级。而优先级的依据可以是上一步归纳的问题、设计原则、业务场景和技术框架限制等等。
• 第五步，撰写文档，形成规范输出。便于以后的沟通对接、回溯和迭代。

2. 场景、行为模式、优化点

2.1 录入场景

2.1.1 场景描述

在录入场景下，用户需要录入大量结构化数据到系统内，用户在此场景下的主要目标是高效且无误地将信息录入到表格内。例如：销售人员在开单时，需要在订单中录入商品、数量、型号等多维的信息，且录入的商品明细可多达上百条。所以销售人员会在表格上进行大量重复性的操作。

2.1.2 行为模式

• 逐条新增行录入：当录入的数据超出默认提供的行数时，用户会新增一行→录入一行数据→再新增一行→再录入……
• 先新增后录入：用户已经知道他需要录入的行数，所以先新建足够多的行数，再依次录入数据……
• 全键盘录入：用户会延续在Excel中的操作习惯，如，按tab键切换单元格编辑或者其他快捷键操作，全程脱离鼠标。
• 寻找错误：保存后系统报错→用户找到不合法的字段→修改。
• 再次修改：再次进入页面→修改数据→再次确认修改过的数据→保存；再次进入页面→修改数据→中途变卦→找回修改过的数据→还原/再修改→保存。
• 重复操作：用户录入的数据都是一致的，或者有规律的。例如：录入商品的仓库，通常都是同一个仓库。
• 录入打断：录入场景的持续时间较长，用户会在这段时间内被打断，然后再次回来录入。

2.1.3 优化点

1. 当用户录入到最后一行时，系统默认自动新建一行，省去用户新建行的麻烦。
2. 新建按钮始终靠近行，用户能在录入过程中，缩短鼠标的移动路径。
3. 提供tab键等快捷键，实现选中态在单元格内跳转；当跳到不可录入的单元格时（如禁用状态的输入框、开关控件等），直接跳过；当跳到下拉选择框时，直接展开下拉；当选中态跳到视窗外时，自动挪动表格，保证选中态始终可见。
4. 降低表格内的输入控件类别，让用户使用同样的操作逻辑进行录入。例如，单选控件可能会打断用户的全键盘操作（必须用鼠标点击），可将单选改为下拉，用户可以通过↑↓键进行选择，操作流将不会被打断，图3。
5. 即时校验，用户输入后会即时校验，无需要等到保存是再校验。
6. 报错时，自动定位到报错的单元格并高亮显示，用户无需要在一堆数据中寻找。
7. 针对报错的内容给出修改建议，让用户知道如何正确录入。
8. 对修改后的数据加上提示（如：字体加粗），让用户可以快速返回查找。
9. 记录用户的当次的修改记录，减少用户回忆之前的内容是什么。
10. 提供批量录入功能，或者如Excel表中的一键填充功能，可降低重复的工作量。
11. 提供行复制功能，快速录入相似度极高的行数据。
12. 当表格在草稿状态下再次被打开时，光标自动定位到最后编辑的单元格，帮助用户回忆上次录入到哪里。

图3

2.2 数据处理场景

2.2.1 场景描述

用户需要对大量结构化的数据进行处理，用户在此场景下的主要目的是快速筛选并处理数据（新增、删除、修改、查看、启用/禁用、复制等）。数据处理场景的表格通常可称为列表，因为它通常只是一个入口载体，用户如果想了解更明细信息，需要进入新的明细页。

所以这种表格所承载的数据既复杂又不全面，一般来说，用户会经历三个阶段：筛选、审阅、处理。例如：销售人员需要对之前开出的销售单进行审核，他需要将目标单据从大量的单据里筛选出来，然后审阅单据的信息是否有误，最后进行确认审核操作。

2.2.2 行为模式

1. 精准筛选：用户在处理数据前，已清楚知道数据的某个信息片段，如商品编码，他会通过信息片段直接搜索。
2. 模糊筛选：对需要处理的数据印象模糊或不清楚需要处理的数据有什么，只能缩小数据范围。
3. 快速处理：筛选出数据→只审阅关键数据或状态→批量选中要处理的数据→处理。
4. 谨慎处理：筛选出数据→进入详细页面审阅详情→处理→返回列表。
5. 逐一处理：逐行审阅行信息→处理→再审阅下一行信息→再处理→直至待处理的信息全部完成
6. 操作错误：系统报错→了解原因→找到未处理的数据→重新操作。
7. 新增操作：新增数据后→找到已新增的数据→对新增数据进行操作。

2.2.3 优化点

1. 提供搜索功能，直接筛选出用户需要处理的数据。
2. 提供多维的筛选和排序，减少用户寻找信息的时间。
3. 提高处理的效率：将关键数据和关键状态做特殊的视觉处理，让用户迅速搜寻并理解；点击整行可选中，无需用户瞄准勾选框。
4. 帮助用户快捷查询明细：双击/单击整行可以跳转至相应页面，无需用户瞄准查看按钮或超链接； 在表中展开更明细的信息或者用侧拉浮层或气泡承载更多信息，无需用户跳转页面查看，如图4。
5. 当逐一处理为主要场景时，操作按应钮直接显示在行上，用户可以直接操作。
6. 允许用户批量处理；告知用户已选多少条数据；允许跨页选择。
7. 协助用户完成任务：系统先将没有问题的数据全部处理完毕，再向用户报错，而不是直接终止进程；如果报错内容可被更正，直接引导用户到相应页面更正；如果报错内容不可被更正，告知用户原因，自动定位到报错的数据行并高亮显示，避免用户找不到报错的数据。如图5。
8. 新增数据行后，视图定位到新增的行并高亮显示，让用户快速聚焦。

图4

图5

2.3 选择/挑选场景

2.3.1 场景描述

选择场景的表格通常也可以称为列表，因为其本质是对选项的罗列，用户需要在大量选项中进行选择。此场景下用户目标明确，操作路径单一，时间短暂，能高效识别出目标信息是核心需求。

由于目标明确，用户关注的信息会更聚焦。由于用于记忆有限，多维信息能辅助用户决策，但信息量过多会影响用户选择效率。

例如：销售人员需要在表单上录入客户信息，他需要呼出客户列表弹窗，在弹窗内选择客户并将信息带入到表单上。但由于同一个客户可能配有多个联系人、多个地址或多个子公司等情况，所以销售员在选择过程中需要快速过滤这些信息是否选择正确。

2.3.2 行为模式

1. 快速选择：用户选择的依据单一，找到目标后马上确认。
2. 谨慎选择：用户选择的依据多维，需要相互比对才能进行确认。
3. 遗忘选项：用户选择选项→滚动表格→再多选其他选择→重复多次→遗忘之前的选择有哪些。
4. 重新选择：用户再次打开表格→取消原来的选项→选择新项目。
5. 补充选择：用户再次打开表格→回顾原来的选项→添加新项目。
6. 范围选择：选项带有连续关系，用户需要从头到尾依次选择。
7. 习惯：用户的选择带有重复性，某些选项会有更高的概率被选中。
8. 尝新：用户更可能会偏好新的选项。

2.3.3 优化点

1. 支持双击/单击行确认选中行数据，无需要再点击“确定”按钮，省去冗余操作。
2. 如果用户更多倾向快速选择，可将表格改成列表或卡片等形式。如图6，腾讯文档为例。
3. 支持数据筛选（与数据处理场景一致）。
4. 记录并显示用户的已选项和个数，避免用户遗忘选项。
5. 允许用户一键清除选项。
6. 如果选项内容带有强连续属性，提供范围选择的快捷键。（如PS连续选择图层）
7. 提供快捷选项：记录用户的选择习惯，设置常用选项；或者允许用户标记常用选项。
8. 如果选项受时间影响较大，可按时间倒叙排列。

图6

2.4 数据统计场景

2.4.1场景描述

用户需要对数据进行审查和分析，其目标是在庞大的数据集中确认某些结果或得出某些结论。由于关注的数据会有主次之分，数据与数据之间也会有内在联系，用户会更加跳跃地扫视页面，而且会更加反复地审查数据。

例如：销售人员需要查阅本月的销售情况，进入到商品销售明细表中，分析本月的经营状况，若其中某些商品滞销，需要分析它们的内在联系，并制定之后的销售策略。

2.4.2 行为模式

1. 数据审查：整体浏览报表→重点查看几个关键数据→分析有没有异常；
2. 扫视概览：整体浏览报表→留意数据整体的变化、趋势等，忽略明细；
3. 来源追溯：发现异常数据或产生疑问→追溯数据来源→分析原因；
4. 阅读习惯：用户会延续现实报表的阅读习惯，对新的报表样式需要时间适应；
5. 反复跳读：用户的记忆有限，当同时关注多个数据时，会反复跳读。

2.4.3 优化点

1. 系统能高亮标记异常数据和出错风险较大的数据，提示用户，并告知原因；关键数据使用更显眼的形式展现，图7。
2. 如果用户对数据明细不敏感，可使用可视化图表（趋势图、饼图）等形式展示；或者让用户选择切换，图8。
3. 用户可以由数据联查到数据来源，并引导到具体的页面查看详情。
4. 使用公认的标准模板展示数据；或者允许用户自定义模板，较少用用户的认知负担。
5. 尽量一屏展示所有数据；可以滚动页面，避免翻页，否则用户需要频繁切换页面，打断用户心流。
6. 支持用户横向或纵向拖动表格，直观操作而不是使用滚动条。

图7

图8

2.5 特殊场景

由于B端业务的特殊性，上述归纳的场景仍可能不够。在一些特殊业务下，会催生出更多表格使用场景，比如：在本项目中，我归纳了4种特殊场景：多维录入场景、轻数据录入场景、“报表+数据处理”场景和“选择+数据处理”场景，我们可以针对这种特殊的场景做相应的优化。

以轻数据录入场景为例：

2.5.1 轻数据录入场景

销售人员需要录入收款信息到单据上，然而，客户通常只会用一个账号付款，所以销售人员只会在表格内录入一行分录，这是主要场景。但也有客户用多个账号付款，所以销售人员需要录入多行分录，这是次要场景。尽管基础的录入表格可以支持以上场景，但由于录入的信息非常少量，使用表格的形式未免太复杂，所以可以使用其它录入控件替代。如图9。

图9

2.6 通用场景

另外，还有一些情况无论在哪种场景都有可能出现，我们称之为通用场景，包括：内容溢出单元格的情况、页面空间不足的情况和数据密集的情况。

2.6.1 内容溢出单元格的情况

当单元格字段不可控时，字段长度会很容易溢出单元格，造成信息缺失。

优化点：

1. 折行，将数据折成两行，能应对大多数短文本的溢出情况。
2. 鼠标悬停后展示全部信息，可以适应任何长度的字段，但会增加用户的操作成本，对于高频查看的数据不够友好。
3. 允许用户拖动边框设置列宽，并记录设置，但弊端在于占用空间（可能导致出现横向滚动条）。
4. 上述几种优化方案可以组合，以最大程度地覆盖使用场景。
5. 当单元格字段可控时，可以固定列宽度，以保证字段完整且可读。

2.6.2 页面空间不足的情况

当表格数据较多时，导致一屏无法装下所有数据，阅读效率会大打折扣。

优化点：

1. 可固定表格窗体的大小，表头和底栏固定，让用户始终清楚每列的数据是什么数据，当表格的内容可以自我解释时，可以隐藏表头，但这种情况很少见。
2. 当列数太多，用户需要横向滚动表格时，允许用户进行列设置（显示、隐藏、冻结、调整顺序…），让重要信息时时可见，如图10。
3. 当列数和行数太多时，横向滚动条和纵向滚动条会同时出现。纵向滚动条可以当用户滚动时或鼠标悬停表格边缘时才出现，横向滚动条建议始终显示或者鼠标悬停表格时才出现。

图10

2.6.3 数据密集的情况

用户只会扫视我们的界面，而不会仔细阅读。在数据密集的情况下，用户很容易扫视错误，眼花缭乱。

优化点：

1. 鼠标悬停某行时，整行高亮显示，如图11。
2. 使用斑马线，分隔每行信息。
3. 当用户需要进行行与行间的数据对比时，可以使用纵向斑马线或纵向分割线，让列更突出。
4. 自定义行高，因为用户习惯和用户设备的不同，无法满足所有用户的需求，所以可以让用户去选择合适的行高。
5. 定义合适的对齐方式，一般来说数值字段右对齐，中英文本左对齐，布尔值（是否、男女）居中对齐，多级表头居中对齐。

图11

3. 下一步

事情还没结束，47个优化点其实不一定都适合应用于我们的产品当中，这需要结合真实的用户场景和业务需求等因素进行分析。

比如我们项目里，收到的反馈大多都指向于录入场景的报错问题，系统报错后用户的心流会被严重打断，失去焦点。其次是快捷键支持问题，我们的目标用户会经常使用tab切换，这时候他们会有输入的预期，一旦这种预期不符合，心流也会被打断，对于这种问题我们会优先处理。所以，尽管我们花了很大精力去发掘表格的优化点，但仍需要克制地去选择。

最后，才发现洋洋洒洒写了一大堆，感谢坚持阅读到这的你，希望以上内容对你有帮助~

作者：genrry，公众号：设计师阿余。热爱设计，关注用户体验，分享设计思考。

本文由 @genrry 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议