每個(gè)設(shè)計(jì)師在工作中都會(huì)糾結(jié)于是使用瀑布流還是分頁(yè)列表去展示內(nèi)容。到底如何選擇，讓我們先分析下兩種交互方式的優(yōu)缺點(diǎn)。

瀑布流是一種允許用戶不斷往下滾動(dòng)，頁(yè)面自動(dòng)刷新呈現(xiàn)內(nèi)容的交互形式，且這樣的滾動(dòng)是沒有終點(diǎn)的。這種方式在很多網(wǎng)站和應(yīng)用中有所應(yīng)用，但并不適合所有的網(wǎng)站和應(yīng)用。

優(yōu)點(diǎn)分析

使用瀑布流作為瀏覽內(nèi)容的交互方式能夠延長(zhǎng)用戶在頁(yè)面的停留時(shí)長(zhǎng)，增加用戶的參與度。

它是伴隨信息高速增長(zhǎng)應(yīng)運(yùn)而生，允許用戶在信息海洋自由徜徉，有種無拘無束的直觀感，比較適合用戶去在大量的內(nèi)容中隨意逛游發(fā)現(xiàn)自己中意的內(nèi)容。當(dāng)用戶在海量?jī)?nèi)容里去挑選自己喜歡的東西，而不是去挑選特定內(nèi)容的時(shí)候，瀑布流成了一個(gè)標(biāo)配，它非常符合逛的特質(zhì)。再?gòu)牟僮鞅旧韥肀容^，比起單擊和雙擊等動(dòng)作，無論是pc端還是移動(dòng)端，滾動(dòng)或滑動(dòng)來得更簡(jiǎn)單，效率更高。比如將一篇冗長(zhǎng)的文章分散在不同頁(yè)面去呈現(xiàn)，還不如讓用戶滾動(dòng)去看完全篇，這樣的體驗(yàn)比分頁(yè)更好。

缺點(diǎn)分析

首先預(yù)加載對(duì)于用戶的瀏覽是一個(gè)極佳的體驗(yàn)，這個(gè)技術(shù)出現(xiàn)的背景是因?yàn)閮?nèi)容加載速度慢而導(dǎo)致的用戶的高流失率，應(yīng)用的被卸載。使用瀑布流的頁(yè)面和應(yīng)用會(huì)不斷預(yù)加載內(nèi)容，但是當(dāng)加載了大量?jī)?nèi)容后，頁(yè)面反應(yīng)速度會(huì)越來越慢，影響使用體驗(yàn)。其次因?yàn)槠俨剂鞫紩?huì)配備大量圖片，所以對(duì)于硬件的容量要求特別高，很多16g、32g的pad在使用了一段時(shí)間后，需要我們清除緩存才能再次使用。

其次就是當(dāng)我們滾動(dòng)過程中發(fā)現(xiàn)了幾個(gè)好的內(nèi)容，但是也沒有可以標(biāo)記的動(dòng)作，回頭再想找中意的內(nèi)容時(shí)就很痛苦，你得重復(fù)剛剛的滾動(dòng)過程，運(yùn)氣好你能找到印象中的那幾個(gè)內(nèi)容，回馬槍很難耍起來，降低了這方面的用戶體驗(yàn)。

再次我們無法直觀看到內(nèi)容的數(shù)量，瀑布流不會(huì)像分頁(yè)統(tǒng)計(jì)一樣有一個(gè)總數(shù)據(jù)的統(tǒng)計(jì)。用戶也無法通過瀏覽器的滾動(dòng)條的長(zhǎng)度去預(yù)估什么時(shí)候能到底。因?yàn)楫?dāng)頁(yè)面滾動(dòng)到底部的時(shí)候，更多內(nèi)容會(huì)加載進(jìn)來，滾動(dòng)條的長(zhǎng)度又開始發(fā)生變化，同時(shí)footer會(huì)被推開視野，然后footer中包含的信息也就看不到了，對(duì)于想看得用戶來說是個(gè)難點(diǎn)。所以設(shè)計(jì)的時(shí)候可以嘗試把底部做固定或者設(shè)計(jì)一個(gè)“更多”的按鈕，這樣內(nèi)容的加載控制點(diǎn)在用戶手中，體驗(yàn)更佳。

分頁(yè)顯示

顧名思義就是把內(nèi)容分別拆分到不同的頁(yè)面顯示。比如200行內(nèi)容，每一分頁(yè)顯示20行，分10頁(yè)顯示，你能直觀看到內(nèi)容的總分頁(yè)數(shù)，分頁(yè)內(nèi)容數(shù)，分頁(yè)呈現(xiàn)內(nèi)容數(shù)的控制。

優(yōu)點(diǎn)分析

分頁(yè)顯示可以方便用戶去尋找特定的內(nèi)容，用戶再次打開頁(yè)面，還是能快速找到對(duì)應(yīng)的內(nèi)容。精確的定位能幫助你快速找到那些你中意的內(nèi)容，整個(gè)閱讀的進(jìn)度，加載多少內(nèi)容都會(huì)是在精確的控制范圍內(nèi)。

對(duì)比瀑布流的無窮無盡，用戶在分頁(yè)顯示中知道內(nèi)容數(shù)量是多少，總數(shù)量是多少，什么時(shí)候可以瀏覽完畢。分頁(yè)操作的界面：上一頁(yè)，01，02，03，04，05……19，20 下一頁(yè)，讓用戶做到胸有成竹，讓用戶感受到控制感。上述特點(diǎn)可以看到，分頁(yè)顯示比較適用一些購(gòu)物類的網(wǎng)站，當(dāng)用戶在網(wǎng)上購(gòu)物，他們經(jīng)常會(huì)來回比較查看感興趣的產(chǎn)品。比對(duì)下淘寶和京東的app，京東在網(wǎng)下滑動(dòng)的時(shí)候是有分頁(yè)顯示的“9/70”，明確告訴你數(shù)量，淘寶這點(diǎn)暫時(shí)還沒發(fā)現(xiàn)。

缺點(diǎn)分析

當(dāng)然對(duì)比瀑布流的操作方式，分頁(yè)的方式在操作次數(shù)所需更多，比如用戶要看下一個(gè)分頁(yè)內(nèi)容，得找到”下一頁(yè)”的按鈕，鼠標(biāo)移動(dòng)到按鈕上，“點(diǎn)擊”然后等待下頁(yè)的加載，每頁(yè)顯示的內(nèi)容也是有限的。

那如何決定是使用瀑布流還是分頁(yè)顯示？

從現(xiàn)網(wǎng)成功案例來講，ugc為主的相關(guān)網(wǎng)站和應(yīng)用都在使用瀑布流去承載內(nèi)容，比如微博、臉書、人人都是產(chǎn)品經(jīng)理等，然后還有一些以圖片為主的網(wǎng)站和應(yīng)用，比如花瓣、pinterest、instagram等也在使用。分頁(yè)顯示相對(duì)來說是一種安全模式，比較適用那些帶有明確內(nèi)容偏向的用戶去使用的場(chǎng)景。

舉個(gè)直觀的例子：谷歌的文字搜索是使用分頁(yè)顯示，而圖片搜索采用的是瀑布流的方式，糾其原因是：

文字搜索對(duì)于用戶來說是有明確目的傾向的而圖片搜索對(duì)于用戶來說他也不知道該找哪張圖片，所以需要從海量圖片中找尋；用戶瀏覽和處理圖片的速度遠(yuǎn)大于處理文字的速度，瀑布流的大量?jī)?nèi)容的推送對(duì)于用戶處理來說不在話下。

所以設(shè)計(jì)師在選擇使用瀑布流或分頁(yè)顯示前得想清楚各自的優(yōu)缺點(diǎn)。具體使用哪種交互方式，得基于實(shí)際的場(chǎng)景和內(nèi)容的傳遞方式來分析。總的來說，瀑布流更適合那些隨意瀏覽，逛逛看看不帶特定目的的場(chǎng)景使用。而分頁(yè)顯示比較適合帶有特定目的，想查找具體項(xiàng)在哪個(gè)位置，瀏覽過的內(nèi)容還能回頭一一快速而方便找回的場(chǎng)景

分享名稱：內(nèi)容展示頁(yè)的界面選擇
轉(zhuǎn)載源于：http://jinyejixie.com/news/106647.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、面包屑導(dǎo)航、網(wǎng)站排名、商城網(wǎng)站、網(wǎng)站收錄、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(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)