編輯導(dǎo)語(yǔ)：在后臺(tái)作業(yè)系統(tǒng)中，良好的數(shù)據(jù)可以給人帶來(lái)不一樣的呈現(xiàn)方式，而表格在其中有著極其重要的作用。對(duì)此，作者對(duì)“行添加”表格分析進(jìn)行了一個(gè)總結(jié)，我們一起來(lái)看下吧。

在后臺(tái)作業(yè)系統(tǒng)中，針對(duì)“行添加”表格的分析與總結(jié)。

一、前言與背景

在后臺(tái)作業(yè)系統(tǒng)中，良好的數(shù)據(jù)呈現(xiàn)極其重要。俗話說(shuō)“文不如表”，表格在數(shù)據(jù)呈現(xiàn)方式中有著舉足輕重的地位。表格組件是后臺(tái)系統(tǒng)使用最為頻繁并且重要的組件。

當(dāng)前，已有很多設(shè)計(jì)師對(duì)表格組件進(jìn)行了深入的分析，從主流UI框架的選用，到表格檢索、查看、操作緯度的分析，較為全面：

《B端后臺(tái)表格（table）如何設(shè)計(jì)》

《B端體驗(yàn)設(shè)計(jì)專題-表格篇》

但是暫時(shí)沒(méi)有發(fā)現(xiàn)從表格的數(shù)據(jù)創(chuàng)建形式的角度來(lái)具體分析的文章，另外結(jié)合近期的工作及項(xiàng)目，對(duì)“行添加”表格這種數(shù)據(jù)創(chuàng)建的形式有一些簡(jiǎn)單的心得與總結(jié)，故做此分享。

二、定義

在工作項(xiàng)目和日常生活中，我們不難見(jiàn)到如下3種表格數(shù)據(jù)創(chuàng)建的形式：

• 彈窗式：通常在表格上方有一個(gè)創(chuàng)建按鈕。點(diǎn)擊創(chuàng)建按鈕后，在頁(yè)面中間彈出維護(hù)信息，維護(hù)完畢關(guān)閉彈窗后，表格更新一行數(shù)據(jù)。
• 抽屜式：通常在右側(cè)推出維護(hù)信息的面板，維護(hù)完畢后，表格更新數(shù)據(jù)。一般適用于頻道切換維護(hù)各行數(shù)據(jù)的表格。
• 頁(yè)面式：新開(kāi)頁(yè)面維護(hù)信息，一般采用這種形式是因?yàn)榫S護(hù)信息表單多且復(fù)雜，無(wú)法使用彈窗或抽屜面板來(lái)承載。

而另一種，今天我們要討論的“行添加”式，指的是在點(diǎn)擊創(chuàng)建后，直接會(huì)在表格上新增一空行來(lái)維護(hù)數(shù)據(jù)的表格：

可以看出來(lái)，前面3種方式對(duì)于表格本身數(shù)據(jù)的展示和維護(hù)沒(méi)有直接影響，因此沒(méi)有來(lái)深入，這也是分享“行添加”式表格的一個(gè)原因。

三、特點(diǎn)

在研究大量的“行添加”式表格后，發(fā)現(xiàn)其最大的特點(diǎn)是行列數(shù)據(jù)少，基本在個(gè)數(shù)內(nèi)，沒(méi)有篩選查找，通常存在于長(zhǎng)表單中。

除了數(shù)據(jù)少的特點(diǎn)外，行添加表格如果從新數(shù)據(jù)添加位置的角度看還存在細(xì)分差別。通常根據(jù)業(yè)務(wù)需要，會(huì)對(duì)數(shù)據(jù)的排序進(jìn)行要求，主要有以下3種：

四、構(gòu)成

不論是“在最后一行添加”還是在“首行添加”，基本所有行添加形式的表格都由以下3個(gè)部分組成：

其中關(guān)于添加圖標(biāo)，根據(jù)前面提到的ABC，3種新數(shù)據(jù)位置要求的不同而不同。并且點(diǎn)擊添加后，通常要求自動(dòng)在新行第一個(gè)維護(hù)單元格上獲取焦點(diǎn)。

• 若為A在最后一行添加，則建議把添加按鈕跟隨在最后一行；
• 若為B在首行添加，則建議把添加按鈕放在表格上左上角；
• 若為C在選定行下方添加，因?yàn)橐谥付ǖ男猩?，自然把添加圖標(biāo)放在行上，并且放在行的前面。

因?yàn)楦鶕?jù)操作動(dòng)線以及菲茨定律，添加按鈕和新數(shù)據(jù)行越近，操作花費(fèi)時(shí)間越短，就能保證操作效率和友好性。

這里要插一句，其中“B在首行添加”的添加按鈕與最開(kāi)始說(shuō)到的彈窗、抽屜、以及頁(yè)面式的添加按鈕位置一致，卻沒(méi)有后者點(diǎn)擊按鈕前后界面變化和視覺(jué)沖擊強(qiáng)烈，如果一模一樣。

用戶預(yù)期以為會(huì)彈窗或打開(kāi)頁(yè)面，就會(huì)容易忽略新增的剛，十分不友好。建議要在文案或形式上區(qū)分，讓用戶形成習(xí)慣，看到這個(gè)按鈕，就知道會(huì)彈窗或打開(kāi)頁(yè)面，看到那個(gè)按鈕就知道是在表格上新增一行，保證符合用戶預(yù)期。

五、其他問(wèn)題

1. 移除，添加的操作要不要放到操作列里？

首先，移除有個(gè)特點(diǎn)，行添加表格一般存在于長(zhǎng)表單中，并且數(shù)據(jù)少，移除按鈕點(diǎn)擊后會(huì)直接在界面上消失該行，不會(huì)有“是否確認(rèn)刪除”的二次確認(rèn)提示，因?yàn)樵邳c(diǎn)擊表單底部的保存按鈕后才算真正刪除。因而，移除和刪除是存在區(qū)別的。

另一方面，根據(jù)項(xiàng)目經(jīng)歷，有碰到不在長(zhǎng)表單里，并且已保存的數(shù)據(jù)行不允許刪除(通過(guò)失效字段控制)，也沒(méi)有其他操作的情況，把移除放到操作列，已保存的行操作列就是空的，為保持統(tǒng)一，因此建議放在表格外。

2. “C在選定行下方添加”的特殊場(chǎng)景

對(duì)于C在選定行下方添加的，因?yàn)樘砑釉诿恳恍猩?，而行可以移除，所以要考慮移除全部行的情況。一般為兩種方案：一是留一行空行；二是補(bǔ)充空狀態(tài)使其可以添加。

3. 是否可以都在首行添加，保存后再更新排序？

盡量保持保存前后一致會(huì)更加友好。

六、總結(jié)

行添加表格適用數(shù)據(jù)少，較為簡(jiǎn)單的表格。從新行添加位置來(lái)看主要有3種，我們需要根據(jù)實(shí)際項(xiàng)目情況全面考慮實(shí)現(xiàn)方式。

本文由 @阿喊設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash，基于CC0協(xié)議