編輯導語：我們在網(wǎng)頁上瀏覽內(nèi)容時，劃到最下面時經(jīng)常需要進行翻下一頁查看新的內(nèi)容，也可以選擇跳轉到其他頁數(shù)；讓我們在瀏覽信息是更加清晰，以免當前頁太多信息造成混亂；本文作者詳細介紹了分頁功能的分析與設計，我們一起來看一下。

一、分頁功能解決的問題

在網(wǎng)頁上瀏覽內(nèi)容時，通常在該頁面的底部，會有個分頁的功能，通過翻頁等操作，跳轉到其他頁面查看新的內(nèi)容。

當有大量信息需要展示給用戶時，為了減少用戶單次請求對服務器產(chǎn)生的性能壓力和時間損耗，每次只加載固定數(shù)量的少量信息。

用戶瀏覽完之后，通過操作分頁功能，再向服務器發(fā)起請求，以獲取更多內(nèi)容。

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

• 分頁功能減少了單次請求對服務器產(chǎn)生的性能壓力和等待時間：當有成百上千個圖片要展示給用戶時，若不做分頁，服務端就需要將這么龐大的數(shù)據(jù)量一次性傳遞給前端，會造成下載量大——服務器壓力大，相應的用戶等待數(shù)據(jù)加載的時間也會更長。
• 分頁功能減少了低價值請求：以上圖的天貓中筆記本搜索結果頁面為例，每頁60個商品，總頁數(shù)76頁，一共4560個商品；若不做分頁功能，用戶的一次搜索請求，就需要一次將4560個商品包含圖片全部加載出來；但實際情況是，用戶真的會把這個4560個商品全部看完嗎？也許他只看了前5頁就確定了購買意向，那這時后面71頁的內(nèi)容就是白加載了，這其實就是無價值的加載請求。

二、分頁子功能極其作用

不同場景下分頁的構成元素不同，構成元素的不同使得分頁功能的作用也有一些差別。

下圖是一個常見的分頁設計樣式，子功能主要有頁碼展示、數(shù)據(jù)量展示以及翻頁操作。我們來分析這個基本分頁設計有哪些作用。

1. 頁碼展示

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

頁碼展示幫助用戶定位內(nèi)容：例如用戶在某個商品的搜索結果頁瀏覽時，看到第5頁，這時還是覺得第2頁的一件商品更想買，于是就可以通過點擊頁碼2回到展示該商品的頁面；這就達到了通過頁碼快速定位商品位置的目的，而不用逐個商品逐個商品地往回去查找該商品在哪里。

2. 信息量展示

信息量展示包括頁面總數(shù)、每頁數(shù)據(jù)數(shù)量以及數(shù)據(jù)總量。

信息量的展示用數(shù)字體現(xiàn)了數(shù)據(jù)的多少，讓用戶對要處理的瀏覽任務有心理預期和把控。

商品列表頁、內(nèi)容列表頁，通常會在數(shù)量較大的時候展示頁面總數(shù)和數(shù)據(jù)總量。

客觀的數(shù)字展示出來，一方面是會讓用戶認為該平臺的商品或內(nèi)容非常多，是個可以找到滿足需求的商品或內(nèi)容的平臺，對平臺產(chǎn)生好感；另一方面是對瀏覽的內(nèi)容有預期，例如某個商品的搜索結果共有500頁，由于數(shù)量太多不能看全部看完，于是決定按銷量排序，從前20頁中挑選一個最滿意的。

管理后臺的列表頁，也會展示信息量；管理后臺是企業(yè)人員處理工作的地方，這里展示信息量，方便工作人員對平臺中的信息量，以及任務量有清晰和客觀的認識。

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

3. 翻頁操作

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

逐頁翻頁操作方便用戶按順序閱讀；用戶瀏覽信息時會像讀書一樣逐頁地瀏覽下去，“上一頁”、“下一頁”用的次數(shù)較多；如果沒有逐頁翻頁的操作，用戶只能點擊不同位置的頁碼去訪問不同的頁面，十分不方便。

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

三、分頁功能的設計

1. 確定組合元素

不同場景下分頁的構成元素不同，分頁功能設計的第一步，需要根據(jù)場景確定該功能由哪些元素構成。

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

數(shù)據(jù)總量：數(shù)據(jù)總量說明了用戶需要瀏覽的內(nèi)容的總量；常見的場景，比如在管理后臺篩選符合條件的數(shù)據(jù)記錄時，搜索結果頁通常會展示這個信息，這讓運營人員在操作時有心理預期。

頁面展示數(shù)量：這個元素能控制每個頁面展示多少數(shù)據(jù)；當搜索結果很多，成百上千，只需粗略瀏覽時，這個功能可以擴展每個頁面展示的信息數(shù)量，避免頻繁翻頁導致的效率低下；同樣的，當搜索結果不多，需要精細瀏覽時，又可以將每頁的數(shù)量調(diào)少。

上一頁和下一頁翻頁：這是分頁功能中最基本的構成元素，通過點擊上一頁回到前一個瀏覽的頁面，通過點擊下一頁進入后一個要瀏覽的頁面；就像讀書時會有按頁面逐頁閱讀的情況，網(wǎng)頁也會經(jīng)常出現(xiàn)這樣逐頁瀏覽的情況；當內(nèi)容非常少的時候，就可以只要這個基本的構成元素，例如輪播圖中的上下翻頁其實就是一樣的元素。

當前頁碼：當前頁碼說明了當前所處的位置。

相鄰頁碼展示：頁碼數(shù)字展示通常展示當前頁碼的前后幾頁，比如當前在第10頁，頁碼數(shù)字展示前后各5頁，那頁碼數(shù)字就為5、6、7、8、9、10、11、12、13、14、15；連續(xù)頁碼的展示方便用戶快速跳轉到附近的頁面。

更多分頁：當數(shù)據(jù)量很大時就需要很多的分頁來承載內(nèi)容；但頁面大小是有限的，不能將全部的頁碼數(shù)字都展示出來，于是就省略了離當前頁面很遠的頁碼數(shù)，再通過點擊圖標就能訪問這些被省略頁碼的頁面。

總頁數(shù)：總頁數(shù)說明了內(nèi)容一共有多少頁，就像一本紙質書有總頁數(shù)，一本有聲書有總時長；通過這個元素，用戶才能了解內(nèi)容的多少，對整理內(nèi)容有個把握。

頁碼跳轉：頁碼跳轉幫助用戶從當前頁面跳轉到其他某個頁面；比如用戶在搜索了某件商品，按銷量排序，這時瀏覽到了第15頁，滿意度越來越低；于是打算從前5頁選一個，這時就能通過頁碼跳轉快速跳轉到第1-5頁了。

2. 后端分頁且局部刷新請求數(shù)據(jù)

在設計分頁功能時，通常選擇后端分頁且局部刷新的方法來加載數(shù)據(jù)。這種方法減少了服務器壓力。

不同于前端分頁中將數(shù)據(jù)一次性全部取出來，后端分頁是每次請求只查詢一頁的值，這樣做避免了服務端將龐大的數(shù)據(jù)量一次傳遞給前端，造成下載量大和服務器壓力大等問題。

局部刷新就是，當點擊下一頁之后，前端發(fā)起請求去后端拿數(shù)據(jù)填充到頁面的過程中，頁面沒有進行全局刷新（全局刷新可以理解為頁面進行了一次跳轉，重新跳轉到自己），只是頁面特定區(qū)域通過前端更新。

看下圖這個管理后臺的例子，這是經(jīng)過篩選后，語言為英語，分類為浪漫的圖書列表，當點擊下一頁后：

如果是全局刷新，服務端需要返回整個頁面，包括篩選區(qū)域和結果列表內(nèi)容，用戶會看到該頁面刷新了一次，也就是頁面進行了一次跳轉，重新跳到自己。

如果是局部刷新，服務端只用返回結果列表，此時頁面除了結果列表區(qū)域會加載出新的數(shù)據(jù)，其他部分都不會刷新，減輕了服務器的壓力。

四、總結

PC端商品、資訊內(nèi)容的列表頁面，通常會有個分頁的功能，通過翻頁等操作，用戶可以跳轉到其他頁面查看新的內(nèi)容。

分頁功能減少了單次請求對服務器產(chǎn)生的性能壓力、用戶等待時間以及低價值請求。

分頁的子功能主要有頁碼展示、數(shù)據(jù)量展示以及翻頁操作，分別都有各自的作用，例如內(nèi)容定位、對內(nèi)容的預期把控等；我們在設計分頁功能時，可以根據(jù)業(yè)務需要來選擇不同的構成元素。

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

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