Material Design的流行讓卡片設計走上神壇，更甚者在如今的UI設計中，卡片設計撐起了半壁江山。儘管卡片設計一直以強兼容性和「百搭」的形象出現於大眾眼前，但大多數新手設計師對「如何做好卡片設計」仍可能不甚了解。

今天Inspirr網頁製作將為大家整理「卡片設計的實用方法有哪些」。

▎為什麼卡片在UI設計會如此流行?

為什麼卡片在UI設計會如此流行?

在UI設計中，兼顧個性化和美感的卡片設計具有很強的交互性，它將我們需要的信息歸納在一起並形成獨立的個體，不僅可以讓信息的表達更加直觀，方便用戶快速找到所需內容，還能以另一種委婉的方式引導用戶進行互動。

而卡片之所以能在UI設計中如此流行，歸根到底是它具有以下優點：

☑ 快速抓住用戶的眼球

☑ 符合響應式設計的要求

☑ 具有較高的易讀性，可以準確引導用戶進行下一步操作

☑ 方便用戶快速且輕鬆地分享卡片內容

▎卡片設計適合哪些場合使用?

適用場合一：產品目錄頁面

卡片的適用場合-產品目錄頁面

目前很多大型電商網站諸如Amazon、eBay、Walmart等都是使用卡片設計做產品呈現。通常一個產品卡片包括產品圖片、產品名稱、產品價格、折扣和CTA按鈕，顯眼的CTA按鈕可以引導用戶點擊並進入產品詳情頁。

適用場合二：內容網站

卡片的適用場合-內容網站

新聞平台、社交平台使用卡片組件這種具有聚焦用戶視線的設計去呈現每個內容，給用戶帶來一種有趣、吸引的體驗，同時有助於用戶快速掃描及閱讀介面上的內容。

適用場合三：儀錶盤介面

卡片的適用場合-儀錶盤介面

卡片可以相關信息在介面上組織到一起並形成獨立的個體，儀錶盤使用卡片設計不僅可以將數據信息更直觀地呈現於用戶眼前，還可以幫助用戶更容易比較和分析數據信息。

適用場合四：協作工具

卡片的適用場合-協作工具

卡片是很靈活的UI組件，它可以將不同類型的信息和子元素組合在一起。類似於Figma、Miro、Framer等協作工具使用卡片形成來展示項目和文件，使整體效果變得更整潔、實用，讓用戶更輕鬆地與工具進行互動。

▏卡片設計的實用方法有哪些?

一、 增加卡片與背景的對比度

UI設計技巧-增加卡片與背景的對比度

如果卡片和介面背景的對比度過低，容易讓用戶忽略卡片中的內容。為了更好地從背景中區分卡片，建議給卡片適當添加外描邊、投影等裝飾元素，進而增加卡片的存在感。

使用多色彩填充籍此增加卡片與背景的對比效果，可以讓卡片信息更加清晰可見。但要注意卡片顏色不要選用亮眼色彩，同時與文字之間形成強烈的對比，以免影響內容本身的閱讀。

二、保證內容可讀性

UI設計技巧-保證內容可讀性

內容可讀性是由所選字體和字體大小決定，例如上面兩個卡片的樣式設計雖然看起來差不多，但右邊的文字明顯比左邊更大，因此整個卡片內容在視覺上變得更清晰、更容易被識別。

此外，卡片上的文字不要太長，橫向盡可能不要超過42字、縱向不要超過5行。如果卡片本文字數過多不建議使用卡片設計，一來會降低空間利用率，導致內容無法在介面中完整出現;卡片的出現，或多或少都給用戶產生一定的視覺干擾，無法給予沉浸式的瀏覽體驗。

三、使用網格佈局介面

UI設計技巧-使用網格佈局介面

在實際操作中，我們經常會遇到卡片內容長度不一的情況，此時我們需要使用網格作為卡片設計的佈局基礎

比如設計一個固定高度的卡片，給內容較少的卡片大量留白，內容較多的卡片使用截斷方式;又比如當你有需要時，可以將卡片寬度擴展到需要的網格列數量，但這需要你找到一個合適的卡片寬度，以及考慮響應式佈局的兼容性。

四、利用留白區分各元素間的關係

UI設計技巧-利用留白區分各元素間的關係

什麼是留白?在UI設計中，留白是指頁面佈局中圍繞各UI設計元素的空白空間。而這空白空間不一定是介面中的白色區域，也可能是其他顏色、其他圖案。

如果你不想UI設計顯得混亂，那就需要在保證介面一致性的情況下，利用留白創建一個規範的間距體系，以加強介面視覺層級之效。

五、使用相關主題的圖片

UI設計技巧-使用相關主題的圖片

圖片是卡片設計的主角，為了吸引用戶對每張卡片的注意，設計卡片時建議選取一個符合內容主題且高級的圖片。

當然，除了圖片外，卡片還可以嵌入插畫、帶有淺色背景框的圖標，以及其他類型的富媒體，但無論卡片嵌入什麼類型UI元素都必須與內容主題相關。

雖然卡片在整個UI設計中只是一個非常「小」的元素，但它對提高整個介面的用戶體驗起到至關重要的作用。因此，在實際操作中，我們不妨利用一些UI設計技巧，增強卡片的實用性和吸引力，為用戶提供流暢易用的操作體驗!