編者按：卡片是現(xiàn)如今 UI 控件當(dāng)中自由度最高，兼顧靈活度、優(yōu)雅和體驗(yàn)的實(shí)用控件，它的適用范圍廣泛，但是相應(yīng)的，具體的設(shè)計(jì)要求也相當(dāng)具體。這篇文章出自資深設(shè)計(jì)師 Saadia Minhas 之手，她結(jié)合自己豐富的工作經(jīng)驗(yàn)總結(jié)了卡片控件的設(shè)計(jì)法則。

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

由于其靈活和模塊化的布局，卡片可以在各種應(yīng)用程序中使用，幫助用戶快速與不同的內(nèi)容互動(dòng)。

設(shè)計(jì)卡片需要始終如一地應(yīng)用 UX 原則以確保其有效地實(shí)現(xiàn)其功能。

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

為什么卡片控件很重要

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

卡片式用戶體驗(yàn)設(shè)計(jì)最佳實(shí)踐：

1、卡片的結(jié)構(gòu)

這是基本的卡片結(jié)構(gòu)?？梢愿鶕?jù)需求添加其他可選元素。

卡片的構(gòu)造

標(biāo)題：通常包含描述卡片內(nèi)容的標(biāo)題和圖像。

圖片：圖片可以為內(nèi)容提供背景信息。添加相關(guān)圖片可讓你的卡片更具視覺(jué)效果（如產(chǎn)品卡片）。

內(nèi)容區(qū)域：這個(gè)部分包含主要文本，例如簡(jiǎn)短描述、標(biāo)題或其他關(guān)鍵信息。內(nèi)容應(yīng)簡(jiǎn)潔且結(jié)構(gòu)良好。

• 標(biāo)題
• 副標(biāo)題
• 描述：卡片內(nèi)容的簡(jiǎn)單描述。它可以包含一些圖標(biāo)、標(biāo)簽等來(lái)支撐內(nèi)容。
• 圖像：內(nèi)容區(qū)域內(nèi)包含可選的圖像。

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

2、結(jié)構(gòu)和布局

視覺(jué)層次

確?？ㄆ氐囊曈X(jué)層次清晰，使用標(biāo)題、圖標(biāo)和字體變化，來(lái)優(yōu)先顯示重要信息。

在卡片設(shè)計(jì)中添加清晰的視覺(jué)層次。

間距和邊距

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

在卡片的兩側(cè)使用相等的邊距。

對(duì)齊方式

根據(jù)設(shè)計(jì)風(fēng)格，對(duì)文本和圖標(biāo)使用左對(duì)齊或居中對(duì)齊，以保持卡片的一致性。

將卡片內(nèi)容統(tǒng)一對(duì)齊方式。

3、格式和大小

固定長(zhǎng)寬比

對(duì)卡片使用固定的縱橫比（例如 4:3 或 16:9），尤其是當(dāng)卡片包含圖像時(shí)，以確保整個(gè) UI 的視覺(jué)一致性。

響應(yīng)式尺寸

設(shè)計(jì)卡片可以適應(yīng)不同的屏幕尺寸，特別是在移動(dòng)設(shè)備上，垂直布局通常效果最好。

比例大小

確?？ㄆ鄬?duì)于屏幕和其他 UI 元素不會(huì)太大或太?。贿^(guò)大的卡片可能會(huì)讓布局失衡，而過(guò)小的卡片可能會(huì)降低可讀性。

卡片的水平和垂直布局

4、版式和字體

字體層次結(jié)構(gòu)

使用不同的字體大小和粗細(xì)來(lái)建立清晰的視覺(jué)層次。通常，標(biāo)題使用較大的字體，正文使用較小的字體。

改變字體大小來(lái)強(qiáng)化信息的層次。

可讀性

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

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

限制文本數(shù)量

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

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

5、一卡一概念

每張卡片只提供一個(gè)概念，以免讓用戶感到不知所措。每張卡片應(yīng)傳達(dá)一條信息或操作，例如產(chǎn)品、個(gè)人資料、文章或數(shù)據(jù)點(diǎn)。在一張卡片上顯示多個(gè)概念或者主題，會(huì)使其變得雜亂無(wú)章且令人困惑。

一張卡片應(yīng)該代表一個(gè)主要主題或概念。

6、操作

主要交互

添加一兩個(gè)主要交互以避免混亂。使用按鈕執(zhí)行主要操作，使用圖標(biāo)執(zhí)行次要功能（如書簽）。

可點(diǎn)擊區(qū)域

如果整個(gè)卡片都可以點(diǎn)擊，請(qǐng)使卡片在視覺(jué)上顯而易見。否則，請(qǐng)將可點(diǎn)擊區(qū)域限制為特定元素，以避免意外點(diǎn)擊。

僅當(dāng)卡片有某種用途時(shí)才允許點(diǎn)擊整個(gè)卡片，例如導(dǎo)航到新的頁(yè)面。否則，請(qǐng)將點(diǎn)擊區(qū)域限制為特定按鈕。

反饋

當(dāng)用戶與卡片交互時(shí)提供視覺(jué)反饋（例如，懸停效果、微妙的動(dòng)畫和顏色變化）。

頂部：不要在一張卡片中顯示多個(gè)主要操作。底部：你可以將整個(gè)卡片設(shè)置為可點(diǎn)擊，而無(wú)需主要操作按鈕。當(dāng)用戶與卡片交互時(shí)，顯示懸停效果。

7、分隔線

使用細(xì)邊框或分隔線來(lái)分隔卡片內(nèi)的各個(gè)部分，尤其是包含多個(gè)元素的復(fù)雜卡片。

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

8、顏色對(duì)比

確保文本和背景顏色符合可讀性對(duì)比度標(biāo)準(zhǔn)。使用易于閱讀的字體，并在文本和背景之間設(shè)置適當(dāng)?shù)膶?duì)比度，使卡片保持可讀性。

設(shè)計(jì)卡片時(shí)使用清晰但不突兀的顏色對(duì)比。

9、菜單圖標(biāo)

將菜單圖標(biāo)放在用戶習(xí)慣的常用位置，方便用戶輕松找到。通常，卡片的右上角是菜單圖標(biāo)的首選位置，因?yàn)樗窃S多應(yīng)用和網(wǎng)站上，用戶熟悉的位置。

卡片間菜單圖標(biāo)的一致定位有助于打造更清晰、更可預(yù)測(cè)的界面。

在卡片上的適當(dāng)位置顯示菜單圖標(biāo)。

10、留白

在卡片中留出合理的空白，讓卡片看起來(lái)整潔有序。在文本、圖片和圖標(biāo)等元素周圍留出足夠的空白有助于在視覺(jué)上區(qū)分各個(gè)組件，防止卡片看起來(lái)雜亂無(wú)章。

在卡片設(shè)計(jì)中使用合理的空白。

卡片類型

你可以在設(shè)計(jì)中包含多種類型的 UI 卡片控件。

1、個(gè)人資料卡片

顯示有關(guān)個(gè)人或?qū)嶓w的信息，例如其姓名、照片、頭銜和個(gè)人簡(jiǎn)介。它通常用于團(tuán)隊(duì)頁(yè)面、社交媒體個(gè)人資料或用戶帳號(hào)信息。

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

Fiverr 個(gè)人資料卡

Oladoc 個(gè)人資料卡

2、產(chǎn)品卡片

展示產(chǎn)品的基本信息，例如名稱、價(jià)格、描述以及「添加到購(gòu)物車」或「立即購(gòu)買」等操作。它通常用于電子商務(wù)平臺(tái)，或者在產(chǎn)品目錄當(dāng)中呈現(xiàn)。

常見元素包括產(chǎn)品圖片、標(biāo)題、價(jià)格、簡(jiǎn)短描述、評(píng)級(jí)和主要操作。

亞馬遜產(chǎn)品卡片

Ebay 產(chǎn)品卡片

3、數(shù)據(jù)可視化卡片

這種卡片通常用來(lái)顯示各種不同指標(biāo)，通常用于儀表盤界面。這些卡片以緊湊的樣式提供快速、可視化的數(shù)據(jù)走向或 KPI（關(guān)鍵績(jī)效指標(biāo)）。

常見元素包括數(shù)據(jù)值、圖標(biāo)或圖像、趨勢(shì)指標(biāo)和相關(guān)的標(biāo)簽。

電子商務(wù)儀表盤顯示銷售分析的數(shù)據(jù)卡片

YouTube Analytics 的數(shù)據(jù)卡片

4、多媒體卡片

它可顯示多媒體內(nèi)容，例如照片、視頻或音頻。它非常適合圖庫(kù)、視頻庫(kù)和流媒體平臺(tái)。

常見元素包括多媒體縮略圖、標(biāo)題、播放按鈕、持續(xù)時(shí)間和少量描述。

Dribbble的多媒體卡片

Google 的多媒體卡片

5、服務(wù)型卡片

服務(wù)型卡片概括了商家、產(chǎn)品或網(wǎng)站提供的服務(wù)或功能。它經(jīng)常用于 SaaS 平臺(tái)和服務(wù)網(wǎng)站，以呈現(xiàn)各種選項(xiàng)。

常見元素包括圖標(biāo)或圖像、服務(wù)名稱、簡(jiǎn)短描述和操作鏈接。

Fiverr 的服務(wù)卡

其他一些卡類型包括：

• 文章或新聞卡片
• 事件卡片
• 菜譜卡片
• 聯(lián)系卡片
• 推薦卡片
• 天氣卡片
• 任務(wù)或待辦事項(xiàng)卡片
• 位置或地圖卡片
• 職位發(fā)布卡片
• 定價(jià)卡片

結(jié)論

卡片控件是 UI 設(shè)計(jì)的一個(gè)強(qiáng)大組件，將視覺(jué)吸引力與功能結(jié)合在一起。UX 設(shè)計(jì)師可以遵循給定的最佳實(shí)踐來(lái)創(chuàng)建一個(gè)引人入勝的界面。請(qǐng)記住，精心設(shè)計(jì)的卡片最終有助于提供更好的用戶體驗(yàn)。

作者：陳子木