移動(dòng)端UI設(shè)計(jì)中，卡片式設(shè)計(jì)撐起了半壁江山，它隨性自由又充滿了邏輯性，它正在變得更加流行。

?

在各個(gè)APP中常常見(jiàn)到的那些承載著圖片、文字等內(nèi)容的矩形區(qū)塊就是所說(shuō)的卡片，卡片存在的方式多種多樣，當(dāng)你點(diǎn)擊它的時(shí)候能夠看到更多詳細(xì)的內(nèi)容。一般把這種容器稱(chēng)之為“卡片”。從另一個(gè)方面來(lái)說(shuō)，它也指那些包含一定圖片和文本信息在內(nèi)的長(zhǎng)方形，作為指向更多詳細(xì)信息的一個(gè)入口。

?

卡片作為界面。有時(shí)你甚至看不到卡片的設(shè)計(jì)形態(tài)，因?yàn)樗鼈兒推聊煌昝乐睾狭?。但如果仔?xì)看，仍然可以識(shí)別出它采用卡片式設(shè)計(jì)。卡片式界面通常整體作為一個(gè)可觸元素。無(wú)論點(diǎn)擊或滑動(dòng)至屏幕上任意位置，都可操作。在游戲界面中應(yīng)用卡片式設(shè)計(jì)也是一個(gè)亮點(diǎn)。

?

卡片作為界面流的中斷，卡片式設(shè)計(jì)也經(jīng)常以向下滑動(dòng)覆蓋屏幕的方式，用于移動(dòng)端或APP廣告與界面式卡片不同的是，這些卡片包含兩種鏈接一強(qiáng)鏈接和弱鏈接?？梢酝ㄟ^(guò)超強(qiáng)鏈接跳轉(zhuǎn)至產(chǎn)品廣告頁(yè)。點(diǎn)擊弱鏈接則返回上一個(gè)界面，一般來(lái)說(shuō)弱鏈接很難被點(diǎn)擊。

?

從用戶體驗(yàn)來(lái)看，廣告與整體界面的和諧度比較高。雖然這樣廣告會(huì)占滿屏幕，但并不會(huì)給用戶造成太多困擾，因?yàn)槟銉H僅在屏幕卡片頂端疊加了廣告卡片，用戶可以關(guān)閉或者忽略它。卡片幫助用戶快速瀏覽信息，用視覺(jué)風(fēng)格一致的廣告提供直接的商業(yè)價(jià)值。

?

卡片可以承載不同類(lèi)型的內(nèi)容，因而成為內(nèi)容型網(wǎng)站和APP的完美容器一這種通用的框架不會(huì)拒絕任何內(nèi)容。卡片的元素可以包含：照片、文本、視頻、優(yōu)惠券、音樂(lè)、付款信息、注冊(cè)或表單、游戲數(shù)據(jù)、社交媒體流或分享、獎(jiǎng)勵(lì)信息、鏈接以及以上元素的組合。這樣做的好處是用卡片承載內(nèi)容信息，層次簡(jiǎn)單易懂，用戶易于滑動(dòng)瀏覽。

?

典型布局中，屏幕中每張卡片地位相等，不存在一個(gè)卡片主導(dǎo)其他的情況。多張卡片井然有序排列，用戶自主選擇他們想點(diǎn)擊的卡片進(jìn)行操作。

?

在數(shù)字領(lǐng)域的應(yīng)用程序中，卡片式設(shè)計(jì)提升了操作行為體驗(yàn)。從另一方面來(lái)想，當(dāng)用戶與卡片進(jìn)行交互時(shí)，可以分成幾種行為模式。卡片通常會(huì)做三件事：記錄信息、用信息吸引用戶或提醒用戶信息。根據(jù)卡片內(nèi)容元素，將卡片進(jìn)一步細(xì)化為不同類(lèi)型容器。

?

第一，敘述：卡片以瀑布流形式出現(xiàn)，同時(shí)創(chuàng)建事件發(fā)展的時(shí)間軸。

第二，發(fā)現(xiàn)：卡片能讓相關(guān)內(nèi)容自然地呈現(xiàn)出來(lái)。采用網(wǎng)格或瀑布流布局時(shí)，使用淡入效果展現(xiàn)卡片，會(huì)讓用戶覺(jué)得好玩和身在其中。例如，當(dāng)你向左或向右滑動(dòng)，展現(xiàn)符合你口味的歌曲。

第三，對(duì)話：由于卡片是相對(duì)獨(dú)立的，他們能夠完美展示正在進(jìn)行的對(duì)話。

第四，工作流：卡片可以將待辦事項(xiàng)快速歸類(lèi)。

?

就像在生活中使用卡片一樣，對(duì)設(shè)計(jì)師和用戶而言，卡片必須很方便使用。當(dāng)你設(shè)計(jì)卡片時(shí)，需要做一些重要的決定，合適的卡片尺寸，恰當(dāng)?shù)囊曈X(jué)風(fēng)格。而常用的卡片尺寸有幾個(gè)選擇：小尺寸、摘要形式的卡片；中等尺寸的卡片；全屏卡片；疊在其他界面元素之上的彈出式卡片。

?

由于卡片式設(shè)計(jì)能夠承載各種類(lèi)型的內(nèi)容，需要設(shè)計(jì)師精通從色彩到圖像應(yīng)用等方方面面知識(shí)。以下是最適用于卡片設(shè)計(jì)模式的原則：

?

第一，了解陰影及其特點(diǎn)。為了讓投影和漸變的元素更加真實(shí)，了解陰影特點(diǎn)在卡片設(shè)計(jì)中顯得尤為重要。如果陰影投在整個(gè)卡片的邊和角上，那卡片載體的物理交互感就不復(fù)存在了。

第二，在無(wú)色系中保證U1清晰。在無(wú)色系的條件下設(shè)計(jì)，必須考慮其可用性和所包含的內(nèi)容，在此基礎(chǔ)上再有目的地添加顏色。

?

第三，有意識(shí)地留白?？ㄆ舭椎闹匾圆谎远?，先給卡片一些空間恰當(dāng)?shù)卦黾游谋緝?nèi)容。為了讓文本看起來(lái)足夠清楚，可以在文本下使用深色蒙層，把文本放在一個(gè)框里或者把背景做模糊處理。

?

第四，增加圖文排版的對(duì)比性。比如通過(guò)字體大小、字體粗細(xì)來(lái)吸引用戶的注意力。簡(jiǎn)單的圖文排版其視覺(jué)效果是最好的，加之非襯線字體，會(huì)給卡片一些美感上的潤(rùn)色，這樣的卡片會(huì)看上去既有熟悉感又富有創(chuàng)意。諸如陰影之類(lèi)的元素，在很大程度上能幫助用戶聯(lián)想到實(shí)體卡片。

?