卡片設計對于我們來說並不陌生,從設計類網站上或市場上的壹些APP中也會看到很多的卡片式設計的案例,卡片式設計也是UI設計中最常用的方式之壹。本文作者從自身經驗出發,結合案例等分享了卡片設計過程中需要注意的壹些細節,供大家壹同參考和學習。

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

01 卡片的造型

1. 圓角

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

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

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

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

2. 比例

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

我的經驗是,當比較接近這些美感比例其中之壹時,就直接優化到這個比例。比如做了壹個卡片,寬高比是1.5,比較接近于黃金比例,我就幹脆讓它等于黃金比例。

3. 異型

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

02 卡片的效果

1. 顔色

卡片的顔色搭配可以使用純色和漸變色。這些顔色與文字之間的對比要符合界面對比度標准( https://contrast-grid.eightshapes.com/,這個網站可以直接查到可用性數值,只要不是DNP就是可以用的配色),以免影響內容本身的閱讀。如果拿不准的話,可以多用壹些白色,比較不容易出錯。

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

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

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

教大家壹個方法,去dribbble上搜color或直接打開https://dribbble.com/search/color這個鏈接,就可以看到非常多的優秀配色方案了。

2. 圖案

卡片的設計還可以結合輔助圖形,以圖案的形式與卡片進行結合。這些輔助圖形可以來源于品牌符號的延伸,讓品牌有更多的露出機會。

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

3. 圖片、視頻

卡片背景也可以用圖片和視頻的形式進行設計,圖片和視頻的選擇壹般會偏暗色,以不影響內容閱讀爲准。

03 卡片的內容

1. 文字

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

2. 間距(網格法)

卡片上的文字間距最好有壹定的規律,這裏可以按網格法來規劃,比如8px網格,10px網格等等。網格的使用其實可以很靈活,比如我這裏的卡片其實就用到了8px網格,各間距就會用8的倍數來做。大小比例就盡量用黃金比例來處理,這樣做目的壹方面是爲了讓界面有秩序,另壹方面是提升決策效率。秩序産生美,而效率讓妳早點下班。

3. 減少線框

卡片中盡量減少線框,多用留白來進行內容劃分。

4. 層次清晰

卡片中的內容層級要做好,標題和內容之間的差異要明顯。這裏的層次主要是通過對比拉開的,做好對比的關鍵就是對比效果要強烈,決不能模棱兩可。

比如下圖中左邊的案例只是在文字的字號上有壹定的對比,但字號間相差不大,效果不明顯,就會讓人看第壹時間不知道看哪。而右側的案例則用了加粗,大字號,大留白等,讓畫面有了強烈的對比,從而産生更好的信息層級。

5. 內容出界

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

04 卡片的細節

1)光感

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

2. 投影

投影的細節,不要過重,但又要能與背景分離開。有2個小技巧:

在取色的時候,可以選擇背景顔色的色相,然後略微加深壹些,不要用純黑色來做投影,會顯髒。

投影的距離不要太小,太小的投影會顯得不夠自然;也不能太大,太大會很浪費界面資源。

3. 3D效果

3D卡片的設計,因爲不便于內容編排和閱讀,所以帶透視的卡片在實際UI中並不太常用。但在作品集包裝和運營頁面中,則可以帶來比較好的視覺沖擊力,可以嘗試運用。

小結

以上就是今天彩雲關于卡片設計的壹些經驗總結,卡片設計的應用已經如此廣泛,我們有必要利用它來提升自己的界面設計細節。

作者: Juanita Schmidt