英文 | https://niemvuilaptrinh.medium.com/what-is-product-card-10-and-product-card-css-for-website-a2a40c00c965

翻譯 | 楊小二

什么是產(chǎn)品卡？

產(chǎn)品卡作為銷售網(wǎng)站是不可或缺的組成部分，也是決定用戶是否購(gòu)買你的產(chǎn)品的重要因素。

產(chǎn)品卡（又稱產(chǎn)品描述卡）是將產(chǎn)品信息分為許多不同的部分，包括圖像、內(nèi)容、價(jià)格……以幫助用戶更直觀、更全面地了解你的產(chǎn)品。此外，它還幫助我們?cè)谠S多不同的設(shè)備屏幕上一致地顯示。

在我看來(lái)，圖像是一個(gè)非常重要的因素，因?yàn)樗怯脩艨吹降牡谝粋€(gè)元素，因此你需要使圖像清晰易讀。也不需要用太多的字母和太多的內(nèi)容，因?yàn)橛脩魰?huì)懶惰閱讀，你只需要突出產(chǎn)品標(biāo)簽描述的產(chǎn)品特點(diǎn)。

在這里，我將分享一些在設(shè)計(jì) Web 中使用 HTML、CSS、Bootstrap 和 Javascript 構(gòu)建的 Product Tag（產(chǎn)品信息卡）的一些案例。

01、HTML CSS設(shè)計(jì)產(chǎn)品卡片

此產(chǎn)品標(biāo)簽采用 3D 樣式，具有相應(yīng)的標(biāo)簽標(biāo)題背景顏色，產(chǎn)品顏色為卡片創(chuàng)造了統(tǒng)一性。

它還為每個(gè)人展示了明星產(chǎn)品評(píng)論，用戶可以了解產(chǎn)品的耐用性和好壞。精心設(shè)計(jì)的價(jià)格標(biāo)簽是該案例的另一個(gè)優(yōu)點(diǎn)。

現(xiàn)在為了更好地理解，請(qǐng)打開codepen演示地址，閱讀代碼。

codepen演示地址：https://codepen.io/CodeFrogShow/pen/rWjYrP

02、用戶界面產(chǎn)品卡

此產(chǎn)品卡片由 3D 風(fēng)格的圖像制成，并以各種類型的圖像來(lái)描述產(chǎn)品的真實(shí)性和質(zhì)量。價(jià)格和訂單按鈕印在卡片上的顯著位置，以強(qiáng)調(diào)內(nèi)容并刺激客戶訂購(gòu)。

現(xiàn)在為了更好地理解，請(qǐng)打開codepen演示地址，閱讀代碼。

codepen演示地址：https://codepen.io/john-mantas/pen/bxmrBq

03、Jquery產(chǎn)品卡

如果你想選擇簡(jiǎn)單的產(chǎn)品卡片設(shè)計(jì)，你可以選擇這個(gè)案例樣式。此外，它還具有變色效果，因此用戶可以選擇適合你想要的產(chǎn)品的顏色。它還使用 Roboto 字體來(lái)幫助創(chuàng)建更現(xiàn)代和更感性的風(fēng)格。

現(xiàn)在為了更好地理解，請(qǐng)打開codepen演示地址，閱讀代碼。

codepen演示地址：https://codepen.io/nuel/pen/yOKNmX

04、CSS3 Javascript實(shí)現(xiàn)的產(chǎn)品卡片模板 

這個(gè)產(chǎn)品標(biāo)簽在使用懸停效果顯示產(chǎn)品信息時(shí)非常有趣。當(dāng)我們的網(wǎng)站有很多產(chǎn)品時(shí)，它有助于減少可用區(qū)域。當(dāng)點(diǎn)擊（click）“VIEW DETAIL”時(shí)，它會(huì)以不同的顏色顯示相應(yīng)的產(chǎn)品。

現(xiàn)在為了更好地理解，請(qǐng)打開codepen演示地址，閱讀代碼。

codepen演示地址：https://codepen.io/virgilpana/pen/RNYQwB

05、HTML5實(shí)現(xiàn)的產(chǎn)品卡片

此產(chǎn)品卡使用簡(jiǎn)單的設(shè)計(jì)來(lái)描述有關(guān)產(chǎn)品的基本信息。由于它僅用 HTML、CSS 編寫，因此你可以輕松更改并應(yīng)用于許多不同的網(wǎng)站布局。

現(xiàn)在為了更好地理解，請(qǐng)打開codepen演示地址，閱讀代碼。

codepen演示地址：https://codepen.io/ff0004-red/pen/WxJEJZ

06、漂亮的產(chǎn)品卡片設(shè)計(jì)

這張產(chǎn)品卡片也是和上面一樣的設(shè)計(jì)，但它的特點(diǎn)是當(dāng)用戶將鼠標(biāo)懸停在圖片上時(shí)，可以看到產(chǎn)品的詳細(xì)信息。此外，當(dāng)用戶懸停價(jià)格或購(gòu)買按鈕時(shí)，它還具有星級(jí)和自我評(píng)級(jí)移動(dòng)來(lái)下訂單。

現(xiàn)在為了更好地理解，請(qǐng)打開codepen演示地址，閱讀代碼。

codepen演示地址：https://codepen.io/linux/pen/LjWrPZ

07、產(chǎn)品卡引導(dǎo)：

這可以看作是銷售網(wǎng)站（尤其是電子產(chǎn)品）中使用的典型產(chǎn)品標(biāo)簽。它還具有自動(dòng)轉(zhuǎn)換為圖像的效果和其他功能，有助于在購(gòu)買該成分的產(chǎn)品后查看用戶評(píng)論。

現(xiàn)在為了更好地理解，請(qǐng)打開codepen演示地址，閱讀代碼。

codepen演示地址：https://codepen.io/haycuoilennao19/pen/bGVVKad

08、產(chǎn)品卡響應(yīng)

該案例的特點(diǎn)是設(shè)計(jì)簡(jiǎn)單，顏色一致，如將元素排列在一個(gè)元素中。它側(cè)重于標(biāo)題和價(jià)格突出，使用大字體加粗體顯示標(biāo)題，并向客戶展示你產(chǎn)品的評(píng)論者數(shù)量和星級(jí)數(shù)量，可以評(píng)估質(zhì)量和符合他們的標(biāo)準(zhǔn)。

現(xiàn)在為了更好地理解，請(qǐng)打開codepen演示地址，閱讀代碼。

codepen演示地址：https://codepen.io/GeorgeGedox/pen/yEwoqP

09、CSS3實(shí)現(xiàn)的產(chǎn)品卡片 

名片設(shè)計(jì)模板這個(gè)簡(jiǎn)單的產(chǎn)品對(duì)這個(gè)案例的顏色或效果并不挑剔。它側(cè)重于兩個(gè)主要因素：產(chǎn)品的名稱和價(jià)格。

現(xiàn)在為了更好地理解，請(qǐng)打開codepen演示地址，閱讀代碼。

codepen演示地址：https://codepen.io/jacobsauerhoefer/pen/mVZwLB

10、Javascript實(shí)現(xiàn)的產(chǎn)品卡

本案例同上，但有點(diǎn)擊查看更多產(chǎn)品與其他圖片的效果。它適用于多種類型的銷售網(wǎng)站，以及大多數(shù)的網(wǎng)站設(shè)計(jì)和頁(yè)面布局。

現(xiàn)在為了更好地理解，請(qǐng)打開codepen演示地址，閱讀代碼。

codepen演示地址：https://codepen.io/kathykato/pen/gdvjax

總結(jié)

在此希望本文案例能幫助到你，同時(shí)，如果你覺得這些案例非常棒，請(qǐng)與你身邊做設(shè)計(jì)或者開發(fā)的朋友一起來(lái)分享。

如果你有問題，我會(huì)第一時(shí)間回復(fù)你。期待請(qǐng)繼續(xù)支持我，讓我可以寫出更多的好文章。

祝你今天過得愉快！

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)