分頁(yè)式設(shè)計(jì)還是瀑布流滾動(dòng)設(shè)計(jì)?信息量大的網(wǎng)站取舍指導(dǎo)
  • 更新時(shí)間:2024-10-30 19:24:39
  • 建站經(jīng)驗(yàn)
  • 發(fā)布時(shí)間:2年前
  • 542

如果你的網(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è)。

簡(jiǎn)單分析一下Infinite scroll的優(yōu)缺點(diǎn)


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)題。

Pagination優(yōu)點(diǎn)

1. 雙向互動(dòng),讓使用者有時(shí)間思索、決策:

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

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

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

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

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

另外,有時(shí)候我們查找一些數(shù)據(jù),需要再跳回去看的時(shí)候,我們大概會(huì)依稀記得之前看到的數(shù)據(jù),大概會(huì)是在第幾頁(yè),除了幫助記憶外,可以讓我們可以更快跳到想要的內(nèi)容上。Infinite scroll因?yàn)閟croll bar長(zhǎng)度及位置的不停變動(dòng),無(wú)法像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是比較常見(jiàn)的設(shè)計(jì),因?yàn)樾枰c(diǎn)擊才有下頁(yè)內(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按鈕,作為折衷的辦法。

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

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

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

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

△ Fancy:無(wú)限滾動(dòng)模式的購(gòu)物網(wǎng)站

One More Thing:?jiǎn)雾?yè)的內(nèi)容數(shù)量

另外,無(wú)論是Pagination或是Infinite Scroll with Load More button都會(huì)面對(duì)一個(gè)問(wèn)題,就是究竟Pagination的一頁(yè)或Infinite scroll 出現(xiàn)按鈕的長(zhǎng)度應(yīng)該要多長(zhǎng),要放多少東西,才是適宜的?這也是值得探討的議題。

有文章指出,在電子商務(wù)的情境下運(yùn)用Infinite scroll,從產(chǎn)品類(lèi)別點(diǎn)進(jìn)去看的商品,可以列出50-100項(xiàng)產(chǎn)品,再出現(xiàn)Load more按鈕,但如果是搜尋結(jié)果,則建議25–75項(xiàng),在手機(jī)上,則是因?yàn)槠聊坏南拗?,建議15–30項(xiàng)商品即可。

同樣是電子商務(wù),簡(jiǎn)單看了一下市面上的網(wǎng)絡(luò)購(gòu)物平臺(tái),運(yùn)用Pagination的平臺(tái),一頁(yè)也是50–100個(gè)物件間。

△ Taobao:每一頁(yè)有85個(gè)商品

eBay:默認(rèn)50個(gè)商品,用戶可以自由選擇展示數(shù)量。

如果今天情境轉(zhuǎn)為非電子商務(wù)平臺(tái),又會(huì)是什么結(jié)果呢?還可以再多做探索與研究。

我們專(zhuān)注高端建站,小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類(lèi)API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn),每一個(gè)項(xiàng)目承諾做到滿意為止,多一次對(duì)比,一定讓您多一份收獲!

本文章出于推來(lái)客官網(wǎng),轉(zhuǎn)載請(qǐng)表明原文地址:https://www.tlkjt.com/experience/7339.html
推薦文章

在線客服

掃碼聯(lián)系客服

3985758

回到頂部