圖片流、卡片流、feed流，“流”是按照某種時間線，去呈現我們的內容。
花瓣、Pinterest的首頁展現方式就是用的卡片流去承載圖片、用戶頭像、用戶名等信息的。
1.圖片流功能作用
a.幫助用戶快速瀏覽圖片與篩選圖片
b.使用戶減少幹擾，沈浸式閱讀
2.圖片流細節構成
從縱深角度，把圖片流拆分為背景層、內容層、控件層。
我們最需要關註的是內容層的設計。 內容層又拆分為：圖片內容區域、信息內容區域這兩部分。
3.內容層設計註意點
a、圖片卡片設計要點
1.圖片區域高度不固定。
2.信息區域主要樣式高度固定。這裏在設計時需要重點規定上下間距。（字數不壹樣多，會導致信息區域高度不壹樣，但是從樣式上來講，是固定的，因為這壹部分是可復用的）
b、用戶頭像
1.用戶頭像設計應註意左右平衡。 保持頭像高度與左邊文案高度壹致，可以保證左右平衡。
2.頭像素材要選取背景簡單、統壹的視覺中心、統壹的明暗度的圖片，而且選取的圖片壹定要符合我們產品的氣質。 我們在做設計稿的時候，壹定要選取統壹的圖片，比如圖片的視角、明暗度等。這樣才能保證我們頁面的統壹性，確保設計稿的效果。 千萬不要覺得線上環境頭像很亂、圖片很醜為由，就不去選取壹些優質的圖片，從而降低我們的專業度。
c、圖片流板塊設計要點
1.保持對應要素間距統壹 。這樣也利於開發。 （數值根據自己產品規範去定義，只要保持相同要素間距統壹就行）
2.註意信息層級劃分。利用 字體顏色、大小、字重去區分 。在這裏需要我們去考慮哪些是用戶關註的信息。
3.註意圓角大小。 圓角設置壹般在6-10px 為宜。
4.圖片流要點總結
卡片流樣式在支付寶、美團app中是很常見的。卡片流的組成部分有點像圖片流的內容區域板塊。卡片流的設計樣式是比較固定的。
1.卡片流作用
a.卡片流是讓用戶了解更多信息的入口
b.卡片流的信息呈現能讓用戶快速抓取重要信息，節省用戶時間
2.卡片流拆分
將卡片流按照“UI星辰大海”拆解為以下幾部分，分別從每壹部分去突破。
2.卡片流設計要點
a.基礎布局。基礎布局也就是簡單的背景色、分割線，就不多講解了。註意背景色不要太臟、太暗就行。
b.文字
文字設計時，也需根據自己產品設計規範去靈活應用，從字 顏色、大小、字重 上去區分文字層級。主副文案大小差別至少4像素。
c.內容層級－卡片組件
卡片流設計主要發力設計的區域為卡片組件。卡片組件拆分為表頭、表內容、表尾三部分。表內容部分可以有不同的內容呈現形式。
表頭部分
▲圖標高於文字高度。間距符合二分原則 （左邊距是右邊距的兩倍）。
▲表頭部分的圖標壹定要簡潔、具有呼吸感。 內圖標與圓底比例接近1:2。
表內容部分
▲根據產品的卡片作用，去對此部分內容進行設計。 壹定要控制好間距，保持此部分的呼吸感。
表尾部分
▲表尾部分壹般會放置文字按鈕、或簡單的按鈕。對於文字按鈕需根據重要程度從自重、顏色、大小上去突出。對於簡單的按鈕上下邊距與左右邊距需符合 二分原則 （接近二分原則，沒有那麽死板）
feed流是投餵用戶想要的內容。常用在很多資訊app中,如今日頭條、酷安等app。
1.feed流作用
a.幫助用戶持續地獲取最新的訂閱內容
b. 使用戶減少幹擾，沈浸式閱讀。
2.feed流細節拆分
a.配圖
▲配圖的選取應遵循背景感覺、烘托主題、色彩關聯這三個原則。 從美團外賣、餓了麽這些產品可知，首頁選取的圖片壹定是嚴格把控的，符合產品的氣質、而且有想買的欲望。
▲圖片尺寸
不同的產品、不同場景出現的圖片比例是不壹致的。 在feed流中長出現的圖片比例為3:2 （這裏只簡單的給出數值、後續會詳細講解圖片尺寸）
c、列表流
對於列表流，最重要的是把控間距。 建議建立最基本的間距，比如為8px，然後根據親密性來依次增加偶數像素，來拉開層級關系。
d、分段控件
設計時，選中文案比未選中文案壹般大2px；顏色壹般選取品牌色。小橫條通常設計為3px（1x下）
e、輔助按鈕
▲註意左右平衡。設計時圖標與文案壹樣高。
卡片流、圖片流、feed流在界面設計中用的越來越廣泛。掌握好其中的設計要點、會對我們的設計效率、設計效果有很大的幫助。以上內容，只是自己平時學習的總結與積累，希望對妳有所幫助，但是切記死板套用哦～