分頁式設(shè)計還是瀑布流滾動設(shè)計?信息量大的網(wǎng)站取舍指導(dǎo)

1. 雙向互動,讓使用者有時間思索、決策:
閱覽完一頁后,因為還要點擊下一頁的關(guān)系,有機會停頓一下,使用者有個喘息的機會,去思考是否還要繼續(xù)看下一頁。不像infinite scroll,一直出現(xiàn)新的內(nèi)容,不停被喂養(yǎng)信息。
2. 給予使用者較佳的控制感:
在找尋時,pagnation的分頁,會讓使用者知道已經(jīng)找了幾頁。有研究指出到達頁面底端時,有種任務(wù)達到一個段落的感覺,會讓使用者有種愉悅的成就感和控制感。
3. 快速查找過往信息:
相信大家都有過找尋一些歷史消息的經(jīng)驗,可能找了幾頁數(shù)據(jù),我們就可能10頁10頁這樣跳,大概會抓說可能10頁就是幾天的訊息,可能可以利用頁數(shù),大概抓到資料會在第幾頁哪個位置。但是infinite scroll就無法做到這件事了,如果要找比較遠的數(shù)據(jù),就必須一直scroll到底再等待加載,中間加載了許多我們不需要的信息,就為了看比較久遠的數(shù)據(jù),強迫我們必須經(jīng)歷那個過程。
另外,有時候我們查找一些數(shù)據(jù),需要再跳回去看的時候,我們大概會依稀記得之前看到的數(shù)據(jù),大概會是在第幾頁,除了幫助記憶外,可以讓我們可以更快跳到想要的內(nèi)容上。Infinite scroll因為scroll bar長度及位置的不停變動,無法像pagniation易于定位。
結(jié)論Pagination和Infinite scroll有各自的優(yōu)缺點,運用在適當(dāng)?shù)那榫硶r,可以將優(yōu)點及大化,缺點甚至?xí)D(zhuǎn)為優(yōu)點。Pagination是比較常見的設(shè)計,因為需要點擊才有下頁內(nèi)容,讓人有停頓的時間,適合用在目標(biāo)導(dǎo)向、一些需要思考決策、有目的性的活動,例如搜尋商品,或是找尋數(shù)據(jù)。
而Infinite scroll適合快速且隨意瀏覽的情境,也因為結(jié)構(gòu)較為扁平,適合放同性質(zhì)的內(nèi)容。由使用者產(chǎn)生的內(nèi)容(例如:Facebook、Twitter)以及圖片內(nèi)容(如:Pinterest、Dribbble)都相當(dāng)適合Infinite scroll,而面對較差的控制感、瀏覽器負荷高等缺點,能以Load more按鈕,作為折衷的辦法。
再回過頭看最初的問題,歷史紀錄應(yīng)該用pagination還是infinite scroll? 或許一開始數(shù)據(jù)量不大的時候,infinite scroll是好用的,可是當(dāng)數(shù)據(jù)量慢慢累積,需要好幾頁的內(nèi)容時,為了找尋特定目標(biāo)的需要,pagination會是比較好的選擇。
電子商務(wù)究竟較適合Pagination還是Infinite Scroll呢?
我認為,要看情境做判斷。如果今天這個購物網(wǎng)站,比較像是讓人能快速找到所需物品,使用者知道自己要買什么,買了就走,功能性取向的,就使用Pagination較為合適。但如果今天的購物網(wǎng)站,是想要營造逛街購物的氛圍,讓使用者隨意看看,激起購物欲望,那么或許Infinite scroll也是可以考慮的,只是最好能在每個商品的Tile上,能有我的最愛功能,點擊愛心之后,可以收藏起來,避免最后找不到自己心動的商品。
其實有研究指出,pagination會拖慢瀏覽速度,也會讓用戶懶得點擊去看其他頁面的產(chǎn)品,降低產(chǎn)品曝光度。不過另外一方面,使用Pagination,會讓使用者花比較多的時間在第一頁。當(dāng)我們知道這些現(xiàn)象的時候,其實就可以運用一些策略手法,把看似缺點變成優(yōu)點。例如使用Pagination,多數(shù)人都停在第一頁,這時候,第一頁就可以放主打商品。
△ Fancy:無限滾動模式的購物網(wǎng)站
One More Thing:單頁的內(nèi)容數(shù)量另外,無論是Pagination或是Infinite Scroll with Load More button都會面對一個問題,就是究竟Pagination的一頁或Infinite scroll 出現(xiàn)按鈕的長度應(yīng)該要多長,要放多少東西,才是適宜的?這也是值得探討的議題。
有文章指出,在電子商務(wù)的情境下運用Infinite scroll,從產(chǎn)品類別點進去看的商品,可以列出50-100項產(chǎn)品,再出現(xiàn)Load more按鈕,但如果是搜尋結(jié)果,則建議25–75項,在手機上,則是因為屏幕的限制,建議15–30項商品即可。
同樣是電子商務(wù),簡單看了一下市面上的網(wǎng)絡(luò)購物平臺,運用Pagination的平臺,一頁也是50–100個物件間。
△ Taobao:每一頁有85個商品
eBay:默認50個商品,用戶可以自由選擇展示數(shù)量。
如果今天情境轉(zhuǎn)為非電子商務(wù)平臺,又會是什么結(jié)果呢?還可以再多做探索與研究。
相關(guān)文章
- 簡單而片面的說,爬蟲就是由計算機自動與服務(wù)器交互獲取數(shù)據(jù)的工具,這篇文章主要想談?wù)勁老x獲取數(shù)據(jù)的這一部分。爬蟲請注意網(wǎng)站的Robot.txt文件,不要讓爬蟲違法,也不要2017-12-18
- 設(shè)計師可能無法減少App加載頁面的等待時間,但是可以讓等待時間變得有趣~,本文主要為大家淺淡App加載頁面的等待體驗設(shè)計技巧,有興趣的朋友們就來了解下吧2017-12-15
- 表單無論實在網(wǎng)頁設(shè)置中,還是在APP、應(yīng)用程序、軟件界面中都被廣泛運行,從而一個好的表單設(shè)計就非常重要了,本文主要為大家分享幾個交互好且轉(zhuǎn)化率高的表單設(shè)計技巧,有2017-11-20
適配iPhone X要點:十分鐘快速掌握iPhone X UI界面適配技巧
目前,第一批預(yù)約iPhone X手機的朋友們已經(jīng)拿到真機了,目前還沒有適配iPhone X的應(yīng)用運營商,相信都在加班加點適配呢,本文為大家?guī)砹诉m配iPhone X的要點,讓你十分鐘快2017-11-08如何讓網(wǎng)頁可讀性更強?善用F式布局設(shè)計增強網(wǎng)頁可讀性方法解答
雖然網(wǎng)頁排版方式千變?nèi)f化,但是布局方式通常都遵循著幾種常見的規(guī)則,F(xiàn)式布局式設(shè)計能夠增強網(wǎng)頁可讀性,這種說法是有跡可循的,本文就為大家介紹如何運用F式布局,有興趣2017-11-08- 在網(wǎng)頁的設(shè)計中表單都是界面中最常見,也是最重要的組件之一,對于設(shè)計師、前端和開發(fā)者而言,應(yīng)當(dāng)對于表單的設(shè)計盡量多上心,讓它們更加易用,細致的設(shè)計對于用戶的體驗、2017-10-26
登錄頁面怎么設(shè)計更好?登錄頁面設(shè)計的15個心理學(xué)策略
有很多東西下意識地影響了我們的日常決策,這里面很多都是微妙的心理因素在起作用,大家都知道用戶體驗設(shè)計跟心理學(xué)相關(guān),甚至?xí)苯佑绊懏a(chǎn)品的轉(zhuǎn)化率,那么,登錄頁面怎么2017-10-10網(wǎng)站評論模塊怎么設(shè)計 10個關(guān)鍵點告訴你如何設(shè)計產(chǎn)品評論模塊
網(wǎng)站不僅內(nèi)容很重要,評論模塊同樣也很重要,那么,網(wǎng)站評論模塊怎么設(shè)計呢?對此,本文就為大家詳細介紹10個關(guān)鍵點告訴你如何設(shè)計產(chǎn)品評論模塊,有興趣的朋友們就來了解下2017-09-25網(wǎng)站導(dǎo)航設(shè)計怎么才是符合搜索引擎優(yōu)化?SEO網(wǎng)站導(dǎo)航建設(shè)技巧分享
搭建網(wǎng)站的任何細節(jié)都需要考慮到是否利于SEO優(yōu)化,在網(wǎng)站導(dǎo)航設(shè)計的過程中,我們應(yīng)該怎么樣進行操作才是符合搜索引擎優(yōu)化的呢?對此,本文就為大家進行簡單解答2017-09-21- 在做網(wǎng)站設(shè)計的過程當(dāng)中,很多人可能會對于頁腳這個方面產(chǎn)生忽略,但是實際上在我們平時的使用下來的整體的分析數(shù)據(jù)表明,頁腳對于一個網(wǎng)站來說還是有非常重要的作用的,那2017-09-04