先把這四個(gè)概念分為兩組，列表流和卡片流做為一組，瀑布流和feed流為一組。
接下來(lái)咱們就展開(kāi)說(shuō)說(shuō)為什么要這樣分組？分組的依據(jù)、目的？
如果你對(duì)這些概念也有點(diǎn)模糊不清，就一起來(lái)看看吧～
列表流與卡片流
列表流
說(shuō)到列表，首先想到的就是一行一行的內(nèi)容排列形式，列表流其實(shí)就是一種以文字為主導(dǎo)的布局形式，內(nèi)容以列表的形式表現(xiàn)出來(lái)，最典型的例子就是手機(jī)里的信息，進(jìn)入之后會(huì)看到一行行的信息列表。
除了信息這種以文字為主的布局形式，列表流常見(jiàn)的形式還包括圖文并排的布局，圖文的位置可以很靈活，左圖右文、左文右圖、上文下圖都是常見(jiàn)的布局方式。
列表流多用在新聞、信息、資訊類產(chǎn)品中，以文字內(nèi)容為主導(dǎo)的布局形式既能快速突出重點(diǎn)，又能讓用戶瀏覽起來(lái)很方便。
▲ 除了使用單一的布局方式，多種布局形式的混合使用變得越來(lái)越流行，混合使用能夠打破單一的布局，讓頁(yè)面變得有節(jié)奏，通過(guò)布局的穿插變化讓頁(yè)面和內(nèi)容更加多元化。
卡片流
無(wú)論在APP上還是網(wǎng)頁(yè)上，卡片流都是最常用的布局形式?？ㄆ皆O(shè)計(jì)采用圖像與文字相結(jié)合的方式將信息傳達(dá)給受眾，在有限的矩形空間中建立了無(wú)限的可能性。
之前分享過(guò)關(guān)于卡片式設(shè)計(jì)的特點(diǎn)，可以點(diǎn)擊回看更多內(nèi)容：《詳解卡片式設(shè)計(jì)的特點(diǎn)和使用場(chǎng)景》
對(duì)比列表流來(lái)看，卡片流相當(dāng)于把圖片尺寸放大，內(nèi)容圖文結(jié)合以卡片的形式展現(xiàn)出來(lái)。
▲ 公眾號(hào)就是一個(gè)很標(biāo)準(zhǔn)的卡片式設(shè)計(jì)，以卡片流的形式來(lái)推送內(nèi)容，一行只有一個(gè)卡片，并且每個(gè)卡片尺寸都是固定大小。
▲ 除了標(biāo)準(zhǔn)的單列卡片流，雙列卡片流在產(chǎn)品中用的更多，每個(gè)卡片在寬度上相等，但高度上有可能不一樣，而且卡片流中每個(gè)卡片不一定要嚴(yán)格地水平對(duì)齊。
▲ 卡片流除了可以承載以圖片為主的內(nèi)容，層級(jí)結(jié)構(gòu)清晰的文字內(nèi)容也可以靈活使用卡片式設(shè)計(jì)，簡(jiǎn)單清晰地展示信息。
小總結(jié)：
通過(guò)前面的介紹能夠看出來(lái)，列表流、卡片流都是設(shè)計(jì)形式的變化。
比如列表設(shè)計(jì)的寬一點(diǎn)、卡片設(shè)計(jì)的大一點(diǎn)或小一點(diǎn)等等，直接呈現(xiàn)出直觀的視覺(jué)效果，帶給我們最直觀的視覺(jué)感受。
而且兩者并不是對(duì)立存在的，而是可以相互聯(lián)系、相互搭配使用，比如一個(gè)頁(yè)面上可以結(jié)合使用多種形式，在使用列表流的時(shí)候我可以穿插使用一些卡片流，兩者的混合使用往往能產(chǎn)生1+1>2的效果。
瀑布流與Feed流
為什么將這兩個(gè)概念放一塊說(shuō)呢？大家可以根據(jù)上面講到的列表流和卡片流的特點(diǎn)，一起來(lái)對(duì)比思考下。
瀑布流
瀑布流是指在滑動(dòng)頁(yè)面的時(shí)候，內(nèi)容會(huì)源源不斷地刷新出來(lái)，感覺(jué)一直滑不到底，Pinterest大家應(yīng)該都很熟悉，有網(wǎng)友提到Pinterest是最早使用了瀑布流設(shè)計(jì)。
瀑布流代表了內(nèi)容呈現(xiàn)的方式，呈現(xiàn)的內(nèi)容可以是源源不斷的列表，也可以是源源不斷的卡片，看到這里，大家是不是有點(diǎn)明白瀑布流跟列表流、卡片流的根本區(qū)別了。
另外需要注意的一點(diǎn)是，瀑布流只負(fù)責(zé)展現(xiàn)內(nèi)容，并不會(huì)對(duì)內(nèi)容進(jìn)行干預(yù)，會(huì)把內(nèi)容無(wú)差別地展示給用戶。
▲ 在500px網(wǎng)站的圖片中，無(wú)論用戶是否登錄網(wǎng)站、有什么喜好，網(wǎng)站都不會(huì)干預(yù)內(nèi)容的呈現(xiàn)，所有的用戶都會(huì)看到相同的圖片內(nèi)容。
Feed流
和瀑布流不同，F(xiàn)eed流在呈現(xiàn)內(nèi)容的時(shí)候，會(huì)對(duì)內(nèi)容進(jìn)行干預(yù)，會(huì)根據(jù)用戶的喜好來(lái)更新和推薦內(nèi)容。
在算法加持下，可以說(shuō)所有人都是透明的，產(chǎn)品會(huì)記住每一位用戶的喜好，為用戶匹配相應(yīng)的內(nèi)容。
所以Feed流經(jīng)常跟推薦這個(gè)詞一起使用，組成Feed流推薦系統(tǒng)，產(chǎn)會(huì)通過(guò)數(shù)據(jù)算法為不同用戶推薦他們感興趣的內(nèi)容，吸引用戶長(zhǎng)時(shí)間的留存。
▲ 淘寶、小紅書(shū)這類產(chǎn)品都是依托算法推薦，根據(jù)用戶畫(huà)像、用戶興趣推送特定的內(nèi)容，以達(dá)到千人千面的效果。這種推薦模式現(xiàn)在已經(jīng)成為主流，基本上大多數(shù)的頭部產(chǎn)品都逃不過(guò)這樣的設(shè)計(jì)。
小總結(jié)：
把瀑布流和Feed流放一起對(duì)比能發(fā)現(xiàn)，瀑布流側(cè)重頁(yè)面和信息布局，自上而下滑動(dòng)的過(guò)程中會(huì)不斷加載頁(yè)面內(nèi)容，呈現(xiàn)的內(nèi)容并不會(huì)針對(duì)不同的用戶做出調(diào)整。
Feed流則側(cè)重于內(nèi)容分發(fā)，會(huì)依據(jù)用戶的訂閱和習(xí)慣推送不同的內(nèi)容。
最后
通過(guò)介紹這幾個(gè)概念，再多說(shuō)幾句我的一些想法和思考。
很多時(shí)候我們都會(huì)遇到概念、問(wèn)題，模糊不清或者容易搞混的情況，尤其是多個(gè)看起來(lái)相似的概念、問(wèn)題碰在一起。
為什么說(shuō)看起來(lái)呢，因?yàn)槲覀兂３６际潜贿@種看起來(lái)相似搞混了，比較兩個(gè)看起來(lái)相似但實(shí)際意義卻完全不同的概念或問(wèn)題，只會(huì)造成越看越亂的情況。
所以最根本的做法是抓住內(nèi)核，去探究問(wèn)題或概念的本質(zhì)，別被表面事物蒙蔽了思考。
原文地址：Clip設(shè)計(jì)夾（公眾號(hào)）
作者：Clippp
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》列表流、卡片流、瀑布流、Feed流，你能分清它們的設(shè)計(jì)特點(diǎn)嗎？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.jsyqsx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)