整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
輯導語：什么時候用分頁加載，什么時候用無限加載呢？本文作者總結了分頁加載和自動加載的區別和各自的優缺點，供大家理清思路，在做交互稿時能夠選擇更恰當的方式。推薦對交互設計感興趣的朋友們閱讀。
幾天前，我接到一個搜索相關的需求，用一句話概括就是：
用戶通過關鍵詞搜索相關文檔。
這聽起來就簡單極了，你腦海中可能都已經出現交互稿的模樣了吧。
我也是這么想的，三下五除二的便畫出了交互稿，一個搜索框，一個內容區，一個分頁，輕輕松松搞定～
當我去給老板過稿時，他問我為什么不采用自動加載的方式。
說實話，我……沒想清楚。
因此，接下來我仔細思考了兩種加載方式（分頁加載和自動加載）的區別，也是這篇文章的來由。
除了梳理兩種加載方式的區別外，也希望通過這篇文章記錄解決問題的思路，希望能夠以小見大。我通常通過競品分析、桌面調研和個人觀察來探索問題的解決方案。
搜索是一個特別常見的場景，市面上有許多成熟的產品，比如Google、Bing等瀏覽器，知乎、微博等社區產品，它們的產品細節必然經過無數次的打磨，因此，觀察這些產品便是在研究最前沿和權威的資料。
其次是桌面調研，加載方式作為一個常用組件，網上肯定存在一些調研總結，我通常會通過Google、知乎、人人都是產品經理等網站查找一些他人的總結。
個人觀察也是十分重要的，產品經理有產品sense，設計師也有設計sense，只有多看多體驗，才能真正感受到不同組件直接細微的區別。
三種方式并非獨立進行，而是互相融合、相互補充，最終得出結論。
分頁加載便是在內容區底部放置分頁按鈕，用戶可以通過頁碼切換信息。
分頁加載有以下幾個特點：
第一，對信息的數量以及目前所處的位置一目了然。
信息有10頁還是100頁，我目前看到了第幾頁，還有多久能夠看完有很清晰的認知。
第二，方便回溯定位。
比如用戶瀏覽到后面時，突然想返回去查找前幾頁的一條信息，是可以很方便地通過分頁實現快速跳轉的。
第三，留給用戶思考時間。
我們在點擊頁碼之后是需要一定的加載時間才會出現信息的，這會打斷用戶的思路，可是也留給了用戶一定的思考時間，我能夠通過這個關鍵詞獲取到想要的信息嗎，接下來是繼續瀏覽還是離開網站呢？
我們再來看都有誰在使用分頁加載。
咱們最常見的搜索引擎，例如Google、Bing和百度等以搜索為護城河的產品，都非常默契統一地采用了分頁的模式。
再比如郵箱、B端產品似乎都傾向于采用分頁加載。
我剛開始一直想不通為什么google等搜索產品會使用分頁加載，使用無需跳轉的自動加載可以更快地達到目的啊。這時候，再回頭看一下分頁的特點，你會發現分頁給予用戶強烈的掌控感。
像Google、郵箱或者是其他B端產品，它們都偏向于工具型產品，用戶使用時帶有明確的目的，更可能用完即走，我們對于工具通常需要更強的掌控感。
自動加載無需用戶手動操作，一直下滑即可。自動加載有以下特點：
第一，無法感知內容數量，已經瀏覽到那個部分，剩余多少。
因為頁面是自動加載的，我們無法知道什么時候才能結束。通常用戶會在得到結果或者大概率無法得到結果時選擇結束。
第二，無法快速定位之前的信息。
有些人可能會說有滾動條啊，因為滾動條會隨著自動加載的次數發生變化，幾乎沒有太多價值。
第三，加載內容過多時，頁面過長。
這會導致用戶難以及時返回搜索框，切換關鍵詞，為了解決這個問題，通常有兩種方案，在右下角加一個置頂的懸浮圖標（我個人訪談了解到很少有人真正使用置頂按鈕），或者滾動時搜索框置頂。
第四，永遠看不到footer。
無法在底部添加其他信息。
第五，非常順滑。
自動加載操作簡單，只需要滾動即可，信息之間沒有明顯的界限或停頓。
總體來講，自動加載可以讓用戶用最少的操作、最短的時間找到需要的信息。
并且自動加載是一種非常沉浸式的體驗，不會打斷用戶思路，甚至沒有操作和時間的感知。
這對于以休閑娛樂為主的社交型產品是非常適用的。比如知乎、微博等平臺，都在使用無限加載的方式，這可以盡可能把用戶留在平臺上。
分頁加載和自動加載是最基礎的加載方式，現在還出現了一些手動加載和自動加載相結合的方式。
通常是在2～3次自動加載后，便會給一個button觸發手動加載。這是一種比較折中的方式。
從用戶的角度看，我已經瀏覽到第一頁的末尾了，意味著我還想看第二頁的內容，為什么還要用分頁打斷我獲取信息。
自動加載2次后產生的信息大概在9屏左右，這對用戶來講不會是一個很長的頁面，造成心理負擔；并且如果9屏依然找不到想要的結果，要么是搜索詞不對，要么是檢索技術不行，真正去點擊手動加載的用戶就沒多少了。
比如簡書、google圖片搜索就在采用這種方式。
了解不同加載方式的區別是基礎，對于具體需求我們應該采用哪種方式，永遠都是具體問題具體分析，有時候還需要考慮技術問題。
我們的產品是一款更加偏向工具型的產品，最好像Google一樣采用分頁的方式。但是這種搜索最好能在第一頁就給到結果，我們目前的技術無法達到非常精準的結果匹配。因此綜合來看，選用了更加折中的自動加載與手動加載相結合的方式。
作者：栗子；公眾號： 栗子設計喵
本文由 @栗子設計喵 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Pixabay，基于 CC0 協議
輯導語：我們在網頁上瀏覽內容時，劃到最下面時經常需要進行翻下一頁查看新的內容，也可以選擇跳轉到其他頁數；讓我們在瀏覽信息是更加清晰，以免當前頁太多信息造成混亂；本文作者詳細介紹了分頁功能的分析與設計，我們一起來看一下。
在網頁上瀏覽內容時，通常在該頁面的底部，會有個分頁的功能，通過翻頁等操作，跳轉到其他頁面查看新的內容。
當有大量信息需要展示給用戶時，為了減少用戶單次請求對服務器產生的性能壓力和時間損耗，每次只加載固定數量的少量信息。
用戶瀏覽完之后，通過操作分頁功能，再向服務器發起請求，以獲取更多內容。
具體來說分頁功能解決了以下兩個問題。
不同場景下分頁的構成元素不同，構成元素的不同使得分頁功能的作用也有一些差別。
下圖是一個常見的分頁設計樣式，子功能主要有頁碼展示、數據量展示以及翻頁操作。我們來分析這個基本分頁設計有哪些作用。
如圖所示，頁碼展示包括當前頁碼展示、當前頁碼相鄰幾個頁碼的展示以及首末頁頁碼展示。
頁碼展示幫助用戶定位內容：例如用戶在某個商品的搜索結果頁瀏覽時，看到第5頁，這時還是覺得第2頁的一件商品更想買，于是就可以通過點擊頁碼2回到展示該商品的頁面；這就達到了通過頁碼快速定位商品位置的目的，而不用逐個商品逐個商品地往回去查找該商品在哪里。
信息量展示包括頁面總數、每頁數據數量以及數據總量。
信息量的展示用數字體現了數據的多少，讓用戶對要處理的瀏覽任務有心理預期和把控。
商品列表頁、內容列表頁，通常會在數量較大的時候展示頁面總數和數據總量。
客觀的數字展示出來，一方面是會讓用戶認為該平臺的商品或內容非常多，是個可以找到滿足需求的商品或內容的平臺，對平臺產生好感；另一方面是對瀏覽的內容有預期，例如某個商品的搜索結果共有500頁，由于數量太多不能看全部看完，于是決定按銷量排序，從前20頁中挑選一個最滿意的。
管理后臺的列表頁，也會展示信息量；管理后臺是企業人員處理工作的地方，這里展示信息量，方便工作人員對平臺中的信息量，以及任務量有清晰和客觀的認識。
某個圖書管理后臺，到貨但未上架書籍的列表頁顯示了信息量，這時管理員就能明白：目前到貨的數量（信息量），以及要上架書籍的數量（任務量）。
翻頁操作包括上一頁下一頁這樣的逐頁翻頁，以及不相鄰頁碼的跳轉。
逐頁翻頁操作方便用戶按順序閱讀；用戶瀏覽信息時會像讀書一樣逐頁地瀏覽下去，“上一頁”、“下一頁”用的次數較多；如果沒有逐頁翻頁的操作，用戶只能點擊不同位置的頁碼去訪問不同的頁面，十分不方便。
不相鄰頁碼的跳轉功能提高了跳轉的效率；當需要跳轉到距離當前頁很遠的一個頁面時，就會用到這個功能；例如某件商品的搜索結果頁面按價格從低到高排序時，翻了前5頁，還是覺得這個價位的太低，于是可能會使用該功能直接跳轉到第20頁開始瀏覽。
不同場景下分頁的構成元素不同，分頁功能設計的第一步，需要根據場景確定該功能由哪些元素構成。
可選的元素有哪些，各自有什么用呢？
數據總量：數據總量說明了用戶需要瀏覽的內容的總量；常見的場景，比如在管理后臺篩選符合條件的數據記錄時，搜索結果頁通常會展示這個信息，這讓運營人員在操作時有心理預期。
頁面展示數量：這個元素能控制每個頁面展示多少數據；當搜索結果很多，成百上千，只需粗略瀏覽時，這個功能可以擴展每個頁面展示的信息數量，避免頻繁翻頁導致的效率低下；同樣的，當搜索結果不多，需要精細瀏覽時，又可以將每頁的數量調少。
上一頁和下一頁翻頁：這是分頁功能中最基本的構成元素，通過點擊上一頁回到前一個瀏覽的頁面，通過點擊下一頁進入后一個要瀏覽的頁面；就像讀書時會有按頁面逐頁閱讀的情況，網頁也會經常出現這樣逐頁瀏覽的情況；當內容非常少的時候，就可以只要這個基本的構成元素，例如輪播圖中的上下翻頁其實就是一樣的元素。
當前頁碼：當前頁碼說明了當前所處的位置。
相鄰頁碼展示：頁碼數字展示通常展示當前頁碼的前后幾頁，比如當前在第10頁，頁碼數字展示前后各5頁，那頁碼數字就為5、6、7、8、9、10、11、12、13、14、15；連續頁碼的展示方便用戶快速跳轉到附近的頁面。
更多分頁：當數據量很大時就需要很多的分頁來承載內容；但頁面大小是有限的，不能將全部的頁碼數字都展示出來，于是就省略了離當前頁面很遠的頁碼數，再通過點擊圖標就能訪問這些被省略頁碼的頁面。
總頁數：總頁數說明了內容一共有多少頁，就像一本紙質書有總頁數，一本有聲書有總時長；通過這個元素，用戶才能了解內容的多少，對整理內容有個把握。
頁碼跳轉：頁碼跳轉幫助用戶從當前頁面跳轉到其他某個頁面；比如用戶在搜索了某件商品，按銷量排序，這時瀏覽到了第15頁，滿意度越來越低；于是打算從前5頁選一個，這時就能通過頁碼跳轉快速跳轉到第1-5頁了。
在設計分頁功能時，通常選擇后端分頁且局部刷新的方法來加載數據。這種方法減少了服務器壓力。
不同于前端分頁中將數據一次性全部取出來，后端分頁是每次請求只查詢一頁的值，這樣做避免了服務端將龐大的數據量一次傳遞給前端，造成下載量大和服務器壓力大等問題。
局部刷新就是，當點擊下一頁之后，前端發起請求去后端拿數據填充到頁面的過程中，頁面沒有進行全局刷新（全局刷新可以理解為頁面進行了一次跳轉，重新跳轉到自己），只是頁面特定區域通過前端更新。
看下圖這個管理后臺的例子，這是經過篩選后，語言為英語，分類為浪漫的圖書列表，當點擊下一頁后：
如果是全局刷新，服務端需要返回整個頁面，包括篩選區域和結果列表內容，用戶會看到該頁面刷新了一次，也就是頁面進行了一次跳轉，重新跳到自己。
如果是局部刷新，服務端只用返回結果列表，此時頁面除了結果列表區域會加載出新的數據，其他部分都不會刷新，減輕了服務器的壓力。
PC端商品、資訊內容的列表頁面，通常會有個分頁的功能，通過翻頁等操作，用戶可以跳轉到其他頁面查看新的內容。
分頁功能減少了單次請求對服務器產生的性能壓力、用戶等待時間以及低價值請求。
分頁的子功能主要有頁碼展示、數據量展示以及翻頁操作，分別都有各自的作用，例如內容定位、對內容的預期把控等；我們在設計分頁功能時，可以根據業務需要來選擇不同的構成元素。
本文由 @相與 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
、頁中加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>
二、加上輸入頁碼的文本框和跳轉按鈕
<input type="text" name="page1" id="page1">
<a href="javascript：void(0)" onclick="page()">跳轉</a>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
