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

一、分頁功能解決的問題

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

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

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

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

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

二、分頁子功能極其作用

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

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

1. 頁碼展示

如圖所示，頁碼展示包括當(dāng)前頁碼展示、當(dāng)前頁碼相鄰幾個(gè)頁碼的展示以及首末頁頁碼展示。

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

2. 信息量展示

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

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

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

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

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

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

3. 翻頁操作

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

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

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

三、分頁功能的設(shè)計(jì)

1. 確定組合元素

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

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

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

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

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

當(dāng)前頁碼：當(dāng)前頁碼說明了當(dāng)前所處的位置。

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

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

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

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

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

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

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

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

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

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

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

四、總結(jié)

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

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

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

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

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

上一章節(jié)中，我們?yōu)閣ordpress網(wǎng)站的首頁添加了全站文章列表。一個(gè)wordpress網(wǎng)站不可能只有幾篇文章，可能會(huì)有成千上萬的文章，作為一個(gè)wordpress博客主題模板，一般情況下，不可能讓所有的文章在一個(gè)頁面一下子全部顯示出來，如果真這樣，網(wǎng)頁的負(fù)載會(huì)非常大。正確的處理方式，是先顯示最前面的十幾篇或二十幾篇文章，然后，“點(diǎn)擊一個(gè)分頁按鈕”或者“鼠標(biāo)向下滾動(dòng)觸發(fā)一個(gè)事件”后，再顯示后面的十幾篇或二十幾篇文章，以此類推。本節(jié)，我們來介紹“如何給wordpress網(wǎng)站的文章列表添加分頁效果”，一起來看看吧。

方法一：給wordpress網(wǎng)站模板添加自定義分頁函數(shù)。

在wordpress網(wǎng)站模板的functions.php文件中添加如下代碼：

//分頁函數(shù)function pages($query_string){

global $posts_per_page, $paged; //全局變量

$my_query=new WP_Query($query_string ."&posts_per_page=-1"); //創(chuàng)建查詢對象

$total_posts=$my_query->post_count; //通過查詢對象獲取文章總數(shù)

if(empty($paged)) $paged=1; //當(dāng)前頁碼數(shù)，如是$paged為空，就讓

$paged=1$prev=$paged - 1; //上一頁變量

$next=$paged + 1; //下一頁變量

$range=4; //

$showitems=($range * 2)+1; //顯示多少個(gè)分頁頁碼按鈕

$pages=ceil($total_posts/$posts_per_page); //獲取總頁數(shù)

if(1 !=$pages){

echo "<div class='pagination'>";

echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";

echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一頁</a>":"";

for ($i=1; $i <=$pages; $i++){

if (1 !=$pages &&( !($i >=$paged+$range+1 || $i <=$paged-$range-1) || $pages <=$showitems )){

echo ($paged==$i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";

}

}

echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一頁</a>" :"";

echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";echo "</div>\n";

}

}

然后，在wordpress網(wǎng)站前臺(tái)模板的文章列表的代碼下方調(diào)用這個(gè)分頁函數(shù)，代碼如下：

<?php pages($query_string); //列表分頁 ?>

然后，我們就可以在wordpress網(wǎng)站的文章列表下方看到分頁按鈕。如果想要樣式好看一點(diǎn)，可以對分頁按鈕添加CSS樣式，來進(jìn)行美化一下。

方法二：使用wordpress自帶的分頁函數(shù)。

為了更方便wordpress網(wǎng)站模板開發(fā)者開發(fā)模板主題，wordpress從4.0版本開始，就提供了一個(gè)分頁函數(shù)the_posts_pagination()，通過這個(gè)函數(shù)，我們同樣可能實(shí)現(xiàn)wordpress網(wǎng)站的文章列表的分頁效果。代碼如下：

the_posts_pagination( array('mid_size'=> 3, //當(dāng)前頁碼數(shù)的 兩邊 顯示幾個(gè)頁碼。'prev_text'=>'<', //上一頁'next_text'=>'>', //下一南) );

這個(gè)函數(shù)跟wordpress其wp_list_pages()等函數(shù)類似，有一個(gè)參數(shù)，這個(gè)參數(shù)可是一個(gè)數(shù)組類型（如上面的代碼，參數(shù)就是數(shù)組類型），也可以是一個(gè)字符串類型，上面的的代碼的參數(shù)修改成字符串類型后，如下：

the_posts_pagination("mid_size=3&prev_text=<&next_text=>");

是使用字符串類型，還是使用數(shù)組類型，主要根據(jù)開發(fā)者的個(gè)人愛好，我個(gè)人還是比較喜歡用數(shù)組類型，看起來比較清楚。

在wordpress網(wǎng)站模板開發(fā)中，使用上面任何一種方式來添加文章列表的分頁效果都可以，不過，我個(gè)人還是建議使用wordpress自帶的函數(shù)the_posts_pagination()，對開發(fā)更省事，效率更高，而且是wordpress自己的函數(shù)，后期都不需要維護(hù)。如果想讓分頁按鈕布局更加個(gè)性化，可以考第一種方式。

如果還有什么不太明白的，或者你想了解什么，可以在下面評論中給我留言。