表格是B端产品中最常见的交互组件之一，甚至在某些业务场景下是最核心的交互组件。但由于表格的样式复杂和操作繁琐，用户在使用时会出现诸多体验问题。本文我会以自身的项目经历，分享一下表格组件的优化。enjoy~~
1.思路
图1
发现问题解决问题是设计的基本思路，图1罗列了部分我们产品中表格组件的现有问题。但是直接针对问题点进行优化可能会有更多的问题：首先，问题未必全面，解决方案可能顾此失彼；其次，没有还原出用户真实的场景，解决未必是对的；最后，单点的解决方案难以形成规范，复用性较低。所以，在执行前我制定了以下思路，图2。
图2
第一步，由于表格组件可能出现于产品内的多个页面。所以，需要对产品内的所有页面进行清查。在清查过程中尽可能地发现组件存在的问题，以及梳理该页面下的使用场景是什么。
第二步，将梳理出的组件抽象化并按场景归类，归类的目的在于让组件的优化具有通用性和一致性，而不是针对个别页面的个别优化。而且能让我们分析出该场景下用户的行为模式，由此推导出解决方案。
第三步，基于场景发散解决方案。我们可以依据竞品分析、文献研究和用户行为分析等方式，推导出解决方案。在此阶段可以先不判断，而是尽可能穷尽所有情况，这会让我们的优化方案更全面。在项目中，我将表格组件的使用场景归纳为录入场景、数据处理场景、选择场景、数据统计场景、特殊场景和通用场景。基于这6个场景的分析将在下文详细介绍。
第四步，聚焦出可执行落地的方案。在第三步所发散的方案不可能全部落实，需要定义出优先级。而优先级的依据可以是上一步归纳的问题、设计原则、业务场景和技术框架限制等等。
第五步，撰写文档，形成规范输出。便于以后的沟通对接、回溯和迭代。
2.场景、行为模式、优化点
2.1录入场景
2.1.1场景描述
在录入场景下，用户需要录入大量结构化数据到系统内，用户在此场景下的主要目标是高效且无误地将信息录入到表格内。例如：销售人员在开单时，需要在订单中录入商品、数量、型号等多维的信息，且录入的商品明细可多达上百条。所以销售人员会在表格上进行大量重复性的操作。
2.1.2行为模式
1.逐条新增行录入：当录入的数据超出默认提供的行数时，用户会新增一行→录入一行数据→再新增一行→再录入…
2.先新增后录入：用户已经知道他需要录入的行数，所以先新建足够多的行数，再依次录入数据…
3.全键盘录入：用户会延续在Excel中的操作习惯，如，按tab键切换单元格编辑或者其他快捷键操作，全程脱离鼠标。
4.寻找错误：保存后系统报错→用户找到不合法的字段→修改
5.再次修改：再次进入页面→修改数据→再次确认修改过的数据→保存；再次进入页面→修改数据→中途变卦→找回修改过的数据→还原/再修改→保存
6.重复操作：用户录入的数据都是一致的，或者有规律的。例如，录入商品的仓库，通常都是同一个仓库。
7.录入打断：录入场景的持续时间较长，用户会在这段时间内被打断，然后再次回来录入。
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切换，这时候他们会有输入的预期，一旦这种预期不符合，心流也会被打断。对于这种问题我们会优先处理。所以，尽管我们花了很大精力去发掘表格的优化点，但仍需要克制地去选择。
最后，才发现洋洋洒洒写了一大堆，感谢坚持阅读到这的你，希望以上内容对你有帮助~
关注用户体验，分享设计思考
网友评论