設(shè)計干貨丨卡片設(shè)計基礎(chǔ)入門指南

時間：2023-09-27 10:30:02 | 來源：網(wǎng)站運營

時間：2023-09-27 10:30:02 來源：網(wǎng)站運營

設(shè)計干貨丨卡片設(shè)計基礎(chǔ)入門指南：卡片設(shè)計在UI中是非常普遍的一種設(shè)計形式，幾乎無處不在。今天主要面向UI設(shè)計新人分享卡片設(shè)計的知識要點及實用技巧，希望大家能有所收獲。

01 什么是卡片設(shè)計

卡片是一個UI組件，包含了單個主題相關(guān)的內(nèi)容信息和交互操作?？ㄆ梢园鞣N元素，比如文本、圖形、按鈕等等，但它們都應(yīng)該屬于同一個主題。

02 卡片設(shè)計的優(yōu)點

卡片設(shè)計的本質(zhì)就是將信息進(jìn)行整合，有較強的交互能力，下面來了解一下卡片設(shè)計的幾個優(yōu)點：

1.簡潔直觀

卡片將信息、圖像歸類整合在一個方塊里，清晰直觀，同時又可以避免頁面因為信息多而散亂?？ㄆ帕蟹绞绞前戳谢蛐械姆绞綄R展示，視線沿著橫向或者縱向瀏覽就能快速找到想要的信息。

2.易于閱讀

卡片設(shè)計將信息、圖像按維度分類整合到一個卡片里，通過增加多維度的標(biāo)題，將信息進(jìn)行清晰明確的分類，這樣可以有效減少用戶思考的時間，并能快速找到自己所需要的信息。

3.可包容性強

卡片幾乎可以被用來容納任何形式的信息，比如用戶發(fā)表的動態(tài)，資源信息，用戶資料卡片，輪播信息，商品詳情等等；在承載操作功能方面，信息模塊之間有明顯的區(qū)分，視覺終點可以讓用戶有片刻停留，在此放置操作按鈕，有利于用戶操作。

4.視覺上賞心悅目

卡片對圖片和色彩有很強的依賴性，在卡片設(shè)計中經(jīng)常會使用漸變色和好看的圖片。這些都能夠快速有效地吸引用戶的注意力。

5.響應(yīng)式設(shè)計

卡片設(shè)計可以輕松地調(diào)整長寬大小，以適應(yīng)不同屏幕的水平和垂直正面，這意味著用戶可以在所有設(shè)備上獲得統(tǒng)一的體驗。

03 卡片設(shè)計的使用技巧

1.卡片的造型

1.1圓角的選擇

不同的圓角，所帶來的氣質(zhì)是不同的。圓角很小，視覺印象是硬朗，高冷，具有攻擊性的，多用于嚴(yán)肅、高端、沖突感強烈的設(shè)計中；而更大的圓角給人的感覺是有親和力，柔軟，安全的，多用于兒童產(chǎn)品、娛樂性強的設(shè)計中。所以在設(shè)計卡片的時候，根據(jù)自己的產(chǎn)品屬性選擇氣質(zhì)相符的圓角設(shè)計很有必要。




1.2卡片尺寸比例

卡片的比例，推薦使用一些美感定律，比如黃金比例（1.618），白銀比例（1.414），青銅比例（1.732），正方形之類。當(dāng)然，實際設(shè)計需求中的比例，還是要結(jié)合內(nèi)容的多少來具體分析。

2.卡片的顏色

2.1純色

卡片設(shè)計的顏色搭配常用的有純色和漸變色。純色卡片設(shè)計會讓界面整體的視覺更簡約高級，建議在使用純色卡片設(shè)計的時候，搭配一些圖形紋理，可提升畫面細(xì)節(jié)和質(zhì)感。




2.2漸變色

漸變色卡片設(shè)計目前在ui應(yīng)用的更多，色調(diào)活潑，更容易出彩。




3.卡片的內(nèi)容

3.1文字

卡片上的文字不要過長，通常橫向不要超過42個字，縱向不超過5行為宜。過多的文本不建議使用卡片設(shè)計的形式。

3.2間距

卡片上的文字間距也要遵循一定的規(guī)律，比如4的倍數(shù)、8的倍數(shù)等等。大小比例就盡量用黃金比例來處理，這樣做目的一方面是為了讓界面有秩序，另一方面是提升決策效率。

3.3用留白來代替線框

卡片設(shè)計中盡量減少使用線框，多用留白來對內(nèi)容進(jìn)行分割。

3.4層級對比清晰

卡片的內(nèi)容層級要做好，標(biāo)題和內(nèi)容之間的差異要明顯，要讓用戶一眼能識別出。




4.卡片設(shè)計的細(xì)節(jié)

4.1光感

卡片設(shè)計的光感細(xì)節(jié)能提升設(shè)計的質(zhì)感。

4.2投影

卡片設(shè)計中如果加投影的話，不要加的過重。取色時盡量選擇背景顏色的色相，稍微加深一些，盡量避免用黑色來做投影，會顯得畫面臟；投影的參數(shù)上，距離可以設(shè)置的大一點，讓投影更自然一些。

04 卡片設(shè)計的適用場景

1.信息流中的卡片設(shè)計

信息流中的卡片設(shè)計重要的一點就是保持信息層級簡單清晰，它們應(yīng)該有一個一致的、重復(fù)的結(jié)構(gòu)，使讀卡片的人更容易理解它們。




2.電商卡片設(shè)計

電商產(chǎn)品的卡片設(shè)計可以幫助訪問用戶轉(zhuǎn)化成客戶，一個優(yōu)秀的產(chǎn)品卡片應(yīng)該能夠引起用戶的注意，激發(fā)用戶對產(chǎn)品的購買欲。

3.個人中心卡片設(shè)計

個人中心的卡片設(shè)計突出了個人的信息，可以更簡潔明了地向他人展示個人信息。

---

以上就是今天分享的關(guān)于卡片設(shè)計的一些知識要點及使用技巧，期待大家能夠有所收獲。