作者：Andrew Coyle
原文地址：https://uxdesign.cc/design-better-cards-c0d12ab581c4
總結(jié)：卡片組件是在用戶了解更多細(xì)節(jié)內(nèi)容前的預(yù)覽。它已經(jīng)成為我們當(dāng)前數(shù)字范式的象征。其中的元素包括多媒體、文本续挟、鏈接炉峰、圖表和標(biāo)題碑幅。
卡片作為用戶界面組件热芹，扮演了一個(gè)詳細(xì)信息入口的角色斋荞。不同來源的信息被放在一起并以一種易于理解的方式呈現(xiàn)。這是我們當(dāng)前媒體環(huán)境的一個(gè)反應(yīng)轴合。
在過去十年間创坞，不同尺寸屏幕大量出現(xiàn)，以及html5/css3的發(fā)布使得卡片的形式逐漸成型受葛。它完美的代表了新的web题涨，社交媒體網(wǎng)站如facebook，twitter和Pinterest成為主流奔坟。相比以前更加個(gè)性化携栋、聚集、社會化咳秉⊥裰В卡片則成為他們的載體。
卡片容納了轉(zhuǎn)瞬即逝的簡短信息澜建，為觀眾提供了獨(dú)特的想法向挖、靈感，最重要的是呈現(xiàn)給用戶一種比金魚注意力還要短的圖畫炕舵。
卡片的形狀
卡片將不同的信息碎片組合起來何之。提供了可以快速瀏覽的信息和可以進(jìn)入的選項(xiàng)。
不同卡片之間的信息是同等重要的咽筋。這允許用戶以一種類似看超市貨架的方式瀏覽內(nèi)容溶推。用戶在進(jìn)一步操作前會評價(jià)每一個(gè)卡片。
卡片因其靈活性在自適應(yīng)的web設(shè)計(jì)中表現(xiàn)良好奸攻。通過使用media queries蒜危，內(nèi)容可以根據(jù)屏幕重新排布。這種延展性能夠?qū)⒁曈X語言和用戶體驗(yàn)在不同的設(shè)備上進(jìn)行統(tǒng)一睹耐。
卡片解構(gòu)
設(shè)計(jì)更好的卡片之前辐赞，你需要了解它有哪些組成要素∠跹担卡片可能包含標(biāo)題响委、副標(biāo)題、摘要窖梁、多媒體赘风、圖片、視頻窄绒、圖表贝次、評論和操作按鈕。操作按鈕一般是受限制的彰导，并且在很多情況下整個(gè)卡片是一單個(gè)鏈接蛔翅。
卡片有多種呈現(xiàn)方式，例如單獨(dú)呈現(xiàn)位谋，時(shí)間軸的形式山析，畫廊的形式，排列的形式或者組成儀表盤掏父。
