究竟應(yīng)該選擇分頁(yè)加載，還是無(wú)限滾動(dòng)呢？關(guān)于這個(gè)問(wèn)題，或許不少設(shè)計(jì)者在業(yè)務(wù)中都會(huì)碰到。這篇文章里，作者就總結(jié)了分頁(yè)加載和無(wú)限滾動(dòng)加載的利弊，一起來(lái)看看吧。

上一篇文章解構(gòu)了分頁(yè)，本文分析一下分頁(yè)加載和無(wú)限滾動(dòng)加載的利弊。

在設(shè)計(jì)時(shí)難免會(huì)碰到，是使用分頁(yè)還是使用無(wú)限滾動(dòng)的問(wèn)題。分頁(yè)可以分擔(dān)性能壓力，減小卡頓，但并不是所有的業(yè)務(wù)場(chǎng)景都能適配分頁(yè)。像Pinterest就采用了無(wú)限滾動(dòng)的方式，利用不斷刷新的信息流給用戶打造一個(gè)沉浸式的體驗(yàn)。

那么使用分頁(yè)和無(wú)限滾動(dòng)有什么區(qū)別呢？

一、分頁(yè)加載

1. 分頁(yè)的優(yōu)點(diǎn)

1）給用戶信息數(shù)量的預(yù)期

分頁(yè)可以讓用戶清楚的知道自己需要瀏覽的信息數(shù)量和所瀏覽的位置，讓用戶建立一個(gè)心理預(yù)期，并給予用戶掌控感。

2）方便回溯定位

分頁(yè)可以方便用戶快速回溯定位，在大量的數(shù)據(jù)頁(yè)中，當(dāng)你回過(guò)頭想要找到之前看到的某一個(gè)信息時(shí)，也能快速的定位到首頁(yè)或者尾頁(yè)。

3）分擔(dān)性能壓力

龐大的數(shù)據(jù)量可以通過(guò)分頁(yè)減輕前端頁(yè)面壓力，無(wú)需一次把所有數(shù)據(jù)加載完成，用戶點(diǎn)擊頁(yè)碼之后加載該頁(yè)面便可，也避免了低價(jià)值的請(qǐng)求。

2. 分頁(yè)的缺點(diǎn)

在我們點(diǎn)擊頁(yè)碼之后信息需要一定的加載時(shí)間才會(huì)呈現(xiàn)，一定程度上，這樣的做法會(huì)打斷用戶的思路從而破壞了用戶體驗(yàn)。在遇到分頁(yè)時(shí)，用戶會(huì)去思考，我是要繼續(xù)點(diǎn)擊瀏覽呢還是離開(kāi)頁(yè)面。

二、無(wú)限滾動(dòng)

1. 無(wú)限滾動(dòng)的優(yōu)點(diǎn)

1）減少干擾用戶

無(wú)限滾動(dòng)在移動(dòng)端和社交媒體、娛樂(lè)類屬性的平臺(tái)較為常見(jiàn)，這類平臺(tái)需要給用戶打造流暢的體驗(yàn)、讓用戶維持沉浸的狀態(tài)。這種做法相較于分頁(yè)最大的優(yōu)勢(shì)是減少了對(duì)用戶的干擾、打斷。

2）降低交互成本

如果用戶持續(xù)快速的加載內(nèi)容，無(wú)需用戶點(diǎn)擊按鈕，直接通過(guò)上下滑動(dòng)操控，極大的降低了交互成本。

3）適配移動(dòng)端設(shè)備

因無(wú)限滾動(dòng)較為美觀的特性，加上移動(dòng)設(shè)備視角比較小，用戶已經(jīng)習(xí)慣了滾屏，他們的手指總是靠近屏幕，隨時(shí)準(zhǔn)備進(jìn)行滑動(dòng)。

2. 無(wú)限滾動(dòng)的缺點(diǎn)

1）難以再次找到特定內(nèi)容

在有分頁(yè)的情況下，用戶可以記住某個(gè)信息所在的頁(yè)碼來(lái)定位大致的位置，但是在無(wú)限滾動(dòng)中定位剛剛所閱讀過(guò)的內(nèi)容是一件比較困難的事情。

2）無(wú)法觸達(dá)頁(yè)腳

無(wú)限滾動(dòng)會(huì)讓用戶無(wú)法觸碰到網(wǎng)站頁(yè)腳。頁(yè)腳通常會(huì)放置類似于聯(lián)系電話，規(guī)則政策等重要信息，信息流的持續(xù)加載阻礙了用戶觸碰到頁(yè)腳。其次，如果用戶在一個(gè)頁(yè)面翻了十幾屏之后，滾動(dòng)條還停留在瀏覽器靠上方的位置，那么用戶該多絕望。

3）搜索引擎優(yōu)化（SEO）表現(xiàn)更差

這種模式有一個(gè)缺點(diǎn)，每次我們加載或追加新數(shù)據(jù)時(shí)，列表都會(huì)繼續(xù)增長(zhǎng)。滾動(dòng)得越多，數(shù)據(jù)就越大。當(dāng)瀏覽器無(wú)法渲染如此大量的數(shù)據(jù)后，性能將會(huì)降低。

針對(duì)分頁(yè)和無(wú)限滾動(dòng)的缺點(diǎn)，衍生出來(lái)了兩個(gè)折中的方法，一個(gè)是「加載更多」，另一個(gè)是「分頁(yè)+無(wú)限滾動(dòng)」的模式。

三、加載更多

「加載更多」指的是當(dāng)用戶下滑到底部時(shí)，需要額外點(diǎn)擊“加載更多”或“查看更多”的按鈕來(lái)在尾頁(yè)顯示更多內(nèi)容。設(shè)置“加載更多”的按鈕可以讓用戶自主選擇是否要加載更多條目。該方式有益于只想查看少量信息的用戶輕松觸達(dá)網(wǎng)站頁(yè)腳。

并且點(diǎn)擊“加載更多”后產(chǎn)生的信息大概在7屏左右，這對(duì)用戶來(lái)說(shuō)不是一個(gè)很長(zhǎng)的頁(yè)面，并不會(huì)造成心理負(fù)擔(dān)。如果在這7屏內(nèi)依然找不到想要的結(jié)果，可能是搜索詞不對(duì)，這樣用戶就不需要繼續(xù)點(diǎn)擊“加載更多”，減少了無(wú)效的加載請(qǐng)求。

跟傳統(tǒng)的無(wú)限滾動(dòng)模式相比，這對(duì)用戶來(lái)說(shuō)無(wú)疑是提升交互體驗(yàn)的。但是“加載更多”按鈕的一個(gè)弊端就是交互成本的上升，用戶需要點(diǎn)擊“加載更多”按鈕來(lái)查看更多內(nèi)容，即使這種干擾很小，也可能會(huì)使用戶瀏覽更少的內(nèi)容或者退出。

四、分頁(yè)+無(wú)限滾動(dòng)

分頁(yè)雖可以比無(wú)限滾動(dòng)更輕松的找到特定內(nèi)容，但加載速度也要比無(wú)限滾動(dòng)慢很多。如果既想保留分頁(yè)的優(yōu)點(diǎn)，又不想頁(yè)面加載緩慢，可以通過(guò)分頁(yè)+無(wú)限滾動(dòng)的方式在不同頁(yè)面間來(lái)回跳轉(zhuǎn)，高效地跳過(guò)無(wú)關(guān)內(nèi)容。

五、回歸需求

分頁(yè)雖會(huì)給人一種切割感，在查看上也會(huì)更耗時(shí)，但因?yàn)榍岸碎_(kāi)發(fā)的性能壓力而不得不采用分頁(yè)時(shí)，那么也沒(méi)有什么辦法了。

在設(shè)計(jì)中，設(shè)計(jì)師需要回歸需求，與開(kāi)發(fā)隨時(shí)保持交流。尤其是跟前端開(kāi)發(fā)工程師，他們?cè)诰帉懘a時(shí)都要考慮性能問(wèn)題，如果不和他們進(jìn)行充分的溝通，那么做出來(lái)的交互體驗(yàn)可想而知。