寫在開頭：本文是 @agileyang 發(fā)表在人人都是產(chǎn)品經(jīng)理（http://www.woshipm.com/）上的文章怎茫，轉(zhuǎn)載文章僅供大家學(xué)習(xí)收壕，不作任何商業(yè)用途。
每個設(shè)計(jì)師在工作中都會糾結(jié)于是使用瀑布流還是分頁列表去展示內(nèi)容轨蛤。到底如何選擇蜜宪，讓我們先分析下兩種交互方式的優(yōu)缺點(diǎn)。
瀑布流
瀑布流是一種允許用戶不斷往下滾動祥山，頁面自動刷新呈現(xiàn)內(nèi)容的交互形式圃验，且這樣的滾動是沒有終點(diǎn)的。這種方式在很多網(wǎng)站和應(yīng)用中有所應(yīng)用缝呕，但并不適合所有的網(wǎng)站和應(yīng)用澳窑。對著生活中實(shí)例來映射，下圖中的藝考打分畫面供常，老師在大量的畫海中一張一張瀏覽打分摊聋，有幾分瀑布流的味道。
優(yōu)點(diǎn)分析
使用瀑布流作為瀏覽內(nèi)容的交互方式能夠延長用戶在頁面的停留時長栈暇，增加用戶的參與度麻裁。
它是伴隨信息高速增長應(yīng)運(yùn)而生，允許用戶在信息海洋自由徜徉源祈，有種無拘無束的直觀感煎源，比較適合用戶去在大量的內(nèi)容中隨意逛游發(fā)現(xiàn)自己中意的內(nèi)容。當(dāng)用戶在海量內(nèi)容里去挑選自己喜歡的東西香缺，而不是去挑選特定內(nèi)容的時候手销，瀑布流成了一個標(biāo)配，它非常符合逛的特質(zhì)赫悄。再從操作本身來比較原献，比起單擊和雙擊等動作，無論是PC端還是移動端埂淮，滾動或滑動來得更簡單姑隅，效率更高。比如將一篇冗長的文章分散在不同頁面去呈現(xiàn)倔撞，還不如讓用戶滾動去看完全篇讲仰，這樣的體驗(yàn)比分頁更好。
缺點(diǎn)分析
首先預(yù)加載對于用戶的瀏覽是一個極佳的體驗(yàn)痪蝇，這個技術(shù)出現(xiàn)的背景是因?yàn)閮?nèi)容加載速度慢而導(dǎo)致的用戶的高流失率鄙陡，應(yīng)用的被卸載冕房。使用瀑布流的頁面和應(yīng)用會不斷預(yù)加載內(nèi)容，但是當(dāng)加載了大量內(nèi)容后趁矾，頁面反應(yīng)速度會越來越慢耙册，影響使用體驗(yàn)。其次因?yàn)槠俨剂鞫紩鋫浯罅繄D片毫捣，所以對于硬件的容量要求特別高详拙，很多16G、32G的PAD在使用了一段時間后蔓同，需要我們清除緩存才能再次使用饶辙。
其次就是當(dāng)我們滾動過程中發(fā)現(xiàn)了幾個好的內(nèi)容，但是也沒有可以標(biāo)記的動作斑粱，回頭再想找中意的內(nèi)容時就很痛苦弃揽，你得重復(fù)剛剛的滾動過程，運(yùn)氣好你能找到印象中的那幾個內(nèi)容则北，回馬槍很難耍起來矿微，降低了這方面的用戶體驗(yàn)。
再次我們無法直觀看到內(nèi)容的數(shù)量尚揣，瀑布流不會像分頁統(tǒng)計(jì)一樣有一個總數(shù)據(jù)的統(tǒng)計(jì)冷冗。用戶也無法通過瀏覽器的滾動條的長度去預(yù)估什么時候能到底。因?yàn)楫?dāng)頁面滾動到底部的時候惑艇，更多內(nèi)容會加載進(jìn)來，滾動條的長度又開始發(fā)生變化拇泛，同時footer會被推開視野滨巴，然后footer中包含的信息也就看不到了，對于想看得用戶來說是個難點(diǎn)俺叭。所以設(shè)計(jì)的時候可以嘗試把底部做固定或者設(shè)計(jì)一個“更多”的按鈕恭取，這樣內(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)容，整個閱讀的進(jìn)度扼鞋，加載多少內(nèi)容都會是在精確的控制范圍內(nèi)申鱼。
對比瀑布流的無窮無盡，用戶在分頁顯示中知道內(nèi)容數(shù)量是多少藏鹊，總數(shù)量是多少润讥，什么時候可以瀏覽完畢。分頁操作的界面：上一頁盘寡，01楚殿，02，03竿痰，04脆粥，05……19，20?下一頁影涉，讓用戶做到胸有成竹变隔，讓用戶感受到控制感。上述特點(diǎn)可以看到蟹倾，分頁顯示比較適用一些購物類的網(wǎng)站匣缘，當(dāng)用戶在網(wǎng)上購物，他們經(jīng)常會來回比較查看感興趣的產(chǎn)品鲜棠。比對下淘寶和京東的APP肌厨，京東在網(wǎng)下滑動的時候是有分頁顯示的“9/70”，明確告訴你數(shù)量豁陆，淘寶這點(diǎn)暫時還沒發(fā)現(xiàn)柑爸。
缺點(diǎn)分析
當(dāng)然對比瀑布流的操作方式，分頁的方式在操作次數(shù)所需更多盒音，比如用戶要看下一個分頁內(nèi)容表鳍，得找到”下一頁”的按鈕，鼠標(biāo)移動到按鈕上祥诽，“點(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)容偏向的用戶去使用的場景空郊。
舉個直觀的例子：谷歌的文字搜索是使用分頁顯示，而圖片搜索采用的是瀑布流的方式切揭，糾其原因是：
文字搜索對于用戶來說是有明確目的傾向的而圖片搜索對于用戶來說他也不知道該找哪張圖片狞甚，所以需要從海量圖片中找尋；
用戶瀏覽和處理圖片的速度遠(yuǎn)大于處理文字的速度廓旬，瀑布流的大量內(nèi)容的推送對于用戶處理來說不在話下哼审。
所以設(shè)計(jì)師在選擇使用瀑布流或分頁顯示前得想清楚各自的優(yōu)缺點(diǎn)。具體使用哪種交互方式孕豹，得基于實(shí)際的場景和內(nèi)容的傳遞方式來分析涩盾。總的來說励背，瀑布流更適合那些隨意瀏覽春霍，逛逛看看不帶特定目的的場景使用。而分頁顯示比較適合帶有特定目的叶眉，想查找具體項(xiàng)在哪個位置址儒，瀏覽過的內(nèi)容還能回頭一一快速而方便找回的場景。
寫在文末：再次申明所有轉(zhuǎn)載文章僅供學(xué)習(xí)衅疙，感謝作者的無私分享离福。如果喜歡我們的文章就點(diǎn)關(guān)注??吧，我們會每天更新炼蛤！
