上一篇《2B產(chǎn)品設(shè)計套路一：表單設(shè)計》總結(jié)了“增刪改查顯”中的“增”和“改”對應(yīng)的表單設(shè)計，這一篇繼續(xù)講講“查”和“顯”。

我們可以通過數(shù)據(jù)統(tǒng)計、表格、詳情頁配合篩選、搜索實現(xiàn)查和顯的操作，達到從不同維度向用戶輸出的目的。

從數(shù)據(jù)的概括程度看：數(shù)據(jù)統(tǒng)計>表格>詳情頁。數(shù)據(jù)統(tǒng)計（或者叫dashboard、態(tài)勢展示）對數(shù)據(jù)的抽象程度最高、最概括，一般是對數(shù)據(jù)整體情況的概覽；其次是表格展現(xiàn)，可以逐條展示數(shù)據(jù)，顯示重要的信息，但是一般受限于屏幕大小，只能展示10個左右字段；最詳細的是數(shù)據(jù)詳情頁，可以詳細的展現(xiàn)某一實例相關(guān)的所有信息。

數(shù)據(jù)統(tǒng)計頁

數(shù)據(jù)表格頁

數(shù)據(jù)詳情頁

1. 表格&表格頁

表格是表格頁的主體，是展現(xiàn)數(shù)據(jù)的有效組織形式，可以展現(xiàn)大量的、比較詳細的數(shù)據(jù)。表格天然是結(jié)構(gòu)化的形式，所以在展示結(jié)構(gòu)化數(shù)據(jù)的時候，很自然的我們會想到用表格的形式。

表格頁包含了更豐富的元素，像樞紐站一樣，可以提供通往各個功能的入口，通過【新增】按鈕可以到達“增”功能的表單，通過【修改】/【編輯】按鈕可以額到達“改”功能的表單，通過【刪除】可以實現(xiàn)“刪”功能，其他按鈕也可以作為各式各樣的業(yè)務(wù)功能的入口。

所以在表格頁中，表格是展示的主體，配合一些按鈕就可以實現(xiàn)數(shù)據(jù)的增刪改查顯功能，從而實現(xiàn)數(shù)據(jù)的閉環(huán)。

2. 表格頁的組成

表格頁主要包括表格、搜索欄、操作欄以及分頁欄四個部分。

表格主要包括表頭和表體，表頭除了說明每列數(shù)據(jù)的內(nèi)容外，還可以包含篩選、排序功能。

表體按列可以分為多選列、數(shù)據(jù)列、操作列，如果表格數(shù)據(jù)需要批量操作，就得通過多選框復(fù)選數(shù)據(jù)，所以需要一列專門展示選擇框；數(shù)據(jù)列則完全是根據(jù)業(yè)務(wù)展現(xiàn)需要的信息；操作列主要是顯示針對單行數(shù)據(jù)的操作按鈕，比如查看詳情、編輯信息等。

搜索欄的作用主要是方便用戶在大量的數(shù)據(jù)中精確地查找到自己想要的數(shù)據(jù)，是表格好伴侶。

一般搜索對流程是用戶輸入查詢條件，然后觸發(fā)搜索，表格刷新，只顯示符合查詢條件的數(shù)據(jù)。搜索欄可以是簡單的關(guān)鍵詞輸入框（只能實現(xiàn)單字段搜索或者模糊搜索），也可以提供多字段聯(lián)合搜索功能（包括下拉框選擇字段+關(guān)鍵詞輸入框），也可以是高級搜索（針對搜索和篩選混合使用），但在這里我們暫不展開討論搜索功能。

操作欄一般是多個按鈕組成的，比如說常見的【新增】按鈕和各種批量操作按鈕。通過【新增】按鈕打開新增表單，實現(xiàn)向表格增加一條數(shù)據(jù)。批量操作一般是業(yè)務(wù)功能，根據(jù)需求我們也可以把【刪除】作為一種批量操作。

分頁是一次只展示少量的數(shù)據(jù)（十幾到幾十條），目的是防止數(shù)據(jù)量大的情況下瀏覽器響應(yīng)太慢或者瀏覽器內(nèi)存溢出，但分頁也會造成篩選、排序、多選時候的一些坑，后邊會詳細總結(jié)。

下邊圍繞幾個主題總結(jié)下我在設(shè)計表格頁時候遇到的一些問題。

3. 兩個操作欄

細心的小讀者會發(fā)現(xiàn)，一個表格頁其實包括了兩個操作區(qū)：一個在表格外，一個在表格內(nèi)，那么很自然的我們會遇到一個問題，一個功能該放在哪呢？

習(xí)慣上我們會認為一行數(shù)據(jù)是對某一個對象實例的描述，比如在學(xué)生信息表格中，一行數(shù)據(jù)是對某個學(xué)生sam的描述，包括他的姓名、年齡、性別、成績等等。所以表格內(nèi)的操作也是針對某個對象實例的。

一般我會把一次只能針對一個對象操作的功能放在表格內(nèi)，比如【查看詳情】和【編輯】，因為查看詳情不太可能一次查看多個對象，編輯修改信息也是

那么反過來，不屬于任何一個對象實例的功能就需要放在表格外的操作欄，比如說【新增】。另外一種需要放在表格外的功能是批量操作，因為批量操作需要對多行數(shù)據(jù)進行同時操作，也不是屬于單個對象實例的。

一個反例

這個栗子中，就是把本來是只能單個數(shù)據(jù)操作的功能【修改】放在了表格外，首先會造成功能的操作步驟變多（如果放在表內(nèi)的操作列中該功能的步驟是1，放在表外操作步驟變?yōu)榱?），其次還要處理如果用戶多選數(shù)據(jù)后再點擊【修改】的邏輯。

刪除功能究竟該放在哪？

不知道大家有沒有想過這個問題，我剛開始當pm時候這個問題困擾了我好久。刪除可以作為行內(nèi)操作（我們暫時把這種叫做單個刪除），優(yōu)點是更便捷。也可以放在表外作為是批量操作（暫時叫做批量刪除），這樣更方便的同時刪除多個數(shù)據(jù)，但如果只刪除一個數(shù)據(jù)時就會增加用戶的操作步驟?；蛘邇煞N方式都提供，雖然更靈活但是會讓頁面比較冗余。

單個刪除

批量刪除

單個刪除+批量刪除

其實怎么選擇還是要根據(jù)具體業(yè)務(wù)場景來決定，首先判斷用戶批量刪除是不是高頻功能，如果是，顯然只有單個刪除功能就不能滿足需求；如果刪除是低頻操作，那么完全可以只提供單個刪除功能。

我一般不會在頁面中同時提供單個刪除和批量刪除，畢竟相對業(yè)務(wù)功能來說，刪除本來就相對低頻，我們應(yīng)該把更多的空間留給用戶每天都要用到的功能。

4. 篩選和排序

我覺得篩選和排序?qū)Ρ砀駚碚f甚至比搜索更重要，因為用戶對數(shù)據(jù)的查找可能沒有達到搜索那么精確，篩選和排序可以幫助他們縮小范圍以找到他們需要的數(shù)據(jù)。（就像表單輸入時選擇要好于輸入，給用戶幾個選項要比讓他們自己思考好一些）

那么設(shè)計功能時就要確定哪些字段需要被篩選和排序。一個簡單粗暴的解決方案是給所有字段都加上篩選、排序，但這樣表頭看起來就會非常亂。

有幾種改進方案：

• 一是只保留重要的那些字段的篩選排序功能，但這樣很考驗pm對業(yè)務(wù)的理解，如果一些用戶關(guān)心的字段沒有篩選和排序功能可能會被吐槽。
• 二是在默認模式時候隱藏篩選和排序的按鈕，通過表格外的按鈕觸發(fā)顯示，這樣會犧牲一點用戶體驗，讓操作步驟+1。

• 三是如果你的產(chǎn)品恰好設(shè)計了“高級搜索”功能，可以把篩選功能放在高級搜索里，表頭只留排序按鈕。

5. 分頁造成的影響

前邊我們講了分頁帶來的好處，頁面不用一次加載出全部數(shù)據(jù)，加快了頁面的響應(yīng)速度，這在數(shù)據(jù)量大時是非常要必要的。但分頁也帶來了一些坑，因為瀏覽器前端拿到的數(shù)據(jù)只是當前頁的，而不是全量數(shù)據(jù)，這就可能會對篩選、排序、多選功能產(chǎn)生影響。

有時篩選和排序是前端來實現(xiàn)的，這時只能對當前頁的數(shù)據(jù)進行篩選或排序。但我們或者用戶想要的效果往往是全局數(shù)據(jù)的篩選或排序，所以和RD溝通時候務(wù)必向他們說明你想要的效果。

類似的，多選時如果用戶在第1頁選中了一些數(shù)據(jù)，然后翻到第2頁繼續(xù)選擇，我們要考慮第1頁選擇的數(shù)據(jù)是不是應(yīng)該被保留（多數(shù)情況下我覺得是應(yīng)該的），如果是，確保RD小哥哥明白這一點，否則結(jié)果很可能不是你想要的（別問我怎么知道的）。

6. 友好的表格

對齊

這里對齊主要指表格的每列數(shù)據(jù)的對齊，對齊方式有左對齊、右對齊和居中三種，數(shù)據(jù)類型可以分為文本、數(shù)字和標簽三種。不同的數(shù)據(jù)使用恰當?shù)膶R方式可以幫助用戶更方便、快速的理解數(shù)據(jù)。

一般的對齊處理方式：文本使用左對齊，數(shù)字右對齊，標簽、按鈕、序號等居中。因為我們的閱讀習(xí)慣是從左到右，文本左對齊可以利用用戶的視覺流提高閱讀效率，這和表單標簽的對齊原則是一樣的。數(shù)字右對齊是因為在小數(shù)點保存相同位數(shù)的情況下，用戶可以通過數(shù)字的長短來判斷大小，更加直觀、效率更高。

缺失數(shù)據(jù)顯示

當頁面上沒有顯示出來一個數(shù)據(jù)的時候，有兩種情況：一是數(shù)據(jù)庫中沒有存儲，二是由于各種錯誤數(shù)據(jù)無法加載。如果我們不加以區(qū)分，用戶是無法判斷是哪一種情況造成沒有數(shù)據(jù)的，所以友好的表格應(yīng)該將兩者區(qū)分開，我們通常會將數(shù)據(jù)庫中沒有數(shù)據(jù)的字段顯示為’-’

固定行列

在數(shù)據(jù)行、列較多的情況下，表格需要滾動才能看到被隱藏的數(shù)據(jù)。但滾動時有一些重要的信息會被隱藏掉，比如表頭、名稱列、操作列，這樣用戶就可能會發(fā)出我是誰，我在哪，我在看什么的疑問三連。

作為友好的表格，我們需要保證在不論在什么情況下，用戶都能輕易的定位到自己所在的位置，完整自己想做的操作，一個有效的方法就是把重要的信息固定下來，不要讓它們隨著表格滾動。

新增數(shù)據(jù)的處理

新增一條數(shù)據(jù)后，這條數(shù)據(jù)應(yīng)該被放在表格的哪里呢？

這是個和表格默認排序有關(guān)的問題，表格數(shù)據(jù)應(yīng)該默認按添加的時間排序，還是應(yīng)該按某個字段的名稱排序？

如果我們默認按某個字段排序，比方說資產(chǎn)名稱，當增加一條新數(shù)據(jù)后它會被插入到表格中相應(yīng)的位置，比如增加的數(shù)據(jù)的資產(chǎn)名稱叫“飲水機”，它會被插入到首字母y的數(shù)據(jù)附近，而首字母y的數(shù)據(jù)很可能不在所有數(shù)據(jù)的靠前位置。

這時就會出現(xiàn)一個問題，用戶要在茫茫數(shù)據(jù)中找到剛增加的那一條數(shù)據(jù)，或者用戶根本不知道自己增加的數(shù)據(jù)已經(jīng)被插入在了表格里了，這會讓他們覺得自己的操作失敗了。解決這個問題的一個方法就是按照數(shù)據(jù)添加時間默認排序，這樣新增的數(shù)據(jù)會出現(xiàn)在表格的第一條，用戶很容易就能發(fā)現(xiàn)它。

導(dǎo)入導(dǎo)出

導(dǎo)入導(dǎo)出也是友好表格的一種常見的輔助功能，核心是“批量”的思想。

導(dǎo)入主要是指從excel表格批量導(dǎo)入數(shù)據(jù)至軟件，我覺得導(dǎo)入功能很多情況下是很必要的：

一是因為2B業(yè)務(wù)中數(shù)據(jù)量真的很大，有時候用戶需要一下增加幾十幾百條數(shù)據(jù)，一條一條錄入很快就會讓人想砸鍵盤，從excel導(dǎo)入數(shù)據(jù)是個可行的解決方案；

二是2B業(yè)務(wù)涉及到歷史數(shù)據(jù)的導(dǎo)入，如果用戶之前沒有用信息化軟件管理的話，那么他們的數(shù)據(jù)多半存在excel表格中，如果直接能把歷史數(shù)據(jù)導(dǎo)入新軟件，用戶會對產(chǎn)品有個不錯的印象。

導(dǎo)出數(shù)據(jù)主要是為了方便和其他軟件、系統(tǒng)的數(shù)據(jù)交互，以及滿足用戶報告、存檔等需求。導(dǎo)出數(shù)據(jù)可以是excel文件，也可以是根據(jù)需求定義的其他格式。我也遇到過根據(jù)數(shù)據(jù)生成word報告的需求，雖然不是通用需求，但是的確幫用戶解決了問題。

盡量使用已有樣式

我想說的最后一點：2B產(chǎn)品應(yīng)該著眼于業(yè)務(wù)，對產(chǎn)品的表現(xiàn)層要求其實不高，為了提升開發(fā)效率，我們在設(shè)計產(chǎn)品時最好盡量采用團隊正在使用的樣式庫中已有的樣式（常見的elementUI、antDesign組件庫中的表格組件已經(jīng)很全面了，可以滿足80%的需求），這樣可以大大的縮短開發(fā)周期、提高開發(fā)效率。

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

題圖來自Unsplash，基于CC0協(xié)議。