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

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

弹窗式:通常在表格上方有一个创建按钮 。点击创建按钮后,在页面中间弹出维护信息,维护完毕关闭弹窗后,表格更新一行数据 。抽屉式:通常在右侧推出维护信息的面板,维护完毕后,表格更新数据 。一般适用于频道切换维护各行数据的表格 。页面式:新开页面维护信息,一般采用这种形式是因为维护信息表单多且复杂,无法使用弹窗或抽屉面板来承载 。
而另一种,今天我们要讨论的“行添加”式,指的是在点击创建后,直接会在表格上新增一空行来维护数据的表格:

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

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

其中关于添加图标,根据前面提到的ABC,3种新数据位置要求的不同而不同 。并且点击添加后,通常要求自动在新行第一个维护单元格上获取焦点 。
若为A在最后一行添加,则建议把添加按钮跟随在最后一行;若为B在首行添加,则建议把添加按钮放在表格上左上角;若为C在选定行下方添加,因为要在指定的行上,自然把添加图标放在行上,并且放在行的前面 。
因为根据操作动线以及菲茨定律,添加按钮和新数据行越近,操作花费时间越短,就能保证操作效率和友好性 。

这里要插一句,其中“B在首行添加”的添加按钮与最开始说到的弹窗、抽屉、以及页面式的添加按钮位置一致,却没有后者点击按钮前后界面变化和视觉冲击强烈,如果一模一样 。
推荐阅读
- 茶香羊肉怎么做 茶香羊肉的做法
- 丽珠兰搭配什么效果好-丽珠兰眼部白盒怎么打
- 做腊香肠的方法 怎么做香肠
- 红豆粥怎么做啊 红豆粥做法介绍
- 乳胶枕含量80好不好-怎么鉴别乳胶枕是不是真的乳胶
- 纯肉虾丸怎么做 做虾丸的步骤
- 菜花板栗怎么做 菜花板栗怎么做好吃
- 怎么做小虾饼吃 小虾饼做法步骤
- 茯苓粥如何做 怎么制作茯苓粥
- 燕麦素肠怎么做 燕麦素肠的做法
