在 UI 設計中，卡片是不可避免需要用到的東西。那么什么是卡片？卡片有哪些類型？

本次就以此問題為出發(fā)點，為大家詳細介紹 UI 設計中的卡片設計。

一、設計基礎

在開始設計之前，我們需要先了解卡片的定義、特點以及應用原則。

1. 卡片的定義：

卡片設計是一種界面設計模式，其作用是使用卡片來作為界面信息展示的基本單元?？ㄆO計通過將信息分割成獨立的、可管理的部分，使整個界面看起來更加簡潔，讓用戶能夠更容易在瀏覽時理解內容，找到自己需要的信息及商品。

2. 卡片的特點：

在設計卡片的過程中，我們要合理的將卡片的特點發(fā)揮出來，卡片主要有三個特點。

① 瓷片信息模塊化：

卡片的作用是將信息呈現(xiàn)為獨立的卡片單元，方便用戶理解和管理信息。

② 視覺吸引力：

視覺吸引力，顧名思義就是通過精心設計的視覺元素和顏色，讓用戶眼前一亮吸引用戶注意，以此提升用戶的使用體驗。

③ 強交互性：

一個合格的卡片在設計時需要具有豐富的交互功能，如點擊、滑動等和用戶實現(xiàn)"交流"的操作，增強信息傳達效果和用戶滿意度。

3. 卡片的應用原則：

在應用卡片時，我們要按照卡片的應用原則來保證卡片不會在運用時出現(xiàn)違和感。

① 一致性：

保持卡片的一致性，包括樣式布局和交互方式。

② 信息層級：

信息的重要性和層級設計讓重要的信息更加顯眼。

③ 簡潔清晰：

卡片內容簡潔明了，用戶易于理解和消化。

④ 可交互性：

提供一定的交互功能，增加用戶的使用體驗。

⑤ 響應式設計：

適應不同的設備和屏幕尺寸，確保好的顯示效果。

⑥ 視覺吸引力：

通過顏色和設計吸引人的視覺效果。

二、卡片分類

正所謂人以類聚，物以群分?？ㄆ部梢苑譃椴煌念愋停笾聛矸?，卡片可以分為三個類型。

1. 封面卡片：

一本書，好的封面就可以吸引讀者。封面卡片作為用戶接觸到的第一個卡片，自然是非常重要。

封面卡片可以根據(jù)不同的項目軟件來改變，比方實景類，如商品、風景等；或者是影視類，如動漫、影視、直播等。

2. 普通卡片：

普通卡片比較常用的三種設計形式分別為圓角卡片、破形卡片、多張重疊。這樣設計可以形成差異化，增加設計感。

① 圓角卡片：

一般普通的卡片大多數(shù)為直角，而圓角卡片的出現(xiàn)則是為了適用不同的屏幕，同時圓角的大小不一，可以增強視覺沖擊力，形成差異化，吸引注意力。

② 破形卡片：

破形卡片是在界面中，用不規(guī)則的形狀做出來的卡片，能夠更好的突出重要信息。

③ 多張疊加：

在設計過程中，如果想要卡片看起來更加立體，設計感更強可以用到多張疊加。這樣一來，整個卡片的層次感也更加強烈。

3. 真實物體轉化成的卡片：

在設計過程中，設計師可以根據(jù)現(xiàn)實中存在的物體將其轉化成卡片。通過這樣的轉變，可以讓用戶有更加真實的使用體驗。

① 優(yōu)惠券類卡片：

在日常生活中，優(yōu)惠券隨處可見，人們對于優(yōu)惠券的作用也心知肚明。那么將優(yōu)惠券轉化成卡片，則能讓用戶更直觀的體驗到優(yōu)惠力度。

② 銀行卡類卡片：

當今社會銀行卡幾乎是每個成年人必備的物品，將銀行卡轉化成卡片，用戶在使用手機銀行時會多一點舒心。

③ 音樂類卡片：

將現(xiàn)實中的 cd 唱片轉化成卡片，能夠讓用戶有更好的體驗。

總的來說，將現(xiàn)實中習以為常的物品轉化為卡片，能夠更好的和用戶產(chǎn)生共情。

天下沒有不散的宴席，來到這里，又到了再見的時候。

今天的卡片分享就到此結束，為了下一次的重逢不在遙遠，關注我，下次再見！

作者：菜心設計鋪