起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識后臺系統(tǒng)列表設計
編輯導語：不管是什么系統(tǒng)，都會有關于后臺的設計，后臺的業(yè)務比較復雜，數據也比較龐大；但是一個好的后臺設計可以方便使用，提高效率，特別是教育方面的課程系統(tǒng)；本文作者分享了關于后臺系統(tǒng)列表設計。
在后臺系統(tǒng)中，經常有對某類數據進行查看、批量操作的需求，如：對還未上架的課程進行審核、審核通過后進行批量上架操作。
假設王老師要審核語文學科的課程，審核時會關注課程的名稱、年份、學期、課程類型、版本、難度是否是正確的；若正確，則進行上架操作。
如果數據分散，且沒有批量操作的功能，那么試想一下王老師會如何操作呢？
- 找到語文學科的課程；
- 找到需要審核的信息；
- 進行上架操作；
- 找到下一條數據，繼續(xù)以上操作；
如果操作一個課程，需要 1 分鐘，那么操作 30 節(jié)課，就需要 30 分鐘。
如果你是王老師，你可能就要瘋掉了，那如何通過產品方式提高王老師效率呢？
王老師問題的本質，是缺少批量上架的功能，而批量上架的前提，是將所有數據按照一定規(guī)則以列表形式有序地展示出來。
因此，列表的使用可以一定程度上提高工作效率。
在后臺系統(tǒng)中，最常見的數據展示方式就是列表，那如何設計一個后臺系統(tǒng)的列表呢？
列表通常有三大部分：數據查詢、批量操作、數據展示。
一、數據查詢
在后臺系統(tǒng)中，用戶會希望高效地查找到某條或某類數據，如上述王老師審核課程，就需要高效定位到語文學科的課程；列表中的數據查詢功能就解決了用戶定向查找某類數據效率低的問題。
列表中的數據查詢一般通過搜索框、篩選項等實現(xiàn)。
1. 搜索框
搜索框解決了用戶定向查找某條數據的需求，比如王老師要找到2020年秋季三年級小A老師語文尖子班，那最快捷的方法就是能直接搜索該課程，出現(xiàn)目標結果。
搜索框一般是輸入具體字段，點擊搜索或回車后，直接定位到某個/某類數據。
搜索的規(guī)則有兩種：精準搜索和模糊搜索——精準搜索是根據輸入的條件，精準地搜索到某條完全匹配的數據；模糊搜索則是指查詢到所有包含輸入條件的數據。
如電商后臺系統(tǒng)中的搜索框、輸入商品編號、查到某件商品；老師后臺系統(tǒng)中的搜索框、輸入學員姓名、查到某位學員等。
如下圖是微信公眾號的后臺系統(tǒng)——用戶管理模塊，搜索框支持搜索用戶昵稱，以快速定位到某位用戶。
試想沒有定向搜索的功能的話，要找到一條數據，只能通過對每一條進行翻找，如果列表中有50條數據，一條條數據進行查看的話，要找到某條數據可能要花30秒的時間；而通過定向搜索只需要3秒時間。
（示例來自：微信公眾平臺）
2. 篩選項
篩選項是通過系統(tǒng)已有的搜索條件快速搜索某類符合該條件結果的功能，如淘寶網首頁的導航欄，就是一個個篩選項。
篩選項解決了用戶查找某類有共同特性數據的需求，比如王老師要查找三年級語文周六 9:00 ~ 11:00 的課，那么就可以通過篩選項，分別選出以上條件；點擊搜索，直接搜索出三年級語文周六上午 9:00 ~ 11:00 所有的課程。
篩選項分為單級篩選、級聯(lián)篩選、日期/時間選擇器等。
- 單級篩選：即只有一層篩選項，如篩選學科，篩選項包括：語文、數學、英語，均為同一層級的篩選項；
- 級聯(lián)篩選：篩選項層級較多時使用，如篩選學科的知識點，那么篩選項就有兩層：第一層級為學科，第二層級為學科對應的知識點；
- 日期/時間選擇器：即篩選一段日期/時間，解決用戶查找一段日期/時間內數據的需求；
如下圖，分別是三種篩選類型的示例：
（示例來自：Ant Design Vue）
了解了三種類型的篩選形式之后，我們還需要知道，每個篩選項的篩選方式又會分為：單選、多選。
單選：給定固定幾個篩選條件，用戶一次只能選擇一個篩選條件；單選條件下，篩選結果符合該篩選條件，即可被篩選出來。
多選：用戶可以選中多個篩選條件，用戶選中多個篩選項后的篩選邏輯也需要根據實際場景進行設計，如：用戶選中多個篩選項后，篩選結果是包含所選選項，還是說必須命中所選全部選項才可被篩選出來，需要提前進行設計和思考。
綜合來講，通過定向搜索，以及篩選項，來滿足用戶快速且定向地查詢某個/某類數據的需求。
二、批量操作
用戶在系統(tǒng)中進行數據查詢后的目的之一是對數據進行操作，如上文中的王老師在查到某類課程后，要對課程進行上架的操作，對同類的數據進行相同的操作是B端用戶的工作場景之一；那么批量操作的功能則可以在此場景下提高用戶的工作效率。
批量操作的功能一般包含兩部分：多選功能、操作功能。
1. 多選
用戶通過查詢功能篩選出符合某些規(guī)則的目標數據后，若要對這些數據進行操作，首先需要選中這些數據，即告訴程序——我要對這些數據進行相應操作。
那么多選功能，能夠提高用戶進行選擇的效率，一鍵/多次點擊，即可選中一批數據。
如下圖，選擇列可以對數據進行全選、也可以只選擇幾條數據；
（示例來自：Ant Design Vue）
2. 操作功能
幫助完成用戶的最終需求的是操作功能，即用戶要做什么，需要通過操作功能來實現(xiàn)訴求，如：課程上架/下架、用戶刪除、微信公眾號后臺的打標簽和加入黑名單等。
如下圖所示，選中一條數據后，打標簽和加入黑名單的按鈕才可點擊，對數據進行相應操作。
（示例來自：微信公眾平臺）
三、數據展示
后臺系統(tǒng)的列表中，數據的展示是整個列表頁的主體內容，用來展示用戶所需的數據信息。
如王老師通過數據查詢得到了符合要求的語文學科的課程后，要對查到的每個課程進行審核，驗證每個課程的信息是否準確；因此，列表形式的數據展示可以提高用戶查看數據的效率。
列表在我們實際生活中也經常用到，如高中畢業(yè)后班里同學的通訊錄、高中時同學們的成績單等，這些都是以列表形式進行的數據展示。
列表中包含：表頭、數據、分頁器等，如下圖，是列表的示例圖：
（示例來自：Ant Design Vue）
1. 表頭
表頭一般包含三部分信息：標題、注釋說明、排序功能。
標題：標題用來說明這一列數據是什么，能提供什么信息。
標題需滿足一個條件，即用最簡潔的語言說清楚這列數據是什么，可用來做什么；標題的字數以“不能刪減任何一個字”為原則。
如下圖第3列，展示的是學生購買的下個季度的長期課的課程，那么“下季長期課”就是最簡潔且一個字也不能少的表達方式了。
注釋：注釋是對標題或者此列數據的解釋說明。
注釋可以在標題的左右一側，一般用嘆號或問號來代表，鼠標浮上去，出現(xiàn)浮窗，展示對該數據列的字段的解釋說明。
解釋說明的編寫原則為“是什么，能做什么”，同時也遵循標題簡潔的原則。
目的是：用戶看到之后能清楚地知道是什么，用戶能用來做什么；比如，對下季長期課的解釋為“學生下個季度報名的長期課的科目；實時更新；可用于轉化溝通?！?/p>
但不是所有的數據都需要注釋，什么情況需要注釋呢？
如果是一項基礎屬性的數據，所有人對此理解一致，且不會產生疑問或異議，那不需要注釋；如：姓名、序號、性別、家庭地址等；如果數據是一個看到后會產生疑問的字段，或者是通過一些復雜的計算得來的，那么最好在表頭增加注釋，減少用戶學習成本。
排序功能：列表中的數據，會按照固定的默認排序進行排列，但當用戶想要按其他排序進行排列時，如按照數據大小排列，那么就需要通過排序功能進行操作；而我們需要提前設定好排序的邏輯，如點擊排序按照從小到大順序排列，若數據相同，則按照id從小到大排列；再次點擊則按從大到小排列；再次點擊則回歸原始排列。
2. 數據
列表中的數據分為行、列，每行數據以第一列數據為主體，每列數據是一個數據分類；而標題則就是數據分類的名稱，直接了當告訴用戶這列數據是什么；比如：高中成績單，一行是一個同學的所有成績，一列則是一個學科的成績。
列表的所有數據，來自于詳情頁，那么在列表中，應該展示數據主體的哪些數據呢？在列表中應該按照什么優(yōu)先級進行排列呢？這些也需要我們提前結合使用場景及數據的重要程度進行提前設計。
還是我們開頭提到的 “王老師上架課程” 的場景，王老師在列表中關注哪些數據呢？
- 課程主體信息：課程id、課程名稱，這兩個信息用來定位是哪個課；
- 課程基本屬性：主講老師、上課時間、學年學期等；
- 課程的狀態(tài)：是否上架。
通過分析，我們基本能夠判斷出需要展示哪些數據，以及數據的優(yōu)先級是什么。
在列表中也會有針對當條數據的操作，如刪除、編輯等；所以在列表中，一般最后一列是操作列，可懸浮設計，在操作列增加對此條數據的各種操作功能。
3. 分頁器
如果列表數據過多，基于接口性能的考慮，一般會采用分頁的形式展示，而不是一次性展示所有的數據；分頁時，要提前規(guī)定好一頁展示多少條數據，序號的展示規(guī)則，上下翻頁以及快速調轉等。
四、總結
列表是后臺系統(tǒng)中最為常見的一種數據展示形式，通過對列表的使用，能夠避免用戶在一些重復勞動上的時間浪費，提高用戶的工作效率。
凱麗，在線教育后臺產品經理，公眾號：凱麗的思考。
本文由 @凱麗 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載
題圖來自 unsplash，基于 CC0 協(xié)議
期待繼續(xù)更新????
對于第一次接到b端后臺的系統(tǒng)設計需求的產品小白來說很受用哦~謝謝
全篇廢話