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

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

無限滾動(dòng)

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

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

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

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

你可以用 Facebook 新聞推送的例子來衡量無限滾動(dòng)的優(yōu)勢。用戶知道，由于內(nèi)容更新過于頻繁，他們無法瀏覽推送中的所有內(nèi)容。通過無限滾動(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)擊更快更容易。此外，無限滾動(dòng)可能會(huì)讓人上癮。對于像教程這樣連續(xù)且冗長的內(nèi)容，滾動(dòng)比將文本分割到多個(gè)單獨(dú)的屏幕或頁面更能提供更好的可用性。

?

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

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

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

來源：Dribbble

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

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

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

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

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

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

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

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

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

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

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

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

分頁

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

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

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

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

優(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ù)總量不是無限的時(shí)候），他們將能夠估計(jì)需要多長時(shí)間才能找到他們真正想要的內(nèi)容。

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

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

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

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

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

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

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

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

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

結(jié)論

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

閱讀原文：原文鏈接