不知道你有沒有發(fā)現(xiàn)，每次做 UI 設(shè)計，幾乎都會遇到卡片容器，也會因為卡片沒設(shè)計好，沒創(chuàng)意，被領(lǐng)導 Diss。那么卡片到底要怎么設(shè)計？，有哪些細節(jié)需要我們注意？

正好，我最近在研究卡片的玩法，發(fā)現(xiàn)一些我們很容易忽略處理細節(jié)的方法，如果掌握這些，可以幫助設(shè)計提升精致度和品質(zhì)感。

我挑選 4 個最具有意義的細節(jié)與大家分享，尤其是最后一個，很多設(shè)計師不敢嘗試。

卡片圓角方法

卡片圓角看起來很簡單，但是如果稍有不慎就會出現(xiàn)看著不和諧的現(xiàn)象。如果單純卡片布局，其實圓角比較好定義，如下這種方式。

常規(guī)的卡片圓角，我們可以根據(jù)產(chǎn)品設(shè)計中，所需要的圓角數(shù)量來定義幾種大小就可以了，一般推薦 3~5 個就夠了，不宜過多。可以用在小卡片、按鈕、卡片和其他需要圓角的控件上。

另外一種情況，卡片內(nèi)繼續(xù)嵌套卡片，這時候一般都會有圓角。那么兩個卡片的圓角要怎么計算？

面對這種情況，相對好用的方法是：內(nèi)矩形的圓角是外矩形的 1/2，比如內(nèi)矩形圓角是 16px，那么外矩形圓角是 32px。下面來看看兩個案例。

案例 1：

上圖，在大卡片情況下，左側(cè)外卡片和內(nèi)卡片圓角一致，這樣設(shè)計出來效果，看著有些不和諧。

右側(cè)的方法內(nèi)卡片圓角是外卡圓角的一半，這樣的視覺看上去整體會和諧很多。

下面看個實際應(yīng)用案例。

Dribbble

案例 2：

在分段導航控件場景下，左側(cè)案例，內(nèi)矩形和外矩形圓角相等，看著視覺感受不舒適。右側(cè)，內(nèi)矩形圓角是外矩形的一半，效果會好很多。下面看下這種導航的應(yīng)用案例。

Ghani Pradita

卡片描邊

在一些場景下，如果我們整個產(chǎn)品界面的底色是白色，這時要添加白色卡片容器，同時只是單純添加投影來區(qū)分層級，那么會顯得有些模糊。

白色背景下，如果添加投影的同時，再增加一描邊效果，那么效果會好很多。

上圖，在白色背景的項目中，我們給卡片邊緣加 0.5px 的線，色值#E9E9E9，這樣就會清晰的輪廓，卡片層級會更清晰一些。

CokePlay

上面這個應(yīng)用，在白色背景情況下，定義卡片，為了讓信息層級清晰，特意在卡片上添加了描邊效果。

上圖反面案例，同樣的卡片設(shè)計，這個應(yīng)用，卡片顏色和底部背景色一致，導致卡片幾乎和背景融為一體，這樣信息層級就會很弱，不推薦大家這樣大面積使用。

卡片組合版式

卡片的組合版式，這個詞也許你第一次聽，因為是我發(fā)明的。到底什么是卡片組合版式？我這里指的是卡片與卡片之間的組合排版。

上圖案例中，這種組合版式，在設(shè)計中最常見，也是用得多一些，所以會顯得比較常規(guī)。

我們在前期做概念探索階段，其實是可以打破這種布局模式的，挑戰(zhàn)下其他思路。

上圖中，就是打破了原有的那種思路，嘗試多卡片組合設(shè)計。

下面，我們來看一些實際的設(shè)計案例。

大家留意下我紅圈標記的地方，這種卡片組合，就是我前面的那種多卡組合思路。

MUSINSA&BALAAN

上面兩個上線的應(yīng)用，通過卡片的組合排版設(shè)計，讓畫面更有張力和新鮮感。

蘋果官網(wǎng)卡片組合

異形卡片

異形卡片，很少有設(shè)計師會想到這樣去布局，畢竟存在一定的風險。如果設(shè)計出來，效果還是蠻有驚喜的。我們今天講的異形是除去圓形、方形的卡片。

異形卡片的特點：不規(guī)則中有統(tǒng)一的規(guī)律，形式感強、張力、雜志感。

Booklet

IF 設(shè)計大獎作品，Booklet 采用異形設(shè)計，增強了頁面視覺張力。

Kakao Webtoon

這個動漫類 APP 應(yīng)用設(shè)計，采用異形作為漫畫人物容器承載，凸顯畫面趣味性和可玩性。

Echo

Behance@the octopus magazine

Behance@SPOON. Brand Identity Renewal

如果想打破現(xiàn)有模式，走創(chuàng)新方向，異形卡片可以作為一個切入點，畢竟異形卡片可以和品牌符號銜接起來，做創(chuàng)新拓展。

寫在最后

卡片，在多形態(tài)業(yè)務(wù)中都頻頻出現(xiàn)，例如 C 端、B 端、Web 端、車載等，它的靈活性和適應(yīng)性，受到廣大設(shè)計師的青睞，對于開發(fā)人員來講，適配性也很強。所以，既然這么重要的一個卡片容器，是值得我們?nèi)ゼ氈卵芯?，以便于做出更好的卡片布局?/p>

今天我們講了 4 個細節(jié)，我個人認為，如果說想發(fā)揮創(chuàng)意，最后一個異形卡片可以有更大空間。

最后，大家可以自行在探索前期，多嘗試創(chuàng)新。

歡迎關(guān)注作者微信公眾號：「功夫UX」