文章來自作者的自身工作經(jīng)驗(yàn)，希望對你有所幫助。

做后臺的產(chǎn)品經(jīng)理都會(huì)知道，列表是后臺中最常見一種展現(xiàn)形式，幾乎每個(gè)業(yè)務(wù)模塊都會(huì)用到列表。列表雖然常用，但是想做好一張列表并不是一件容易的事情，下面我來介紹一下怎么設(shè)計(jì)一張后臺的列表。

列表交互分區(qū)

整張列表我們可以劃分為三個(gè)大的模塊：整體操作區(qū)、個(gè)體展示操作區(qū)、列表屬性

整體操作區(qū)

• 列表搜索
• 列表篩選
• 列表新增

整體操作區(qū)是指對列表進(jìn)行整體操作的部分，其中搜索和篩選是針對有相對大量的數(shù)據(jù)進(jìn)行設(shè)計(jì)的，讓使用者能夠快速找到目標(biāo)數(shù)據(jù)，提升效率。所以核心是要平衡好研發(fā)成本與收益的關(guān)系，在產(chǎn)品早期數(shù)據(jù)量較小的時(shí)期，搜索和篩選功能都是可以忽略的功能。

單體展示&操作區(qū)

• 信息展示區(qū)
• 單體操作區(qū)

列表單體區(qū)域——列表主體， 主要分為信息展示與單體操作兩個(gè)部分。對于信息展示區(qū)來說，每一個(gè)字段都要是有用的，能夠傳達(dá)足夠的信息量，非必要不要加。同時(shí)要定義好每個(gè)字段的信息，如“字段類型，長度限制，是否換行”等信息，是的整個(gè)表單能夠簡潔清晰。

單體操作區(qū)，一般是對單條信息進(jìn)行的“增、刪、改、查”等操作。其中的刪除和修改要格外注意，尤其是涉及到線上正在使用的時(shí)候，產(chǎn)品經(jīng)理要做出合理的判斷，考慮盡可能全的場景，定義好不同狀態(tài)下允許的操作類型及權(quán)限，必要的時(shí)候在觸發(fā)信息執(zhí)行時(shí)做相應(yīng)提示。

列表屬性

• 列表導(dǎo)出
• 列表分頁
• 列表排序規(guī)則
• 列表的數(shù)據(jù)加載

列表導(dǎo)出，是針對需要導(dǎo)出的內(nèi)容進(jìn)行設(shè)計(jì)的，最好使用現(xiàn)成的組件，會(huì)大大降低設(shè)計(jì)和研發(fā)成本。

列表分頁，當(dāng)涉及到數(shù)據(jù)量較大時(shí)，需要支持分頁及頁面跳轉(zhuǎn)，這里需要注意的是分頁數(shù)量需根據(jù)業(yè)務(wù)的實(shí)際情況靈活設(shè)置，亦可使用現(xiàn)成的組件或自己開發(fā)相應(yīng)的組件。

列表排序，當(dāng)我們進(jìn)行操作時(shí)，會(huì)對某一部分?jǐn)?shù)據(jù)操作的頻次遠(yuǎn)遠(yuǎn)大于另一些數(shù)據(jù)，這時(shí)候排序就異常重要。列表的排序可以支持多種排序規(guī)則，一般會(huì)有主排序規(guī)則和次排序規(guī)則，需綜合評估研發(fā)需求程度和研發(fā)成本進(jìn)行安排，非必要的時(shí)候就采用默認(rèn)的排序規(guī)則。常用的排序規(guī)則有“時(shí)間倒序”、“數(shù)量升序（降序）”、“狀態(tài)序列”等。

列表的數(shù)據(jù)加載，當(dāng)數(shù)據(jù)量較大時(shí)，一次性加載數(shù)據(jù)會(huì)非常慢，這時(shí)候就要考慮數(shù)據(jù)分段加載的設(shè)計(jì)。這里是坑最深的地方，需要考慮數(shù)據(jù)搜索時(shí)的分段分段加載&整體加載；有篩選條件下的數(shù)據(jù)加載情況；是否要做本地緩存以及緩存數(shù)據(jù)在何種契機(jī)下同步。這些雖然是技術(shù)設(shè)計(jì)上的細(xì)節(jié)，但是產(chǎn)品經(jīng)理在設(shè)計(jì)的時(shí)候如果考慮不全面會(huì)挖下無數(shù)的坑等著你來填。

總結(jié)

列表想設(shè)計(jì)好也不是一件容易的事情，多多總結(jié)，多多打磨，形成一套適應(yīng)自身業(yè)務(wù)體系的列表規(guī)范，才能事半功倍，別等挖了坑才想到去填。歡迎留言交流。

相關(guān)閱讀：

實(shí)戰(zhàn)經(jīng)驗(yàn)：運(yùn)營后臺產(chǎn)品的重構(gòu)

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

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