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

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

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

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

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

基礎(chǔ)卡片

一、一般在哪些場(chǎng)景使用卡片設(shè)計(jì)？

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

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

Amazon (top) and Alibaba (bottom)

eBay (top) and Walmart (bottom)

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

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

Behance (top) and Dribbble (bottom)

CNN (top) and BBC (bottom)

3. 儀表盤(pán)界面

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

Mixpanel (top) and Dribbble (bottom)

4. 收集網(wǎng)站

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

Pinterest (top) and Unsplash (bottom)

5. 協(xié)作工具

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

Figma and Miro

二、最佳實(shí)踐

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

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

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

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

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

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

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

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

• 標(biāo)題，使用的字號(hào)會(huì)在20px-96px或者更大，取決于卡片的尺寸和具體內(nèi)容。
• 副標(biāo)題，字號(hào)會(huì)使用小于主標(biāo)題2px-10px，這樣可以比較容易區(qū)分。
• 正文，字號(hào)最少16px。在某些情況下，如果你使用某些本身字符就比較大的字體，則可以適當(dāng)減少字號(hào)。例如，在谷歌規(guī)范（https://material.io/design/typography/the-type-system.html#applying-the-type-scale）中，兩個(gè)正文文本的大小分別定義為14px和16px。
• 按鈕，它的字號(hào)不可以比正文的字號(hào)小。當(dāng)需要展示多個(gè)選項(xiàng)時(shí)，對(duì)于主要按鈕需要用到更突出的字體樣式（加粗Semi-bold/Bold），次級(jí)按鈕使用略弱的字體樣式（一般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. 對(duì)留白創(chuàng)建一個(gè)間距體系

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

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

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

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

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

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

Figma and Vimeo

5. 定義一個(gè)卡片的固定高度

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、總結(jié)

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