設計三大流，你知多少？
設計服務於商業，針對什麼目的從而來設計什麼樣式。
今天給大家講講一種設計樣式： 圖片流、卡片流和feed流
相信你們或多或少都聽過。但是它是如何應用的，它們各自的功能目的又是什麼呢？
下面我將對每一種流進行它的 作用、設計要點、案例分析 的方式進行介紹。
那麼流是什麼？
想想我們生活中什麼是流：水流，水流是很多的小水滴組成的一個流體。
所以就可以通過這個角度來理解這三大流。
流是 呈現的形式 ，流本身 自然地形事件 的時間線。
1.圖片流
a.作用
快速對圖片內容進行 瀏覽和篩選 。圖片流滿足了使用者對圖片進行快速瀏覽篩選的需求。
b.設計要點
通過版塊分割的背景和分割線來區分；
圖片高度不固定；
不需要加入標籤，即使有圖示也是弱化。（因為會干擾使用者對圖片的篩選）
c.案例
從截圖中可以看出，不管是左邊花瓣，還是右邊Pinterest，它們都是圖片流的形式。
同時也滿足前面所講的，圖片是主要資訊，一下子抓住視覺，讓使用者不停的往下瀏覽和篩選喜歡的或者感興趣的。
所以圖中的圖示和一些其他輔助東西也都是弱化，儘量不干擾圖片。
2.卡片流
a.作用
卡片是使用者 瞭解更多資訊細節的入口 。把資訊以固定的的排版佈局模式展示出來。
b.設計要點
卡片高度固定統一，組成部分（如頭像、標題、內容區域、按鈕等）也固定統一；
我們並不希望使用者在這部分快往下拉，我們希望使用者快速看到我們卡片中提取出來的文字資訊和買點（常見於金融理財類）讓使用者快速找到需要的內容。
c.案例
微信的服務通知、支付寶的服務提醒都是卡片流的形式。
一般是服務通知或者金融理財的專案等會採用這種樣式，意在通過文字資訊向用戶展示入口。
設計任何UI樣式都是以結果為導向，向用戶展示最關注的。
同樣分析一個產品或者功能模組，也是通過它的細節組成，功能目的來分析。
這裡還有一種卡片流的樣式，那就是卡包裡面的卡：
這種型別就更加直觀了，將其設計成現實中卡片的形狀，所謂設計源於生活。
3.feed流
什麼是feed，翻譯過來就是侍養、餵養的意思。那在我們UI樣式中的意思就是通過不斷的供給資訊，來餵養使用者，就像使用者是產品養的寵物一樣。最典型的就是現在很火的抖音，相信玩過抖音的都被它這種特殊的feed流“養”的不肯退出，時間一下子刷刷就過去了。那今天我們不講抖音，講講常規的feed流。
a.作用
快速對頁面中的資訊進行瀏覽篩選。
b.設計要點
圖片一般的尺寸：
9:6 （ feed流 ）
9:8 （ 商家列表流 ）
1:1 （ 頭像 ）
16:9（ 全屏大圖、視訊預覽圖 )
間距問題的把控：當三連圖，圖間距10px。
圖文間距10px+6px（一個層級），每提升一個層級增加6px。
輔助按鈕：左右視覺平衡，天平原理。又因為這只是輔助功能按鈕，所以要儘量弱化。
(以上尺寸為市面上產品大多數的處理，作為設計參考。）
c.案例
左圖今日頭條的feed流中，三連圖之間的間隔，紅色區域為10px。因為標題和圖片又區分一個層級，所以藍色部分為紅色部分的10px再加上一個層級間隔6px，因此藍色部分為16px。
底下有個“青雲計劃”，如果沒有右邊的關閉按鈕，視覺就向左傾斜了，特別是在沒有輔助文字的時候，這樣視覺就不平衡，因此加上右邊的關閉按鈕使得左右平衡，又很有節奏感的展現在使用者面前。
右圖UC頭條，以及底下的簡書、網易新聞也是一樣的設計規範。可以看出，在新聞資訊類的，比較多采用這種Feed流樣式。
簡書 網易新聞
微信 微博
像圖片流和feed流我們希望使用者更多的往下看資訊，不知道大家有沒有注意過，在這種型別的樣式中，我們時常看到有時候附帶了廣告，或者APP下載。更有甚者，廣告的內容很吸引使用者，就像裡面的常規資訊新聞一樣。
這樣就達到了產品的商業目的，畢竟做任何產品，最終目的還是要盈利的嘛。
總結
1.圖片流的作用是凸顯圖片資訊，滿足使用者對圖片進行快速瀏覽篩選的需求。
2.卡片流的作用是提煉文字資訊，讓使用者快速找到需要的資訊入口。
3.feed流的作用是幫助使用者對頁面中的資訊進行瀏覽篩選。
希望這篇文章對你有所幫助。