網(wǎng)站建設(shè)中新聞信息該采用分頁式設(shè)計(jì)還是瀑布流滾動(dòng)設(shè)計(jì)

2023-12-01    分類: 網(wǎng)站建設(shè)

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ì)不停變化,失去提示作用。

網(wǎng)站信息量大,該采用分頁式設(shè)計(jì)還是瀑布流滾動(dòng)設(shè)計(jì)?

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è)無法控制。有興趣的朋友,可以試著和Dribbble Designers頁面,與Footer玩追逐戰(zhàn)。

網(wǎng)站信息量大,該采用分頁式設(shè)計(jì)還是瀑布流滾動(dòng)設(shè)計(jì)?

△ Dribbble

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

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

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

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

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

3. 快速查找過往信息:

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

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

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

而Infinite scroll適合快速且隨意瀏覽的情境,也因?yàn)榻Y(jié)構(gòu)較為扁平,適合放同性質(zhì)的內(nèi)容。由使用者產(chǎn)生的內(nèi)容(例如:Facebook、Twitter)以及圖片內(nèi)容(如:pinterest、Dribbble)都相當(dāng)適合Infinite scroll,而面對(duì)較差的控制感、瀏覽器負(fù)荷高等缺點(diǎn),能以Load more按鈕,作為折衷的辦法。

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

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

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

當(dāng)前標(biāo)題:網(wǎng)站建設(shè)中新聞信息該采用分頁式設(shè)計(jì)還是瀑布流滾動(dòng)設(shè)計(jì)
分享鏈接:http://www.bm7419.com/news17/298017.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、用戶體驗(yàn)、云服務(wù)器、電子商務(wù)、小程序開發(fā)、關(guān)鍵詞優(yōu)化

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計(jì)公司