在后臺(tái)產(chǎn)品設(shè)計(jì)中，數(shù)據(jù)列表頁(yè)是非常常見(jiàn)的頁(yè)面。本文將討論如何對(duì)這類頁(yè)面進(jìn)行設(shè)計(jì)，讓你避免其中可能存在的坑！

在后臺(tái)產(chǎn)品設(shè)計(jì)中，數(shù)據(jù)列表頁(yè)是非常常見(jiàn)的一個(gè)頁(yè)面，該頁(yè)面負(fù)責(zé)展示數(shù)據(jù)，并提供搜索查詢功能來(lái)供用戶查詢數(shù)據(jù)。在數(shù)據(jù)非常多的情況下，如何讓用戶快速地找到自己想要的數(shù)據(jù)，成為設(shè)計(jì)數(shù)據(jù)列表頁(yè)的一個(gè)重要原則。

數(shù)據(jù)列表頁(yè)通常可以分為兩部分：搜索查詢區(qū)域、數(shù)據(jù)列表區(qū)域。搜索查詢區(qū)域通過(guò)提供一些查詢條件來(lái)讓用戶快速找到自己想要的數(shù)據(jù)；數(shù)據(jù)列表區(qū)域則負(fù)責(zé)展示數(shù)據(jù)的信息。該頁(yè)面的常見(jiàn)布局如下圖所示：

下面，將對(duì)“搜索查詢區(qū)域”、“數(shù)據(jù)列表區(qū)域”這兩部分進(jìn)行詳細(xì)說(shuō)明。

搜索查詢區(qū)域

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

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

可以按照以下兩步來(lái)進(jìn)行：

1、第一步，首先要獲取放到搜索查詢區(qū)域字段的候選項(xiàng)。因?yàn)槲覀兪且獙?duì)數(shù)據(jù)進(jìn)行搜索查詢，要用到數(shù)據(jù)的屬性，因此在這一步將新建數(shù)據(jù)時(shí)涉及的字段全部列為候選項(xiàng)；

2、第二步，對(duì)這些字段候選項(xiàng)進(jìn)行篩選過(guò)濾。因?yàn)閿?shù)據(jù)的字段可能會(huì)有很多，如果把所有的字段都列出來(lái)供查詢，不但占用空間，而且用戶使用起來(lái)也不太方便，會(huì)降低操作效率。那么如何進(jìn)行篩選過(guò)濾呢？有以下幾個(gè)原則：

• 選擇可唯一確定數(shù)據(jù)的字段，這樣可以讓用戶快速定位到自己想要的數(shù)據(jù)；如數(shù)據(jù)的id、郵箱賬號(hào)；
• 選擇用戶可方便記憶內(nèi)容的字段，在數(shù)據(jù)的id比較長(zhǎng)的情況下，用戶更傾向于使用自己能記住的內(nèi)容；如一個(gè)商品名稱為“蘋果SE手機(jī)”、商品ID為“7438935293845”，相比較來(lái)說(shuō)，用戶更加能記住商品名稱。
• 需要注意的是，這個(gè)跟第一條并不沖突，而是應(yīng)用于不同的場(chǎng)景，第一條適用于精確定位數(shù)據(jù)；第二條適用于模糊查詢。
• 選擇用戶比較重視的數(shù)據(jù)屬性字段。因?yàn)橛脩魰?huì)對(duì)數(shù)據(jù)的某些字段屬性比較重視，數(shù)據(jù)變多之后就需要根據(jù)這些字段來(lái)查詢數(shù)據(jù)。這就需要在前期跟后臺(tái)用戶溝通好，然后將這些字段放到搜索查詢區(qū)域。比方說(shuō)，后臺(tái)用戶會(huì)查詢某種分類下的數(shù)據(jù)情況，那么就需要在搜索查詢區(qū)域?qū)ⅰ胺诸悺弊侄渭由稀?/li>
• 盡量多使用提供選項(xiàng)的篩選字段。手動(dòng)輸入的篩選字段可以適當(dāng)使用，但是不要過(guò)多，否則沒(méi)有意義。

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

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

1、搜索字段的設(shè)計(jì)

• 搜索字段可以靈活方便的對(duì)數(shù)據(jù)進(jìn)行查詢，一般來(lái)說(shuō)搜索字段至少要支持對(duì)數(shù)據(jù)id和數(shù)據(jù)名稱的搜索；如果能支持更多字段的搜索則更好。最好的情況是各種字段都支持，那么只需要這一個(gè)搜索字段就行了，不過(guò)這需要強(qiáng)大的搜索技術(shù)支持，需要評(píng)估成本和收益。
• 建議支持同時(shí)輸入多個(gè)數(shù)據(jù)id、數(shù)據(jù)名稱（以某種符號(hào)分割）進(jìn)行查詢；可以事半功倍提升用戶效率。

2、提供選項(xiàng)的篩選字段的設(shè)計(jì)

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

3、時(shí)間篩選字段的設(shè)計(jì)

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

4、搜索查詢字段的隱藏設(shè)計(jì)

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

一些建議（tips）

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

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

3、雖然我們?cè)谶@里討論的是搜索查詢區(qū)域，但是在這部分還可以增加“新增數(shù)據(jù)”的入口。因?yàn)樵跓o(wú)法找到符合條件的數(shù)據(jù)情況下，有很大可能接下來(lái)就要新增符合條件的數(shù)據(jù)。新增數(shù)據(jù)的入口位置一般在查詢按鈕旁邊。舉例：微信公眾平臺(tái)的“素材管理”就是這樣的設(shè)計(jì)。

數(shù)據(jù)列表區(qū)域

數(shù)據(jù)列表區(qū)域用來(lái)展示數(shù)據(jù)的具體信息，其作用是讓用戶快速查看數(shù)據(jù)的相關(guān)信息。

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

與上面的搜索查詢有些類似，也是按照以下兩步來(lái)進(jìn)行：

1、第一步，首先要獲取放到數(shù)據(jù)列表區(qū)域字段的候選項(xiàng)。因?yàn)槲覀兪且故緮?shù)據(jù)的字段屬性，因此在這一步將新建數(shù)據(jù)時(shí)涉及的字段全部列為候選項(xiàng)；

2、第二步，對(duì)這些字段候選項(xiàng)進(jìn)行篩選過(guò)濾。因?yàn)閿?shù)據(jù)的字段可能會(huì)有很多，如果把所有的字段都列出來(lái)供展示，不但占用頁(yè)面空間，而且用戶使用起來(lái)也不太方便，會(huì)降低操作效率。那么如何進(jìn)行篩選過(guò)濾呢？有以下幾個(gè)原則：

• 選擇可唯一確定數(shù)據(jù)的字段，這樣可以讓用戶快速區(qū)分?jǐn)?shù)據(jù)，如數(shù)據(jù)id、郵箱賬號(hào)等；
• 選擇用戶比較重視的數(shù)據(jù)屬性字段。因?yàn)閿?shù)據(jù)的字段可能會(huì)很多，用戶會(huì)對(duì)其中的某些字段屬性比較重視。這就需要在前期跟后臺(tái)用戶溝通好，然后將這些比較重視的字段放到數(shù)據(jù)列表區(qū)域。比方說(shuō)，后臺(tái)用戶比較重視數(shù)據(jù)的分類信息，那么就需要在數(shù)據(jù)列表區(qū)域?qū)ⅰ胺诸悺弊侄渭由稀?/li>
• 對(duì)于那些用戶不太關(guān)注的，沒(méi)有展示到數(shù)據(jù)列表區(qū)域的字段，可以通過(guò)“查看”或“修改”操作通過(guò)新開(kāi)頁(yè)面來(lái)查看這些字段的具體信息。

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

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

在將字段放到數(shù)據(jù)列表區(qū)域時(shí)，有以下幾個(gè)注意事項(xiàng)。

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

2、如果用戶需要在數(shù)據(jù)列表顯示的字段過(guò)多，頁(yè)面無(wú)法顯示全部，則可以像Excel表格那樣“凍結(jié)拆分窗格”，固定展示一些重要的字段列，其他的字段列可以通過(guò)左右拖動(dòng)鼠標(biāo)的方式來(lái)查看。

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

4、因?yàn)閿?shù)據(jù)會(huì)越來(lái)越多，所有的數(shù)據(jù)不可能一頁(yè)展示完全，這就需要進(jìn)行分頁(yè)設(shè)計(jì)。分頁(yè)設(shè)計(jì)時(shí)要考慮以下兩點(diǎn)：

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

5、排序功能。

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

6、批量處理。

• 有的時(shí)候我們需要對(duì)數(shù)據(jù)列表的多個(gè)數(shù)據(jù)進(jìn)行批量處理，在批量處理之前，我們需要對(duì)這些數(shù)據(jù)進(jìn)行選擇。這就要求每行數(shù)據(jù)都支持被選擇，同時(shí)也可以提供全部選擇按鈕。
• 需要注意的是，全部選擇的只是當(dāng)前頁(yè)的所有數(shù)據(jù)，其他頁(yè)的數(shù)據(jù)在當(dāng)前頁(yè)無(wú)法被全部。
• 批量處理的操作建議在表頭和表尾都進(jìn)行放置，這樣可以避免來(lái)回滾動(dòng)頁(yè)面，提升工作效率。

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

7、一般來(lái)說(shuō)，要想修改數(shù)據(jù)列表中的某個(gè)字段值，需要點(diǎn)擊“修改”操作進(jìn)入修改頁(yè)面進(jìn)行修改，但是為了提升工作效率，如果該字段的值不復(fù)雜，也可以在數(shù)據(jù)列表頁(yè)進(jìn)行修改操作。如數(shù)值的改動(dòng)等簡(jiǎn)單的操作。

8、數(shù)據(jù)的常見(jiàn)操作

• “查看”操作。因?yàn)閿?shù)據(jù)列表頁(yè)展示的數(shù)據(jù)字段有限，不可能將所有的字段信息展示，因此需要提供“查看”操作，新開(kāi)頁(yè)面來(lái)查看該條數(shù)據(jù)的詳細(xì)字段信息；注意：這里推薦“新開(kāi)頁(yè)面”來(lái)查看數(shù)據(jù)，因?yàn)榭赡苌婕暗綌?shù)據(jù)之間進(jìn)行比較。
• “修改”操作。如果要修改數(shù)據(jù)的字段信息，除了簡(jiǎn)單的能在數(shù)據(jù)列表頁(yè)修改外，其他的字段還需要通過(guò)“修改”操作進(jìn)入到修改頁(yè)面來(lái)進(jìn)行修改；
• “操作日志”操作。操作日志非常重要，雖然乍看不是很起眼，但是我們不能把它忽略。因?yàn)樗菍?duì)該條數(shù)據(jù)從創(chuàng)建到當(dāng)前時(shí)間的詳細(xì)記錄，一旦數(shù)據(jù)產(chǎn)生異常，我們就可以通過(guò)操作日志快速定位問(wèn)題。一般來(lái)說(shuō)，操作日志記錄的信息越詳細(xì)越好。

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

題圖來(lái)自u(píng)nsplash，基于CC0協(xié)議