什么是列表流、卡片流、瀑布流、Feed流呢？這幾個詞的含義與區(qū)分你是否清楚呢？這幾個詞看到的頻率很高，但對其認識有點模糊不清。這些概念放在一起看，肯定容易混亂，關(guān)鍵是理清它們之間的區(qū)別和聯(lián)系，才能更好地在設(shè)計中使用。

先把這四個概念分為兩組，列表流和卡片流為一組，瀑布流和 feed 流為一組。

接下來咱們就展開說說為什么要這樣分組，分組的依據(jù)、目的。如果你對這些概念也有點模糊不清，就一起來看看吧～

列表流與卡片流

1. 列表流

說到列表，首先想到的就是一行一行的內(nèi)容排列形式，列表流其實就是一種以文字為主導(dǎo)的布局形式，內(nèi)容以列表的形式表現(xiàn)出來，最典型的例子就是手機里的信息，進入之后會看到一行行的信息列表。

除了信息這種以文字為主的布局形式，列表流常見的形式還包括圖文并排的布局，圖文的位置可以很靈活，左圖右文、左文右圖、上文下圖都是常見的布局方式。

列表流多用在新聞、信息、資訊類產(chǎn)品中，以文字內(nèi)容為主導(dǎo)的布局形式既能快速突出重點，又能讓用戶瀏覽起來很方便。

除了使用單一的布局方式，多種布局形式的混合使用變得越來越流行，混合使用能夠打破單一的布局，讓頁面變得有節(jié)奏，通過布局的穿插變化讓頁面和內(nèi)容更加多元化。

2. 卡片流

無論在 APP 上還是網(wǎng)頁上，卡片流都是最常用的布局形式。卡片式設(shè)計采用圖像與文字相結(jié)合的方式將信息傳達給受眾，在有限的矩形空間中建立了無限的可能性。

對比列表流來看，卡片流相當于把圖片尺寸放大，內(nèi)容圖文結(jié)合以卡片的形式展現(xiàn)出來。

公眾號就是一個很標準的卡片式設(shè)計，以卡片流的形式來推送內(nèi)容，一行只有一個卡片，并且每個卡片尺寸都是固定大小。

除了標準的單列卡片流，雙列卡片流在產(chǎn)品中用的更多，每個卡片在寬度上相等，但高度上有可能不一樣，而且卡片流中每個卡片不一定要嚴格地水平對齊。

卡片流除了可以承載以圖片為主的內(nèi)容，層級結(jié)構(gòu)清晰的文字內(nèi)容也可以靈活使用卡片式設(shè)計，簡單清晰地展示信息。

通過前面的介紹能夠看出來，列表流、卡片流都是設(shè)計形式的變化。

比如列表設(shè)計的寬一點、卡片設(shè)計的大一點或小一點等等，直接呈現(xiàn)出直觀的視覺效果，帶給我們最直觀的視覺感受。而且兩者并不是對立存在的，而是可以相互聯(lián)系、相互搭配使用，比如一個頁面上可以結(jié)合使用多種形式，在使用列表流的時候我可以穿插使用一些卡片流，兩者的混合使用往往能產(chǎn)生 1+1>2 的效果。

瀑布流與 Feed 流

為什么將這兩個概念放一塊說呢？大家可以根據(jù)上面講到的列表流和卡片流的特點，一起來對比思考下。

1. 瀑布流

瀑布流是指在滑動頁面的時候，內(nèi)容會源源不斷地刷新出來，感覺一直滑不到底，Pinterest 大家應(yīng)該都很熟悉，有網(wǎng)友提到 Pinterest 是最早使用了瀑布流設(shè)計。

瀑布流代表了內(nèi)容呈現(xiàn)的方式，呈現(xiàn)的內(nèi)容可以是源源不斷的列表，也可以是源源不斷的卡片，看到這里，大家是不是有點明白瀑布流跟列表流、卡片流的根本區(qū)別了。

另外需要注意的一點是，瀑布流只負責(zé)展現(xiàn)內(nèi)容，并不會對內(nèi)容進行干預(yù)，會把內(nèi)容無差別地展示給用戶。

在 500px 網(wǎng)站的圖片中，無論用戶是否登錄網(wǎng)站、有什么喜好，網(wǎng)站都不會干預(yù)內(nèi)容的呈現(xiàn)，所有的用戶都會看到相同的圖片內(nèi)容。

2. Feed 流

和瀑布流不同，F(xiàn)eed 流在呈現(xiàn)內(nèi)容的時候，會對內(nèi)容進行干預(yù)，會根據(jù)用戶的喜好來更新和推薦內(nèi)容。在算法加持下，可以說所有人都是透明的，產(chǎn)品會記住每一位用戶的喜好，為用戶匹配相應(yīng)的內(nèi)容。所以 Feed 流經(jīng)常跟推薦這個詞一起使用，組成 Feed 流推薦系統(tǒng)，會通過數(shù)據(jù)算法為不同用戶推薦他們感興趣的內(nèi)容，吸引用戶長時間的留存。

淘寶、小紅書這類產(chǎn)品都是依托算法推薦，根據(jù)用戶畫像、用戶興趣推送特定的內(nèi)容，以達到千人千面的效果。這種推薦模式現(xiàn)在已經(jīng)成為主流，基本上大多數(shù)的頭部產(chǎn)品都逃不過這樣的設(shè)計。