後臺系統列表設計

在後臺系統中，經常有對某類資料進行檢視、批次操作的需求，如：對還未上架的課程進行稽核、稽核通過後進行批次上架操作。

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

如果資料分散，且沒有批次操作的功能，那麼試想一下王老師會如何操作呢？

• 找到語文學科的課程；
• 找到需要稽核的資訊；
• 進行上架操作；
• 找到下一條資料，繼續以上操作；

如果操作一個課程，需要 1 分鐘，那麼操作 30 節課，就需要 30 分鐘。

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

王老師問題的本質，是缺少批次上架的功能，而批次上架的前提，是將所有資料按照一定規則以列表形式有序地展示出來。

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

在後臺系統中，最常見的資料展示方式就是列表，那如何設計一個後臺系統的列表呢？

列表通常有三大部分：資料查詢、批次操作、資料展示。

一、資料查詢

在後臺系統中，使用者會希望高效地查詢到某條或某類資料，如上述王老師稽核課程，就需要高效定位到語文學科的課程；列表中的資料查詢功能就解決了使用者定向查詢某類資料效率低的問題。

列表中的資料查詢一般透過搜尋框、篩選項等實現。

1. 搜尋框

搜尋框解決了使用者定向查詢某條資料的需求，比如王老師要找到2020年秋季三年級小A老師語文尖子班，那最快捷的方法就是能直接搜尋該課程，出現目標結果。

搜尋框一般是輸入具體欄位，點選搜尋或回車後，直接定位到某個/某類資料。

搜尋的規則有兩種：精準搜尋和模糊搜尋——精準搜尋是根據輸入的條件，精準地搜尋到某條完全匹配的資料；模糊搜尋則是指查詢到所有包含輸入條件的資料。

如電商後臺系統中的搜尋框、輸入商品編號、查到某件商品；老師後臺系統中的搜尋框、輸入學員姓名、查到某位學員等。

如下圖是微信公眾號的後臺系統——使用者管理模組，搜尋框支援搜尋使用者暱稱，以快速定位到某位使用者。

試想沒有定向搜尋的功能的話，要找到一條資料，只能透過對每一條進行翻找，如果列表中有50條資料，一條條資料進行檢視的話，要找到某條資料可能要花30秒的時間；而透過定向搜尋只需要3秒時間。

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

2. 篩選項

篩選項是透過系統已有的搜尋條件快速搜尋某類符合該條件結果的功能，如淘寶網首頁的導航欄，就是一個個篩選項。

篩選項解決了使用者查詢某類有共同特性資料的需求，比如王老師要查詢三年級語文週六 9:00 ~ 11:00 的課，那麼就可以透過篩選項，分別選出以上條件；點選搜尋，直接搜尋出三年級語文週六上午 9:00 ~ 11:00 所有的課程。

篩選項分為單級篩選、級聯篩選、日期/時間選擇器等。

• 單級篩選：即只有一層篩選項，如篩選學科，篩選項包括：語文、數學、英語，均為同一層級的篩選項；
• 級聯篩選：篩選項層級較多時使用，如篩選學科的知識點，那麼篩選項就有兩層：第一層級為學科，第二層級為學科對應的知識點；
• 日期/時間選擇器：即篩選一段日期/時間，解決使用者查詢一段日期/時間內資料的需求；

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

（示例來自：Ant Design Vue）

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

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

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

綜合來講，透過定向搜尋，以及篩選項，來滿足使用者快速且定向地查詢某個/某類資料的需求。

二、批次操作

使用者在系統中進行資料查詢後的目的之一是對資料進行操作，如上文中的王老師在查到某類課程後，要對課程進行上架的操作，對同類的資料進行相同的操作是B端使用者的工作場景之一；那麼批次操作的功能則可以在此場景下提高使用者的工作效率。

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

1. 多選

使用者透過查詢功能篩選出符合某些規則的目標資料後，若要對這些資料進行操作，首先需要選中這些資料，即告訴程式——我要對這些資料進行相應操作。

那麼多選功能，能夠提高使用者進行選擇的效率，一鍵/多次點選，即可選中一批資料。

如下圖，選擇列可以對資料進行全選、也可以只選擇幾條資料；

（示例來自：Ant Design Vue）

2. 操作功能

幫助完成使用者的最終需求的是操作功能，即使用者要做什麼，需要透過操作功能來實現訴求，如：課程上架/下架、使用者刪除、微信公眾號後臺的打標籤和加入黑名單等。

如下圖所示，選中一條資料後，打標籤和加入黑名單的按鈕才可點選，對資料進行相應操作。

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

三、資料展示

後臺系統的列表中，資料的展示是整個列表頁的主體內容，用來展示使用者所需的資料資訊。

如王老師透過資料查詢得到了符合要求的語文學科的課程後，要對查到的每個課程進行稽核，驗證每個課程的資訊是否準確；因此，列表形式的資料展示可以提高使用者檢視資料的效率。

列表在我們實際生活中也經常用到，如高中畢業後班裡同學的通訊錄、高中時同學們的成績單等，這些都是以列表形式進行的資料展示。

列表中包含：表頭、資料、分頁器等，如下圖，是列表的示例圖：

（示例來自：Ant Design Vue）

1. 表頭

表頭一般包含三部分資訊：標題、註釋說明、排序功能。

標題：標題用來說明這一列資料是什麼，能提供什麼資訊。

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

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

註釋：註釋是對標題或者此列資料的解釋說明。

註釋可以在標題的左右一側，一般用歎號或問號來代表，滑鼠浮上去，出現浮窗，展示對該資料列的欄位的解釋說明。

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

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

但不是所有的資料都需要註釋，什麼情況需要註釋呢？

如果是一項基礎屬性的資料，所有人對此理解一致，且不會產生疑問或異議，那不需要註釋；如：姓名、序號、性別、家庭地址等；如果資料是一個看到後會產生疑問的欄位，或者是透過一些複雜的計算得來的，那麼最好在表頭增加註釋，減少使用者學習成本。

排序功能：列表中的資料，會按照固定的預設排序進行排列，但當用戶想要按其他排序進行排列時，如按照資料大小排列，那麼就需要透過排序功能進行操作；而我們需要提前設定好排序的邏輯，如點選排序按照從小到大順序排列，若資料相同，則按照id從小到大排列；再次點選則按從大到小排列；再次點選則迴歸原始排列。

2. 資料

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

列表的所有資料，來自於詳情頁，那麼在列表中，應該展示資料主體的哪些資料呢？在列表中應該按照什麼優先順序進行排列呢？這些也需要我們提前結合使用場景及資料的重要程度進行提前設計。

還是我們開頭提到的 “王老師上架課程” 的場景，王老師在列表中關注哪些資料呢？

• 課程主體資訊：課程id、課程名稱，這兩個資訊用來定位是哪個課；
• 課程基本屬性：主講老師、上課時間、學年學期等；
• 課程的狀態：是否上架。

透過分析，我們基本能夠判斷出需要展示哪些資料，以及資料的優先順序是什麼。

在列表中也會有針對當條資料的操作，如刪除、編輯等；所以在列表中，一般最後一列是操作列，可懸浮設計，在操作列增加對此條資料的各種操作功能。

3. 分頁器

如果列表資料過多，基於介面效能的考慮，一般會採用分頁的形式展示，而不是一次性展示所有的資料；分頁時，要提前規定好一頁展示多少條資料，序號的展示規則，上下翻頁以及快速調轉等。

四、總結

列表是後臺系統中最為常見的一種資料展示形式，透過對列表的使用，能夠避免使用者在一些重複勞動上的時間浪費，提高使用者的工作效率。

凱麗，線上教育後臺產品經理，公眾號：凱麗的思考。

本文由 @凱麗 原創釋出於人人都是產品經理，未經許可，禁止轉載

題圖來自 unsplash，基於 CC0 協議