• 登录
社交账号登录

B端要吃透系列:后台文件导入交互设计指南

文件导入是B端后台产品设计中常用的一个功能,能够大大提升相关使用人员的工作效率。但是使用此功能的时候,对导入的数据有严格的要求,那就是:一个数据都不能错。

微信图片_20230208170854.jpg

这就要求我们在设计导入功能的时候需要注意一些问题,避免用户在使用的过程中遇到很多的障碍和麻烦,本文主要从交互的角度通过以下几个方面来讲设计时要注意的点。

一般用户在使用导入功能过程中,主要流程如下:

1.模板制作:给用户提供一份模板文件,供下载使用;

2.导入文件:用户下载模板、填写数据、导入文件;

3.数据校验:校验出不符合规则的数据;

4.结果反馈:让用户知道本次导入的结果&影响;

5.数据处理:将不符合规则的数据进行修改;

6.成功入库。

根据以上流程,我们主要从以下3大模块来说用户在操作的过程中需要注意的问题。


640.png


一、模板制作

在我们给用户提供的下载模板里面,我们设计时需要从以下2方面注意,模板制作、引导用户如何填写模板。

1.模板内容制作

需要根据产品模块功能,提前梳理好表头的字段都有哪些,哪些字段是用户必填的,对于有些字段,是不是固定值,固定值的情况下,考虑是不是可以用下拉框让用户进行便捷选择。最后,是否有必要提供表格的基础校验。

下面我们用一些示例图来说明。

必填字号需用星号*在字段后面进行标注。


640.png


如果填写的数据是固定值,我们可以使用下拉框,直接让用户下拉选择。

比如,字段省市区,数据库里面存的河南省开封市鼓楼区,如果用户自己输入的时候很有可能输入的是河南开封鼓楼区。

这种情况下与数据库进行匹配的时候,就有可能匹配不到数据。所以可以采用下拉框进行选择而不是让用户进行输入的设计方式。


640.png

在模板内增加基础校验,用户输入时即校验是否符合填写格式。


640.png

640.png


需要注意:错误提示的反馈要有效,不能出现提示说表格有错,但是用户又不知道哪里的情况,尽量描述具体。

2.引导用户如何填写模板

模板最重要的就是写清楚填写规则。规则不清楚的情况下,用户按照自己的理解填写完成后,最后又反馈填写错误,是一件非常崩溃的事情。

可以从以下4个方面进行模板填写规则的设计

用单独一个sheet进行说明


640.png


在模板前几行写上模板说明或者单独用一个显眼的标签进行说明,方便用户在进行表格填写时提前阅读。此外这里的说明支不支持用户删除,要说明清楚。


640.png


在字段后面用批注的方式


640.png


给用户提供填写示例

新增加一行示例数据,让用户知道怎么填写

另外需要注意的:遇到空行后就停止读取数据了,实际后面还有很多行,需要在表格里面提醒用户中间不能有空行。


二、导入文件

在用户导入文件后,系统就会开始进行校验,主要校验以下3个方面:文件、模板、文件内的数据。

1.文件

这里要注意文件的格式、大小、名称。

格式:一般仅支持.xls和.xlxs格式,推荐xlsx格式,它不仅是目前主流的excel格式,而且相同行+列数据时,xlsx格式文件体积较小。

大小:为了节省服务器的空间和提高文件传输的速度,需要限制上传文件的大小。尽量不要超过10M,不过这一点可以提前跟研发同事商量对齐。

名称:当上传与要求的文件名称不一致时则报错。如果文件名称没有特殊作用,不建议对名称进行校验。

2.模板

模板里面需要检验表头名称、sheet名称、表头字段顺序、行数

表头名称:表头名称是指导入模板内的列名,当导入到数据库的时候,程序知道哪个列对应数据库里的表字段,当与导入模板要求不同时则报错。

sheet名称:如果一个excel表里面有多个sheet页面,就需要对sheet名称进行校验。比如下图:


640.png


表头字段顺序:当字段列顺序和模板不一样的时候,则提示模板不对。当然也可以直接按照字段名称去匹配,不管字段顺序。

行数:对用户上传的行数是都有限制,比如最多上传2000条记录,超过2000条就要报错。

3.文件内的数据

校验完了文件、模板,接下来就要对文件内的数据进行校验,主要从以下几个方面进行校验。

字段是否必填

如果表格字段必填值是空的,导入excel的时候,数据就是错的,需要进行报错提示,比如:


640.png


字段格式

如数字格式、日期格式、时间格式、字符串格式。如果这列字段和数据库表字段的格式对不上,也导不进去。

a.数字格式:Excel会默认对超过2位小数的数值进行四舍五入。做工资条的需求时,曾经遇到的就是明明看着金额是对的,结果导入系统总会差几分钱。实际上就是数值四舍五入的问题,因此,在单元格为文本格式的前提下,建议对数值加上小数位校验。

b.时间格式:2020-07-19还是2020/07/19,还是2020.07.19,虽然后端可以几种格式都进行识别,但用户的输入可能远远不止三种,设计/后端无法对每种情况都进行排查,所以还是进行提示较好。

字段长度

比如手机号码规定是11位,但是用户输入了12位,此时针对这个数据就会显示报错。常见的类型还有身份证号、税号等基础格式的校验。

固定值校验

比如员工类型只有正式、实习、兼职三种固定的类型,但是用户输入了外包,此时就会报错。不过基于以上情况,为了减少出错,可以使用下拉框让用户选择的形式。

另外需要校验的细节点

模板内数据为空,只有个表头,这个时候不需要处理,直接提示:文件内数据为空,请补充数据后再上传。

三、报错提示

1.报错的时机

发现错误,立即报错

比如文件大小和格式不符合规则时,上传后立即报错。


640.png


发现错误,记录错误,最后统一报错

这种情景主要针对用户导入excel表格后,这时系统会对填写的每个字段数据进行校验,这种时候出现的问题,可以先记录下来,最后统一报错。

2.报错提示修改方式

Excel表格上传后提示报错,修改的方式主要有以下2种。

错误信息在平台上直接修改。

提供错误清单,修改后再重新上传。

这两种做法都有道理,取决于具体的应用场景。对于第一种适用于数据量不是很多,不存在很敏感的信息。

对于第二种适用于数据量比较大。比如财务类毕竟是敏感的数据,我们的处理方式是只要出错都不导入,对于错误信息在表格里面修改后,表格重新上传,这是因为财务比较严谨,需要核对最后导入的金额。

3.报错数据处理办法

针对错误信息在平台上直接修改,方式有两种:

a.直接在列表中实现可编辑的功能。


640.png


b.点击列表后,出现弹窗,在弹窗中进行内容编辑。

这两种方式,我更推荐第二种,因为如果用弹窗实现,那么像省市区这种选择的,可以用到前端开发的组件,实现起来更灵活。

在列表中如果直接编辑,有的字段是要选择的,开发人员实现起来就会比较麻烦。而且对用户来说,在列表直接编辑也不见得更加方便。

提供错误清单,修改后再重新上传:

注意:在excel中对异常字段进行特别标注,需附上“错误原因”,尽量详细描述,让用户第二次导入模板的时候,不要再遇到阻碍。

另外还额外需要考虑的:

导入的数据是新增还是覆盖,即系统中已有数据的情况下,本次导入是在其后添加数据,还是完全覆盖已有数据?

存在错误数据时,是忽略错误数据允许正常导入,还是全部打回重新导入?

导入过程刷新页面如何处理?是在前端加个刷新的判断,如果监听到刷新事件,就弹窗告知?还是增加一个导入任务列表,告知用户当前有任务正在执行,可以看是什么文件以及目前执行进度?

以上这些问题,可以跟开发小伙伴一起商量,找一个最优解决方案。

对于 B 端产品来说,效率始终是摆在第一位的,我们所考虑的每一个步骤和细节都是为了减少用户使用过程中的阻碍,最大化提升使用效率。

收藏