在后臺產品設計中，數據列表頁是非常常見的頁面。本文將討論如何對這類頁面進行設計，讓你避免其中可能存在的坑！

在后臺產品設計中，數據列表頁是非常常見的一個頁面，該頁面負責展示數據，并提供搜索查詢功能來供用戶查詢數據。在數據非常多的情況下，如何讓用戶快速地找到自己想要的數據，成為設計數據列表頁的一個重要原則。

數據列表頁通?？梢苑譃閮刹糠郑核阉鞑樵儏^(qū)域、數據列表區(qū)域。搜索查詢區(qū)域通過提供一些查詢條件來讓用戶快速找到自己想要的數據；數據列表區(qū)域則負責展示數據的信息。該頁面的常見布局如下圖所示：

下面，將對“搜索查詢區(qū)域”、“數據列表區(qū)域”這兩部分進行詳細說明。

搜索查詢區(qū)域

搜索查詢區(qū)域包括各種供查詢的字段，其作用是幫助用戶快速找到所需的數據。

如何確定把哪些字段放到搜索查詢區(qū)域? （what）

可以按照以下兩步來進行：

1、第一步，首先要獲取放到搜索查詢區(qū)域字段的候選項。因為我們是要對數據進行搜索查詢，要用到數據的屬性，因此在這一步將新建數據時涉及的字段全部列為候選項；

2、第二步，對這些字段候選項進行篩選過濾。因為數據的字段可能會有很多，如果把所有的字段都列出來供查詢，不但占用空間，而且用戶使用起來也不太方便，會降低操作效率。那么如何進行篩選過濾呢？有以下幾個原則：

• 選擇可唯一確定數據的字段，這樣可以讓用戶快速定位到自己想要的數據；如數據的id、郵箱賬號；
• 選擇用戶可方便記憶內容的字段，在數據的id比較長的情況下，用戶更傾向于使用自己能記住的內容；如一個商品名稱為“蘋果SE手機”、商品ID為“7438935293845”，相比較來說，用戶更加能記住商品名稱。
• 需要注意的是，這個跟第一條并不沖突，而是應用于不同的場景，第一條適用于精確定位數據；第二條適用于模糊查詢。
• 選擇用戶比較重視的數據屬性字段。因為用戶會對數據的某些字段屬性比較重視，數據變多之后就需要根據這些字段來查詢數據。這就需要在前期跟后臺用戶溝通好，然后將這些字段放到搜索查詢區(qū)域。比方說，后臺用戶會查詢某種分類下的數據情況，那么就需要在搜索查詢區(qū)域將“分類”字段加上。
• 盡量多使用提供選項的篩選字段。手動輸入的篩選字段可以適當使用，但是不要過多，否則沒有意義。

如何把字段放到搜索查詢區(qū)域？（how）

在上一步，我們獲得了要把哪些字段放到搜索查詢區(qū)域。接下來，我們就要討論在將字段放到搜索查詢區(qū)域時的一些注意事項。

1、搜索字段的設計

• 搜索字段可以靈活方便的對數據進行查詢，一般來說搜索字段至少要支持對數據id和數據名稱的搜索；如果能支持更多字段的搜索則更好。最好的情況是各種字段都支持，那么只需要這一個搜索字段就行了，不過這需要強大的搜索技術支持，需要評估成本和收益。
• 建議支持同時輸入多個數據id、數據名稱（以某種符號分割）進行查詢；可以事半功倍提升用戶效率。

2、提供選項的篩選字段的設計

將這些字段放到搜索查詢區(qū)域時，要保證提供的選項要和新建數據時該字段的選項一致，這樣才能保證查詢的準確性。舉例：比如說一個商品數據在新建時，“適合年齡”選項為“0-3歲”、“4-8歲”、“9-16歲”、“17歲及以上”；那么在將此字段作為搜索查詢項時，也要將選項設置為“0-3歲”、“4-8歲”、“9-16歲”、“17歲及以上”。唯一的不同，在于作為搜索查詢項時，還要增加一個“全部”選項，作為默認選擇，因為在默認情況下，展示的數據是全部年齡段的數據。

3、時間篩選字段的設計

• 時間篩選字段一般是對某個時間段的查詢，要有開始時間和結束時間。
• 時間篩選字段的時間選擇維度要大于等于新建數據時記錄的時間維度。舉例：比如說新建數據時時間記錄精確到了秒，那么時間篩選字段可以精確到秒，也可以上卷到分鐘、小時等大維度；但是反過來：如果新建數據時記錄精確到了小時，但是時間篩選字段精確到了分鐘或者秒，就會造成數據查詢不準確。
• 要考慮到進行時間篩選時，開始時間和結束時間缺省時的處理方式。可以簡單地提醒用戶開始時間或結束時間缺失，讓用戶補充完整。但是，我們還有另外一種更好的解決方式：開始時間缺省時，默認是最開始的時間；結束時間缺省時，默認是最新的時間。這樣可以進一步提升用戶的操作效率。
• 可以將用戶常用的時間段抽離出來作為選項，比如“今天”、“最近三天”、“最近一周”、“最近一個月”，用戶點擊可以快速設置時間段，方便快捷。舉例：微信公眾平臺查看“用戶分析”的“新增用戶”時，就支持這種方式，如下圖。

4、搜索查詢字段的隱藏設計

雖然我們最開始對放在搜索查詢區(qū)域的字段進行過篩選過濾，但是不排除數據涉及到的字段太多，過濾之后還是字段很多的情況。在這里，我們可以再對這些字段進行劃分：將那些重要的、用戶比較關注的字段顯示地放在搜索查詢區(qū)域，而將那些不太重要的、用戶偶爾會關注的字段隱藏的放在搜索查詢區(qū)域，并保留一個入口開關。這樣既能讓頁面看上去不是很臃腫，也能支持一些特殊的搜索查詢需求。舉例：京東在“我的訂單”頁面提供了一些簡單地查詢條件，如果用戶想進一步地查詢，可以點擊“高級”，按照訂單類型進行查詢。

一些建議（tips）

1、如果用戶每次查詢，使用的搜索查詢字段都比較多而且使用的字段都差不多的情況下，可以考慮增加一個保存搜索查詢條件的功能，將這些字段打包成一個快捷鍵，下次點擊快捷鍵可以根據這些搜索查詢字段進行快速查詢。

2、如果用戶每次查詢的條件都不一樣，而且每次使用的搜索查詢字段比較多的情況下，可以考慮增加一個批量清空的功能，點擊可以快速將所選的字段恢復成原始狀態(tài)。舉例：淘寶“出售中的寶貝”查詢就支持“清空條件”，將已經選擇的搜索查詢字段內容恢復成默認狀態(tài)。

3、雖然我們在這里討論的是搜索查詢區(qū)域，但是在這部分還可以增加“新增數據”的入口。因為在無法找到符合條件的數據情況下，有很大可能接下來就要新增符合條件的數據。新增數據的入口位置一般在查詢按鈕旁邊。舉例：微信公眾平臺的“素材管理”就是這樣的設計。

數據列表區(qū)域

數據列表區(qū)域用來展示數據的具體信息，其作用是讓用戶快速查看數據的相關信息。

如何確定把哪些字段放到數據列表區(qū)域? （what）

與上面的搜索查詢有些類似，也是按照以下兩步來進行：

1、第一步，首先要獲取放到數據列表區(qū)域字段的候選項。因為我們是要展示數據的字段屬性，因此在這一步將新建數據時涉及的字段全部列為候選項；

2、第二步，對這些字段候選項進行篩選過濾。因為數據的字段可能會有很多，如果把所有的字段都列出來供展示，不但占用頁面空間，而且用戶使用起來也不太方便，會降低操作效率。那么如何進行篩選過濾呢？有以下幾個原則：

• 選擇可唯一確定數據的字段，這樣可以讓用戶快速區(qū)分數據，如數據id、郵箱賬號等；
• 選擇用戶比較重視的數據屬性字段。因為數據的字段可能會很多，用戶會對其中的某些字段屬性比較重視。這就需要在前期跟后臺用戶溝通好，然后將這些比較重視的字段放到數據列表區(qū)域。比方說，后臺用戶比較重視數據的分類信息，那么就需要在數據列表區(qū)域將“分類”字段加上。
• 對于那些用戶不太關注的，沒有展示到數據列表區(qū)域的字段，可以通過“查看”或“修改”操作通過新開頁面來查看這些字段的具體信息。

雖然數據列表區(qū)域的字段和搜索查詢區(qū)域的字段選取方式有些相似，但是不盡相同，大家一定要仔細體會兩者的區(qū)別：前者更關注單個數據的信息查看；后者更關注所有數據的查詢。搜索查詢的字段可能要比數據列表區(qū)域的字段要多。

如何把字段放到數據列表區(qū)域？（how）

在將字段放到數據列表區(qū)域時，有以下幾個注意事項。

1、用戶對每個需要放到數據列表區(qū)域的字段關注程度是不一樣的。前期需要跟用戶溝通好字段的關注度，然后按照關注度從高到底依次對其進行排列展示。即將關注度高的字段放到最前面。

2、如果用戶需要在數據列表顯示的字段過多，頁面無法顯示全部，則可以像Excel表格那樣“凍結拆分窗格”，固定展示一些重要的字段列，其他的字段列可以通過左右拖動鼠標的方式來查看。

3、在字段列很多的情況下，每一列的寬度可能會很小，這樣某些內容多的字段值就無法顯示完整，如果要通過“查看”操作來新開頁面查看的話，則過于繁瑣，這種情況該如何處理呢？在這里，我們可以將其設計成為如果內容超過字段寬度，則超過部分以“…”顯示，同時，鼠標hover上去，則顯示全部內容。舉例：淘寶的商品名稱就采用了這種設計方式。

4、因為數據會越來越多，所有的數據不可能一頁展示完全，這就需要進行分頁設計。分頁設計時要考慮以下兩點：

• 每頁展示的數據數量。一般來說，每頁展示的數據最好能一屏顯示，這樣用戶就不用下拉查看。如果確實有特殊需求，每頁展示的數據一屏顯示不了，需要下拉展示，那么就需要考慮將表頭（即表的第一行，顯示每列的字段值名稱）凍結展示，這樣用戶在下拉的時候也能知道每個值對應的含義。更加靈活的是用戶可以自定義每頁顯示地數據數量，這個可以視具體業(yè)務需求來決定要不要這樣做。
• 頁碼選擇和跳轉。這個大家應該很熟悉，有了分頁，就需要提供讓用戶跳轉不同頁碼的功能。在這里，提供一個小技巧：如果每頁展示的數據比較多，可以考慮在表頭和表尾同時提供頁碼選擇和跳轉的功能，這樣可以提升工作效率。
• 在頁碼部分至少要展示當前頁（當前在哪一頁）、頁碼總數和數據總量（一共有多少條數據）這三部分的信息

5、排序功能。

• 如果用戶需要對某個字段的值按照某種順序排列，那么可以針對這一個字段列提供排序功能，需要注意的是這種字段的值必須是能比較的，比方說大小、早晚等。同時，要提供正向、反向、默認這三種排序方式。
• 數據列表頁中的數據需要有一個默認排序規(guī)則，這需要提前跟用戶溝通清楚，比如說：按創(chuàng)建時間倒序排列、按更新時間倒序排列、按某個字段值從大到小排列等。

6、批量處理。

• 有的時候我們需要對數據列表的多個數據進行批量處理，在批量處理之前，我們需要對這些數據進行選擇。這就要求每行數據都支持被選擇，同時也可以提供全部選擇按鈕。
• 需要注意的是，全部選擇的只是當前頁的所有數據，其他頁的數據在當前頁無法被全部。
• 批量處理的操作建議在表頭和表尾都進行放置，這樣可以避免來回滾動頁面，提升工作效率。

舉例：QQ郵箱支持單個選擇、全部選擇、批量處理操作在表頭和表尾都有設置。

7、一般來說，要想修改數據列表中的某個字段值，需要點擊“修改”操作進入修改頁面進行修改，但是為了提升工作效率，如果該字段的值不復雜，也可以在數據列表頁進行修改操作。如數值的改動等簡單的操作。

8、數據的常見操作

• “查看”操作。因為數據列表頁展示的數據字段有限，不可能將所有的字段信息展示，因此需要提供“查看”操作，新開頁面來查看該條數據的詳細字段信息；注意：這里推薦“新開頁面”來查看數據，因為可能涉及到數據之間進行比較。
• “修改”操作。如果要修改數據的字段信息，除了簡單的能在數據列表頁修改外，其他的字段還需要通過“修改”操作進入到修改頁面來進行修改；
• “操作日志”操作。操作日志非常重要，雖然乍看不是很起眼，但是我們不能把它忽略。因為它是對該條數據從創(chuàng)建到當前時間的詳細記錄，一旦數據產生異常，我們就可以通過操作日志快速定位問題。一般來說，操作日志記錄的信息越詳細越好。

本文由 @米蘭的小鐵匠 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。

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