輯導(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é)論。
分頁加載便是在內(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)的掌控感。
自動加載無需用戶手動操作,一直下滑即可。自動加載有以下特點(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)品是非常適用的。比如知乎、微博等平臺,都在使用無限加載的方式,這可以盡可能把用戶留在平臺上。
分頁加載和自動加載是最基礎(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è)問題。
不同場景下分頁的構(gòu)成元素不同,構(gòu)成元素的不同使得分頁功能的作用也有一些差別。
下圖是一個(gè)常見的分頁設(shè)計(jì)樣式,子功能主要有頁碼展示、數(shù)據(jù)量展示以及翻頁操作。我們來分析這個(gè)基本分頁設(shè)計(jì)有哪些作用。
如圖所示,頁碼展示包括當(dāng)前頁碼展示、當(dāng)前頁碼相鄰幾個(gè)頁碼的展示以及首末頁頁碼展示。
頁碼展示幫助用戶定位內(nèi)容:例如用戶在某個(gè)商品的搜索結(jié)果頁瀏覽時(shí),看到第5頁,這時(shí)還是覺得第2頁的一件商品更想買,于是就可以通過點(diǎn)擊頁碼2回到展示該商品的頁面;這就達(dá)到了通過頁碼快速定位商品位置的目的,而不用逐個(gè)商品逐個(gè)商品地往回去查找該商品在哪里。
信息量展示包括頁面總數(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ù)量)。
翻頁操作包括上一頁下一頁這樣的逐頁翻頁,以及不相鄰頁碼的跳轉(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頁開始瀏覽。
不同場景下分頁的構(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頁了。
在設(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ù)器的壓力。
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>
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。