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

瀑布流

瀑布流是一種允許用戶不斷往下滾動(dòng)，頁面自動(dòng)刷新呈現(xiàn)內(nèi)容的交互形式，且這樣的滾動(dòng)是沒有終點(diǎn)的。這種方式在很多網(wǎng)站和應(yīng)用中有所應(yīng)用，但并不適合所有的網(wǎng)站和應(yīng)用。對著生活中實(shí)例來映射，下圖中的藝考打分畫面，老師在大量的畫海中一張一張瀏覽打分，有幾分瀑布流的味道。

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

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

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

缺點(diǎn)分析

首先預(yù)加載對于用戶的瀏覽是一個(gè)極佳的體驗(yàn)，這個(gè)技術(shù)出現(xiàn)的背景是因?yàn)閮?nèi)容加載速度慢而導(dǎo)致的用戶的高流失率，應(yīng)用的被卸載。使用瀑布流的頁面和應(yīng)用會(huì)不斷預(yù)加載內(nèi)容，但是當(dāng)加載了大量內(nèi)容后，頁面反應(yīng)速度會(huì)越來越慢，影響使用體驗(yàn)。其次因?yàn)槠俨剂鞫紩?huì)配備大量圖片，所以對于硬件的容量要求特別高，很多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ì)像分頁統(tǒng)計(jì)一樣有一個(gè)總數(shù)據(jù)的統(tǒng)計(jì)。用戶也無法通過瀏覽器的滾動(dòng)條的長度去預(yù)估什么時(shí)候能到底。因?yàn)楫?dāng)頁面滾動(dòng)到底部的時(shí)候，更多內(nèi)容會(huì)加載進(jìn)來，滾動(dòng)條的長度又開始發(fā)生變化，同時(shí)footer會(huì)被推開視野，然后footer中包含的信息也就看不到了，對于想看得用戶來說是個(gè)難點(diǎn)。所以設(shè)計(jì)的時(shí)候可以嘗試把底部做固定或者設(shè)計(jì)一個(gè)“更多”的按鈕，這樣內(nèi)容的加載控制點(diǎn)在用戶手中，體驗(yàn)更佳。

分頁顯示

顧名思義就是把內(nèi)容分別拆分到不同的頁面顯示。比如200行內(nèi)容，每一分頁顯示20行，分10頁顯示，你能直觀看到內(nèi)容的總分頁數(shù)，分頁內(nèi)容數(shù)，分頁呈現(xiàn)內(nèi)容數(shù)的控制?？聪聦?shí)際生活中的例子，去超市購物，貨架與貨物的關(guān)系與內(nèi)容和分頁的關(guān)系有異曲同工之妙。

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

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

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

缺點(diǎn)分析

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

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

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

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

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

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

本文由 @agileyang 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。