在后臺系統(tǒng)中，經(jīng)常有對某類數(shù)據(jù)進行查看、批量操作的需求，如：對還未上架的課程進行審核、審核通過后進行批量上架操作。

假設王老師要審核語文學科的課程，審核時會關注課程的名稱、年份、學期、課程類型、版本、難度是否是正確的；若正確，則進行上架操作。

如果數(shù)據(jù)分散，且沒有批量操作的功能，那么試想一下王老師會如何操作呢？

如果操作一個課程，需要 1 分鐘，那么操作 30 節(jié)課，就需要 30 分鐘。

如果你是王老師，你可能就要瘋掉了，那如何通過產(chǎn)品方式提高王老師效率呢？

王老師問題的本質，是缺少批量上架的功能，而批量上架的前提，是將所有數(shù)據(jù)按照一定規(guī)則以列表形式有序地展示出來。

因此，列表的使用可以一定程度上提高工作效率。

在后臺系統(tǒng)中，最常見的數(shù)據(jù)展示方式就是列表，那如何設計一個后臺系統(tǒng)的列表呢？

列表通常有三大部分：數(shù)據(jù)查詢、批量操作、數(shù)據(jù)展示。

一、數(shù)據(jù)查詢

在后臺系統(tǒng)中，用戶會希望高效地查找到某條或某類數(shù)據(jù)，如上述王老師審核課程，就需要高效定位到語文學科的課程；列表中的數(shù)據(jù)查詢功能就解決了用戶定向查找某類數(shù)據(jù)效率低的問題。

列表中的數(shù)據(jù)查詢一般通過搜索框、篩選項等實現(xiàn)。

1. 搜索框

搜索框解決了用戶定向查找某條數(shù)據(jù)的需求，比如王老師要找到2020年秋季三年級小A老師語文尖子班，那最快捷的方法就是能直接搜索該課程，出現(xiàn)目標結果。

搜索框一般是輸入具體字段，點擊搜索或回車后，直接定位到某個/某類數(shù)據(jù)。

搜索的規(guī)則有兩種：精準搜索和模糊搜索——精準搜索是根據(jù)輸入的條件，精準地搜索到某條完全匹配的數(shù)據(jù)；模糊搜索則是指查詢到所有包含輸入條件的數(shù)據(jù)。

如電商后臺系統(tǒng)中的搜索框、輸入商品編號、查到某件商品；老師后臺系統(tǒng)中的搜索框、輸入學員姓名、查到某位學員等。

如下圖是微信公眾號的后臺系統(tǒng)——用戶管理模塊，搜索框支持搜索用戶昵稱，以快速定位到某位用戶。

試想沒有定向搜索的功能的話，要找到一條數(shù)據(jù)，只能通過對每一條進行翻找，如果列表中有50條數(shù)據(jù)，一條條數(shù)據(jù)進行查看的話，要找到某條數(shù)據(jù)可能要花30秒的時間；而通過定向搜索只需要3秒時間。

（示例來自：微信公眾平臺）

2. 篩選項

篩選項是通過系統(tǒng)已有的搜索條件快速搜索某類符合該條件結果的功能，如淘寶網(wǎng)首頁的導航欄，就是一個個篩選項。

篩選項解決了用戶查找某類有共同特性數(shù)據(jù)的需求，比如王老師要查找三年級語文周六 9:00 ~ 11:00 的課，那么就可以通過篩選項，分別選出以上條件；點擊搜索，直接搜索出三年級語文周六上午 9:00 ~ 11:00 所有的課程。

篩選項分為單級篩選、級聯(lián)篩選、日期/時間選擇器等。

如下圖，分別是三種篩選類型的示例：

（示例來自：Ant Design Vue）

了解了三種類型的篩選形式之后，我們還需要知道，每個篩選項的篩選方式又會分為：單選、多選。

單選：給定固定幾個篩選條件，用戶一次只能選擇一個篩選條件；單選條件下，篩選結果符合該篩選條件，即可被篩選出來。

多選：用戶可以選中多個篩選條件，用戶選中多個篩選項后的篩選邏輯也需要根據(jù)實際場景進行設計，如：用戶選中多個篩選項后，篩選結果是包含所選選項，還是說必須命中所選全部選項才可被篩選出來，需要提前進行設計和思考。

綜合來講，通過定向搜索，以及篩選項，來滿足用戶快速且定向地查詢某個/某類數(shù)據(jù)的需求。

二、批量操作

用戶在系統(tǒng)中進行數(shù)據(jù)查詢后的目的之一是對數(shù)據(jù)進行操作，如上文中的王老師在查到某類課程后，要對課程進行上架的操作，對同類的數(shù)據(jù)進行相同的操作是B端用戶的工作場景之一；那么批量操作的功能則可以在此場景下提高用戶的工作效率。

批量操作的功能一般包含兩部分：多選功能、操作功能。

1. 多選

用戶通過查詢功能篩選出符合某些規(guī)則的目標數(shù)據(jù)后，若要對這些數(shù)據(jù)進行操作，首先需要選中這些數(shù)據(jù)，即告訴程序——我要對這些數(shù)據(jù)進行相應操作。

那么多選功能，能夠提高用戶進行選擇的效率，一鍵/多次點擊，即可選中一批數(shù)據(jù)。

如下圖，選擇列可以對數(shù)據(jù)進行全選、也可以只選擇幾條數(shù)據(jù)；

（示例來自：Ant Design Vue）

2. 操作功能

幫助完成用戶的最終需求的是操作功能，即用戶要做什么，需要通過操作功能來實現(xiàn)訴求，如：課程上架/下架、用戶刪除、微信公眾號后臺的打標簽和加入黑名單等。

如下圖所示，選中一條數(shù)據(jù)后，打標簽和加入黑名單的按鈕才可點擊，對數(shù)據(jù)進行相應操作。

（示例來自：微信公眾平臺）

三、數(shù)據(jù)展示

后臺系統(tǒng)的列表中，數(shù)據(jù)的展示是整個列表頁的主體內容，用來展示用戶所需的數(shù)據(jù)信息。

如王老師通過數(shù)據(jù)查詢得到了符合要求的語文學科的課程后，要對查到的每個課程進行審核，驗證每個課程的信息是否準確；因此，列表形式的數(shù)據(jù)展示可以提高用戶查看數(shù)據(jù)的效率。

列表在我們實際生活中也經(jīng)常用到，如高中畢業(yè)后班里同學的通訊錄、高中時同學們的成績單等，這些都是以列表形式進行的數(shù)據(jù)展示。

列表中包含：表頭、數(shù)據(jù)、分頁器等，如下圖，是列表的示例圖：

（示例來自：Ant Design Vue）

1. 表頭

表頭一般包含三部分信息：標題、注釋說明、排序功能。

標題：標題用來說明這一列數(shù)據(jù)是什么，能提供什么信息。

標題需滿足一個條件，即用最簡潔的語言說清楚這列數(shù)據(jù)是什么，可用來做什么；標題的字數(shù)以“不能刪減任何一個字”為原則。

如下圖第3列，展示的是學生購買的下個季度的長期課的課程，那么“下季長期課”就是最簡潔且一個字也不能少的表達方式了。

注釋：注釋是對標題或者此列數(shù)據(jù)的解釋說明。

注釋可以在標題的左右一側，一般用嘆號或問號來代表，鼠標浮上去，出現(xiàn)浮窗，展示對該數(shù)據(jù)列的字段的解釋說明。

解釋說明的編寫原則為“是什么，能做什么”，同時也遵循標題簡潔的原則。

目的是：用戶看到之后能清楚地知道是什么，用戶能用來做什么；比如，對下季長期課的解釋為“學生下個季度報名的長期課的科目；實時更新；可用于轉化溝通。”

但不是所有的數(shù)據(jù)都需要注釋，什么情況需要注釋呢？

如果是一項基礎屬性的數(shù)據(jù)，所有人對此理解一致，且不會產(chǎn)生疑問或異議，那不需要注釋；如：姓名、序號、性別、家庭地址等；如果數(shù)據(jù)是一個看到后會產(chǎn)生疑問的字段，或者是通過一些復雜的計算得來的，那么最好在表頭增加注釋，減少用戶學習成本。

排序功能：列表中的數(shù)據(jù)，會按照固定的默認排序進行排列，但當用戶想要按其他排序進行排列時，如按照數(shù)據(jù)大小排列，那么就需要通過排序功能進行操作；而我們需要提前設定好排序的邏輯，如點擊排序按照從小到大順序排列，若數(shù)據(jù)相同，則按照id從小到大排列；再次點擊則按從大到小排列；再次點擊則回歸原始排列。

2. 數(shù)據(jù)

列表中的數(shù)據(jù)分為行、列，每行數(shù)據(jù)以第一列數(shù)據(jù)為主體，每列數(shù)據(jù)是一個數(shù)據(jù)分類；而標題則就是數(shù)據(jù)分類的名稱，直接了當告訴用戶這列數(shù)據(jù)是什么；比如：高中成績單，一行是一個同學的所有成績，一列則是一個學科的成績。

列表的所有數(shù)據(jù)，來自于詳情頁，那么在列表中，應該展示數(shù)據(jù)主體的哪些數(shù)據(jù)呢？在列表中應該按照什么優(yōu)先級進行排列呢？這些也需要我們提前結合使用場景及數(shù)據(jù)的重要程度進行提前設計。

還是我們開頭提到的 “王老師上架課程” 的場景，王老師在列表中關注哪些數(shù)據(jù)呢？

通過分析，我們基本能夠判斷出需要展示哪些數(shù)據(jù)，以及數(shù)據(jù)的優(yōu)先級是什么。

在列表中也會有針對當條數(shù)據(jù)的操作，如刪除、編輯等；所以在列表中，一般最后一列是操作列，可懸浮設計，在操作列增加對此條數(shù)據(jù)的各種操作功能。

3. 分頁器

如果列表數(shù)據(jù)過多，基于接口性能的考慮，一般會采用分頁的形式展示，而不是一次性展示所有的數(shù)據(jù)；分頁時，要提前規(guī)定好一頁展示多少條數(shù)據(jù)，序號的展示規(guī)則，上下翻頁以及快速調轉等。

四、總結

列表是后臺系統(tǒng)中最為常見的一種數(shù)據(jù)展示形式，通過對列表的使用，能夠避免用戶在一些重復勞動上的時間浪費，提高用戶的工作效率。