編輯導讀：列表頁是APP中常見的頁面類型之一，它是承接導航頁與詳情頁的中間頁。網(wǎng)頁端PM需要了解常見列表頁的相關(guān)規(guī)范，本文作者根據(jù)多年的經(jīng)驗對通用邏輯和文檔規(guī)范進行了總結(jié)，與大家分享，希望對你有所啟發(fā)。

Web后臺產(chǎn)品的列表頁通常由列表+分頁+ 搜索組成，接下來分別介紹他們的邏輯規(guī)范和應用場景。相關(guān)規(guī)范以Axure原型的方式整理到網(wǎng)址：https://fulgv0.axshare.com

01 列表項規(guī)范

列表項包含字段名和對應的字段值。我們需要了解他們的常用規(guī)范。

1. 列表項數(shù)量

建議列表項的數(shù)量不要太多，這樣一屏很難展示所有的列表項或者看不全每個列表項的值。

PM需要學會思考少即是多，而不是粗暴的展示所有數(shù)據(jù)給到用戶。

2. 列表項寬度

列表項寬度建議使用%表示，從而保證一屏幕可以看到所有列表項。

如果列表項寬度使用px表示，則無法100%保證不會超過一屏幕，即需要左右滾動。原因是列表項1寬度+列表項2寬度+…往往大于屏幕寬度，而且即使減少寬度也無法同時滿足不同用戶的屏幕分辨率。

通常前端開發(fā)為了省事，設置所有列表項的寬度一樣。

• 如果列表項很少并且字段值的字符數(shù)也不多，可以這樣設置。

• 如果列表項很多或者字段值的字符數(shù)不太固定，需要根據(jù)不同列表項的性質(zhì)進行適當調(diào)整，才能保證不錯的視覺效果。

• 如果列表項對應的字段值會出現(xiàn)很多的字符串，超出寬度的部分則會自動換行。如果不想換行，則可以約束最多顯示前N字(后面的用省略號…表示，懸浮的時候用toast顯示完整的信息)

02 對齊規(guī)范

1. 列表項對齊

列表項默認靠左對齊，根據(jù)需要也可以居中對齊。

如果列表項很少并且字段值的字符數(shù)也不多，可以居中對齊。

如果部分列表項的字段值的字符數(shù)有多有少，此時居中對齊會比較丑。

2. 標題項對齊

列表項的字段名和字段值，需要保證對齊方式一致。不要出現(xiàn)字段名靠左對齊而字段值居中對齊這樣的奇葩效果。

03 分頁規(guī)范

1. 每頁條數(shù)

每頁默認顯示N條數(shù)據(jù)，超過則分頁顯示，默認展示第一頁。N通常為10、15、20。列表底部最好顯示每頁顯示N條，方便用戶理解。

注意：

• 有些列表頁由于業(yè)務需要，不需要分頁展示。需要提前說明。
• 對于自動加載的頁面最好在每頁下方提示文字”正在加載更多”，然后加載出第二頁，以此類推。列表全部加載完畢后，文字顯示”已經(jīng)到底啦”

2. 顯示總條數(shù)

顯示當前列表的總條數(shù)，當搜索列表的時候則顯示對應結(jié)果的總條數(shù)。

3. 顯示總頁碼

顯示當前列表的總頁碼，總頁碼=總條數(shù)/每月條數(shù)的結(jié)果取整+1，如無余數(shù)則不+1。

4. 跳轉(zhuǎn)到第N頁

通常有4種實現(xiàn)方式①點擊對應頁碼去跳轉(zhuǎn)②點擊上一頁下一頁去跳轉(zhuǎn)③點擊首頁尾頁去跳轉(zhuǎn)④輸入頁碼直接跳轉(zhuǎn)。

04 搜索規(guī)范

搜索后進入詳情頁，然后返回列表依然保留原先篩選條件的搜索結(jié)果列表。比如我搜索指定余額區(qū)間的用戶，然后我查看他們的詳情，然后返回到該頁面的時候依然是這些搜索結(jié)果。而不需要重新搜索。

#專欄作家#

浪子，個人微信langzipm，公眾號：浪子畫原型(langzisay)。擅長于APP原型設計和產(chǎn)品架構(gòu)。

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

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