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

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

列表交互分區(qū)

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

整體操作區(qū)

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

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

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

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

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

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

列表屬性

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

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

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

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

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

總結

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

相關閱讀：

實戰(zhàn)經(jīng)驗：運營后臺產(chǎn)品的重構

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

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