UI設計中卡片式應如何設計

卡片設計在介面中已經是非常常見的一種設計形式，大家做設計時幾乎都會用到。關於卡片設計的文章網上已經有很多了，今天我想從我自己的經驗來總結卡片設計的細節要點，期望能給大家總結一些快速提公升卡片設計效果的方法。

1、卡片的造型

1)圓角不同的圓角，所帶來的氣質是不同的。圓角很小，視覺印象是硬朗，高冷，具有攻擊性的，多用於嚴肅、高階、衝突感強烈的設計中;而更大的圓角給人的感覺是有親和力，柔軟，安全的，多用於兒童產品、娛樂性強的設計中。

在設計的時候，根據自己的產品屬性選擇氣質相符的圓角設計很有必要。

常見的卡片弧度形式有4類：直接、小圓角、大圓角、特殊圓角

我一般喜歡用4的倍數來設定圓角，比如圓角大小為4px、8px、12px之類的。要注意的是，圓角越大，可用面積會越小，需要根據實際場景進行平衡，以視覺上舒服為宜。

2)比例卡片的比例，我習慣遵循一些美感規律，比如**比例(1.618)，**比例(1.414)，青銅比例(1.732)，正方形之類的比例。當然，實際設計需求中的比例，還是要結合內容的多少具體分析。

我的經驗是，當比較接近這些美感比例其中之一時，就直接優化到這個比例。比如做了乙個卡片，寬高比是1.5，比較接近於**比例，我就乾脆讓它等於**比例。

3)異型除了正常的卡片樣式，還可以做一些異型的卡片設計。異型卡片具有較強的形式感和視覺衝擊力，所以會比較多的用在遊戲或者運營相關的介面中，吸引使用者的注意力。缺點是批量化設計成本略高且因為過於風格化而不夠耐看。

2、卡片的效果

1)顏色卡片的顏色搭配可以使用純色和漸變色。這些顏色與文字之間的對比要符合介面對比度標準，以免影響內容本身的閱讀。如果拿不準的話，可以多用一些白色，比較不容易出錯。

純色卡片設計會讓介面顯得冷靜高階，但對配色的要求相對較高，用不好的話會顯得單調，沉悶。如果你堅持要用這種卡片配色的話，建議搭配一些圖形紋理，會更容易把控，還能提公升畫面細節。

純色卡片設計

漸變色的卡片設計目前較為常見，層次細節更加豐富，畫面也顯得更活潑一些。

有些朋友經常因為配色不好而發愁，其實是需要多去找一些參考來看的，實在擔心配色不好，直接去吸優秀的配色方案也是ok的，但要注意搭配合理。

也可以是運用一些簡單的圖形，提公升卡片的設計細節，以下是一些還不錯的設計案例。這些卡片上的圖形都有借鑑參考的價值，自己平時有時間的話，也可以多做一些作為圖形的儲備。強烈建議收藏，真的可以很有用。

3、卡片的內容

1)文字卡片上的文字不要太長，我的經驗是橫向不要超過42字(關於這個字數，有資料可以查，感興趣的可以找找看)，縱向不要超過5行。過多的文字不建議使用卡片形式。

2) 內容出界只在卡片的框框裡做設計，有時候未免顯得太呆板，破開卡片的邊界可以讓卡片本身更具形式感。如果被人說你的設計沒啥亮點，那內容出界的設計就是乙個很好的提公升設計亮點的手法。

4、卡片的細節

1)光感卡片中的光感細節能提公升設計的質感。下面這張圖是我最近做的一張會員卡的背景設計，大家對比下，在卡片頂部加了1px高光線和斜面反光的細節前後的質感區別。

這個小細節，我經常會用到，執行簡單又容易出效果。

2)投影投影的細節，不要過重，但又要能與背景分離開。有2個小技巧：1.在取色的時候，可以選擇背景顏色的色相，然後略微加深一些，不要用純黑色來做投影，會顯髒。2.投影的距離不要太小，太小的投影會顯得不夠自然;也不能太大，太大會很浪費介面資源。

3)3d效果3d卡片的設計，因為不便於內容編排和閱讀，所以帶透視的卡片在實際ui中並不太常用。但在作品集包裝和運營頁面中，則可以帶來比較好的視覺衝擊力，可以嘗試運用。

小結以上就是今天關於卡片設計的一些經驗總結，卡片設計的應用已經如此廣泛，我們有必要利用它來提公升自己的介面設計細節。

摘自：