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

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

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

基礎卡片

一、一般在哪些場景使用卡片設計？

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

Amazon (top) and Alibaba (bottom)

eBay (top) and Walmart (bottom)

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

Behance (top) and Dribbble (bottom)

CNN (top) and BBC (bottom)

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

Mixpanel (top) and Dribbble (bottom)

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

Pinterest (top) and Unsplash (bottom)

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

Figma and Miro

二、最佳實踐

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Figma and Vimeo

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

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

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

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

（彩云注：可能有些人不大理解斷點的意思，它指的是從 PC 切換到平板，然后再切換手機，屏幕大小在變化，布局也會做相應的改變）

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

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

當你在設計基于卡片，響應式布局時，你需要問自己幾個問題：

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

一些 Figma 設計卡片布局的建議：

1. 為卡片定義約束 constraints（ https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize ），以確定當你調(diào)整它們的大小時，布局中的卡片應該如何響應
2. 為卡片應用 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 ）
3. 創(chuàng)建一個 8px 的網(wǎng)格可以讓你在設計中精確地排列和調(diào)整 8px 增量單元的元素大小

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

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

8. 為更好的用戶體驗定義卡片交互

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

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

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

總結(jié)

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

作者：彩云譯設計