卡片作為信息的承載體奸忽，在界面設(shè)計應(yīng)用得非常廣泛堕伪。弄清不同卡片的設(shè)計細(xì)節(jié)點，能讓我們做設(shè)計化繁為簡栗菜，設(shè)得心應(yīng)手欠雌。在設(shè)計的過程中，我們要有拆分思維疙筹，將復(fù)雜的模塊富俄、組件，拆分為細(xì)小的基礎(chǔ)元素而咆，逐一攻破霍比。

圖片流、卡片流暴备、feed流悠瞬，“流”是按照某種時間線，去呈現(xiàn)我們的內(nèi)容。

一浅妆、圖片流

花瓣望迎、Pinterest的首頁展現(xiàn)方式就是用的卡片流去承載圖片、用戶頭像凌外、用戶名等信息的辩尊。

1.圖片流功能作用

a.幫助用戶快速瀏覽圖片與篩選圖片

b.使用戶減少干擾，沉浸式閱讀

花瓣圖片流

2.圖片流細(xì)節(jié)構(gòu)成

從縱深角度康辑，把圖片流拆分為背景層对省、內(nèi)容層、控件層晾捏。

圖片流頁面拆解

我們最需要關(guān)注的是內(nèi)容層的設(shè)計蒿涎。內(nèi)容層又拆分為：圖片內(nèi)容區(qū)域、信息內(nèi)容區(qū)域這兩部分惦辛。

內(nèi)容層－圖片卡片拆解

3.內(nèi)容層設(shè)計注意點

a劳秋、圖片卡片設(shè)計要點

1.圖片區(qū)域高度不固定。

2.信息區(qū)域主要樣式高度固定胖齐。這里在設(shè)計時需要重點規(guī)定上下間距玻淑。（字?jǐn)?shù)不一樣多，會導(dǎo)致信息區(qū)域高度不一樣呀伙，但是從樣式上來講补履，是固定的，因為這一部分是可復(fù)用的）

b剿另、用戶頭像

1.用戶頭像設(shè)計應(yīng)注意左右平衡箫锤。保持頭像高度與左邊文案高度一致，可以保證左右平衡雨女。

保持左右平衡

2.頭像素材要選取背景簡單谚攒、統(tǒng)一的視覺中心、統(tǒng)一的明暗度的圖片氛堕，而且選取的圖片一定要符合我們產(chǎn)品的氣質(zhì)馏臭。我們在做設(shè)計稿的時候，一定要選取統(tǒng)一的圖片讼稚，比如圖片的視角括儒、明暗度等。這樣才能保證我們頁面的統(tǒng)一性锐想，確保設(shè)計稿的效果帮寻。千萬不要覺得線上環(huán)境頭像很亂、圖片很丑為由痛倚，就不去選取一些優(yōu)質(zhì)的圖片规婆，從而降低我們的專業(yè)度。

圖片選取要花功夫

c、圖片流板塊設(shè)計要點

1.保持對應(yīng)要素間距統(tǒng)一抒蚜。這樣也利于開發(fā)掘鄙。（數(shù)值根據(jù)自己產(chǎn)品規(guī)范去定義，只要保持相同要素間距統(tǒng)一就行）

圖片流板塊設(shè)計要點（2x）

2.注意信息層級劃分嗡髓。利用字體顏色操漠、大小、字重去區(qū)分饿这。在這里需要我們?nèi)タ紤]哪些是用戶關(guān)注的信息浊伙。

3.注意圓角大小。圓角設(shè)置一般在6-10px為宜长捧。

4.圖片流要點總結(jié)

圖片流要點總結(jié)

二嚣鄙、卡片流

卡片流樣式在支付寶、美團(tuán)app中是很常見的串结⊙谱樱卡片流的組成部分有點像圖片流的內(nèi)容區(qū)域板塊〖「睿卡片流的設(shè)計樣式是比較固定的卧蜓。

1.卡片流作用

a.卡片流是讓用戶了解更多信息的入口

b.卡片流的信息呈現(xiàn)能讓用戶快速抓取重要信息，節(jié)省用戶時間

卡片流樣式

2.卡片流拆分

將卡片流按照“UI星辰大喊殉ǎ”拆解為以下幾部分弥奸，分別從每一部分去突破。

卡片要素

2.卡片流設(shè)計要點

a.基礎(chǔ)布局奋早∈Ⅵ基礎(chǔ)布局也就是簡單的背景色、分割線伸蚯，就不多講解了摩渺。注意背景色不要太臟、太暗就行剂邮。

b.文字

文字設(shè)計時，也需根據(jù)自己產(chǎn)品設(shè)計規(guī)范去靈活應(yīng)用横侦，從字顏色挥萌、大小、字重上去區(qū)分文字層級枉侧。主副文案大小差別至少4像素引瀑。

文字規(guī)范（1x）

c.內(nèi)容層級－卡片組件

卡片流設(shè)計主要發(fā)力設(shè)計的區(qū)域為卡片組件≌ツ伲卡片組件拆分為表頭憨栽、表內(nèi)容、表尾三部分。表內(nèi)容部分可以有不同的內(nèi)容呈現(xiàn)形式屑柔。

卡片拆分

表頭部分

▲圖標(biāo)高于文字高度屡萤。間距符合二分原則（左邊距是右邊距的兩倍）。

▲表頭部分的圖標(biāo)一定要簡潔掸宛、具有呼吸感死陆。內(nèi)圖標(biāo)與圓底比例接近1:2。

表頭設(shè)計要點

表內(nèi)容部分

▲根據(jù)產(chǎn)品的卡片作用唧瘾，去對此部分內(nèi)容進(jìn)行設(shè)計措译。一定要控制好間距，保持此部分的呼吸感饰序。

表尾部分

▲表尾部分一般會放置文字按鈕领虹、或簡單的按鈕。對于文字按鈕需根據(jù)重要程度從自重求豫、顏色掠械、大小上去突出。對于簡單的按鈕上下邊距與左右邊距需符合二分原則（接近二分原則注祖，沒有那么死板）

三猾蒂、feed流

feed流是投喂用戶想要的內(nèi)容。常用在很多資訊app中,如今日頭條是晨、酷安等app肚菠。

1.feed流作用

a.幫助用戶持續(xù)地獲取最新的訂閱內(nèi)容

b.使用戶減少干擾，沉浸式閱讀罩缴。

feed流

2.feed流細(xì)節(jié)拆分

feed流拆分

a.配圖

▲配圖的選取應(yīng)遵循背景感覺蚊逢、烘托主題、色彩關(guān)聯(lián)這三個原則箫章。從美團(tuán)外賣烙荷、餓了么這些產(chǎn)品可知，首頁選取的圖片一定是嚴(yán)格把控的檬寂，符合產(chǎn)品的氣質(zhì)终抽、而且有想買的欲望。

配圖要點

▲圖片尺寸

不同的產(chǎn)品桶至、不同場景出現(xiàn)的圖片比例是不一致的昼伴。在feed流中長出現(xiàn)的圖片比例為3:2（這里只簡單的給出數(shù)值、后續(xù)會詳細(xì)講解圖片尺寸）

c镣屹、列表流

對于列表流圃郊，最重要的是把控間距。建議建立最基本的間距女蜈，比如為8px持舆，然后根據(jù)親密性來依次增加偶數(shù)像素色瘩，來拉開層級關(guān)系。

簡書列表流親密關(guān)系

d逸寓、分段控件

設(shè)計時居兆，選中文案比未選中文案一般大2px；顏色一般選取品牌色席覆。小橫條通常設(shè)計為3px（1x下）

分段控件

e史辙、輔助按鈕

▲注意左右平衡。設(shè)計時圖標(biāo)與文案一樣高佩伤。

圖標(biāo)與文案一樣高

卡片流聊倔、圖片流、feed流在界面設(shè)計中用的越來越廣泛生巡。掌握好其中的設(shè)計要點耙蔑、會對我們的設(shè)計效率、設(shè)計效果有很大的幫助孤荣。以上內(nèi)容甸陌，只是自己平時學(xué)習(xí)的總結(jié)與積累，希望對你有所幫助盐股，但是切記死板套用哦～