輯導(dǎo)語：什么時(shí)候用分頁加載，什么時(shí)候用無限加載呢？本文作者總結(jié)了分頁加載和自動加載的區(qū)別和各自的優(yōu)缺點(diǎn)，供大家理清思路，在做交互稿時(shí)能夠選擇更恰當(dāng)?shù)姆绞?。推薦對交互設(shè)計(jì)感興趣的朋友們閱讀。

幾天前，我接到一個(gè)搜索相關(guān)的需求，用一句話概括就是：

用戶通過關(guān)鍵詞搜索相關(guān)文檔。

這聽起來就簡單極了，你腦海中可能都已經(jīng)出現(xiàn)交互稿的模樣了吧。

我也是這么想的，三下五除二的便畫出了交互稿，一個(gè)搜索框，一個(gè)內(nèi)容區(qū)，一個(gè)分頁，輕輕松松搞定～

當(dāng)我去給老板過稿時(shí)，他問我為什么不采用自動加載的方式。

說實(shí)話，我……沒想清楚。

因此，接下來我仔細(xì)思考了兩種加載方式（分頁加載和自動加載）的區(qū)別，也是這篇文章的來由。

一、梳理思路

除了梳理兩種加載方式的區(qū)別外，也希望通過這篇文章記錄解決問題的思路，希望能夠以小見大。我通常通過競品分析、桌面調(diào)研和個(gè)人觀察來探索問題的解決方案。

搜索是一個(gè)特別常見的場景，市面上有許多成熟的產(chǎn)品，比如Google、Bing等瀏覽器，知乎、微博等社區(qū)產(chǎn)品，它們的產(chǎn)品細(xì)節(jié)必然經(jīng)過無數(shù)次的打磨，因此，觀察這些產(chǎn)品便是在研究最前沿和權(quán)威的資料。

其次是桌面調(diào)研，加載方式作為一個(gè)常用組件，網(wǎng)上肯定存在一些調(diào)研總結(jié)，我通常會通過Google、知乎、人人都是產(chǎn)品經(jīng)理等網(wǎng)站查找一些他人的總結(jié)。

個(gè)人觀察也是十分重要的，產(chǎn)品經(jīng)理有產(chǎn)品sense，設(shè)計(jì)師也有設(shè)計(jì)sense，只有多看多體驗(yàn)，才能真正感受到不同組件直接細(xì)微的區(qū)別。

三種方式并非獨(dú)立進(jìn)行，而是互相融合、相互補(bǔ)充，最終得出結(jié)論。

二、不同加載方式的區(qū)別

1. 分頁加載

分頁加載便是在內(nèi)容區(qū)底部放置分頁按鈕，用戶可以通過頁碼切換信息。

分頁加載有以下幾個(gè)特點(diǎn)：

第一，對信息的數(shù)量以及目前所處的位置一目了然。

信息有10頁還是100頁，我目前看到了第幾頁，還有多久能夠看完有很清晰的認(rèn)知。

第二，方便回溯定位。

比如用戶瀏覽到后面時(shí)，突然想返回去查找前幾頁的一條信息，是可以很方便地通過分頁實(shí)現(xiàn)快速跳轉(zhuǎn)的。

第三，留給用戶思考時(shí)間。

我們在點(diǎn)擊頁碼之后是需要一定的加載時(shí)間才會出現(xiàn)信息的，這會打斷用戶的思路，可是也留給了用戶一定的思考時(shí)間，我能夠通過這個(gè)關(guān)鍵詞獲取到想要的信息嗎，接下來是繼續(xù)瀏覽還是離開網(wǎng)站呢？

我們再來看都有誰在使用分頁加載。

咱們最常見的搜索引擎，例如Google、Bing和百度等以搜索為護(hù)城河的產(chǎn)品，都非常默契統(tǒng)一地采用了分頁的模式。

再比如郵箱、B端產(chǎn)品似乎都傾向于采用分頁加載。

我剛開始一直想不通為什么google等搜索產(chǎn)品會使用分頁加載，使用無需跳轉(zhuǎn)的自動加載可以更快地達(dá)到目的啊。這時(shí)候，再回頭看一下分頁的特點(diǎn)，你會發(fā)現(xiàn)分頁給予用戶強(qiáng)烈的掌控感。

像Google、郵箱或者是其他B端產(chǎn)品，它們都偏向于工具型產(chǎn)品，用戶使用時(shí)帶有明確的目的，更可能用完即走，我們對于工具通常需要更強(qiáng)的掌控感。

2. 自動加載

自動加載無需用戶手動操作，一直下滑即可。自動加載有以下特點(diǎn)：

第一，無法感知內(nèi)容數(shù)量，已經(jīng)瀏覽到那個(gè)部分，剩余多少。

因?yàn)轫撁媸亲詣蛹虞d的，我們無法知道什么時(shí)候才能結(jié)束。通常用戶會在得到結(jié)果或者大概率無法得到結(jié)果時(shí)選擇結(jié)束。

第二，無法快速定位之前的信息。

有些人可能會說有滾動條啊，因?yàn)闈L動條會隨著自動加載的次數(shù)發(fā)生變化，幾乎沒有太多價(jià)值。

第三，加載內(nèi)容過多時(shí)，頁面過長。

這會導(dǎo)致用戶難以及時(shí)返回搜索框，切換關(guān)鍵詞，為了解決這個(gè)問題，通常有兩種方案，在右下角加一個(gè)置頂?shù)膽腋D標(biāo)（我個(gè)人訪談了解到很少有人真正使用置頂按鈕），或者滾動時(shí)搜索框置頂。

第四，永遠(yuǎn)看不到footer。

無法在底部添加其他信息。

第五，非常順滑。

自動加載操作簡單，只需要滾動即可，信息之間沒有明顯的界限或停頓。

總體來講，自動加載可以讓用戶用最少的操作、最短的時(shí)間找到需要的信息。

并且自動加載是一種非常沉浸式的體驗(yàn)，不會打斷用戶思路，甚至沒有操作和時(shí)間的感知。

這對于以休閑娛樂為主的社交型產(chǎn)品是非常適用的。比如知乎、微博等平臺，都在使用無限加載的方式，這可以盡可能把用戶留在平臺上。

3. 自動加載+手動加載

分頁加載和自動加載是最基礎(chǔ)的加載方式，現(xiàn)在還出現(xiàn)了一些手動加載和自動加載相結(jié)合的方式。

通常是在2～3次自動加載后，便會給一個(gè)button觸發(fā)手動加載。這是一種比較折中的方式。

從用戶的角度看，我已經(jīng)瀏覽到第一頁的末尾了，意味著我還想看第二頁的內(nèi)容，為什么還要用分頁打斷我獲取信息。

自動加載2次后產(chǎn)生的信息大概在9屏左右，這對用戶來講不會是一個(gè)很長的頁面，造成心理負(fù)擔(dān)；并且如果9屏依然找不到想要的結(jié)果，要么是搜索詞不對，要么是檢索技術(shù)不行，真正去點(diǎn)擊手動加載的用戶就沒多少了。

比如簡書、google圖片搜索就在采用這種方式。

三、回歸需求

了解不同加載方式的區(qū)別是基礎(chǔ)，對于具體需求我們應(yīng)該采用哪種方式，永遠(yuǎn)都是具體問題具體分析，有時(shí)候還需要考慮技術(shù)問題。

我們的產(chǎn)品是一款更加偏向工具型的產(chǎn)品，最好像Google一樣采用分頁的方式。但是這種搜索最好能在第一頁就給到結(jié)果，我們目前的技術(shù)無法達(dá)到非常精準(zhǔn)的結(jié)果匹配。因此綜合來看，選用了更加折中的自動加載與手動加載相結(jié)合的方式。

作者：栗子；公眾號： 栗子設(shè)計(jì)喵

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

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

輯導(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í)，通常在該頁面的底部，會有個(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ù)量一次性傳遞給前端，會造成下載量大——服務(wù)器壓力大，相應(yīng)的用戶等待數(shù)據(jù)加載的時(shí)間也會更長。
• 分頁功能減少了低價(jià)值請求：以上圖的天貓中筆記本搜索結(jié)果頁面為例，每頁60個(gè)商品，總頁數(shù)76頁，一共4560個(gè)商品；若不做分頁功能，用戶的一次搜索請求，就需要一次將4560個(gè)商品包含圖片全部加載出來；但實(shí)際情況是，用戶真的會把這個(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)容列表頁，通常會在數(shù)量較大的時(shí)候展示頁面總數(shù)和數(shù)據(jù)總量。

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

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

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

3. 翻頁操作

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

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

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

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

1. 確定組合元素

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

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

數(shù)據(jù)總量：數(shù)據(jù)總量說明了用戶需要瀏覽的內(nèi)容的總量；常見的場景，比如在管理后臺篩選符合條件的數(shù)據(jù)記錄時(shí)，搜索結(jié)果頁通常會展示這個(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í)會有按頁面逐頁閱讀的情況，網(wǎng)頁也會經(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è)管理后臺的例子，這是經(jīng)過篩選后，語言為英語，分類為浪漫的圖書列表，當(dāng)點(diǎn)擊下一頁后：

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

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

四、總結(jié)

PC端商品、資訊內(nèi)容的列表頁面，通常會有個(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é)議

、頁中加JS代碼：

<script type="text/javascript">

function page()

{

var page1=document.getElementById("page1").value;

var href=location.href;

if (/page=\d+/.test(href)) {

href=href.replace(/page=\d+/, "page=" + page1);

} else if (href.indexOf('?')==-1) {

href=href + "?page=" + page1

} else {

href=href + "&page=" + page1

}

location.href=href;

}

</script>

二、加上輸入頁碼的文本框和跳轉(zhuǎn)按鈕

<input type="text" name="page1" id="page1">

<a href="javascript：void(0)" onclick="page()">跳轉(zhuǎn)</a>