網(wǎng)頁設(shè)計(jì)中無限滾動(dòng)的優(yōu)點(diǎn)和缺點(diǎn)分析

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

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

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

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

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

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

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

Infinite Scroll 缺點(diǎn)

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

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

  2. 找尋想要的特定信息時(shí),較無效率:

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

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

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

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

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

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

  5. Footer(頁腳)變得很難使用,甚至無法使用:

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