“我應(yīng)該選擇“無限滾動”還是“分頁”的形式來展示我的內(nèi)容呢？”這是不少設(shè)計師存在的困擾。其實，兩種方法展現(xiàn)形式都有各自的優(yōu)點和缺點，在本專題內(nèi)容中我們將概述這兩種方法并決定我們的項目應(yīng)該使用哪一種。

無限滾動

無限滾動是一種允許用戶通過滾動瀏覽大量內(nèi)容而不刷到頁面最底層的技術(shù)。當(dāng)你向下滾動頁面時，這種技術(shù)將會持續(xù)地刷新頁面。這雖然聽起來很誘人，這種技術(shù)并不是一種適用于各種網(wǎng)站和app的萬能解決方式。

無限滾動方案

優(yōu)點：

1.用戶參與和內(nèi)容發(fā)現(xiàn)

當(dāng)你使用滾動作為探索數(shù)據(jù)的主要方法時，它極有可能會讓用戶在你的網(wǎng)頁上停留更長時間，從而增加參與度。隨著社交媒體的普及，大量的數(shù)據(jù)正在被消費。而無限滾動提供了一種有效的方式來讓用戶瀏覽信息的海洋，而無需等待頁面的預(yù)加載。

無限滾動幾乎是所有探索界面的必備功能。當(dāng)用戶沒有定向搜索某一特定的內(nèi)容時，他們就需要通過查看大量的條目才能夠找到他們感興趣的東西。

Pinterest內(nèi)容的海洋

以Facebook新聞feed流為例，你可以以此來衡量無限滾動的益處。通過非口頭協(xié)議，用戶意識到他們無法查看Feed流上的所有內(nèi)容，因為內(nèi)容更新地過于頻繁。而Facebook正在盡最大努力通過無限滾動向用戶展示盡可能多的信息，并確保他們正在查閱和消費這些信息流。

用戶通過滾動Facebook新聞feed流獲得更多內(nèi)容更新

2.“滾動”比“單擊”效果更佳

用戶能夠通過滾動獲得比“單擊”或“點擊”更好的體驗。鼠標(biāo)滾輪或觸摸屏的形式使?jié)L動速度比點擊來的更簡單、快捷。對于連續(xù)且冗長的內(nèi)容，比如說教程，滾動提供的可用性，比將文本分割成幾個單獨的屏幕或頁面的體驗更棒。

對于單擊或點擊：每個內(nèi)容更新都需要額外的點擊操作和等待頁面加載時長。滾動：單一操作滾動時，使內(nèi)容更新。

3.“滾動”對移動設(shè)備更友好

屏幕越小，滾動時間越長。移動端瀏覽的普及是另一種持續(xù)性滾動的重要因素。移動端的手勢控件使?jié)L動直觀且易于使用。因此，用戶無論使用哪種設(shè)備，都可以享受到真正的快速響應(yīng)體驗。

缺點：

1.頁面性能和設(shè)備資源

頁面加載速度是影響用戶體驗的重要因素。多項研究表明，緩慢的加載時間會導(dǎo)致人們離開你的網(wǎng)站或刪除你的應(yīng)用程序，致使形成低轉(zhuǎn)化率。對于那些習(xí)慣使用無限滾動的用戶來說，這無疑是個壞消息。因為用戶向下滾動頁面越多，頁面上承載的內(nèi)容就越多，最終會導(dǎo)致頁面性能越來越慢。

另一個問題是用戶設(shè)備的資源有限。在許多無限滾動網(wǎng)站上，尤其是那些有大量圖片的網(wǎng)站中，資源有限的設(shè)備（如iPad）可能由于其已加載的內(nèi)容信息過多而開始降速。

2.項目搜索和位置

無限滾動的另一個缺點是，當(dāng)用戶瀏覽到某個節(jié)點時，他們無法標(biāo)記該位置，也就意味著用戶無法在離開后回到該位置。如果他們離開了該網(wǎng)站，他們將丟失所有的加載數(shù)據(jù)，并且只能通過再次向下滾動才能返回相同的位置。滾動的形式使位置無法確定，這不僅會給用戶帶來煩惱和困惑，而且還會不利于整體用戶體驗。

在2012年，Etsy花了很多時間來實現(xiàn)一個無限的滾動界面，卻發(fā)現(xiàn)新的界面表現(xiàn)并不如分頁的表現(xiàn)形式出色。盡管購買量大致保持不變，但用戶參與度卻大大下降——現(xiàn)在人們不再那么頻繁地使用搜索了。

Etsy的無限滾動搜索界面（當(dāng)前版本有分頁）

正如Dmitry Fadeyev所指出的那樣：“人們會希望回到搜索結(jié)果列表中，查看他們剛才看到的項目，并將其與他們在列表中其他位置發(fā)現(xiàn)的其它項目進(jìn)行比較。

無限滾動不僅會打破這種動態(tài)，還會使列表上下移動變得十分困難，特別是當(dāng)你又一次返回頁面時，發(fā)現(xiàn)自己回到頂部，然后被迫再次向下滾動列表并等待加載結(jié)果。通過這種方式，無限滾動界面實際上比分頁界面更低效。

3.滾動條無法展示真實數(shù)據(jù)量

另一個讓人惱火的事情是滾動條無法展示真實數(shù)據(jù)量。當(dāng)你逐漸接近滾動條底部時，你會興奮地繼續(xù)向下滾動，結(jié)果是在刷新后，發(fā)現(xiàn)滾動條又增加了一倍。對于用戶來說，這無疑是一種非常糟糕的體驗。

滾動條應(yīng)該反映真實頁面的長度

4.頁腳缺失

頁腳存在的原因是：它們包含用戶有時需要的內(nèi)容—如果用戶找不到某些內(nèi)容或他們需要的其它信息，他們通常會去頁腳尋找。但是，由于Feed流無限滾動的特性，一旦用戶到達(dá)底部，就會加載更多的數(shù)據(jù)，每次都將頁腳再次推出視圖之外。

當(dāng)LinkedIn在2012年推出無限滾動功能時，用戶會設(shè)法抓取加載新內(nèi)容之前的屏幕信息

那些使用無限滾動的網(wǎng)站，其實應(yīng)該使頁腳更具用戶粘性，又或者將鏈接放在頂部或側(cè)邊欄來使頁腳更易于訪問。

Facebook將頁腳中的所有鏈接（例如'Legal'，'Careers'）移至右側(cè)欄。

另一種解決方案是根據(jù)用戶需求使用“?加載更多”的按鈕加載內(nèi)容。即新內(nèi)容不會自動加載，直到用戶點擊“更多”的按鈕。這時候用戶就可以輕松到達(dá)頁腳，而無需去追蹤它。

Instagram使用“加載更多”按鈕，使用戶達(dá)到訪問頁腳的目的。

本期講解了“無限滾動”設(shè)計的優(yōu)、缺點，下期將給大家繼續(xù)概述“分頁”設(shè)計。

敬請期待，下期見～