這8個卡片設計方法，你還真不一定知道！

卡片設計在 UI 中有非常多的優勢，相關的文章我已經寫過幾篇了，結合往期文章可以更系統地學習卡片設計規范：

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

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

基礎卡片

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

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

Amazon (top) and Alibaba (bottom)

eBay (top) and Walmart (bottom)

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

Behance (top) and Dribbble (bottom)

CNN (top) and BBC (bottom)

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

Mixpanel (top) and Dribbble (bottom)

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

Pinterest (top) and Unsplash (bottom)

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

Figma and Miro

二、最佳實踐

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

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

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

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

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

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

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

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

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

3. 對留白創建一個間距體系

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

關于間距系統我也有一些經驗

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

4. 盡可能設計與內容布局相似的加載狀態

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

一組加載狀態的效果對比

Figma and Vimeo

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

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

6. 使用網格作為卡片設計的基礎規范

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

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

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

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

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

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

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

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

7. 創建不同內容的卡片設計

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

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

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

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

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

總結

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

歡迎關注作者的微信公眾號：「彩云譯設計」