卡片作為信息的承載體，在界面設計應用得非常廣泛。弄清不同卡片的設計細節點，能讓我們做設計化繁為簡，設得心應手。在設計的過程中，我們要有拆分思維，將復雜的模塊、組件，拆分為細小的基礎元素，逐一攻破。
圖片流、卡片流、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流
feed流是投喂用戶想要的內容。常用在很多資訊app中,如今日頭條、酷安等app。
1.feed流作用
a.幫助用戶持續地獲取最新的訂閱內容
b.使用戶減少干擾，沉浸式閱讀。
2.feed流細節拆分
a.配圖
▲配圖的選取應遵循背景感覺、烘托主題、色彩關聯這三個原則。從美團外賣、餓了么這些產品可知，首頁選取的圖片一定是嚴格把控的，符合產品的氣質、而且有想買的欲望。
▲圖片尺寸
不同的產品、不同場景出現的圖片比例是不一致的。在feed流中長出現的圖片比例為3:2（這里只簡單的給出數值、后續會詳細講解圖片尺寸）
c、列表流
對于列表流，最重要的是把控間距。建議建立最基本的間距，比如為8px，然后根據親密性來依次增加偶數像素，來拉開層級關系。
d、分段控件
設計時，選中文案比未選中文案一般大2px；顏色一般選取品牌色。小橫條通常設計為3px（1x下）
e、輔助按鈕
▲注意左右平衡。設計時圖標與文案一樣高。
卡片流、圖片流、feed流在界面設計中用的越來越廣泛。掌握好其中的設計要點、會對我們的設計效率、設計效果有很大的幫助。以上內容，只是自己平時學習的總結與積累，希望對你有所幫助，但是切記死板套用哦～
