如果你的網(wǎng)站信息量巨大，你會選擇分頁式設(shè)計還是瀑布流滾動設(shè)計？下面就這兩種設(shè)計方式的優(yōu)缺點比較，給大家分析一下到底哪種適合你的網(wǎng)站。今天這篇好文詳細分析了各大信息流網(wǎng)站（谷歌、pinterest、淘寶）的做法，列舉了這兩種方式的優(yōu)缺點和適用場景。一篇精悍簡練的干貨文，來收！

前陣子工作中，剛好有做到log歷史紀錄的設(shè)計，窗體應(yīng)該要采用哪種設(shè)計策略，也引起一陣討論。無論是電子商務(wù)網(wǎng)站、搜尋結(jié)果、圖片瀏覽、歷史紀錄等等，只要是內(nèi)容信息量大時，設(shè)計師總是會面對到同樣的問題。

來看看google的設(shè)計，它在一般搜尋時，采用pagination（頁碼）的方式，可是在圖片搜尋時，卻使用infinite scroll（無限滾動，瀑布流）。為什么會有如此的差異呢？

分頁式設(shè)計還是瀑布流滾動設(shè)計？信息量大的網(wǎng)站取舍指導(dǎo)

△ google search

分頁式設(shè)計還是瀑布流滾動設(shè)計？信息量大的網(wǎng)站取舍指導(dǎo)

△ google image search

其實pagination和infinite scroll有各自的特性，適合在不同的情境。pagination把數(shù)據(jù)分成一頁一頁，下方有頁數(shù)或是指示可以點擊換頁，讓人有停頓的時間。而infinite scroll則是將內(nèi)容都放在同一頁，當滾輪滾到頁面下方時，會自動加載新的內(nèi)容，無需點擊換頁。

簡單分析一下infinite scroll的優(yōu)缺點

infinite scroll 優(yōu)點

1. 流暢的體驗，可以持續(xù)瀏覽內(nèi)容：

在滾輪滾動的同時，背后也悄悄開始預(yù)載窗口下方的內(nèi)容，用戶可以無縫閱覽，比較容易沉浸其中，不像pagination，點擊完下一頁之后，需等待頁面載入。 它其實適合運用在沒有特定目的的活動上，無聊的時候，可以打發(fā)時間的隨意瀏覽，例如facebook news feed。

infinite scroll架構(gòu)也相對扁平，適合展示相同階層架構(gòu)的東西，而圖片就是最好的內(nèi)容物，因為視覺的信息比較文字更快被人所接收，我們總是能很掃射完圖片，pinterest就是利用infinite scroll的特點，不停給予各式圖片，供設(shè)計師快速找尋靈感、給予源源不絕的刺激。

2. 操作簡易快速：

不用過多瞄準點擊的操作，只需滾動，就能有新的內(nèi)容，操作效率較佳。而且在手機上，scroll瀏覽也比點擊來得方便。

分頁式設(shè)計還是瀑布流滾動設(shè)計？信息量大的網(wǎng)站取舍指導(dǎo)

△ pinterest

infinite scroll 缺點

1. 難以回溯、確認數(shù)據(jù)位置：

在一個超長的頁面中，如果要再往回找自己之前看過的東西，會很難尋找，不知道它的位置，不像pagination，可以記得內(nèi)容是在第幾頁。

2. 找尋想要的特定信息時，較無效率：

無法略過不必要的內(nèi)容，直接跳頁看。自己在拍賣網(wǎng)站購買物品的經(jīng)驗是，下完關(guān)鍵詞，選擇價格排序后，往往最前面幾筆和最后面幾筆的數(shù)據(jù)，基本上都是和自己想買的對象不相關(guān)(有些賣家故意會用0元或99999999元，爭取最佳排序位置)，這時候可以跳頁就變得重要，當然多下一些過濾，也可以幫助找到數(shù)據(jù)。

3. 占用瀏覽器過多的資源：

單一個頁面中，不停加載新的內(nèi)容，容易導(dǎo)致瀏覽器負荷過高，網(wǎng)頁效能降低。

4. scroll bar的長短及位置，無法正確表達內(nèi)容長短：

過去還沒有infinite scroll時，無論是網(wǎng)頁，或是desktop software，scroll bar長度具有暗示數(shù)據(jù)內(nèi)容多寡的效用，我們也會看scroll bar的位置，去了解還剩下多少數(shù)據(jù)在下方未讀。但infinite scroll因為頁面長度會隨著scroll行為不停增長，scroll bar長度和位置會不停變化，失去提示作用。

分頁式設(shè)計還是瀑布流滾動設(shè)計？信息量大的網(wǎng)站取舍指導(dǎo)

scroll bar往往會越變越小，位置也會一直更動

5. footer（頁腳）變得很難使用，甚至無法使用：

當滾輪滾動時，頁面會自動加載更多內(nèi)容，把footer再往下推，消失于窗口中。常常有這樣的經(jīng)驗，原本想要閱讀footer的信息，結(jié)果看到一半，就被加載的信息推走，我又往下scroll，然后又再度被推走，整個無法控制。有興趣的朋友，可以試著和dribbble designers頁面，與footer玩追逐戰(zhàn)。

分頁式設(shè)計還是瀑布流滾動設(shè)計？信息量大的網(wǎng)站取舍指導(dǎo)

△ dribbble

不過其實為了解決上述問題，load more按鈕會是一個解法。當scroll到底，網(wǎng)頁加載一定數(shù)量的東西后，便不再自動加載，必須按load more，才會又再一輪的載入。這可以解決無法在一定數(shù)量內(nèi)，來回觀看、占用過多瀏覽器資源、footer無法使用等問題。

pagination優(yōu)點

1. 雙向互動，讓使用者有時間思索、決策：

閱覽完一頁后，因為還要點擊下一頁的關(guān)系，有機會停頓一下，使用者有個喘息的機會，去思考是否還要繼續(xù)看下一頁。不像infinite scroll，一直出現(xiàn)新的內(nèi)容，不停被喂養(yǎng)信息。

2. 給予使用者較佳的控制感：

在找尋時，pagnation的分頁，會讓使用者知道已經(jīng)找了幾頁。有研究指出到達頁面底端時，有種任務(wù)達到一個段落的感覺，會讓使用者有種愉悅的成就感和控制感。

3. 快速查找過往信息：

相信大家都有過找尋一些歷史消息的經(jīng)驗，可能找了幾頁數(shù)據(jù)，我們就可能10頁10頁這樣跳，大概會抓說可能10頁就是幾天的訊息，可能可以利用頁數(shù)，大概抓到資料會在第幾頁哪個位置。但是infinite scroll就無法做到這件事了，如果要找比較遠的數(shù)據(jù)，就必須一直scroll到底再等待加載，中間加載了許多我們不需要的信息，就為了看比較久遠的數(shù)據(jù)，強迫我們必須經(jīng)歷那個過程。

另外，有時候我們查找一些數(shù)據(jù)，需要再跳回去看的時候，我們大概會依稀記得之前看到的數(shù)據(jù)，大概會是在第幾頁，除了幫助記憶外，可以讓我們可以更快跳到想要的內(nèi)容上。infinite scroll因為scroll bar長度及位置的不停變動，無法像pagniation易于定位。

結(jié)論

pagination和infinite scroll有各自的優(yōu)缺點，運用在適當?shù)那榫硶r，可以將優(yōu)點及大化，缺點甚至?xí)D(zhuǎn)為優(yōu)點。pagination是比較常見的設(shè)計，因為需要點擊才有下頁內(nèi)容，讓人有停頓的時間，適合用在目標導(dǎo)向、一些需要思考決策、有目的性的活動，例如搜尋商品，或是找尋數(shù)據(jù)。

而infinite scroll適合快速且隨意瀏覽的情境，也因為結(jié)構(gòu)較為扁平，適合放同性質(zhì)的內(nèi)容。由使用者產(chǎn)生的內(nèi)容（例如：facebook、twitter）以及圖片內(nèi)容（如：pinterest、dribbble）都相當適合infinite scroll，而面對較差的控制感、瀏覽器負荷高等缺點，能以load more按鈕，作為折衷的辦法。

再回過頭看最初的問題，歷史紀錄應(yīng)該用pagination還是infinite scroll？ 或許一開始數(shù)據(jù)量不大的時候，infinite scroll是好用的，可是當數(shù)據(jù)量慢慢累積，需要好幾頁的內(nèi)容時，為了找尋特定目標的需要，pagination會是比較好的選擇。

電子商務(wù)究竟較適合pagination還是infinite scroll呢？

我認為，要看情境做判斷。如果今天這個購物網(wǎng)站，比較像是讓人能快速找到所需物品，使用者知道自己要買什么，買了就走，功能性取向的，就使用pagination較為合適。但如果今天的購物網(wǎng)站，是想要營造逛街購物的氛圍，讓使用者隨意看看，激起購物欲望，那么或許infinite scroll也是可以考慮的，只是最好能在每個商品的tile上，能有我的最愛功能，點擊愛心之后，可以收藏起來，避免最后找不到自己心動的商品。

其實有研究指出，pagination會拖慢瀏覽速度，也會讓用戶懶得點擊去看其他頁面的產(chǎn)品，降低產(chǎn)品曝光度。不過另外一方面，使用pagination，會讓使用者花比較多的時間在第一頁。當我們知道這些現(xiàn)象的時候，其實就可以運用一些策略手法，把看似缺點變成優(yōu)點。例如使用pagination，多數(shù)人都停在第一頁，這時候，第一頁就可以放主打商品。