整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          分頁加載vs無限加載,你還能想到哪些信息加載方式?

          分頁加載vs無限加載,你還能想到哪些信息加載方式?

          輯導(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>


          主站蜘蛛池模板: 丰满人妻一区二区三区视频| 国精品无码一区二区三区在线| 亚洲码欧美码一区二区三区| 色窝窝无码一区二区三区| 一区二区三区免费在线视频| 国产免费av一区二区三区| 精品一区二区三区无码视频| 精品一区二区三区AV天堂| 日韩一区二区三区免费播放| 亚洲高清成人一区二区三区| 国产福利电影一区二区三区,亚洲国模精品一区 | 亚洲国产精品成人一区| 亚洲欧洲一区二区三区| 成人无码一区二区三区| 国产精品日本一区二区不卡视频| 国产高清不卡一区二区| 精品亚洲AV无码一区二区| 99在线精品一区二区三区| 亚洲综合一区国产精品| 国产精品免费视频一区| V一区无码内射国产| 亚洲A∨无码一区二区三区| 激情内射亚洲一区二区三区| 日本精品无码一区二区三区久久久 | 国产在线一区观看| 在线观看日本亚洲一区| 亚洲欧美成人一区二区三区 | 天堂va在线高清一区| 精品少妇ay一区二区三区| 精品视频一区二区三区四区| 亚洲精品色播一区二区| 国精产品一区一区三区有限公司 | 丰满岳妇乱一区二区三区| 午夜视频一区二区| 久久国产高清一区二区三区| 久久久国产精品亚洲一区| 日本一区二区三区在线观看视频| 成人午夜视频精品一区| 亚洲熟女综合色一区二区三区| 国产一区二区三区在线观看影院 | 国产精品一区二区av|