上一篇《2B產品設計套路一：表單設計》總結了“增刪改查顯”中的“增”和“改”對應的表單設計，這一篇繼續講講“查”和“顯”。
我們可以通過數據統計、表格、詳情頁配合篩選、搜索實現查和顯的操作，達到從不同維度向用戶輸出的目的。
從數據的概括程度看：數據統計>表格>詳情頁。數據統計（或者叫dashboard、態勢展示）對數據的抽象程度最高、最概括，一般是對數據整體情況的概覽；其次是表格展現，可以逐條展示數據，顯示重要的信息，但是一般受限於屏幕大小，只能展示10個左右字段；最詳細的是數據詳情頁，可以詳細的展現某一實例相關的所有信息。
數據統計頁
數據表格頁
數據詳情頁
1. 表格&表格頁
表格是表格頁的主體，是展現數據的有效組織形式，可以展現大量的、比較詳細的數據。表格天然是結構化的形式，所以在展示結構化數據的時候，很自然的我們會想到用表格的形式。
表格頁包含了更豐富的元素，像樞紐站一樣，可以提供通往各個功能的入口，通過【新增】按鈕可以到達“增”功能的表單，通過【修改】/【編輯】按鈕可以額到達“改”功能的表單，通過【刪除】可以實現“刪”功能，其他按鈕也可以作為各式各樣的業務功能的入口。
所以在表格頁中，表格是展示的主體，配合一些按鈕就可以實現數據的增刪改查顯功能，從而實現數據的閉環。
2. 表格頁的組成
表格頁主要包括表格、搜索欄、操作欄以及分頁欄四個部分。
表格主要包括表頭和表體，表頭除了說明每列數據的內容外，還可以包含篩選、排序功能。
表體按列可以分為多選列、數據列、操作列，如果表格數據需要批量操作，就得通過多選框複選數據，所以需要一列專門展示選擇框；數據列則完全是根據業務展現需要的信息；操作列主要是顯示針對單行數據的操作按鈕，比如查看詳情、編輯信息等。
搜索欄的作用主要是方便用戶在大量的數據中精確地查找到自己想要的數據，是表格好伴侶。
一般搜索對流程是用戶輸入查詢條件，然後觸發搜索，表格刷新，只顯示符合查詢條件的數據。搜索欄可以是簡單的關鍵詞輸入框（只能實現單字段搜索或者模糊搜索），也可以提供多字段聯合搜索功能（包括下拉框選擇字段+關鍵詞輸入框），也可以是高級搜索（針對搜索和篩選混合使用），但在這裡我們暫不展開討論搜索功能。
操作欄一般是多個按鈕組成的，比如說常見的【新增】按鈕和各種批量操作按鈕。通過【新增】按鈕打開新增表單，實現向表格增加一條數據。批量操作一般是業務功能，根據需求我們也可以把【刪除】作為一種批量操作。
分頁是一次只展示少量的數據（十幾到幾十條），目的是防止數據量大的情況下瀏覽器響應太慢或者瀏覽器內存溢出，但分頁也會造成篩選、排序、多選時候的一些坑，後邊會詳細總結。
下邊圍繞幾個主題總結下我在設計表格頁時候遇到的一些問題。
3. 兩個操作欄
細心的小讀者會發現，一個表格頁其實包括了兩個操作區：一個在表格外，一個在表格內，那麼很自然的我們會遇到一個問題，一個功能該放在哪呢？
習慣上我們會認為一行數據是對某一個對象實例的描述，比如在學生信息表格中，一行數據是對某個學生sam的描述，包括他的姓名、年齡、性別、成績等等。所以表格內的操作也是針對某個對象實例的。
一般我會把一次只能針對一個對象操作的功能放在表格內，比如【查看詳情】和【編輯】，因為查看詳情不太可能一次查看多個對象，編輯修改信息也是
那麼反過來，不屬於任何一個對象實例的功能就需要放在表格外的操作欄，比如說【新增】。另外一種需要放在表格外的功能是批量操作，因為批量操作需要對多行數據進行同時操作，也不是屬於單個對象實例的。
一個反例
這個栗子中，就是把本來是隻能單個數據操作的功能【修改】放在了表格外，首先會造成功能的操作步驟變多（如果放在表內的操作列中該功能的步驟是1，放在表外操作步驟變為了3），其次還要處理如果用戶多選數據後再點擊【修改】的邏輯。
刪除功能究竟該放在哪？
不知道大家有沒有想過這個問題，我剛開始當pm時候這個問題困擾了我好久。刪除可以作為行內操作（我們暫時把這種叫做單個刪除），優點是更便捷。也可以放在表外作為是批量操作（暫時叫做批量刪除），這樣更方便的同時刪除多個數據，但如果只刪除一個數據時就會增加用戶的操作步驟。或者兩種方式都提供，雖然更靈活但是會讓頁面比較冗餘。
單個刪除
批量刪除
單個刪除+批量刪除
其實怎麼選擇還是要根據具體業務場景來決定，首先判斷用戶批量刪除是不是高頻功能，如果是，顯然只有單個刪除功能就不能滿足需求；如果刪除是低頻操作，那麼完全可以只提供單個刪除功能。
我一般不會在頁面中同時提供單個刪除和批量刪除，畢竟相對業務功能來說，刪除本來就相對低頻，我們應該把更多的空間留給用戶每天都要用到的功能。
4. 篩選和排序
我覺得篩選和排序對錶格來說甚至比搜索更重要，因為用戶對數據的查找可能沒有達到搜索那麼精確，篩選和排序可以幫助他們縮小範圍以找到他們需要的數據。（就像表單輸入時選擇要好於輸入，給用戶幾個選項要比讓他們自己思考好一些）
那麼設計功能時就要確定哪些字段需要被篩選和排序。一個簡單粗暴的解決方案是給所有字段都加上篩選、排序，但這樣表頭看起來就會非常亂。
有幾種改進方案：
- 一是隻保留重要的那些字段的篩選排序功能，但這樣很考驗pm對業務的理解，如果一些用戶關心的字段沒有篩選和排序功能可能會被吐槽。
- 二是在默認模式時候隱藏篩選和排序的按鈕，通過表格外的按鈕觸發顯示，這樣會犧牲一點用戶體驗，讓操作步驟+1。
- 三是如果你的產品恰好設計了“高級搜索”功能，可以把篩選功能放在高級搜索裡，表頭只留排序按鈕。
5. 分頁造成的影響
前邊我們講了分頁帶來的好處，頁面不用一次加載出全部數據，加快了頁面的響應速度，這在數據量大時是非常要必要的。但分頁也帶來了一些坑，因為瀏覽器前端拿到的數據只是當前頁的，而不是全量數據，這就可能會對篩選、排序、多選功能產生影響。
有時篩選和排序是前端來實現的，這時只能對當前頁的數據進行篩選或排序。但我們或者用戶想要的效果往往是全局數據的篩選或排序，所以和RD溝通時候務必向他們說明你想要的效果。
類似的，多選時如果用戶在第1頁選中了一些數據，然後翻到第2頁繼續選擇，我們要考慮第1頁選擇的數據是不是應該被保留（多數情況下我覺得是應該的），如果是，確保RD小哥哥明白這一點，否則結果很可能不是你想要的（別問我怎麼知道的）。
6. 友好的表格
對齊
這裡對齊主要指表格的每列數據的對齊，對齊方式有左對齊、右對齊和居中三種，數據類型可以分為文本、數字和標籤三種。不同的數據使用恰當的對齊方式可以幫助用戶更方便、快速的理解數據。
一般的對齊處理方式：文本使用左對齊，數字右對齊，標籤、按鈕、序號等居中。因為我們的閱讀習慣是從左到右，文本左對齊可以利用用戶的視覺流提高閱讀效率，這和表單標籤的對齊原則是一樣的。數字右對齊是因為在小數點保存相同位數的情況下，用戶可以通過數字的長短來判斷大小，更加直觀、效率更高。
缺失數據顯示
當頁面上沒有顯示出來一個數據的時候，有兩種情況：一是數據庫中沒有存儲，二是由於各種錯誤數據無法加載。如果我們不加以區分，用戶是無法判斷是哪一種情況造成沒有數據的，所以友好的表格應該將兩者區分開，我們通常會將數據庫中沒有數據的字段顯示為’-’
固定行列
在數據行、列較多的情況下，表格需要滾動才能看到被隱藏的數據。但滾動時有一些重要的信息會被隱藏掉，比如表頭、名稱列、操作列，這樣用戶就可能會發出我是誰，我在哪，我在看什麼的疑問三連。
作為友好的表格，我們需要保證在不論在什麼情況下，用戶都能輕易的定位到自己所在的位置，完整自己想做的操作，一個有效的方法就是把重要的信息固定下來，不要讓它們隨著表格滾動。
新增數據的處理
新增一條數據後，這條數據應該被放在表格的哪裡呢？
這是個和表格默認排序有關的問題，表格數據應該默認按添加的時間排序，還是應該按某個字段的名稱排序？
如果我們默認按某個字段排序，比方說資產名稱，當增加一條新數據後它會被插入到表格中相應的位置，比如增加的數據的資產名稱叫“飲水機”，它會被插入到首字母y的數據附近，而首字母y的數據很可能不在所有數據的靠前位置。
這時就會出現一個問題，用戶要在茫茫數據中找到剛增加的那一條數據，或者用戶根本不知道自己增加的數據已經被插入在了表格裡了，這會讓他們覺得自己的操作失敗了。解決這個問題的一個方法就是按照數據添加時間默認排序，這樣新增的數據會出現在表格的第一條，用戶很容易就能發現它。
導入導出
導入導出也是友好表格的一種常見的輔助功能，核心是“批量”的思想。
導入主要是指從excel表格批量導入數據至軟件，我覺得導入功能很多情況下是很必要的：
一是因為2B業務中數據量真的很大，有時候用戶需要一下增加幾十幾百條數據，一條一條錄入很快就會讓人想砸鍵盤，從excel導入數據是個可行的解決方案；
二是2B業務涉及到歷史數據的導入，如果用戶之前沒有用信息化軟件管理的話，那麼他們的數據多半存在excel表格中，如果直接能把歷史數據導入新軟件，用戶會對產品有個不錯的印象。
導出數據主要是為了方便和其他軟件、系統的數據交互，以及滿足用戶報告、存檔等需求。導出數據可以是excel文件，也可以是根據需求定義的其他格式。我也遇到過根據數據生成word報告的需求，雖然不是通用需求，但是的確幫用戶解決了問題。
儘量使用已有樣式
我想說的最後一點：2B產品應該著眼於業務，對產品的表現層要求其實不高，為了提升開發效率，我們在設計產品時最好儘量採用團隊正在使用的樣式庫中已有的樣式（常見的elementUI、antDesign組件庫中的表格組件已經很全面了，可以滿足80%的需求），這樣可以大大的縮短開發週期、提高開發效率。
題圖來自Unsplash，基於CC0協議。
閱讀更多 人人都是產品經理 的文章
