波多野结衣中文字幕免费视频,四川少妇单挑三个黑人,国产精品手机免费,H无码精品动漫在线观看免费下载

品牌互聯(lián)網(wǎng)化服務(wù) 專注于網(wǎng)站建設(shè)與SEO優(yōu)化的合理結(jié)合
咨詢:18540043080
2021-10-22

分頁式設(shè)計還是瀑布流滾動設(shè)計?

類型:網(wǎng)站開發(fā)
  • 閱讀量:3387
  • 來源:聚藝科技

    如果你的網(wǎng)站信息量巨大,你會選擇分頁式設(shè)計還是瀑布流滾動設(shè)計?下面就這兩種設(shè)計方式的優(yōu)缺點比較,給大家分析一下到底哪種適合你的網(wǎng)站。今天這篇好文詳細分析了各大信息流網(wǎng)站(谷歌、pinterest、淘寶)的做法,列舉了這兩種方式的優(yōu)缺點和適用場景。一篇精悍簡練的干貨文,來收!


    前陣子工作中,剛好有做到log歷史紀錄的設(shè)計,窗體應(yīng)該要采用哪種設(shè)計策略,也引起一陣討論。無論是電子商務(wù)網(wǎng)站、搜尋結(jié)果、圖片瀏覽、歷史紀錄等等,只要是內(nèi)容信息量大時,設(shè)計師總是會面對到同樣的問題。


    來看看google的設(shè)計,它在一般搜尋時,采用pagination(頁碼)的方式,可是在圖片搜尋時,卻使用infinite scroll(無限滾動,瀑布流)。為什么會有如此的差異呢?


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


    △ google search


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


    △ google image search


    其實pagination和infinite scroll有各自的特性,適合在不同的情境。pagination把數(shù)據(jù)分成一頁一頁,下方有頁數(shù)或是指示可以點擊換頁,讓人有停頓的時間。而infinite scroll則是將內(nèi)容都放在同一頁,當滾輪滾到頁面下方時,會自動加載新的內(nèi)容,無需點擊換頁。


    簡單分析一下infinite scroll的優(yōu)缺點

    infinite scroll 優(yōu)點


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


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


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


    2. 操作簡易快速:


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


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


    △ pinterest


    infinite scroll 缺點


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


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


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


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


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


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


    4. scroll bar的長短及位置,無法正確表達內(nèi)容長短:


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


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


    scroll bar往往會越變越小,位置也會一直更動


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


    當滾輪滾動時,頁面會自動加載更多內(nèi)容,把footer再往下推,消失于窗口中。常常有這樣的經(jīng)驗,原本想要閱讀footer的信息,結(jié)果看到一半,就被加載的信息推走,我又往下scroll,然后又再度被推走,整個無法控制。有興趣的朋友,可以試著和dribbble designers頁面,與footer玩追逐戰(zhàn)。


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


    △ dribbble


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


    pagination優(yōu)點


    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)缺點,運用在適當?shù)那榫硶r,可以將優(yōu)點及大化,缺點甚至?xí)D(zhuǎn)為優(yōu)點。pagination是比較常見的設(shè)計,因為需要點擊才有下頁內(nèi)容,讓人有停頓的時間,適合用在目標導(dǎo)向、一些需要思考決策、有目的性的活動,例如搜尋商品,或是找尋數(shù)據(jù)。


    而infinite scroll適合快速且隨意瀏覽的情境,也因為結(jié)構(gòu)較為扁平,適合放同性質(zhì)的內(nèi)容。由使用者產(chǎn)生的內(nèi)容(例如:facebook、twitter)以及圖片內(nèi)容(如:pinterest、dribbble)都相當適合infinite scroll,而面對較差的控制感、瀏覽器負荷高等缺點,能以load more按鈕,作為折衷的辦法。


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


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


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


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


    來源聲明:本文章系聚藝科技編輯原創(chuàng)或采編整理,如需轉(zhuǎn)載請注明來自聚藝科技。以上內(nèi)容部分(包含圖片、文字)來源于網(wǎng)絡(luò),出于傳遞更多信息之目的。如有標注錯誤或侵權(quán),請作者持權(quán)屬證明與本網(wǎng)聯(lián)系,我們將及時更正、刪除,謝謝。
    標簽:
    沈陽聚藝網(wǎng)絡(luò)提供沈陽網(wǎng)站建設(shè),沈陽網(wǎng)站制作,沈陽網(wǎng)絡(luò)營銷,沈陽網(wǎng)絡(luò)推廣,沈陽網(wǎng)站優(yōu)化,沈陽小程序開發(fā),沈陽托管運維等多種服務(wù)! Copyright © 2030 沈陽市聚藝網(wǎng)絡(luò)科技技術(shù)有限公司. All Rights Reserved 備案號:遼ICP備19003083號-1

    在線咨詢

    微信咨詢

    電話咨詢

    24小時電話
    18540043080

    聯(lián)系我們

    返回頂部