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