編輯導語：在後台作業系統中，良好的數據可以給人帶來不一樣的呈現方式，而表格在其中有着極其重要的作用。對此，作者對“行添加”表格分析進行了一個總結，我們一起來看下吧。

在後台作業系統中，針對“行添加”表格的分析與總結。

一、前言與背景

在後台作業系統中，良好的數據呈現極其重要。俗話說“文不如表”，表格在數據呈現方式中有着舉足輕重的地位。表格組件是後台系統使用最為頻繁并且重要的組件。

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

《B端後台表格（table）如何設計》

《B端體驗設計專題-表格篇》

但是暫時沒有發現從表格的數據創建形式的角度來具體分析的文章，另外結合近期的工作及項目，對“行添加”表格這種數據創建的形式有一些簡單的心得與總結，故做此分享。

二、定義

在工作項目和日常生活中，我們不難見到如下3種表格數據創建的形式：

• 彈窗式：通常在表格上方有一個創建按鈕。點擊創建按鈕後，在頁面中間彈出維護信息，維護完畢關閉彈窗後，表格更新一行數據。
• 抽屜式：通常在右側推出維護信息的面闆，維護完畢後，表格更新數據。一般适用于頻道切換維護各行數據的表格。
• 頁面式：新開頁面維護信息，一般采用這種形式是因為維護信息表單多且複雜，無法使用彈窗或抽屜面闆來承載。

而另一種，今天我們要讨論的“行添加”式，指的是在點擊創建後，直接會在表格上新增一空行來維護數據的表格：

可以看出來，前面3種方式對于表格本身數據的展示和維護沒有直接影響，因此沒有來深入，這也是分享“行添加”式表格的一個原因。

三、特點

在研究大量的“行添加”式表格後，發現其最大的特點是行列數據少，基本在個數内，沒有篩選查找，通常存在于長表單中。

除了數據少的特點外，行添加表格如果從新數據添加位置的角度看還存在細分差别。通常根據業務需要，會對數據的排序進行要求，主要有以下3種：

四、構成

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

其中關于添加圖标，根據前面提到的ABC，3種新數據位置要求的不同而不同。并且點擊添加後，通常要求自動在新行第一個維護單元格上獲取焦點。

• 若為A在最後一行添加，則建議把添加按鈕跟随在最後一行；
• 若為B在首行添加，則建議把添加按鈕放在表格上左上角；
• 若為C在選定行下方添加，因為要在指定的行上，自然把添加圖标放在行上，并且放在行的前面。

因為根據操作動線以及菲茨定律，添加按鈕和新數據行越近，操作花費時間越短，就能保證操作效率和友好性。

這裡要插一句，其中“B在首行添加”的添加按鈕與最開始說到的彈窗、抽屜、以及頁面式的添加按鈕位置一緻，卻沒有後者點擊按鈕前後界面變化和視覺沖擊強烈，如果一模一樣。

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

五、其他問題

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

首先，移除有個特點，行添加表格一般存在于長表單中，并且數據少，移除按鈕點擊後會直接在界面上消失該行，不會有“是否确認删除”的二次确認提示，因為在點擊表單底部的保存按鈕後才算真正删除。因而，移除和删除是存在區别的。

另一方面，根據項目經曆，有碰到不在長表單裡，并且已保存的數據行不允許删除(通過失效字段控制)，也沒有其他操作的情況，把移除放到操作列，已保存的行操作列就是空的，為保持統一，因此建議放在表格外。

2. “C在選定行下方添加”的特殊場景

對于C在選定行下方添加的，因為添加在每一行上，而行可以移除，所以要考慮移除全部行的情況。一般為兩種方案：一是留一行空行；二是補充空狀态使其可以添加。

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

盡量保持保存前後一緻會更加友好。

六、總結

行添加表格适用數據少，較為簡單的表格。從新行添加位置來看主要有3種，我們需要根據實際項目情況全面考慮實現方式。

本文由 @阿喊設計 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部