2022-9-26 純純
1、卡片的造型
不同的圓角，所帶來的氣質(zhì)是不同的。圓角很小，視覺印象是硬朗，高冷，具有攻擊性的，多用于嚴肅、高端、沖突感強烈的設計中；而更大的圓角給人的感覺是有親和力，柔軟，安全的，多用于兒童產(chǎn)品、娛樂性強的設計中。
在設計的時候，根據(jù)自己的產(chǎn)品屬性選擇氣質(zhì)相符的圓角設計很有必要。
常見的卡片弧度形式有4類：直接、小圓角、大圓角、特殊圓角
我一般喜歡用4的倍數(shù)來設置圓角，比如圓角大小為4px、8px、12px之類的。要注意的是，圓角越大，可用面積會越小，需要根據(jù)實際場景進行平衡，以視覺上舒服為宜。
卡片的比例，我習慣遵循一些美感規(guī)律，比如黃金比例（1.618），白銀比例（1.414），青銅比例（1.732），正方形之類的比例。當然，實際設計需求中的比例，還是要結合內(nèi)容的多少具體分析。
我的經(jīng)驗是，當比較接近這些美感比例其中之一時，就直接優(yōu)化到這個比例。比如做了一個卡片，寬高比是1.5，比較接近于黃金比例，我就干脆讓它等于黃金比例。
除了正常的卡片樣式，還可以做一些異型的卡片設計。異型卡片具有較強的形式感和視覺沖擊力，所以會比較多的用在游戲或者運營相關的界面中，吸引用戶的注意力。缺點是批量化設計成本略高且因為過于風格化而不夠耐看。
2、卡片的效果
卡片的顏色搭配可以使用純色和漸變色。這些顏色與文字之間的對比要符合界面對比度標準（ https://contrast-grid.eightshapes.com/，這個網(wǎng)站可以直接查到可用性數(shù)值，只要不是DNP就是可以用的配色），以免影響內(nèi)容本身的閱讀。如果拿不準的話，可以多用一些白色，比較不容易出錯。
純色卡片設計會讓界面顯得冷靜高級，但對配色的要求相對較高，用不好的話會顯得單調(diào)，沉悶。如果你堅持要用這種卡片配色的話，建議搭配一些圖形紋理，會更容易把控，還能提升畫面細節(jié)。
純色卡片設計
漸變色的卡片設計目前較為常見，層次細節(jié)更加豐富，畫面也顯得更活潑一些。
漸變色卡片設計https://dribbble.com/shots/12284120-Wallet-Design-App
有些朋友經(jīng)常因為配色不好而發(fā)愁，其實是需要多去找一些參考來看的，實在擔心配色不好，直接去吸優(yōu)秀的配色方案也是OK的，但要注意搭配合理。
教大家一個方法，去dribbble上搜color或直接打開https://dribbble.com/search/color這個鏈接，就可以看到非常多的優(yōu)秀配色方案了。
卡片的設計還可以結合輔助圖形，以圖案的形式與卡片進行結合。這些輔助圖形可以來源于品牌符號的延伸，讓品牌有更多的露出機會。
也可以是運用一些簡單的圖形，提升卡片的設計細節(jié)，以下是一些還不錯的設計案例。這些卡片上的圖形都有借鑒參考的價值，自己平時有時間的話，也可以多做一些作為圖形的儲備。強烈建議收藏，真的可以很有用。
來源：https://dribbble.com/shots/10513966-Gradient-Bank-cards
來源：https://dribbble.com/shots/10498737-Dark-Bank-Application-Design
來源：https://dribbble.com/shots/11313260-Finance-App-Exploration
來源：https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD
這里彩云給大家找了非常多的卡片設計形式，可以從中參考學習配色和紋理造型。
卡片背景也可以用圖片和視頻的形式進行設計，圖片和視頻的選擇一般會偏暗色，以不影響內(nèi)容閱讀為準。
來源：https://dribbble.com/shots/5717917-Travel-Article-Application
卡片上的文字不要太長，我的經(jīng)驗是橫向不要超過42字（關于這個字數(shù)，有資料可以查，感興趣的可以找找看），縱向不要超過5行。過多的文本不建議使用卡片形式。
其實這張卡片的設計中，我也用到了黃金比例來指導自己的設計，方便快速確定文字比例關系。
卡片上的文字間距最好有一定的規(guī)律，這里可以按網(wǎng)格法來規(guī)劃，比如8px網(wǎng)格，10px網(wǎng)格等等。網(wǎng)格的使用其實可以很靈活，比如我這里的卡片其實就用到了8px網(wǎng)格，各間距就會用8的倍數(shù)來做。大小比例就盡量用黃金比例來處理，這樣做目的一方面是為了讓界面有秩序，另一方面是提升決策效率。秩序產(chǎn)生美，而效率讓你早點下班。
卡片中盡量減少線框，多用留白來進行內(nèi)容劃分。
卡片中的內(nèi)容層級要做好，標題和內(nèi)容之間的差異要明顯。這里的層次主要是通過對比拉開的，做好對比的關鍵就是對比效果要強烈，決不能模棱兩可。
比如下圖中左邊的案例只是在文字的字號上有一定的對比，但字號間相差不大，效果不明顯，就會讓人看第一時間不知道看哪。而右側的案例則用了加粗，大字號，大留白等，讓畫面有了強烈的對比，從而產(chǎn)生更好的信息層級。
只在卡片的框框里做設計，有時候未免顯得太呆板，破開卡片的邊界可以讓卡片本身更具形式感。如果被人說你的設計沒啥亮點，那內(nèi)容出界的設計就是一個很好的提升設計亮點的手法。
彩云曾經(jīng)做的一張banner就是運用了出界的手法
來源：dribbble。界面上的天氣圖標也用了出界的手法，讓畫面顯得更有亮點
卡片中的光感細節(jié)能提升設計的質(zhì)感。下面這張圖是我最近做的一張會員卡的背景設計，大家對比下，在卡片頂部加了1px高光線和斜面反光的細節(jié)前后的質(zhì)感區(qū)別。
這個小細節(jié)，我經(jīng)常會用到，執(zhí)行簡單又容易出效果。
投影的細節(jié)，不要過重，但又要能與背景分離開。有2個小技巧：
1.在取色的時候，可以選擇背景顏色的色相，然后略微加深一些，不要用純黑色來做投影，會顯臟。
2.投影的距離不要太小，太小的投影會顯得不夠自然；也不能太大，太大會很浪費界面資源。
3D卡片的設計，因為不便于內(nèi)容編排和閱讀，所以帶透視的卡片在實際UI中并不太常用。但在作品集包裝和運營頁面中，則可以帶來比較好的視覺沖擊力，可以嘗試運用。
圖片來自：Cradle
作者：彩云Sky
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司