品牌行銷策略，產品行銷與設計，各類型行銷推廣案例分享-品牌行銷點點讚
編輯導語：在后臺作業系統中，良好的數據可以給人帶來不一樣的呈現方式，而表格在其中有著極其重要的作用。對此，作者對“行添加”表格分析進行了一個總結，我們一起來看下吧。
在后臺作業系統中，針對“行添加”表格的分析與總結。
一、前言與背景
在后臺作業系統中，良好的數據呈現極其重要。俗話說“文不如表”，表格在數據呈現方式中有著舉足輕重的地位。表格組件是后臺系統使用最為頻繁并且重要的組件。
當前，已有很多設計師對表格組件進行了深入的分析，從主流UI框架的選用，到表格檢索、查看、操作緯度的分析，較為全面：
但是暫時沒有發現從表格的數據創建形式的角度來具體分析的文章，另外結合近期的工作及項目，對“行添加”表格這種數據創建的形式有一些簡單的心得與總結，故做此分享。
二、定義
在工作項目和日常生活中，我們不難見到如下3種表格數據創建的形式：
- 彈窗式：通常在表格上方有一個創建按鈕。點擊創建按鈕后，在頁面中間彈出維護信息，維護完畢關閉彈窗后，表格更新一行數據。
- 抽屜式：通常在右側推出維護信息的面板，維護完畢后，表格更新數據。一般適用于頻道切換維護各行數據的表格。
- 頁面式：新開頁面維護信息，一般采用這種形式是因為維護信息表單多且復雜，無法使用彈窗或抽屜面板來承載。
而另一種，今天我們要討論的“行添加”式，指的是在點擊創建后，直接會在表格上新增一空行來維護數據的表格：
可以看出來，前面3種方式對于表格本身數據的展示和維護沒有直接影響，因此沒有來深入，這也是分享“行添加”式表格的一個原因。
三、特點
在研究大量的“行添加”式表格后，發現其最大的特點是行列數據少，基本在個數內，沒有篩選查找，通常存在于長表單中。
除了數據少的特點外，行添加表格如果從新數據添加位置的角度看還存在細分差別。通常根據業務需要，會對數據的排序進行要求，主要有以下3種：
四、構成
不論是“在最后一行添加”還是在“首行添加”，基本所有行添加形式的表格都由以下3個部分組成：
其中關于添加圖標，根據前面提到的ABC，3種新數據位置要求的不同而不同。并且點擊添加后，通常要求自動在新行第一個維護單元格上獲取焦點。
- 若為A在最后一行添加，則建議把添加按鈕跟隨在最后一行；
- 若為B在首行添加，則建議把添加按鈕放在表格上左上角；
- 若為C在選定行下方添加，因為要在指定的行上，自然把添加圖標放在行上，并且放在行的前面。
因為根據操作動線以及菲茨定律，添加按鈕和新數據行越近，操作花費時間越短，就能保證操作效率和友好性。
這里要插一句，其中“B在首行添加”的添加按鈕與最開始說到的彈窗、抽屜、以及頁面式的添加按鈕位置一致，卻沒有后者點擊按鈕前后界面變化和視覺沖擊強烈，如果一模一樣。
用戶預期以為會彈窗或打開頁面，就會容易忽略新增的剛，十分不友好。建議要在文案或形式上區分，讓用戶形成習慣，看到這個按鈕，就知道會彈窗或打開頁面，看到那個按鈕就知道是在表格上新增一行，保證符合用戶預期。
五、其他問題
1. 移除，添加的操作要不要放到操作列里？
首先，移除有個特點，行添加表格一般存在于長表單中，并且數據少，移除按鈕點擊后會直接在界面上消失該行，不會有“是否確認刪除”的二次確認提示，因為在點擊表單底部的保存按鈕后才算真正刪除。因而，移除和刪除是存在區別的。
另一方面，根據項目經歷，有碰到不在長表單里，并且已保存的數據行不允許刪除(通過失效字段控制)，也沒有其他操作的情況，把移除放到操作列，已保存的行操作列就是空的，為保持統一，因此建議放在表格外。
2. “C在選定行下方添加”的特殊場景
對于C在選定行下方添加的，因為添加在每一行上，而行可以移除，所以要考慮移除全部行的情況。一般為兩種方案：一是留一行空行；二是補充空狀態使其可以添加。
3. 是否可以都在首行添加，保存后再更新排序？
盡量保持保存前后一致會更加友好。
六、總結
行添加表格適用數據少，較為簡單的表格。從新行添加位置來看主要有3種，我們需要根據實際項目情況全面考慮實現方式。
本文由 @阿喊設計 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash，基于CC0協議