分頁這個功能往往因為設計點太小而被忽視，但其實分頁這個功能，也有許多細節值得考慮。這篇文章里，作者就對分頁的作用、結構等方面進行了經驗分享，一起來看。

分頁在B端是一個很重要的功能，但往往因為設計點太小而被設計師忽略。上一周我在優化系統的大數據表單頁面，發現了許多問題，也踩了點坑，記錄下來和各位分享點經驗。

一、什么是分頁

Element：當數據量過多時，使用分頁分解數據。

Ant Design：采用分頁的形式分隔長列表，每次只加載一個頁面。

TDeisgn：用于模塊內切換內容的控件。

也就是說當頁面出現數據量過多或者長內容列表需要加載時，可以利用分頁器控制單頁內的信息數量，把大內容切割成為小塊展示在頁面上。

雖各大廠對分頁的設計略有不同，但往往都逃不過以下這幾個元素。其中，「上一頁」「當前頁」「下一頁」是分頁最基本的三要素。

二、分頁的作用

1. 減少用戶單次請求對服務器產生的性能壓力和時間損耗

在大數據量的場景下，若不做分頁，服務器就需要承擔巨大的壓力，龐大的數據量一次性傳給前端，導致加載緩慢甚至服務器崩潰。

2. 減少低價值的請求

在大數據量的結果頁中，若用戶在查看完前幾頁之后發現該數據不是自己想要的，就能立馬退出頁面，無需等待所有的結果加載完成，從而減少了無價值的加載請求。

三、分頁的結構

1. 總數據數

總數據數的顯示可以讓用戶具有掌控感和安全感，讓用戶在操作時更具心理預期。

2. 單個頁面顯示的條數

單個頁面顯示的條數也可稱為步長設置。在步長的規則設計上，各家系統略有不同。Acro在當前頁面切換步長后自動跳轉回第一頁。

而Element在設置步長后則保持原位置不動。

看似Element的做法是更優解，但設置步長這個操作并沒有什么意義，也會給前端開發工程師徒增工作量。不論是選擇Acro還是Element的做法，切換步長時，數據位置已經改變，用戶也找不到剛剛看到的數據去了什么位置。

在優化系統時，PM提出了給分頁加步長的這么一個需求，原因是因為他使用的電腦分辨率比我的要高，因此在我頁面上顯示十行數據時為滿屏狀態，而他的頁面底部還有許多留白。

此時靠用戶改變步長增加了用戶的交互成本，但如果讓前端工程師把「頁面展示規定數量」規則放開，改成「自適應顯示」，不限制每行Min-Height，保證低分辨率正常顯示，超出滾動的規則，問題也就解決了。

3. 相鄰頁數

相臨的頁碼是為了讓用戶能夠更快速的點擊跳轉到附近頁面。

設計師需要注意頁碼展示的數量一定要夠長，不然點擊臨頁的作用就會等同于「上一頁」「下一頁」的按鈕。

點擊「上一頁」按鈕一下便能跳轉到第8頁，點擊兩下便能到第7頁，也不是什么費力的事情。若展示更多的相鄰頁數，頁碼就能起到快速跳轉的作用。

4. 尾頁

尾頁不一定是總頁數。

如果數據非常的龐大，顯示總頁數會給前端帶來比較大的壓力，如果在業務中用戶并沒有查看最后一頁的需求，那么可以不在尾頁顯示總頁數。

如果用戶就想看最后一頁的數據，那么利用倒序或者跳至尾頁豈不更方便快捷些。

5. 跳轉頁面

下圖是TDesign設計系統中給出的跳轉頁面樣式。

TDesign在跳轉頁面的按鈕展現了總頁數，我認為是一個過多的設計。

其一：分頁有尾頁做提示。

其二，如下圖Element給出的樣式，當輸入超過頁面數量的頁碼時，系統不生效，即便用戶輸入很長一段數字也不會產生什么問題。

還有兩個值得注意的點就是數據的刷新方式和使用頻率。

在設計時，需要與前端充分溝通，知道該頁面的數據是否出于一直刷新的狀態和使用頻率。若該數據頁一直處于刷新的狀態，那么原本在第一頁的數據將會一直往后出現在第二頁，第三頁…那么，即便你記住了某一條數據所處的頁數，他的位置在不斷的刷新，回過頭輸入頁碼又怎么能找到他呢。

同理，若該數據用戶好幾個月不查看一次，那他也不會記住數據所在的位置，也更不會想要去查看了。我想任何人在用瀏覽器搜索某個內容時，都不會滑到頁面底部去選擇頁碼吧。

這時，跳轉頁面在分頁的中便也沒有出現的意義了。

6. 隱藏分頁

走查時，PM扔給我一個截圖說，當數據只加載出來一頁時就別展示分頁了。

我帶著需求和前端進行了溝通，發現在Element組件庫中有一個特殊的場景是隱藏分頁，當數據只有一頁時可以選擇隱藏分頁，但我和前端一致認為沒有必要隱藏分頁。

原因有兩點。

其一，該數據列表關聯的執行動作是在不斷運行的，也就是說數據會在不停的增加，很快數據就會占滿一頁。那么就沒有必要為這短暫的一刻把分頁做一個隱藏，不僅增加了交互成本也增加了開發和測試的成本。

其二，若該數據結果數量基本不變，保持在一頁左右，甚至小于一頁，那么也就沒有必要做分頁了吧。

設計師在進行分頁時，要充分了解組件特點，全面考慮數據特性，與開發隨時保持交流，避免做出美而不實的設計。

文章到這就結束了，下次談談分頁加載和無限加載的區別。