后臺(tái)數(shù)據(jù)列表設(shè)計(jì)，有哪些需要注意的點(diǎn)呢？通過文章一起來看看。

在后臺(tái)產(chǎn)品設(shè)計(jì)中，涉及到比較多的恐怕就是數(shù)據(jù)列表了。那么，列表應(yīng)該怎樣進(jìn)行設(shè)計(jì)，在設(shè)計(jì)過程中有需要考慮哪些因素呢。

首先，一個(gè)后臺(tái)的數(shù)據(jù)列表頁，主要可以分為以下幾個(gè)：

• 搜索
• 操作
• 列表

在有的數(shù)據(jù)列表頁面，你可能會(huì)看到兩個(gè)列表，一個(gè)是數(shù)據(jù)詳情列表，另一個(gè)則是對(duì)所選數(shù)據(jù)某些字段的一個(gè)簡單統(tǒng)計(jì)。在設(shè)計(jì)中是否需要，需要看業(yè)務(wù)需求而定。

一、搜索

上圖僅做了一個(gè)簡單的搜索作為舉例，但在設(shè)計(jì)搜索時(shí)，每個(gè)條件都需要仔細(xì)思考。主要包括以下幾個(gè)問題：

1. 哪些需要作為搜索條件，哪些是重要的，哪些不重要。當(dāng)搜索條件過多時(shí)，可以挑選幾個(gè)重要的或常用的展示出來，其他的可以默認(rèn)隱藏起來，通過“展開”和“收起”來進(jìn)行操作；
2. 哪些支持多選單選，哪些僅支持多選，每個(gè)選項(xiàng)搜索條件的默認(rèn)值是什么；
3. 每一個(gè)搜索條件該如何設(shè)置，如是否支持首字母搜索、下拉選項(xiàng)的排序方式、哪些選項(xiàng)是有聯(lián)動(dòng)關(guān)系的、時(shí)間需要支持單天選擇還是多天選擇、是否需要設(shè)置快捷搜索條件扥等因素都是需要考慮的；
4. 不同權(quán)限的賬號(hào)登錄時(shí)，需要怎么展示，哪些人可以看到哪些搜索條件；
5. 每選擇一個(gè)條件就直接響應(yīng)搜索還是點(diǎn)擊“搜索”時(shí)才執(zhí)行搜索；
6. 在頁面上，還要考慮無搜索結(jié)果時(shí)，頁面該如何提示；

二、操作

對(duì)數(shù)據(jù)列表的操作又可以分為整體操作和單條數(shù)據(jù)操作。

1. 批量操作：在頁面設(shè)計(jì)上，整體操作按鈕都會(huì)展示在列表的最上方，比如刪除、禁用、排序、篩選等，當(dāng)然，上面所講到的搜索也屬于整體操作的內(nèi)容；
2. 單條數(shù)據(jù)操作：每條數(shù)據(jù)后面的操作欄。通常情況下，數(shù)據(jù)詳情以及數(shù)據(jù)的一些設(shè)置基本上都會(huì)放在后面的操作欄里，如下圖中的“查看詳情”；

三、數(shù)據(jù)列表

設(shè)計(jì)數(shù)據(jù)列表時(shí)，需要注意和考慮的有以下幾點(diǎn)：

1. 數(shù)據(jù)信息：數(shù)據(jù)列表頁最重要的就是需要展示的字段信息，這需要在充分了解業(yè)務(wù)及需求的條件下進(jìn)行設(shè)計(jì)和考量；
2. 列表分頁：顧名思義，分頁則是把數(shù)據(jù)分成多頁展示，基本上后臺(tái)的數(shù)據(jù)量都會(huì)很大，不可能一頁展示完，這就需要考慮一頁展示多少數(shù)據(jù)了。分頁時(shí)，涉及到的主要有：當(dāng)前頁、上一頁/下一頁、頁面總數(shù)、頁面的快捷跳轉(zhuǎn)，若有需要，還可以展示一下數(shù)據(jù)總條數(shù)以及一頁展示多少條的設(shè)置，當(dāng)然，這些還要考慮研發(fā)使用何種組件以及實(shí)現(xiàn)的難易程度；
3. 數(shù)據(jù)加載：數(shù)據(jù)的加載與列表的設(shè)計(jì)有很密切的關(guān)系。由于數(shù)據(jù)量通常都比較大，若一次性加載，則會(huì)導(dǎo)致速度特別慢。所以需要提前與研發(fā)溝通清楚各種情形下的數(shù)據(jù)加載方式、是否需要做本地緩存等問題。雖然這些是研發(fā)方面的問題，但若不提前溝通，勢(shì)必會(huì)出現(xiàn)問題；
4. 若數(shù)據(jù)比較多而雜，可以就某些重點(diǎn)字段做一個(gè)簡單的統(tǒng)計(jì)表，如上圖“金額匯總”表；
5. 列表展示規(guī)則：需要考慮數(shù)據(jù)的默認(rèn)展示方式，如默認(rèn)按照日期倒序排列等，在列表的表頭處，也可以在某些字段旁增加排序、篩選的操作；
6. 特殊標(biāo)記：某些異常數(shù)據(jù)在展示上需要作何區(qū)別，如用顏色、字體、圖標(biāo)等進(jìn)行區(qū)分，方便發(fā)現(xiàn)問題；
7. 其他：可以考慮是否需要提供一些其他的功能，如快捷復(fù)制訂單編號(hào)等等，當(dāng)然，這些就是比較細(xì)的問題了，可以根據(jù)需要添加。

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

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