在日常場景中，卡片是十分常見的一個設(shè)計元素，那么如果做一個梳理，你知道我們常在哪些場景下使用卡片設(shè)計嗎？在卡片設(shè)計中，是否還存在著哪些容易忽略的設(shè)計細(xì)節(jié)？本篇文章里，作者總結(jié)了幾個卡片設(shè)計方法，一起來看一下。

卡片設(shè)計在UI中有非常多的優(yōu)勢，相關(guān)的文章我已經(jīng)寫過幾篇了，結(jié)合往期文章可以更系統(tǒng)地學(xué)習(xí)卡片設(shè)計規(guī)范：

• 《總監(jiān)問我為什么要用卡片設(shè)計？好在哪，怎么做？看完這篇文章全明白了！》
• 《想做好卡片設(shè)計，原來要注意這么多細(xì)節(jié)》

在做卡片設(shè)計時什么才是最重要的？這篇文章中我將會分享8個最關(guān)鍵的細(xì)節(jié)。在這之前，我們一起來對UI中的卡片設(shè)計基礎(chǔ)做一個梳理，總結(jié)下一般在哪些場景適合用卡片設(shè)計。

卡片是UI中的一個組件元素，能夠創(chuàng)建清晰的視覺單元，讓信息更具邏輯性。它通常包含：標(biāo)題、描述、圖片、按鈕或者鏈接。

基礎(chǔ)卡片

一、一般在哪些場景使用卡片設(shè)計？

1. 產(chǎn)品目錄頁面

大型電商網(wǎng)站諸如亞馬遜、阿里、沃爾瑪和eBay都使用了卡片設(shè)計做產(chǎn)品呈現(xiàn)。通常，一個產(chǎn)品卡片構(gòu)成包括產(chǎn)品圖片、標(biāo)題、價格、折扣和行動按鈕，可以通過點(diǎn)擊這個行動按鈕查看商品詳情頁面。

Amazon (top) and Alibaba (bottom)

eBay (top) and Walmart (bottom)

2. 內(nèi)容網(wǎng)站

新聞文章、社交媒體平臺會使用卡片組件這種比較聚焦的設(shè)計去呈現(xiàn)每個內(nèi)容，這樣用戶可以快速掃描，閱讀內(nèi)容。

Behance (top) and Dribbble (bottom)

CNN (top) and BBC (bottom)

3. 儀表盤界面

儀表盤是一個非常好的例子，在其中能夠很容易體現(xiàn)卡片設(shè)計的優(yōu)勢，它能把相關(guān)的信息在界面上組織到一起，幫助用戶更容易的比較和分析數(shù)據(jù)信息。

Mixpanel (top) and Dribbble (bottom)

4. 收集網(wǎng)站

瀏覽和探索大量的設(shè)計作品是一種有趣和吸引人的體驗(yàn)，就像Pinterest，Unsplash基于卡片布局，用大圖封面的形式能夠抓住用戶的眼睛。這就是為什么在網(wǎng)頁和手機(jī)體驗(yàn)中使用卡片瀏覽變得如此流行的原因。

Pinterest (top) and Unsplash (bottom)

5. 協(xié)作工具

卡片是很靈活的組件，它可以將不同類型的信息和子元素組合在一起。例如，F(xiàn)igma、Miro、Framer都用了卡片形式展示項目和文件?？ㄆO(shè)計干凈、易于互動、實(shí)用，可以很容易地進(jìn)行文件相關(guān)操作。

Figma and Miro

二、最佳實(shí)踐

講卡片設(shè)計的文章相信已經(jīng)很多了，但我想在這篇文章中著重講一些容易被忽略的設(shè)計細(xì)節(jié)。我希望這些點(diǎn)可以幫你進(jìn)一步優(yōu)化卡片設(shè)計。

1. 注意在卡片和背景之間設(shè)計合適的對比度

為了從背景中更好的區(qū)分卡片，你可以給卡片增加一個外描邊或者加一個淺淺的投影。

彩云注：這里原作者放的例子我覺得沒有特別好，但是她提到的這個細(xì)節(jié)確實(shí)是需要注意的，背景和卡片之間的顏色對比不要太小，不管是改顏色還是加描邊或者投影，都是為了加大這種對比。

比如下面彩云隨便找的一個很優(yōu)秀的卡片設(shè)計，就是用的多彩色加大了卡片與背景的對比，使得信息清晰可見。

2. 努力維護(hù)好字體大小，避免使用太小的字號

內(nèi)容可讀性由所選字體和字體大小決定。下面的例子中可以看出，兩個卡片設(shè)計在樣式上都差不多，但因?yàn)樽煮w大小選的對，整個卡片在視覺上變得更平衡，對人眼來說更好，所以右邊的卡片更容易識別。

關(guān)于字號選擇有一些經(jīng)驗(yàn)可以分享給你，幫助你優(yōu)化視覺層次。（彩云注：這里提到的尺寸應(yīng)該多指PC端）

• 標(biāo)題，使用的字號會在20px-96px或者更大，取決于卡片的尺寸和具體內(nèi)容。
• 副標(biāo)題，字號會使用小于主標(biāo)題2px-10px，這樣可以比較容易區(qū)分。
• 正文，字號最少16px。在某些情況下，如果你使用某些本身字符就比較大的字體，則可以適當(dāng)減少字號。例如，在谷歌規(guī)范（https://material.io/design/typography/the-type-system.html#applying-the-type-scale）中，兩個正文文本的大小分別定義為14px和16px。
• 按鈕，它的字號不可以比正文的字號小。當(dāng)需要展示多個選項時，對于主要按鈕需要用到更突出的字體樣式（加粗Semi-bold/Bold），次級按鈕使用略弱的字體樣式（一般Regular/Medium）。
• 嘗試限制字體大小的數(shù)量，可以使用字體縮放插件，F(xiàn)igma中的插件Type scale（https://www.figma.com/community/plugin/739825414752646970/Typescales）或Web tool for defining a type scale（https://type-scale.com）。

3. 對留白創(chuàng)建一個間距體系

留白是UI各元素之間的空白區(qū)域，它們將創(chuàng)建視覺組，保持視覺層級。如果你想避免設(shè)計混亂，需要確保做好一致性，你需要定義好間距體系，這對開發(fā)來說也會非常有效，減少代碼量，還原的更好。

關(guān)于間距系統(tǒng)我也有一些經(jīng)驗(yàn)：

• 選擇一個基礎(chǔ)單位，并用它來作為UI元素間距的倍數(shù)值。一般來說，基礎(chǔ)單位是4px（0.25rem）。不建議使用奇數(shù)比如5px，這是因?yàn)樵O(shè)備中會有1.5x的DPI，這個留白的縮放值會變成7.5px會導(dǎo)致像素模糊。
• 通過使用基礎(chǔ)單位作為增量或乘法來定義間距值，減少間距值的數(shù)量，會讓UI更簡潔，例如它用來定義Tailwind（https://tailwindcss.com/docs/customizing-spacing）這個產(chǎn)品留白規(guī)范。
• Figma進(jìn)階用法，修改“大移動”（具體設(shè)置方法見官方幫助文檔https://help.figma.com/hc/en-us/articles/4404575206295-Set-small-and-big-nudge-values），從默認(rèn)的10px改到8px，這將會讓你每次移動元素可以保持8px的數(shù)值（這是基礎(chǔ)單位的2x），只需要按住shift+方向鍵即可。這會非常省時間。

4. 盡可能設(shè)計與內(nèi)容布局相似的加載狀態(tài)

加載狀態(tài)匹配即將加載的真實(shí)內(nèi)容會減少用戶對于加載內(nèi)容的不確定性心態(tài)。下面的例子，你可以在右邊看一個正確加載效果的設(shè)計，會更加符合用戶的心理預(yù)期。

一組加載狀態(tài)的效果對比

Figma and Vimeo

5. 定義一個卡片的固定高度

在實(shí)際項目中，你需要設(shè)計一個卡片元素，假定一個卡片是一行內(nèi)容，另一個卡片是有4行文本內(nèi)容。最好的解決方案是設(shè)計一個固定高度的卡片，在內(nèi)容較少的卡片上使用留白，而在內(nèi)容較多的卡片上使用文字截斷。（彩云注：這樣卡片在效果上更加一致。）

6. 使用網(wǎng)格作為卡片設(shè)計的基礎(chǔ)規(guī)范

網(wǎng)格作為卡片的布局基礎(chǔ)，有助于統(tǒng)一地安排內(nèi)容，這就是為什么當(dāng)涉及到卡片設(shè)計時它們是如此有用。當(dāng)你需要時，可以使用網(wǎng)格將卡片的寬度擴(kuò)展到需要的網(wǎng)格列數(shù)量，通常這樣做，你可以找到一個合適的卡片寬度。當(dāng)設(shè)計一個響應(yīng)式布局時，應(yīng)該為每個斷點(diǎn)

（彩云注：可能有些人不大理解斷點(diǎn)的意思，它指的是從PC切換到平板，然后再切換手機(jī)，屏幕大小在變化，布局也會做相應(yīng)的改變）設(shè)計一個網(wǎng)格，設(shè)計相應(yīng)的卡片大小。

(1) PC (2) 平板 (3) 手機(jī)

你可以在這2個網(wǎng)站學(xué)習(xí)到更多關(guān)于響應(yīng)式設(shè)計的規(guī)范 Material Guidelines or Intuit Design System.

當(dāng)你在設(shè)計基于卡片，響應(yīng)式布局時，你需要問自己幾個問題：

• 卡片內(nèi)容在所有斷點(diǎn)之間看起來一致嗎？（臺式機(jī)、平板電腦、手機(jī)）
• 間距值是否一致？
• 交互合理嗎？它們會影響卡片的大小和卡片之間的間距嗎？
• 長標(biāo)題有考慮嗎？它們會如何影響卡片的內(nèi)容？

一些Figma設(shè)計卡片布局的建議：

• 為卡片定義約束constraints（https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize），以確定當(dāng)你調(diào)整它們的大小時，布局中的卡片應(yīng)該如何響應(yīng)。
• 為卡片應(yīng)用auto-layout（https://help.figma.com/hc/en-us/articles/5731482952599-Using-auto-layout），使它自動調(diào)整大小根據(jù)里面的項目。在Figma上有教程（https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/additional-tips/#using-constraints-with-layout-grids）。
• 創(chuàng)建一個8px的網(wǎng)格可以讓你在設(shè)計中精確地排列和調(diào)整8px增量單元的元素大小。

7. 創(chuàng)建不同內(nèi)容的卡片設(shè)計

如果你事先知道卡片可能有不同長度的內(nèi)容，請確保在設(shè)計中涵蓋這種情況。在不同內(nèi)容轉(zhuǎn)換過程中將幫助開發(fā)以正確的方式為卡片做好還原，避免破壞內(nèi)容對齊。

8. 為更好的用戶體驗(yàn)定義卡片交互

UI交互是用戶通過觸摸屏、鼠標(biāo)或鍵盤設(shè)備與UI元素交互時發(fā)生的操作，狀態(tài)是在特定用戶的交互中出現(xiàn)的視覺反饋。

與許多其他UI元素(按鈕、文本字段、下拉菜單等)一樣，卡片的狀態(tài)應(yīng)該取決于使用上下文和定義的交互。對于特定的交互，卡片應(yīng)該根據(jù)狀態(tài)設(shè)置樣式。

最常見的卡片狀態(tài)列表：

• 默認(rèn)：卡片處于正常狀態(tài)，無任何用戶交互。
• 懸停：當(dāng)用戶將鼠標(biāo)光標(biāo)(指針)放在卡片上時。
• 激活：如果卡片是可點(diǎn)擊的，用戶按下鼠標(biāo)主按鈕點(diǎn)擊它，卡片的樣式應(yīng)該改變，以顯示組件是激活的。這與按鈕被按下的狀態(tài)相同。
• 聚焦：當(dāng)使用鍵盤或語音等輸入法時，卡片會高亮顯示。通常在網(wǎng)頁上這種狀態(tài)是用藍(lán)色的，但你可以選擇你自己的品牌色，只要確保顏色與背景顏色至少3:1的對比度。
• 選擇：卡片被選擇時的狀態(tài)拖動:用戶拖拽卡片時的狀態(tài)。

三、總結(jié)

卡片是UI中的常見組件，你可以在大多數(shù)網(wǎng)站和移動應(yīng)用中找到它，它實(shí)在是太流行且實(shí)用了，所以一定要掌握好卡片設(shè)計并進(jìn)行大量的練習(xí)。通過這些知識點(diǎn)的學(xué)習(xí)，我們可以使它們在視覺上更有吸引力，更有效，更容易訪問。