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

在做卡片設(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)建清晰的視覺單元，讓信息更具邏輯性。它通常包含：標(biāo)題、描述、圖片、按鈕或者鏈接。

基礎(chǔ)卡片

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

產(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)

內(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)

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

Mixpanel (top) and Dribbble (bottom)

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

Pinterest (top) and Unsplash (bottom)

協(xié)作工具：卡片是很靈活的組件，它可以將不同類型的信息和子元素組合在一起。例如，F(xiàn)igma、Miro、Framer 都用了卡片形式展示項(xiàng)目和文件。卡片設(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è)淺淺的投影。

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

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

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

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

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

1. 標(biāo)題，使用的字號(hào)會(huì)在 20px-96px 或者更大，取決于卡片的尺寸和具體內(nèi)容
2. 副標(biāo)題，字號(hào)會(huì)使用小于主標(biāo)題 2px-10px，這樣可以比較容易區(qū)分
3. 正文，字號(hào)最少 16px。在某些情況下，如果你使用某些本身字符就比較大的字體，則可以適當(dāng)減少字號(hào)。例如，在谷歌規(guī)范（ https://material.io/design/typography/the-type-system.Html#applying-the-type-scale ）中，兩個(gè)正文文本的大小分別定義為 14px 和 16px
4. 按鈕，它的字號(hào)不可以比正文的字號(hào)小。當(dāng)需要展示多個(gè)選項(xiàng)時(shí)，對(duì)于主要按鈕需要用到更突出的字體樣式（加粗 Semi-bold/Bold），次級(jí)按鈕使用略弱的字體樣式（一般 Regular/Medium）
5. 嘗試限制字體大小的數(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)建視覺組，保持視覺層級(jí)。如果你想避免設(shè)計(jì)混亂，需要確保做好一致性，你需要定義好間距體系，這對(duì)開發(fā)來(lái)說(shuō)也會(huì)非常有效，減少代碼量，還原的更好。

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

1. 選擇一個(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)致像素模糊
2. 通過(guò)使用基礎(chǔ)單位作為增量或乘法來(lái)定義間距值，減少間距值的數(shù)量，會(huì)讓 UI 更簡(jiǎn)潔，例如它用來(lái)定義 Tailwind（ https://tailwindcss.com/docs/customizing-spacing ）這個(gè)產(chǎn)品留白規(guī)范
3. Figma 進(jìn)階用法，修改"大移動(dòng)"（具體設(shè)置方法見官方幫助文檔 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)設(shè)計(jì)一個(gè)網(wǎng)格，設(shè)計(jì)相應(yīng)的卡片大小。

（彩云注：可能有些人不大理解斷點(diǎn)的意思，它指的是從 PC 切換到平板，然后再切換手機(jī)，屏幕大小在變化，布局也會(huì)做相應(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í)，你需要問自己幾個(gè)問題：

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

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

1. 為卡片定義約束 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)
2. 為卡片應(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 ）
3. 創(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ò)程中將幫助開發(fā)以正確的方式為卡片做好還原，避免破壞內(nèi)容對(duì)齊。

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

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

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

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

總結(jié)

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

作者：彩云譯設(shè)計(jì)