網(wǎng)站建設中新聞信息該采用分頁(yè)式設計還是瀑布流滾動(dòng)設計？發(fā)布者：本站     時(shí)間：2021-02-25 09:02:53

Infinite Scroll 缺點(diǎn)

1. 難以回溯、確認數據位置：

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

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

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

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

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

4. Scroll bar的長(cháng)短及位置，無(wú)法正確表達內容長(cháng)短：

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

網(wǎng)站信息量大，該采用分頁(yè)式設計還是瀑布流滾動(dòng)設計？

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

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

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

網(wǎng)站信息量大，該采用分頁(yè)式設計還是瀑布流滾動(dòng)設計？

△ Dribbble

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

Pagination優(yōu)點(diǎn)
1. 雙向互動(dòng)，讓使用者有時(shí)間思索、決策：

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

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

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

3. 快速查找過(guò)往信息：

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

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

結論
Pagination和Infinite scroll有各自的優(yōu)缺點(diǎn)，運用在適當的情境時(shí)，可以將優(yōu)點(diǎn)及大化，缺點(diǎn)甚至會(huì )轉為優(yōu)點(diǎn)。Pagination是比較常見(jiàn)的設計，因為需要點(diǎn)擊才有下頁(yè)內容，讓人有停頓的時(shí)間，適合用在目標導向、一些需要思考決策、有目的性的活動(dòng)，例如搜尋商品，或是找尋數據。

而Infinite scroll適合快速且隨意瀏覽的情境，也因為結構較為扁平，適合放同性質(zhì)的內容。由使用者產(chǎn)生的內容（例如：Facebook、Twitter）以及圖片內容（如：Pinterest、Dribbble）都相當適合Infinite scroll，而面對較差的控制感、瀏覽器負荷高等缺點(diǎn)，能以L(fǎng)oad more按鈕，作為折衷的辦法。

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

電子商務(wù)究竟較適合Pagination還是Infinite Scroll呢？

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