高級設計師總結的10條卡片設計黃金法則

編者按：卡片是現如今 UI 控件當中自由度最高，兼顧靈活度、優雅和體驗的實用控件，它的適用范圍廣泛，但是相應的，具體的設計要求也相當具體。這篇文章出自資深設計師 Saadia Minhas 之手，她結合自己豐富的工作經驗總結了卡片控件的設計法則。

卡片是重要的 UI 組件，可以以清晰、用戶友好的格式組織和呈現信息。

由于其靈活和模塊化的布局，卡片可以在各種應用程序中使用，幫助用戶快速與不同的內容互動。

設計卡片需要始終如一地應用 UX 原則以確保其有效地實現其功能。

本文介紹了設計卡片的最佳實踐，你可以將這篇文章視作為卡片設計的用戶體驗指南。在后面的部分中，我們將探討可在各種情況下使用的不同類型的卡片。

為什么卡片控件很重要

• UI 卡片控件是一種多功能容器，可以直觀地將特定主題相關的信息和操作分組呈現。
• 它們有助于將復雜的數據分解為易于理解的部分，使用戶更容易瀏覽和理解內容。
• 卡片可以讓用戶有效地與內容交互，從而顯著提高參與度。

卡片式用戶體驗設計最佳實踐：

1、卡片的結構

這是基本的卡片結構。可以根據需求添加其他可選元素。

卡片的構造

標題：通常包含描述卡片內容的標題和圖像。

圖片：圖片可以為內容提供背景信息。添加相關圖片可讓你的卡片更具視覺效果（如產品卡片）。

內容區域：這個部分包含主要文本，例如簡短描述、標題或其他關鍵信息。內容應簡潔且結構良好。

• 標題
• 副標題
• 描述：卡片內容的簡單描述。它可以包含一些圖標、標簽等來支撐內容。
• 圖像：內容區域內包含可選的圖像。

操作：添加用戶可以執行的主要和次要操作（如按鈕），例如「添加到購物車」或「閱讀更多」。將操作清楚地放置在卡片邊界內。

2、結構和布局

視覺層次

確保卡片元素的視覺層次清晰，使用標題、圖標和字體變化，來優先顯示重要信息。

在卡片設計中添加清晰的視覺層次。

間距和邊距

保持卡片內部填充均勻（垂直和水平方向均如此）。避免過于擁擠，并在邊緣和內容之間留出足夠的空間。

在卡片的兩側使用相等的邊距。

對齊方式

根據設計風格，對文本和圖標使用左對齊或居中對齊，以保持卡片的一致性。

將卡片內容統一對齊方式。

3、格式和大小

固定長寬比

對卡片使用固定的縱橫比（例如 4:3 或 16:9），尤其是當卡片包含圖像時，以確保整個 UI 的視覺一致性。

響應式尺寸

設計卡片可以適應不同的屏幕尺寸，特別是在移動設備上，垂直布局通常效果最好。

比例大小

確保卡片相對于屏幕和其他 UI 元素不會太大或太小；過大的卡片可能會讓布局失衡，而過小的卡片可能會降低可讀性。

卡片的水平和垂直布局

4、版式和字體

字體層次結構

使用不同的字體大小和粗細來建立清晰的視覺層次。通常，標題使用較大的字體，正文使用較小的字體。

改變字體大小來強化信息的層次。

可讀性

選擇清晰的字體，尤其是小卡片尺寸，并確保文本和背景之間有足夠大的對比度。

使用更易于閱讀和理解的字體。

限制文本數量

盡量減少文本量。僅包含可以快速掃讀且不會讓用戶感到不知所措的必要信息。

不要在卡片上顯示太多信息。

5、一卡一概念

每張卡片只提供一個概念，以免讓用戶感到不知所措。每張卡片應傳達一條信息或操作，例如產品、個人資料、文章或數據點。在一張卡片上顯示多個概念或者主題，會使其變得雜亂無章且令人困惑。

一張卡片應該代表一個主要主題或概念。

6、操作

主要交互

添加一兩個主要交互以避免混亂。使用按鈕執行主要操作，使用圖標執行次要功能（如書簽）。

可點擊區域

如果整個卡片都可以點擊，請使卡片在視覺上顯而易見。否則，請將可點擊區域限制為特定元素，以避免意外點擊。

僅當卡片有某種用途時才允許點擊整個卡片，例如導航到新的頁面。否則，請將點擊區域限制為特定按鈕。

反饋

當用戶與卡片交互時提供視覺反饋（例如，懸停效果、微妙的動畫和顏色變化）。

頂部：不要在一張卡片中顯示多個主要操作。底部：你可以將整個卡片設置為可點擊，而無需主要操作按鈕。當用戶與卡片交互時，顯示懸停效果。

7、分隔線

使用細邊框或分隔線來分隔卡片內的各個部分，尤其是包含多個元素的復雜卡片。

不要在卡片上使用不必要的分隔線。

8、顏色對比

確保文本和背景顏色符合可讀性對比度標準。使用易于閱讀的字體，并在文本和背景之間設置適當的對比度，使卡片保持可讀性。

設計卡片時使用清晰但不突兀的顏色對比。

9、菜單圖標

將菜單圖標放在用戶習慣的常用位置，方便用戶輕松找到。通常，卡片的右上角是菜單圖標的首選位置，因為它是許多應用和網站上，用戶熟悉的位置。

卡片間菜單圖標的一致定位有助于打造更清晰、更可預測的界面。

在卡片上的適當位置顯示菜單圖標。

10、留白

在卡片中留出合理的空白，讓卡片看起來整潔有序。在文本、圖片和圖標等元素周圍留出足夠的空白有助于在視覺上區分各個組件，防止卡片看起來雜亂無章。

在卡片設計中使用合理的空白。

卡片類型

你可以在設計中包含多種類型的 UI 卡片控件。

1、個人資料卡片

顯示有關個人或實體的信息，例如其姓名、照片、頭銜和個人簡介。它通常用于團隊頁面、社交媒體個人資料或用戶帳號信息。

常見元素包括個人資料圖片、姓名、職位、聯系信息和社交媒體鏈接等。

Fiverr 個人資料卡

Oladoc 個人資料卡

2、產品卡片

展示產品的基本信息，例如名稱、價格、描述以及「添加到購物車」或「立即購買」等操作。它通常用于電子商務平臺，或者在產品目錄當中呈現。

常見元素包括產品圖片、標題、價格、簡短描述、評級和主要操作。

亞馬遜產品卡片

Ebay 產品卡片

3、數據可視化卡片

這種卡片通常用來顯示各種不同指標，通常用于儀表盤界面。這些卡片以緊湊的樣式提供快速、可視化的數據走向或 KPI（關鍵績效指標）。

常見元素包括數據值、圖標或圖像、趨勢指標和相關的標簽。

電子商務儀表盤顯示銷售分析的數據卡片

YouTube Analytics 的數據卡片

4、多媒體卡片

它可顯示多媒體內容，例如照片、視頻或音頻。它非常適合圖庫、視頻庫和流媒體平臺。

常見元素包括多媒體縮略圖、標題、播放按鈕、持續時間和少量描述。

Dribbble的多媒體卡片

Google 的多媒體卡片

5、服務型卡片

服務型卡片概括了商家、產品或網站提供的服務或功能。它經常用于 SaaS 平臺和服務網站，以呈現各種選項。

常見元素包括圖標或圖像、服務名稱、簡短描述和操作鏈接。

Fiverr 的服務卡

其他一些卡類型包括：

• 文章或新聞卡片
• 事件卡片
• 菜譜卡片
• 聯系卡片
• 推薦卡片
• 天氣卡片
• 任務或待辦事項卡片
• 位置或地圖卡片
• 職位發布卡片
• 定價卡片

結論

卡片控件是 UI 設計的一個強大組件，將視覺吸引力與功能結合在一起。UX 設計師可以遵循給定的最佳實踐來創建一個引人入勝的界面。請記住，精心設計的卡片最終有助于提供更好的用戶體驗。