卡片式設(shè)計(jì)是產(chǎn)品常用的頁(yè)面設(shè)計(jì)手段之一，它自帶的分割屬性讓頁(yè)面布局更加清晰，也是頁(yè)面布局的利器。但是，分割也可能會(huì)影響用戶沉浸式的瀏覽體驗(yàn)等問(wèn)題。如何用好卡片式設(shè)計(jì)？本文作者對(duì)此進(jìn)行了分析，與你分享。

近幾年，卡片式設(shè)計(jì)可以說(shuō)是移動(dòng)端產(chǎn)品中極為常見的設(shè)計(jì)形式了，甚至有很多互聯(lián)網(wǎng)大廠將卡片式設(shè)計(jì)納入設(shè)計(jì)語(yǔ)言，在各大APP中得到廣泛運(yùn)用。

卡片式設(shè)計(jì)自帶分割屬性、讓界面更有層次感，能給人一種視覺上的享受，也因此讓其成為了頁(yè)面布局的利器，但它并非萬(wàn)能，因分割的原因可能會(huì)影響用戶沉浸式的瀏覽體驗(yàn)、造成橫向/縱向空間浪費(fèi)等問(wèn)題，需要根據(jù)實(shí)際場(chǎng)景和內(nèi)容形式來(lái)確定，不要專門為了“卡片式”而設(shè)計(jì)。

很多設(shè)計(jì)師對(duì)卡片設(shè)計(jì)習(xí)以為常，但對(duì)于使用卡片的原因、視覺表現(xiàn)方式、優(yōu)/缺點(diǎn)等并不是很了解。那么卡片到底該如何設(shè)計(jì)？需要注意哪些細(xì)節(jié)？筆者根據(jù)經(jīng)驗(yàn)并結(jié)合平時(shí)的一些思考，跟大家一起聊聊在設(shè)計(jì)中極易忽略的細(xì)則，希望能幫助大家提升卡片設(shè)計(jì)的精致感。

一、卡片式設(shè)計(jì)的定義

1. 什么是卡片？

早在互聯(lián)網(wǎng)時(shí)代之前，卡片就出現(xiàn)在了我們生活中的方方面面，如名片、不干膠標(biāo)簽、便利貼、會(huì)員卡…等，不管是何種類型的卡片，它都將代表著我們現(xiàn)實(shí)生活中的某個(gè)特定信息。

卡片指的是含有圖片或文本信息的容器，它將我們需要的信息歸納在一起、并形成獨(dú)立的個(gè)體，以至于后續(xù)被引用到線上界面中，同樣具有非常不錯(cuò)的信息歸納效果。

2. 互聯(lián)網(wǎng)中的卡片式設(shè)計(jì)

卡片本身就是一個(gè)完整的信息區(qū)塊、并同時(shí)承載豐富的互動(dòng)方式。在UI設(shè)計(jì)中，個(gè)性化和美感兼?zhèn)涞目ㄆ皆O(shè)計(jì)具有很強(qiáng)的易用性，它是一個(gè)UI設(shè)計(jì)組件，將標(biāo)題、文本內(nèi)容、圖形/圖片進(jìn)行整合并模塊化，讓信息的表達(dá)更加直觀、操作也更便捷。

卡片式設(shè)計(jì)之所以能成為當(dāng)今比較流行的趨勢(shì)，是因?yàn)樗茏尳缑嫘畔⒏袑哟胃校瑥脑O(shè)計(jì)、交互、視覺以及用戶體驗(yàn)等各方面來(lái)看，都有不錯(cuò)的優(yōu)點(diǎn)。站在用戶角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相對(duì)來(lái)說(shuō)，學(xué)習(xí)成本也是極低的。

二、卡片式設(shè)計(jì)價(jià)值

1. 結(jié)構(gòu)清晰

卡片在占用屏幕空間較少的情況下能夠?qū)⒉煌笮?、不同類型的信息?nèi)容按邏輯進(jìn)行分組呈現(xiàn)，使界面結(jié)構(gòu)更加清晰。相比純粹的留白或分割線，卡片不僅對(duì)信息作出了分割，其本身還是一個(gè)獨(dú)立的容器，讓歸納組合后的信息能快速突出重點(diǎn)，將復(fù)雜內(nèi)容簡(jiǎn)單化處理。

卡片式布局整齊簡(jiǎn)練，清晰的信息結(jié)構(gòu)有助于用戶瀏覽，方便快速找到自己感興趣的內(nèi)容，避免用戶產(chǎn)生一種費(fèi)時(shí)或感覺內(nèi)容超長(zhǎng)的恐懼感，還能節(jié)省更多的時(shí)間成本。最常見的就是信息列表、圖文混排等，不僅做到了視覺上的美觀，也達(dá)到了平衡文字及圖片強(qiáng)弱的效果。

2. 場(chǎng)景拓展

卡片式設(shè)計(jì)有利于場(chǎng)景拓展，他能在信息不斷增/減的情況下、頁(yè)面依然能組成一個(gè)連貫的整體，在視覺上毫無(wú)違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節(jié)假日增加二層樓…等。

3. 空間擴(kuò)展

卡片式設(shè)計(jì)一度打破了移動(dòng)端多為縱向操作、原有傳統(tǒng)的列表式布局，在空間有限的移動(dòng)端設(shè)備中，還能很好的利用橫向空間。將橫向滑動(dòng)區(qū)域的最后一個(gè)卡片漏出一小部分（若隱若現(xiàn)才是誘惑），不僅能給予用戶更多選擇與期待，其空間利用率也得到了很好的擴(kuò)展，在展示更多內(nèi)容的情況下依然能保持模塊的整體性。

4. 突出重點(diǎn)

卡片式設(shè)計(jì)能很好的通過(guò)邊界襯托出內(nèi)容的整體性，特別是在電商類產(chǎn)品中的首頁(yè)頭部、瓷片區(qū)、營(yíng)銷引流區(qū)將其應(yīng)用到了極致，即便在卡片數(shù)量較多的情況下，用戶依然能清晰的感知到內(nèi)容的歸屬層級(jí)以及重要信息。

5. 兼容多端

卡片作為一個(gè)容器，它可以自由無(wú)限的等比縮放，非常適合響應(yīng)式設(shè)計(jì)。在手機(jī)、iPad、電腦等屏幕尺寸復(fù)雜的情況下，通過(guò)放大縮小或增減縱向排列數(shù)量的方式配合響應(yīng)式的斷點(diǎn)設(shè)計(jì)，讓同一界面在不同設(shè)備之間輕易的創(chuàng)造出一致性的視覺體驗(yàn)。

6. 易于操作

卡片給人最直觀的感覺就是可以操作，它不用箭頭、按鈕或超鏈接等引導(dǎo)性的視覺元素提醒，節(jié)省了一定的頁(yè)面空間，還有著更大的操作熱區(qū)，無(wú)需做到精準(zhǔn)點(diǎn)擊?？ㄆ皆O(shè)計(jì)很容易融入各種交出手勢(shì)，如單擊、雙擊、長(zhǎng)按、拖動(dòng)、滑動(dòng)等，為用戶提供更多便捷的操作。

7. 跳轉(zhuǎn)流暢

卡片可通過(guò)縮放的形式充分利用動(dòng)畫進(jìn)行頁(yè)面跳轉(zhuǎn)，例如App Store“Today”頻道，點(diǎn)擊卡片后直接等比放大至全屏，給用戶一種還停留在當(dāng)前頁(yè)面的錯(cuò)覺，避免了傳統(tǒng)的跳轉(zhuǎn)頁(yè)面而造成的信息割裂感，流暢絲滑的過(guò)渡，給用戶更自然的交互體驗(yàn)。

三、常見的卡片式設(shè)計(jì)樣式

1. 四周留白

這種類型的卡片在UI設(shè)計(jì)中最為常見，柔和的圓角、邊緣陰影以及四周很自然的留白，讓內(nèi)容模塊的存在感更加強(qiáng)烈，整個(gè)頁(yè)面信息的層級(jí)也更加清晰。

2. 懸浮內(nèi)容之上

懸浮型卡片并非模態(tài)彈窗，與其相比，懸浮卡片不需要主動(dòng)操作觸發(fā)，可作為臨時(shí)控件或長(zhǎng)期固定顯示，并且比模態(tài)彈窗能承載更多信息內(nèi)容，可通過(guò)伸縮來(lái)定義卡片中的信息數(shù)量，或多、或少、或展示、或隱藏，在頁(yè)面中非常靈活。

例如高德地圖首頁(yè)，搜索框及右側(cè)的功能入口長(zhǎng)期懸浮在地圖之上，而下方卡片中的內(nèi)容會(huì)隨著高度的伸縮自動(dòng)調(diào)節(jié)可展示的數(shù)量，非常實(shí)用。

3. 通欄類型

通欄類型的卡片具有更強(qiáng)的視覺阻斷，對(duì)區(qū)分不同的功能模塊有不錯(cuò)的效果，不過(guò)這種類型只通過(guò)頁(yè)面背景色保留上下邊間、且不會(huì)過(guò)多，不然頁(yè)面會(huì)顯得零散、雜亂。

四、卡片適用場(chǎng)景介紹

1. 瀑布流

瀑布流主要正針對(duì)圖片較多、或以圖片為主的內(nèi)容設(shè)計(jì)，它最大的優(yōu)點(diǎn)是無(wú)需過(guò)于在意圖片的高度，最大限度的還原原始圖片效果。

卡片式設(shè)計(jì)的瀑布流對(duì)信息的組合、包容性更強(qiáng)，不僅能在單屏區(qū)域內(nèi)顯示更多內(nèi)容，同時(shí)又將每組信息組合作出了明確的劃分，在不破壞頁(yè)面整體性的基礎(chǔ)上也做到了相對(duì)獨(dú)立，如花瓣、Pinterest就是最好的例子。

2. 信息流

信息流的展現(xiàn)方式主要以文字、圖片或視頻內(nèi)容為主，是一種較長(zhǎng)內(nèi)容的媒介，不管哪種展現(xiàn)方式，其都需要用戶耗費(fèi)較長(zhǎng)時(shí)間的滑動(dòng)、瀏覽來(lái)篩查對(duì)自己有用的信息。

卡片式設(shè)計(jì)將信息進(jìn)行分塊處理，通過(guò)阻隔的方式快速告知用戶每個(gè)卡片的核心內(nèi)容，便于用戶在長(zhǎng)時(shí)間的滑動(dòng)過(guò)程中也能快速識(shí)別重要信息。

3. 左/右滑動(dòng)

卡片式左右滑動(dòng)組合在音樂(lè)、視頻類產(chǎn)品中用最為廣泛，因內(nèi)容本身就圖片居多，也更適合卡片式設(shè)計(jì)，相比平鋪具有更強(qiáng)的層次感，對(duì)用戶的吸引力較強(qiáng)，尤其最右側(cè)漏出的一小部分內(nèi)容營(yíng)造出神秘的感覺，用戶會(huì)不由自主的想去滑動(dòng)以求獲取更多信息。

4. 優(yōu)惠卡/券

卡/券設(shè)計(jì)實(shí)際是把生活中的實(shí)物映射到了UI設(shè)計(jì)中，通過(guò)模擬實(shí)物造型設(shè)計(jì)成卡片樣式，有效降低用戶的理解成本，并對(duì)其有了更直觀的感知，真實(shí)感尤為強(qiáng)烈。

5. 突發(fā)事件/臨時(shí)提醒

對(duì)于用戶主動(dòng)觸發(fā)或系統(tǒng)臨時(shí)發(fā)起的非固定性內(nèi)容，利用卡片式設(shè)計(jì)會(huì)讓信息布局更靈活、視覺更突出，在不影響用戶使用的前提下，可出現(xiàn)在任何位置。

6. 部分頁(yè)面頭圖

卡片式設(shè)計(jì)可以將個(gè)人中心、個(gè)人主頁(yè)、會(huì)員等頁(yè)面中的關(guān)鍵信息進(jìn)行概括，并在頭部位置進(jìn)行重點(diǎn)突出，不僅讓原本單個(gè)的內(nèi)容形成整體，還能營(yíng)造出沉浸式的氛圍。

五、卡片式設(shè)計(jì)原則及小技巧

1. 一致性原則

為了保持界面設(shè)計(jì)的一致性，需要將卡片樣式納入設(shè)計(jì)規(guī)范，例如卡片是否通欄、是否需要設(shè)定圓角半徑、不同場(chǎng)景中卡片大小的劃分界限以及圓角數(shù)值的確定等，大部分情況下都需要遵循設(shè)計(jì)規(guī)范。

2. 功能定位決定卡片形式

在同一產(chǎn)品中，雖然要遵循設(shè)計(jì)規(guī)范以確保一致性的視覺效果，但并非所有頁(yè)面都適合卡片式設(shè)計(jì)。

那么，到底是否需要采用卡片形式、使用哪種卡片類型？這還得根據(jù)頁(yè)面內(nèi)容屬性及目標(biāo)定位來(lái)決定。例如社交產(chǎn)品中的臨時(shí)會(huì)話列表、動(dòng)態(tài)圈子使用卡片形式，很浪費(fèi)縱向空間、甚至?xí)@得很“雞肋”，用分隔線或間距留白來(lái)區(qū)分信息組顯然更合適；但對(duì)于電商類型的產(chǎn)品，利用卡片將不同的商品分隔后又進(jìn)行歸納，會(huì)更容易識(shí)別，信息的可讀性也會(huì)更強(qiáng)。

3. 避免過(guò)多卡片嵌套

卡片式設(shè)計(jì)本身就包含了容器與背景的層級(jí)表現(xiàn)，為了保持內(nèi)容的正常展示與用戶瀏覽體驗(yàn)，避免在卡片中嵌套多層卡片，以免信息層級(jí)雜/亂而增加用戶的視覺負(fù)擔(dān)。

如果再同一卡片中需要再次區(qū)分多個(gè)信息組，可利用間距留白、分割線或淺色背景等元素屬性來(lái)區(qū)分，依然能達(dá)到想要的效果。

4. 合理利用橫向空間

因?yàn)榭ㄆ瑑?nèi)、外的雙向間距留白，在空間有限的移動(dòng)端設(shè)備中，橫向空間利用率較低，因此除了合理的減小左右間距外，還可以適當(dāng)利用左右滑動(dòng)來(lái)擴(kuò)充橫向隱性空間。

例如淘票票首頁(yè)，在1.5屏的范圍內(nèi)，幾乎每個(gè)模塊都能橫向滑動(dòng)查看更多內(nèi)容，從用戶體驗(yàn)角度出發(fā)，這是縱向空間無(wú)法比擬的。

5. 降低縱向空間的浪費(fèi)

卡片式設(shè)計(jì)不是目的，其主要是用來(lái)更好的區(qū)分信息層級(jí)、提升用戶瀏覽體驗(yàn)，因?yàn)榭ㄆ鳛楠?dú)立空間的存在，必定會(huì)增加上下間距而導(dǎo)致頁(yè)面拉長(zhǎng)，因此，如無(wú)必要，不必盲目采用卡片式設(shè)計(jì)。

例如美團(tuán)APP的「首頁(yè)、電商、購(gòu)物車、我的」4大主功能頁(yè)面都使用了卡片形式，而「消息」頁(yè)則采用分割線進(jìn)行信息分組，試想一下，如果為了統(tǒng)一規(guī)范而使用卡片，不僅造成很強(qiáng)的割裂感、還會(huì)極大的浪費(fèi)縱向空間。

6. 長(zhǎng)文表達(dá)不適合卡片

這點(diǎn)不用多說(shuō)，新聞資訊類產(chǎn)品的內(nèi)容詳情頁(yè)就是最好的證明，不管其他頁(yè)面是否采用卡片形式，但詳情頁(yè)并不會(huì)跟隨形式，一方面可以讓同屏展示更多內(nèi)容、增加空間利用率，另一方面可減少無(wú)關(guān)元素對(duì)用戶產(chǎn)生的干擾、給予沉浸式的瀏覽體驗(yàn)。

7. 突出一個(gè)核心內(nèi)容

很多時(shí)候，我們總會(huì)聽到PM說(shuō)這個(gè)很重要、那個(gè)也很重要，都需要突出一點(diǎn)，殊不知當(dāng)什么都突出了也說(shuō)明什么都沒有突出。在單個(gè)卡片中，組始終牢記這個(gè)準(zhǔn)則：一次只突出一個(gè)核心信息，以便于用戶快速、精準(zhǔn)捕捉，切記不可貪多。

六、結(jié)語(yǔ)

卡片式設(shè)計(jì)之所有能快速流行起來(lái)且經(jīng)久不衰， 其主要得益于自身的靈活性，尤其是在跨設(shè)備、跨屏幕上有著純天然的優(yōu)勢(shì)，能忽略設(shè)備的差異給用戶提供更好的服務(wù)。卡片并不是簡(jiǎn)單的樣式設(shè)計(jì)，它是一種自由布局的設(shè)計(jì)語(yǔ)言，通過(guò)多種方式的信息組合、結(jié)合豐富的交互操作，給用戶創(chuàng)造出極致的使用體驗(yàn)。

信息的呈現(xiàn)方式雖有不同，但最終的目的都是為了服務(wù)于內(nèi)容，卡片式設(shè)計(jì)只是其中的一種形式而已，在設(shè)計(jì)過(guò)程中，我們需要根據(jù)內(nèi)容結(jié)合實(shí)際情況作出合理的判斷，切勿拘泥于形式而忽略內(nèi)容本身的重要性。

任何設(shè)計(jì)風(fēng)格及展現(xiàn)形式都有可能成為歷史，卡片式設(shè)計(jì)也不會(huì)例外，但絕對(duì)不是這么快就結(jié)束，它依然值得我們?nèi)ド罹浚η蟠蛟旄玫男畔⒉季?、更舒適的用戶體驗(yàn)。