卡片是承載信息的容器，卡片可以承載不同類型的內(nèi)容，其元素可以包含：圖片、文字、視頻、按鈕、優(yōu)惠券、音樂(lè)、付款信息、注冊(cè)表單、社交媒體流或分享、獎(jiǎng)勵(lì)信息、鏈接以及以上元素的任意組合。

卡片也就是承載一些圖片和文字信息的容器，作為跳轉(zhuǎn)下級(jí)頁(yè)面的入口，不同的卡片都遵循在一個(gè)統(tǒng)一寬度和樣式的卡片內(nèi)，進(jìn)行發(fā)揮和設(shè)計(jì)。既保證了卡片和卡片之間的獨(dú)立性，又保證了服務(wù)和服務(wù)的統(tǒng)一化設(shè)計(jì)。用卡片當(dāng)作不同內(nèi)容的載體，會(huì)使得層次簡(jiǎn)單易懂，用戶易于滑動(dòng)瀏覽。

卡片簡(jiǎn)單易懂，用戶不需要考慮事情如何發(fā)生，可自然而然的創(chuàng)建舒適的用戶體驗(yàn)。當(dāng)用戶與卡片進(jìn)行交互時(shí)，可以分成幾種行為模式。卡片通常會(huì)做三件事：記錄信息、用信息吸引用戶或提醒用戶信息。根據(jù)卡片的內(nèi)容元素，將卡片進(jìn)一步細(xì)化為不同類型容器。

①敘述?？ㄆ云俨剂餍问匠霈F(xiàn)，同時(shí)創(chuàng)建事件發(fā)展的時(shí)間軸。

②發(fā)現(xiàn)?？ㄆ茏屜嚓P(guān)內(nèi)容自然的呈現(xiàn)出來(lái)。采用網(wǎng)格或瀑布流布局時(shí)，使用淡入效果展現(xiàn)卡片，會(huì)讓用戶覺(jué)得好玩和身在其中。

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

④工作流?？ㄆ梢詫⒋k事項(xiàng)快速歸類。例如：創(chuàng)建不同的筆記或待辦事項(xiàng)的卡片，當(dāng)用戶刪除時(shí)，剩余的卡片按照初始順序重新排列。

在手機(jī)APP中，用戶可以清晰地感知到距離接近的信息在一張卡片之上，卡片通常會(huì)有一個(gè)大的底色來(lái)做背景，以使卡片的視覺(jué)層次效果更加明顯。結(jié)合卡片的宮格式布局可以將頁(yè)面的視覺(jué)層級(jí)變得更加清晰，豐富界面設(shè)計(jì)。

由于卡片式設(shè)計(jì)能夠承載各種類型的內(nèi)容，需要設(shè)計(jì)師在設(shè)計(jì)卡片時(shí)要有規(guī)范性和創(chuàng)意性，使用合適的排版、尺寸、圓角以及良好的陰影和漸變效果，讓卡片為用戶提供更加舒適的視覺(jué)感受。以下是卡片設(shè)計(jì)需要注意的地方：

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

②留白很重要。卡片留白的重要性不言而喻，先給卡片一些空間恰當(dāng)?shù)靥砑觾?nèi)容。如果卡片信息內(nèi)容過(guò)于繁瑣，會(huì)使用戶產(chǎn)生疲勞感和厭煩感，而留白的使用可以增加卡片內(nèi)容的呼吸感，有效減少使用過(guò)程中的壓力，幫助用戶找到重點(diǎn)信息。卡片信息越簡(jiǎn)約，設(shè)計(jì)目標(biāo)和針對(duì)性就越明顯。

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

④在無(wú)色系中保證UI清晰。在無(wú)色系的條件下設(shè)計(jì)，必須考慮其可用性和所包含的內(nèi)容，在此基礎(chǔ)上有目的添加顏色。為了讓卡片信息看起來(lái)足夠清晰，可以在卡片背景使用深色蒙層，把背景做模糊處理，來(lái)突出卡片信息。

⑤卡片圓角的情感性。在同一個(gè)APP中，所有卡片一般會(huì)使用相同的圓角大小。圓角越大，產(chǎn)品越圓潤(rùn)有趣，更具有親和力，但缺乏穩(wěn)重感; 圓角越小，則越嚴(yán)謹(jǐn)安全，當(dāng)圓角為0時(shí)，不管是從視覺(jué)還是感覺(jué)上，都會(huì)顯得過(guò)于鋒利尖銳，產(chǎn)生距離感，更加具有權(quán)威性。在設(shè)計(jì)中我們需要根據(jù)產(chǎn)品自身的特點(diǎn)來(lái)選擇卡片的圓角，不能隨意濫用不同的圓角大小。

卡片式設(shè)計(jì)幾乎成為當(dāng)前界面設(shè)計(jì)的主流模式，相比傳統(tǒng)單一的頁(yè)面設(shè)計(jì)，卡片設(shè)計(jì)提供更多個(gè)性化的用戶體驗(yàn)，使界面設(shè)計(jì)清晰平衡、富有美感、簡(jiǎn)約時(shí)尚而又具備良好可用性。而卡片作為容器，能夠適應(yīng)不同屏幕大小而不破壞信息的展示效果。