“我有很多內(nèi)容需要展示，應(yīng)該選擇無(wú)限滾動(dòng)還是分頁(yè)？”

一些設(shè)計(jì)師仍然不確定該為他們的項(xiàng)目選擇哪種方法。每種方法都有其優(yōu)缺點(diǎn)，在本文中，我們將概述這兩種方法，并決定我們應(yīng)該在項(xiàng)目中使用哪一種。

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

無(wú)限滾動(dòng)是一種允許用戶滾動(dòng)瀏覽大量?jī)?nèi)容且看不到盡頭的技術(shù)。這項(xiàng)技術(shù)只是在向下滾動(dòng)時(shí)不斷刷新頁(yè)面。無(wú)論聽(tīng)起來(lái)多么美好，它并非適用于所有網(wǎng)站或應(yīng)用的萬(wàn)能解決方案。

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

當(dāng)你使用滾動(dòng)作為探索數(shù)據(jù)的主要方法時(shí)，它可能會(huì)延長(zhǎng)用戶在網(wǎng)頁(yè)上的停留時(shí)間，從而提高用戶參與度。隨著社交媒體的普及，海量數(shù)據(jù)被消耗；無(wú)限滾動(dòng)提供了一種高效的方式，可以瀏覽海量信息，而無(wú)需額外的點(diǎn)擊。

無(wú)限滾動(dòng)幾乎是發(fā)現(xiàn)界面。當(dāng)用戶沒(méi)有搜索特定的東西時(shí)，他們需要查看大量的項(xiàng)目才能找到他們喜歡的東西。

你可以用 Facebook 新聞推送的例子來(lái)衡量無(wú)限滾動(dòng)的優(yōu)勢(shì)。用戶知道，由于內(nèi)容更新過(guò)于頻繁，他們無(wú)法瀏覽推送中的所有內(nèi)容。通過(guò)無(wú)限滾動(dòng)，F(xiàn)acebook 竭盡全力向用戶展示盡可能多的信息，而用戶則在瀏覽和消費(fèi)這些信息流。

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

滾動(dòng)比點(diǎn)擊/輕觸的交互成本更低——鼠標(biāo)滾輪或觸摸屏使?jié)L動(dòng)比點(diǎn)擊更快更容易。此外，無(wú)限滾動(dòng)可能會(huì)讓人上癮。對(duì)于像教程這樣連續(xù)且冗長(zhǎng)的內(nèi)容，滾動(dòng)比將文本分割到多個(gè)單獨(dú)的屏幕或頁(yè)面更能提供更好的可用性。

?

對(duì)于點(diǎn)擊/輕觸：每次內(nèi)容更新都需要額外的點(diǎn)擊操作，并等待頁(yè)面加載。對(duì)于滾動(dòng)：內(nèi)容更新只需一次滾動(dòng)操作。圖片來(lái)源：gfycat

優(yōu)點(diǎn)3：滾動(dòng)功能適合移動(dòng)設(shè)備

屏幕越小，滾動(dòng)時(shí)間越長(zhǎng)。移動(dòng)瀏覽的普及是長(zhǎng)滾動(dòng)的另一個(gè)重要推動(dòng)力。移動(dòng)設(shè)備的手勢(shì)控制使?jié)L動(dòng)變得直觀易用。因此，用戶有機(jī)會(huì)更好地享受瀏覽體驗(yàn)。

來(lái)源：Dribbble

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

頁(yè)面加載速度對(duì)于良好的用戶體驗(yàn)至關(guān)重要。多項(xiàng)研究表明，加載時(shí)間過(guò)慢會(huì)導(dǎo)致用戶離開(kāi)網(wǎng)站或刪除應(yīng)用，從而降低轉(zhuǎn)化率。這對(duì)于使用無(wú)限滾動(dòng)的用戶來(lái)說(shuō)是個(gè)壞消息。用戶向下滾動(dòng)頁(yè)面的次數(shù)越多，需要在同一頁(yè)面上加載的內(nèi)容就越多。結(jié)果，頁(yè)面性能會(huì)越來(lái)越差。

另一個(gè)問(wèn)題是用戶設(shè)備資源有限。在許多無(wú)限滾動(dòng)網(wǎng)站上，尤其是包含大量圖片的網(wǎng)站，資源有限的設(shè)備（例如移動(dòng)設(shè)備或硬件老舊的平板電腦）可能會(huì)因?yàn)榧虞d大量資源而開(kāi)始變慢。

缺點(diǎn)2：搜索和定位

他們無(wú)法添加書簽他們的位置并稍后再返回。如果他們離開(kāi)網(wǎng)站，所有進(jìn)度都會(huì)丟失，必須再次向下滾動(dòng)才能回到原點(diǎn)。這種無(wú)法確定用戶滾動(dòng)位置的情況不僅會(huì)給用戶帶來(lái)煩惱或困惑，還會(huì)損害整體用戶體驗(yàn)。

2012 年，Etsy 曾投入大量時(shí)間實(shí)現(xiàn)無(wú)限滾動(dòng)界面，但發(fā)現(xiàn)新界面的效果不如分頁(yè)界面。雖然購(gòu)買量基本保持不變，但用戶參與度卻下降了——現(xiàn)在人們不再那么頻繁地使用搜索功能了。

缺點(diǎn)3：不相關(guān)的滾動(dòng)條

另一個(gè)惱人的問(wèn)題是滾動(dòng)條無(wú)法反映實(shí)際可用的數(shù)據(jù)量。你會(huì)興高采烈地向下滾動(dòng)，以為自己已經(jīng)快到頁(yè)面底部了，這本身就誘惑著你繼續(xù)滾動(dòng)，結(jié)果卻發(fā)現(xiàn)，當(dāng)你到達(dá)底部時(shí)，結(jié)果已經(jīng)翻倍了。從可訪問(wèn)性的角度來(lái)看，破壞用戶使用滾動(dòng)條的體驗(yàn)是非常糟糕的。

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

頁(yè)腳的存在是有原因的：它們包含用戶有時(shí)需要的內(nèi)容——如果用戶找不到某些內(nèi)容，或者想跳轉(zhuǎn)到其他頁(yè)面，他們通常會(huì)跳轉(zhuǎn)到其他頁(yè)面。但由于 feed 會(huì)無(wú)限滾動(dòng)，用戶一到達(dá)頁(yè)面底部就會(huì)加載更多數(shù)據(jù)，導(dǎo)致頁(yè)腳每次都超出視野范圍。

實(shí)現(xiàn)無(wú)限滾動(dòng)的網(wǎng)站應(yīng)該通過(guò)使頁(yè)腳粘性來(lái)使其可訪問(wèn)，或者將鏈接重新定位到頂部或側(cè)邊欄。

另一個(gè)解決方案是按鈕按需要求使用加載更多按鈕。新內(nèi)容只有在用戶點(diǎn)擊“更多”按鈕后才會(huì)自動(dòng)加載。這樣，用戶就可以輕松找到頁(yè)腳，而無(wú)需費(fèi)力尋找。

分頁(yè)

分頁(yè)是一種將內(nèi)容劃分為獨(dú)立頁(yè)面的用戶界面模式。如果你滾動(dòng)到頁(yè)面底部，看到一排數(shù)字——那排數(shù)字就是網(wǎng)站或應(yīng)用的分頁(yè)。

優(yōu)點(diǎn) 1：轉(zhuǎn)化率高

當(dāng)用戶在結(jié)果列表中搜索特定內(nèi)容，而不僅僅是瀏覽內(nèi)容時(shí)，分頁(yè)非常有用?！皾L動(dòng)是一種延續(xù)，而點(diǎn)擊是一種決策”（Joshua Porter）

你可以用谷歌搜索的例子來(lái)衡量分頁(yè)的好處。作為用戶，你可以決定查看多少個(gè)結(jié)果頁(yè)。

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

“到達(dá)終點(diǎn)會(huì)給人一種控制感”。研究還表明，當(dāng)用戶獲得有限但仍然相關(guān)的結(jié)果時(shí)，他們能夠輕松確定他們所尋找的內(nèi)容是否確實(shí)存在。

此外，當(dāng)用戶看到結(jié)果總數(shù)時(shí)（當(dāng)然，當(dāng)數(shù)據(jù)總量不是無(wú)限的時(shí)候），他們將能夠估計(jì)需要多長(zhǎng)時(shí)間才能找到他們真正想要的內(nèi)容。

優(yōu)點(diǎn)3：物品位置

分頁(yè)界面可以讓用戶記住項(xiàng)目的具體位置。他們可能不一定知道確切的頁(yè)碼，但會(huì)大致記得它是什么，而分頁(yè)鏈接可以讓他們更容易地找到它。

分頁(yè)對(duì)于電商網(wǎng)站和應(yīng)用來(lái)說(shuō)非常有用。用戶在線購(gòu)物時(shí)，希望能夠回到上次中斷的地方繼續(xù)購(gòu)物。

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

要進(jìn)入分頁(yè)中的下一頁(yè)，用戶必須找到鏈接目標(biāo)（例如“下一頁(yè)”），將鼠標(biāo)懸停在其上，單擊它并等待新頁(yè)面加載。

這里的主要問(wèn)題是，大多數(shù)網(wǎng)站在單頁(yè)中向用戶顯示的內(nèi)容非常有限（例如每頁(yè) 10-20 個(gè)項(xiàng)目）。通過(guò)在不影響加載速度的情況下增加頁(yè)面長(zhǎng)度，用戶每頁(yè)可以獲得更多內(nèi)容，并且無(wú)需頻繁點(diǎn)擊分頁(yè)按鈕。

何時(shí)使用無(wú)限滾動(dòng)/分頁(yè)？

無(wú)限滾動(dòng)僅在少數(shù)情況下有效。它最適合那些有大量 用戶生成內(nèi)容的網(wǎng)站和應(yīng)用（例如 Twitter、Facebook、Pinterest、Instagram）。另一方面，分頁(yè)則非常適合目標(biāo)導(dǎo)向型網(wǎng)站和應(yīng)用，用戶在這些網(wǎng)站上尋找特定內(nèi)容。

內(nèi)容類型也會(huì)影響瀏覽方式的選擇。你是更注重視覺(jué)內(nèi)容還是文字內(nèi)容？谷歌產(chǎn)品就是一個(gè)很好的例子。谷歌圖片使用無(wú)限滾動(dòng)，因?yàn)橛脩魹g覽和處理圖片的速度比瀏覽文字要快得多。閱讀搜索結(jié)果需要更長(zhǎng)的時(shí)間。這就是為什么谷歌搜索結(jié)果仍然使用更傳統(tǒng)的分頁(yè)技術(shù)的原因。

結(jié)論

設(shè)計(jì)師在選擇無(wú)限滾動(dòng)和分頁(yè)之前，應(yīng)該權(quán)衡利弊。具體選擇取決于你的產(chǎn)品類型以及你想要的內(nèi)容呈現(xiàn)格式。

閱讀原文：原文鏈接