页面|“行添加”表格分析总结_

编辑导语：在后台作业系统中，良好的数据可以给人带来不一样的呈现方式，而表格在其中有着极其重要的作用。对此，作者对“行添加”表格分析进行了一个总结，我们一起来看下吧。

文章插图
在后台作业系统中，针对“行添加”表格的分析与总结。
一、前言与背景在后台作业系统中，良好的数据呈现极其重要。俗话说“文不如表”，表格在数据呈现方式中有着举足轻重的地位。表格组件是后台系统使用最为频繁并且重要的组件。
当前，已有很多设计师对表格组件进行了深入的分析，从主流UI框架的选用，到表格检索、查看、操作纬度的分析，较为全面：
《B端后台表格（table）如何设计》
《B端体验设计专题-表格篇》
但是暂时没有发现从表格的数据创建形式的角度来具体分析的文章，另外结合近期的工作及项目，对“行添加”表格这种数据创建的形式有一些简单的心得与总结，故做此分享。
二、定义在工作项目和日常生活中，我们不难见到如下3种表格数据创建的形式：

文章插图

弹窗式：通常在表格上方有一个创建按钮。点击创建按钮后，在页面中间弹出维护信息，维护完毕关闭弹窗后，表格更新一行数据。
抽屉式：通常在右侧推出维护信息的面板，维护完毕后，表格更新数据。一般适用于频道切换维护各行数据的表格。
页面式：新开页面维护信息，一般采用这种形式是因为维护信息表单多且复杂，无法使用弹窗或抽屉面板来承载。

而另一种，今天我们要讨论的“行添加”式，指的是在点击创建后，直接会在表格上新增一空行来维护数据的表格：

文章插图
可以看出来，前面3种方式对于表格本身数据的展示和维护没有直接影响，因此没有来深入，这也是分享“行添加”式表格的一个原因。
三、特点在研究大量的“行添加”式表格后，发现其最大的特点是行列数据少，基本在个数内，没有筛选查找，通常存在于长表单中。
除了数据少的特点外，行添加表格如果从新数据添加位置的角度看还存在细分差别。通常根据业务需要，会对数据的排序进行要求，主要有以下3种：

文章插图
四、构成不论是“在最后一行添加”还是在“首行添加”，基本所有行添加形式的表格都由以下3个部分组成：

文章插图
其中关于添加图标，根据前面提到的ABC，3种新数据位置要求的不同而不同。并且点击添加后，通常要求自动在新行第一个维护单元格上获取焦点。

若为A在最后一行添加，则建议把添加按钮跟随在最后一行；
若为B在首行添加，则建议把添加按钮放在表格上左上角；
若为C在选定行下方添加，因为要在指定的行上，自然把添加图标放在行上，并且放在行的前面。

因为根据操作动线以及菲茨定律，添加按钮和新数据行越近，操作花费时间越短，就能保证操作效率和友好性。

文章插图
这里要插一句，其中“B在首行添加”的添加按钮与最开始说到的弹窗、抽屉、以及页面式的添加按钮位置一致，却没有后者点击按钮前后界面变化和视觉冲击强烈，如果一模一样。
用户预期以为会弹窗或打开页面，就会容易忽略新增的刚，十分不友好。建议要在文案或形式上区分，让用户形成习惯，看到这个按钮，就知道会弹窗或打开页面，看到那个按钮就知道是在表格上新增一行，保证符合用户预期。