寫導語：我們在網頁上瀏覽內容時，劃到最下面時總是需要進行翻下一頁調查新的內容，也完全可以選擇跳轉到很多頁數；讓我們在瀏覽消息是更加清晰，以免目前頁太多消息造成混亂；本文作者仔細講解了分頁功能的解析與設計，我們一起來就這樣看一下。

一、分頁功能解決的問題在網頁上瀏覽內容時，一般在該頁面的底部，會有個分頁的功能，通過翻頁等操作，跳轉到很多頁面調查新的內容。

當有超級多的消息需要展示給玩家時，為了減少玩家單次請求對服務器發生的性能壓力和時光損耗，每當只加載特定數量的少量消息。

玩家瀏覽完之后，通過操作分頁功能，再向服務器發起請求，以獲得再多內容。

詳細來說分頁功能解決了以下兩個問題。

分頁功能減少了單次請求對服務器發生的性能壓力和等待時光：當有成百上千個圖片要展示給玩家時，若不做分頁，服務端就需要將這么超大的資料量只能用一次的傳遞給前端，會造成安裝量大——服務器壓力大，相對應的玩家等待資料加載的時光也會更長。分頁功能減少了低價值請求：以上圖的天貓中筆記本查詢搜索結果頁面為例，每頁60個商品，總頁數76頁，總共4560個商品；若不做分頁功能，玩家的一次查詢搜索請求，就需要一次將4560個商品包含圖片全部加載出去；但事實狀態是，玩家真的會把這種4560個商品全部就這樣看完嗎？也許他只就這樣看了前5頁就確認了購置意向，那這時后面71頁的內容就是白加載了，這其實就是無價值的加載請求。

二、分頁子功能極其作用不一樣場景下分頁的構成元素不一樣，構成元素的不一樣使分數頁功能的作用也有有的差別。

下圖是一個常見的分頁設計樣式，子功能主要有頁碼展示、資料量展示以及翻頁操作。我們來解析這種基礎分頁設計有哪些作用。

1. 頁碼展示如圖所示，頁碼展示包括目前頁碼展示、目前頁碼相鄰幾個頁碼的展示以及首末頁頁碼展示。

頁碼展示幫助玩家定位內容：比如玩家在某個商品的查詢搜索結果頁瀏覽時，觀看到的第5頁，這時還是認為第2頁的一件商品更想買，于是就可以通過點一下頁碼2回到展示該商品的頁面；這就達到了通過頁碼迅速定位商品地點的目的，而不用逐個商品逐個商品地往回來查找該商品在哪里。

2. 消息量展示消息量展示包括頁面總數、每頁資料數量以及資料總量。

消息量的展示用數字體現了資料的多少，讓玩家對要處理的瀏覽任務有心理預期和把控。

商品列表頁、內容列表頁，一般會在數量較大的時候展示頁面總數和資料總量。

客觀的數字展示出去，一方面是會讓玩家覺得該平臺的商品或內容很多，是個可以尋找滿足要求的商品或內容的平臺，對平臺發生好感；另一方面是對瀏覽的內容有預期，比如某個商品的查詢搜索結果共有500頁，由于數量太多不可以就這樣看全部就這樣看完，于是決定按銷售額排序，從前20頁中選擇一個最滿意的。

管理后臺的列表頁，也會展示消息量；管理后臺是企業人員處理事情的地方，這里展示消息量，方便事情人員對平臺中的消息量，以及任務量有清晰和客觀的了解。

某個圖書管理后臺，到貨但未上架書籍的列表頁展現了消息量，這時管理員就能明白：目前到貨的數量（消息量），以及要上架書籍的數量（任務量）。

3. 翻頁操作翻頁操作包括上一頁下一頁這樣的逐頁翻頁，以及不相鄰頁碼的跳轉。

逐頁翻頁操作方便玩家按順序瀏覽；玩家瀏覽消息時會像讀書一樣逐頁地瀏覽下去，“上一頁”、“下一頁”用的次數較多；如果沒有逐頁翻頁的操作，玩家就只能點一下不一樣地點的頁碼去采訪不一樣的頁面，十分不方便。

不相鄰頁碼的跳轉功能提升了跳轉的效率；當需要跳轉到距離目前頁很遠的一個頁面時，就會用到這種功能；比如某件商品的查詢搜索結果頁面按價錢從低到高排序時，翻了前5頁，還是認為這種價位的太低，于是可能會使用該功能直接跳轉到第20頁開始瀏覽。

三、分頁功能的設計1. 確認配合元素不一樣場景下分頁的構成元素不一樣，分頁功能設計的第一步，需要根據場景確認該功能由哪些元素構成。

可選的元素有哪些，各自有什么用呢？

資料總量：資料總量說明了玩家需要瀏覽的內容的總量；常見的場景，例如在管理后臺篩選符合條件的資料記錄時，查詢搜索結果頁一般會展示這種消息，這讓運營人員在操作時有心理預期。

頁面展示數量：這種元素能控制每一個頁面展示多較少數據；當查詢搜索結果很多，成百上千，只需粗略瀏覽時，這種功能可以擴展每一個頁面展示的消息數量，避免頻繁翻頁導致的效率低下；一樣的，當查詢搜索結果不多，需要細膩瀏覽時，又可以將每頁的數量調少。

上一頁和下一頁翻頁：這是分頁功能中最基礎的構成元素，通過點一下上一頁回到前一個瀏覽的頁面，通過點一下下一頁進入后一個要瀏覽的頁面；就像讀書時會有按頁面逐頁瀏覽的狀態，網頁也會總是出現這樣逐頁瀏覽的狀態；當內容非常少的時候，就可以只要這種基礎的構成元素，比如輪播圖中的上下翻頁其實就是一樣的元素。

目前頁碼：目前頁碼說明了目前所處的地點。

相鄰頁碼展示：頁碼數字展示一般展示目前頁碼的前后幾頁，例如目前在第10頁，頁碼數字展示前后各5頁，那頁碼數字就為5、6、7、8、9、10、11、12、13、14、15；連續頁碼的展示方便玩家迅速跳轉到周圍的頁面。

再多分頁：當資料量很大時就需要很多的分頁來承載內容；但頁面大小是有限的，不可以將全部的頁碼數字都展示出去，于是就省略了離目前頁面很遠的頁碼數，再通過點一下圖標就能采訪這些被省略頁碼的頁面。

總頁數：總頁數說明了內容總共有多少頁，就像一本紙質書有總頁數，一本有聲書有總時長；通過這種元素，玩家才能知道內容的多少，對整理內容有個把握。

頁碼跳轉：頁碼跳轉幫助玩家從目前頁面跳轉到很多某個頁面；例如玩家在查詢搜索了某件商品，按銷售額排序，這時瀏覽到了第15頁，滿意度越來越低；于是打算從前5頁選一個，這時就能通過頁碼跳轉迅速跳轉到第1-5頁了。

2. 后端分頁且局部刷新請求資料在設計分頁功能時，一般選擇后端分頁且局部刷新的途徑來加載資料。這個途徑減少了服務器壓力。

不一樣于前端分頁中將資料只能用一次的全部取出去，后端分頁是每當請求只查詢一頁的值，這樣做避免了服務端將超大的資料量一次傳遞給前端，造成安裝量大和服務器壓力大等問題。

局部刷新就是，當點一下下一頁之后，前端發起請求去后端拿資料填充到頁面的過程中，頁面沒有進行全局刷新（全局刷新可以理解為頁面進行了一次跳轉，從頭開始跳轉到自己），只是頁面特殊地區通過前端更新。

就這樣看下圖這種管理后臺的舉例，這是經歷過篩選后，語言為英文，分類為浪漫的圖書列表，當點一下下一頁后：

如果是全局刷新，服務端需要返回整個頁面，包括篩選地區和結果列表內容，玩家會觀看到的該頁面刷新了一次，也就是頁面進行了一次跳轉，從頭開始跳到自己。

如果是局部刷新，服務端只用返回結果列表，此時此刻頁面除了結果列表地區會加載出新的資料，很多部分都不可能刷新，減少了服務器的壓力。

四、總結PC端商品、新聞內容的列表頁面，一般會有個分頁的功能，通過翻頁等操作，玩家可以跳轉到很多頁面調查新的內容。

分頁功能減少了單次請求對服務器發生的性能壓力、玩家等待時光以及低價值請求。

分頁的子功能主要有頁碼展示、資料量展示以及翻頁操作，分別都有各自的作用，比如內容定位、對內容的預期把控等；我們在設計分頁功能時，可以根據業務需要來選擇不一樣的構成元素。

本文由 @相與 原創發布于每一個人都是業務經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議