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

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

來(lái)看看Google的設(shè)計(jì)，它在一般搜尋時(shí)，采用Pagination（頁(yè)碼）的方式，可是在圖片搜尋時(shí)，卻使用Infinite scroll（無(wú)限滾動(dòng)，瀑布流）。為什么會(huì)有如此的差異呢？

△ Google Search

△ Google image search

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

Infinite Scroll 優(yōu)點(diǎn)

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

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

Infinite Scroll架構(gòu)也相對(duì)扁平，適合展示相同階層架構(gòu)的東西，而圖片就是最好的內(nèi)容物，因?yàn)橐曈X(jué)的信息比較文字更快被人所接收，我們總是能很掃射完圖片，Pinterest就是利用Infinite Scroll的特點(diǎn)，不停給予各式圖片，供設(shè)計(jì)師快速找尋靈感、給予源源不絕的刺激。

2. 操作簡(jiǎn)易快速：

不用過(guò)多瞄準(zhǔn)點(diǎn)擊的操作，只需滾動(dòng)，就能有新的內(nèi)容，操作效率較佳。而且在手機(jī)上，scroll瀏覽也比點(diǎn)擊來(lái)得方便。

△ Pinterest

Infinite Scroll 缺點(diǎn)

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

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

2. 找尋想要的特定信息時(shí)，較無(wú)效率：

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

3. 占用瀏覽器過(guò)多的資源：

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

4. Scroll bar的長(zhǎng)短及位置，無(wú)法正確表達(dá)內(nèi)容長(zhǎng)短：

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

Scroll bar往往會(huì)越變?cè)叫?，位置也?huì)一直更動(dòng)

5. Footer（頁(yè)腳）變得很難使用，甚至無(wú)法使用：

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

△ Dribbble

不過(guò)其實(shí)為了解決上述問(wèn)題，Load more按鈕會(huì)是一個(gè)解法。當(dāng)Scroll到底，網(wǎng)頁(yè)加載一定數(shù)量的東西后，便不再自動(dòng)加載，必須按Load more，才會(huì)又再一輪的載入。這可以解決無(wú)法在一定數(shù)量?jī)?nèi)，來(lái)回觀看、占用過(guò)多瀏覽器資源、Footer無(wú)法使用等問(wèn)題。