雷鋒網(wǎng)按：本文由譯者@三達(dá)不留點(diǎn)gpj 譯自《UX: Infinite Scrolling vs. Pagination》。

應(yīng)該是使用無(wú)限下拉滾動(dòng)還是分頁(yè)的形式來(lái)展現(xiàn)內(nèi)容？究竟那一個(gè)更好？相信這是一些設(shè)計(jì)師經(jīng)常需要去思考的問(wèn)題。其實(shí)任何事物都有優(yōu)缺點(diǎn)，無(wú)限下拉滾動(dòng)和分頁(yè)也不例外。本文將兩種方法的適用場(chǎng)景并分析哪類項(xiàng)目適合用哪種方式，相信對(duì)你有一定的幫助。

一、無(wú)限下拉滾動(dòng)

無(wú)限下拉加載技術(shù)使用戶在大量成塊的內(nèi)容面前一直滾動(dòng)查看。這種方法是在你向下滾動(dòng)的時(shí)候不斷加載新內(nèi)容。雖然聽(tīng)起來(lái)比較誘人，但該技術(shù)并不是一個(gè)面向任何網(wǎng)站或應(yīng)用程序的通用方案。

優(yōu)點(diǎn)1：用戶參與和內(nèi)容發(fā)現(xiàn)

當(dāng)你使用滾動(dòng)作為發(fā)現(xiàn)數(shù)據(jù)的主要方法時(shí)，它可能使你的用戶在網(wǎng)頁(yè)上停留更長(zhǎng)時(shí)間并提升用戶參與度。隨著社交媒體的流行，大量的數(shù)據(jù)被用戶消費(fèi)。無(wú)線滾動(dòng)提供了一個(gè)高效的方法讓用戶瀏覽海量信息，而不必等待頁(yè)面的預(yù)加載。

無(wú)限滾動(dòng)幾乎是一個(gè)發(fā)現(xiàn)界面的必備功能。當(dāng)用戶并不特意尋找特定的內(nèi)容時(shí)，他們需要通過(guò)查看大量?jī)?nèi)容找到自己中意的信息。

你可以通過(guò)Facebook信息流的例子來(lái)評(píng)估無(wú)線滾動(dòng)的好處。用戶知道他們不可能看到信息流里面的所有內(nèi)容，因?yàn)閮?nèi)容更新太頻繁了。通過(guò)無(wú)線滾動(dòng)技術(shù)，F(xiàn)acebook正竭盡所能促使更多的信息能呈獻(xiàn)給用戶面前，用戶則產(chǎn)生對(duì)信息的瀏覽和消費(fèi)行為。

優(yōu)點(diǎn)2：滾動(dòng)要比點(diǎn)擊好

用戶使用滾動(dòng)能獲得比點(diǎn)擊/輕點(diǎn)更好的體驗(yàn)。鼠標(biāo)滾輪和觸控屏使?jié)L動(dòng)行為要比點(diǎn)擊更快更容易。對(duì)于那些連續(xù)且冗長(zhǎng)的內(nèi)容，比如一本說(shuō)明書(shū)，滾動(dòng)要比把這些信息分成幾個(gè)獨(dú)立的屏幕或頁(yè)面有更好的易用性。

優(yōu)點(diǎn)3：滾動(dòng)對(duì)移動(dòng)設(shè)備很友好

屏幕越小，滾動(dòng)就越長(zhǎng)。移動(dòng)瀏覽的普及也促使了長(zhǎng)滾動(dòng)。移動(dòng)設(shè)備的手勢(shì)控制使?jié)L動(dòng)更直觀和易用。其結(jié)果就是，用戶享受響應(yīng)式的體驗(yàn)不論他們使用何種設(shè)備。

缺點(diǎn)1：頁(yè)面性能和設(shè)備資源

頁(yè)面加載速度是良好用戶體驗(yàn)的一切。多項(xiàng)研究已經(jīng)表明緩慢的加載速度會(huì)造成用戶離開(kāi)你的網(wǎng)站或者刪除你的應(yīng)用程序從而降低轉(zhuǎn)換率。這對(duì)那些應(yīng)用了無(wú)線滾動(dòng)方案的開(kāi)發(fā)者自然是壞消息。用戶在一個(gè)頁(yè)面越向下滾動(dòng)，就會(huì)加載更多的內(nèi)容。結(jié)果就是頁(yè)面性能越來(lái)越低。

另一個(gè)問(wèn)題是用戶設(shè)備資源的限制性。在很多應(yīng)用無(wú)線滾動(dòng)方案的網(wǎng)站上，尤其那些包含很多圖片的站點(diǎn)，那些受資源限制的設(shè)備，比如iPad會(huì)越來(lái)越慢因?yàn)槠浼虞d了大量外部資源。

缺點(diǎn)2：搜索和位置標(biāo)記

無(wú)線滾動(dòng)的另一個(gè)問(wèn)題是當(dāng)用戶到了當(dāng)前信息流中的一個(gè)特定點(diǎn)，他們沒(méi)法標(biāo)記當(dāng)前位置且不能再隨后再回到這里。他們一旦離開(kāi)，就會(huì)丟失當(dāng)前的瀏覽記錄，以至于如果要回到上次的位置，他們必須得重新滾動(dòng)去發(fā)現(xiàn)。這種做法的結(jié)果就是用戶產(chǎn)生困擾厭煩更影響了其全程的體驗(yàn)。

在2012年，Esty花時(shí)間使用了無(wú)線滾動(dòng)方案，最后發(fā)現(xiàn)該方案并沒(méi)有分頁(yè)方案表現(xiàn)的好。雖然兩種方案下的購(gòu)買(mǎi)轉(zhuǎn)化率差不多，但是用戶的參與度降低了—用戶沒(méi)再過(guò)多的使用搜索功能。

就像Dmitry Fadeev 指出：“人們會(huì)想要回到他們的搜索結(jié)果列表中檢查他們剛剛找到的東西，并跟列表之外他們發(fā)現(xiàn)的東西做對(duì)比。無(wú)線滾動(dòng)不光打破了這種動(dòng)態(tài)，它也使得上下移動(dòng)列表變得困難，尤其當(dāng)你返回到列表頁(yè)卻發(fā)現(xiàn)自己又回到頂部，不得不重新滾動(dòng)等待結(jié)果的加載。從這個(gè)角度來(lái)看，無(wú)線滾動(dòng)確實(shí)要比分頁(yè)方案效率低?！?/p>

缺點(diǎn)3：無(wú)關(guān)緊要的滾動(dòng)條

另一個(gè)討厭的問(wèn)題是滾動(dòng)條并沒(méi)有反映出實(shí)際的數(shù)據(jù)量。假設(shè)你快要接近底部了，你會(huì)很容易受滾動(dòng)條的引誘再滾動(dòng)一點(diǎn)點(diǎn)，但結(jié)果卻發(fā)現(xiàn)當(dāng)你到那里的時(shí)候數(shù)據(jù)量又翻倍了。從一個(gè)可用性的角度來(lái)說(shuō)，打破滾動(dòng)條的正常使用規(guī)則對(duì)用戶來(lái)講是非常糟糕的。

缺點(diǎn)4：頁(yè)腳的缺失

頁(yè)腳的存在是有原因的：它們包含一些用戶可能會(huì)需要的信息—如果用戶找不到它們想找的東西或它們需要一些額外的信息的話，他們通常會(huì)到頁(yè)腳看看。但是因?yàn)檫@種信息流的無(wú)線滾動(dòng)，用戶經(jīng)常一到底部就會(huì)有更多的數(shù)據(jù)加載出來(lái)從而將頁(yè)腳永遠(yuǎn)的置于了視野之外。

那些應(yīng)用無(wú)線滾動(dòng)方案的站點(diǎn)應(yīng)該讓頁(yè)腳或者固定或者將其遷移至頂部或側(cè)邊欄顯示。

另一個(gè)解決方案是出發(fā)加載更多的按鈕的時(shí)候再去加載信息。新的內(nèi)容不會(huì)自動(dòng)加載直到用戶點(diǎn)擊了加載按鈕。通過(guò)這種方法，用戶能很容易地到達(dá)頁(yè)腳而不要一直追趕它。

二、分頁(yè)

分頁(yè)技術(shù)是指將內(nèi)容信息劃分成獨(dú)立的頁(yè)面來(lái)顯示。如果你滾到一個(gè)頁(yè)面的底部看到一行數(shù)字，這些數(shù)字就是當(dāng)前站點(diǎn)或者應(yīng)用程序里面的分頁(yè)。

優(yōu)點(diǎn)1：良好的轉(zhuǎn)換

當(dāng)用戶是在結(jié)果列表查找特定的信息而不是僅僅瀏覽信息流時(shí)，分頁(yè)就是好的選擇。

你可以用谷歌搜索的例子來(lái)評(píng)估分頁(yè)的好處。查找最好的搜索結(jié)果可能需要花費(fèi)1分鐘或者1個(gè)小時(shí)，這取決于你的搜索。但是放你在谷歌現(xiàn)有的搜索格式下停止搜尋時(shí)，你會(huì)知道搜索結(jié)果的準(zhǔn)確數(shù)量。你能夠決定在哪里停下或者精讀哪些結(jié)果。

優(yōu)點(diǎn)2：掌控感

無(wú)限滾動(dòng)就像個(gè)無(wú)止境的游戲——無(wú)論你滾動(dòng)多久，你會(huì)感覺(jué)永遠(yuǎn)結(jié)束不了。當(dāng)用戶知道可用結(jié)果的數(shù)量時(shí)，他們能夠做出更知情的決定而不是被動(dòng)的無(wú)限滾動(dòng)列表。按照David Kieras 在他的研究Psychology in Human-Computer Interaction中提出：“能夠到達(dá)結(jié)束點(diǎn)提供了一種掌控感”。該研究同時(shí)揭示了當(dāng)用戶有有限且相關(guān)的結(jié)果時(shí)，他們更容易決定他們?cè)趯ふ业木烤乖诓辉诶锩妗?/p>

同樣的，當(dāng)用戶能夠看到結(jié)果的數(shù)量時(shí)，他們將能夠預(yù)估他們找到想找的東西大概要花費(fèi)多長(zhǎng)時(shí)間。

優(yōu)點(diǎn)3：位置標(biāo)記

分頁(yè)方案讓我們能夠大概定向搜索的目標(biāo)位置。用戶可能難以記錄頁(yè)面的精確數(shù)字，但至少能夠記錄大概位置，而且頁(yè)碼鏈接能讓他們更容易到達(dá)那里。

分頁(yè)方案對(duì)電子商務(wù)網(wǎng)站或應(yīng)用程序來(lái)說(shuō)很好。用戶在線購(gòu)物的時(shí)候，他們希望能夠回到他們之前離開(kāi)的地方繼續(xù)購(gòu)物。

缺點(diǎn)1：額外的動(dòng)作

在分頁(yè)方案中，用戶要到達(dá)下一張頁(yè)面，就必須找到頁(yè)碼鏈接，移動(dòng)鼠標(biāo)置于其上，點(diǎn)擊然后等待新頁(yè)面的加載。

這種方案的主要的問(wèn)題是大多數(shù)網(wǎng)站中，每一頁(yè)只向用戶戰(zhàn)象相當(dāng)有限的信息。在不影響加載速度的情況下，加長(zhǎng)你的頁(yè)面，用戶就能在每一頁(yè)獲取到更多的內(nèi)容，他們就不必太頻繁的點(diǎn)擊那些頁(yè)碼鏈接。

三、什么時(shí)候使用無(wú)限滾動(dòng)/分頁(yè)方案？

實(shí)際上，應(yīng)用無(wú)限滾動(dòng)方案的實(shí)例只有很少部分。它最適合于那些靠用戶生產(chǎn)內(nèi)容（Twitter，F(xiàn)acebook）或表現(xiàn)視覺(jué)內(nèi)容（Printerest，Instagram）的站點(diǎn)/應(yīng)用程序。而分頁(yè)方案對(duì)那些希望滿足用戶目標(biāo)導(dǎo)向的站點(diǎn)/應(yīng)用程序來(lái)說(shuō)則是一個(gè)安全、友好的解決方案。

谷歌的經(jīng)驗(yàn)就很好的說(shuō)明了這一點(diǎn)。谷歌圖片使用無(wú)限滾動(dòng)是為了保證用戶能夠比文本更快的瀏覽處理圖片。閱讀一個(gè)搜索結(jié)果列表往往花費(fèi)一些時(shí)間。

這就是為什么谷歌索索仍舊使用傳統(tǒng)的分頁(yè)方案。

四、結(jié)論

設(shè)計(jì)者在選擇解決方案前應(yīng)該權(quán)衡無(wú)限滾動(dòng)/分頁(yè)方案的優(yōu)缺點(diǎn)。這個(gè)選擇取決于你設(shè)計(jì)中的上下午和內(nèi)容的呈現(xiàn)方式。一般來(lái)說(shuō)，無(wú)限滾動(dòng)適用于向Twitter等那些用戶重在消費(fèi)無(wú)限的信息流而并不常搜尋特定的信息的應(yīng)用。分頁(yè)則適用于那些用戶在尋找特定信息的搜索結(jié)果列表頁(yè)以及那些用戶的瀏覽記錄比較重要的場(chǎng)合。

本文由人人都是產(chǎn)品經(jīng)理授權(quán)雷鋒網(wǎng)發(fā)布，未經(jīng)允許，禁止轉(zhuǎn)載！

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見(jiàn)轉(zhuǎn)載須知。