中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

一、分頁(yè)功能解決的問(wèn)題

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

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

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

具體來(lái)說(shuō)分頁(yè)功能解決了以下兩個(gè)問(wèn)題。

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

二、分頁(yè)子功能極其作用

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

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

1. 頁(yè)碼展示

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

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

2. 信息量展示

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

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

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

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

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

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

3. 翻頁(yè)操作

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

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

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

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

1. 確定組合元素

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、總結(jié)

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

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

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

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

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