卡片式設(shè)計(jì)對(duì)于我們來(lái)說(shuō)并不陌生，從設(shè)計(jì)類(lèi)網(wǎng)站上或市場(chǎng)上的一些APP中也會(huì)看到很多的卡片式設(shè)計(jì)的案例，卡片式設(shè)計(jì)也是UI設(shè)計(jì)中最常用的方式之一。

最近在新項(xiàng)目的設(shè)計(jì)中也嘗試使用了卡片式設(shè)計(jì)，結(jié)合實(shí)際項(xiàng)目中的得到了一些思考進(jìn)行總結(jié)并歸納出一些卡片式設(shè)計(jì)的小知識(shí)點(diǎn)。同時(shí)希望自己通過(guò)本次的總結(jié)進(jìn)行知識(shí)沉淀，以及跟大家一起探討下卡片式的設(shè)計(jì)。

來(lái)源于日常

在現(xiàn)實(shí)生活中的卡片式設(shè)計(jì)可以說(shuō)是無(wú)處不在，例如身份證、交通卡、銀行卡、名片、便利貼、撲克牌、游戲卡……諸如此類(lèi)的生活常見(jiàn)品都是以卡片的方式存在，其共同點(diǎn)都使用一個(gè)容器中承載著內(nèi)容，并且具有“便攜性、信息簡(jiǎn)潔和相對(duì)獨(dú)立性”。

UI設(shè)計(jì)中卡片的使用場(chǎng)景

在項(xiàng)目設(shè)計(jì)之初我分析了一些使用卡片設(shè)計(jì)的App，并且從中整理總結(jié)了幾個(gè)較為常見(jiàn)的卡片式設(shè)計(jì)的使用場(chǎng)景。

Feed流

卡片式的feed流設(shè)計(jì)是一種非常常見(jiàn)的設(shè)計(jì)，早在前幾年Facebook、Google+等產(chǎn)品就使用了這一方式，F(xiàn)eed流作為一種長(zhǎng)內(nèi)容的媒介，用戶(hù)需要長(zhǎng)時(shí)間的滑動(dòng)看內(nèi)容并篩選有效信息，卡片式設(shè)計(jì)很好的解決了內(nèi)容與內(nèi)容的區(qū)塊分隔，讓用戶(hù)在長(zhǎng)屏幕滑動(dòng)中依舊可以很好的明確每一塊的內(nèi)容。

實(shí)際案例-淘寶微淘

瀑布流設(shè)計(jì)

瀑布流的出現(xiàn)讓單屏區(qū)域內(nèi)顯示了更多的內(nèi)容，而內(nèi)容較多的情況下，使用卡片式設(shè)計(jì)較好的對(duì)內(nèi)容進(jìn)行了區(qū)域劃分，讓左右上下的內(nèi)容從整體中具有相對(duì)的獨(dú)立性。

實(shí)際案例-Pinterest

左右滑動(dòng)組合型內(nèi)容

卡片式設(shè)計(jì)具有較強(qiáng)的層次感，相比于拉通平鋪更能呈現(xiàn)內(nèi)容可滑動(dòng)感受，并且塊狀化的設(shè)計(jì)讓內(nèi)容具有較高的區(qū)域分割感。

實(shí)際案例-QQ音樂(lè)

Tips提醒

作為非界面固定內(nèi)容，卡片式設(shè)計(jì)可以讓tips提醒設(shè)計(jì)變得更自由，在符合用戶(hù)體驗(yàn)的基礎(chǔ)上，它可以出現(xiàn)在任何我們想要它出現(xiàn)的位置。

實(shí)際案例-淘票票會(huì)員提醒

結(jié)合手勢(shì)的單塊可互動(dòng)內(nèi)容

若頁(yè)面中有且只有一個(gè)主內(nèi)容，并且需要用戶(hù)進(jìn)行快速篩選時(shí)，可考慮這種結(jié)合卡片式設(shè)計(jì)與手勢(shì)設(shè)計(jì)的方式。大大增強(qiáng)了用戶(hù)對(duì)于設(shè)計(jì)的體驗(yàn)感知和豐富視覺(jué)表現(xiàn)。

實(shí)際案例-探探首頁(yè)

卡券類(lèi)設(shè)計(jì)

卡券類(lèi)的設(shè)計(jì)實(shí)際上是一種物化映射的過(guò)程，我們?cè)诂F(xiàn)實(shí)中看到的卡券造型，結(jié)合卡片式的擬物化設(shè)計(jì)，讓用戶(hù)在屏幕上可以更直觀的感知，提升了設(shè)計(jì)的代入感。

實(shí)際案例-京東領(lǐng)券中心

集合型功能入口

集合型功能入口往往會(huì)有多個(gè)入口，使用卡片式設(shè)計(jì)讓入口形成一個(gè)區(qū)域整體，可以做到既統(tǒng)一又相對(duì)獨(dú)立。

實(shí)際案例-淘寶微淘關(guān)注賬號(hào)
 

個(gè)人主頁(yè)頂部?jī)?nèi)容卡片

個(gè)人主頁(yè)的設(shè)計(jì)往往會(huì)在氛圍上營(yíng)造沉浸感，卡片式的設(shè)計(jì)可以把關(guān)鍵信息進(jìn)行概括收歸，讓原本單個(gè)的內(nèi)容形成一個(gè)整體。

實(shí)際案例-美團(tuán)外賣(mài)會(huì)員

規(guī)則探討

基礎(chǔ)的卡片設(shè)計(jì)規(guī)則，相信大家在一些系統(tǒng)級(jí)別的設(shè)計(jì)指導(dǎo)規(guī)范中也或多或少都能了解到，不同平臺(tái)的規(guī)范差異性其實(shí)不會(huì)有太多本質(zhì)性的區(qū)別，更多的是處理技巧或方式的差異，而每個(gè)設(shè)計(jì)師對(duì)其理解的角度也會(huì)具有一些差異化，這里分享下我對(duì)于卡片式設(shè)計(jì)的一些基礎(chǔ)想法。

1.卡片的質(zhì)感打磨

同樣的卡片設(shè)計(jì)，不同的人做出來(lái)的感受可能會(huì)有差別，而表達(dá)卡片質(zhì)感的主要關(guān)鍵基礎(chǔ)點(diǎn)在于：卡片形體、投影深度、卡片顏色對(duì)比，我們需要了解這些基礎(chǔ)知識(shí)點(diǎn)之后，再結(jié)合實(shí)際的APP風(fēng)格進(jìn)行設(shè)計(jì)。

卡片形體

就像圖標(biāo)的圖形設(shè)計(jì)一樣，不一樣的形體也能表達(dá)出不一樣的氣質(zhì)，因此在設(shè)計(jì)的時(shí)候我們需要依據(jù)整體的風(fēng)格進(jìn)行表達(dá)。異形卡片的設(shè)計(jì)，可以讓原有方方正正的卡片表達(dá)出差異化，從造型上打破一些傳統(tǒng)的處理方式，再結(jié)合一些IP人物元素可以更加深入的表達(dá)出具體的內(nèi)容氛圍。

投影深度

投影的視覺(jué)效果，會(huì)直接影響著整體卡片的質(zhì)感，太深太大的投影會(huì)顯得整體卡片過(guò)于厚重，太淺太小的投影則顯得過(guò)度生硬，因此合理的數(shù)值比例則可以讓卡片看起來(lái)自然有質(zhì)感。在項(xiàng)目中我常用的一組數(shù)值規(guī)律是1:2或1:3，例如Y軸偏移10px，模糊度則設(shè)定為20或30px，這樣成比例的數(shù)值出來(lái)的效果會(huì)較為自然，如下圖：

卡片顏色對(duì)比

卡片與背景的顏色對(duì)比會(huì)影響這卡片的整體質(zhì)感，在設(shè)計(jì)時(shí)我們需要把握好卡片與底色的對(duì)比，不同的明暗對(duì)比出來(lái)的質(zhì)感也會(huì)有差異。這里有兩點(diǎn)建議：1.卡片色與背景色不宜太過(guò)接近或使用同一顏色，因?yàn)闀?huì)影響卡片整體的空間質(zhì)感或使得卡片的邊緣銳度下降；2.深色背景上，盡量讓卡片與背景色在同一色系或者明度不要差異太大，避免過(guò)于突兀。

2.邊距的設(shè)定

在使用卡片式設(shè)計(jì)時(shí)，經(jīng)常會(huì)糾結(jié)邊距的設(shè)定，寬邊還是窄邊？多少像素更為合適？經(jīng)常我會(huì)帶著這種疑問(wèn)去設(shè)計(jì)。 

基于內(nèi)容的簡(jiǎn)單規(guī)則

卡片式設(shè)計(jì)作為設(shè)計(jì)的表現(xiàn)形式，最終是為了承載內(nèi)容，因此邊距的寬窄也需要依賴(lài)于實(shí)際內(nèi)容的判斷。結(jié)合我在項(xiàng)目中的嘗試分享以下幾點(diǎn)： 

多窄少寬

卡片內(nèi)容較多是使用窄邊距，讓卡片具有足夠的空間來(lái)展現(xiàn)內(nèi)容，內(nèi)容較少則可以考慮采用寬邊距來(lái)打造整體的視覺(jué)空間感，如下圖app store和淘寶的設(shè)計(jì)對(duì)比。當(dāng)然這只是一個(gè)建議，實(shí)際還得具體問(wèn)題具體分析。

再如一些瀑布流、宮格、橫滑模塊較多的APP的設(shè)計(jì)亦是如此，在內(nèi)容較多的情況下會(huì)把邊距壓縮到最小的合理間距。

內(nèi)外成比例

以最外邊為基礎(chǔ)值往里設(shè)計(jì)，間距以固定比例進(jìn)行縮減，雖然沒(méi)有刪格來(lái)得規(guī)范，但也可以讓設(shè)計(jì)變得有跡可循。

基于柵格

柵格系統(tǒng)解決了一些基礎(chǔ)的板式問(wèn)題，有助于提升設(shè)計(jì)的規(guī)范性，讓設(shè)計(jì)更加有跡可循。在設(shè)定卡片式的邊距時(shí)可以適當(dāng)應(yīng)用刪格系統(tǒng)，讓邊距與內(nèi)容形成固定的關(guān)系，這樣可以幫助整體的卡片設(shè)計(jì)更加具有細(xì)節(jié)和規(guī)則。

4.卡片的標(biāo)題設(shè)定

標(biāo)題的設(shè)定主要考慮以下幾點(diǎn)：1.是在卡片內(nèi)還是卡片外；2.標(biāo)題的字號(hào)設(shè)定多少更合適；3標(biāo)題是否加粗？

卡片內(nèi)或外的對(duì)比

在項(xiàng)目設(shè)計(jì)中讓我較為糾結(jié)的是：標(biāo)題應(yīng)該在卡片內(nèi)還是卡片外？通過(guò)了一些案例的嘗試之后，我總結(jié)了一個(gè)規(guī)則（需要依據(jù)內(nèi)容的形態(tài)而進(jìn)行設(shè)計(jì)）：當(dāng)卡片內(nèi)容是獨(dú)立的模塊或模塊中只有一個(gè)大標(biāo)題時(shí)可設(shè)定在卡片內(nèi)；當(dāng)卡片內(nèi)容是以組合呈現(xiàn)或者具有延續(xù)性?xún)?nèi)容時(shí)設(shè)定在卡片外，形成最外層的主標(biāo)題。

標(biāo)題的字號(hào)設(shè)定

標(biāo)題主要作用為2點(diǎn)：1.簡(jiǎn)短說(shuō)明每個(gè)模塊的內(nèi)容；2.讓用戶(hù)在長(zhǎng)頁(yè)面瀏覽中起到引導(dǎo)、定位的作用。通過(guò)一些嘗試發(fā)現(xiàn)：1.當(dāng)內(nèi)容較少時(shí)，并不需要太大的字號(hào)即可起到標(biāo)題的作用；2.當(dāng)內(nèi)容較多時(shí)，較小的標(biāo)題字號(hào)則容易被沉入內(nèi)容中，讓用戶(hù)在瀏覽的過(guò)程中難以發(fā)現(xiàn)，而導(dǎo)致信息獲取缺失；3.標(biāo)題應(yīng)該與正文字號(hào)大小差異建議在6-10px，這樣可以更好的拉開(kāi)差異，讓標(biāo)題更具有標(biāo)題感。

字體是否加粗

常規(guī)思維下我們都會(huì)對(duì)標(biāo)題進(jìn)行加粗，我在實(shí)際中的經(jīng)驗(yàn)得到的總結(jié)是：需要看手機(jī)系統(tǒng)或不同廠商的機(jī)型。我在項(xiàng)目之初都對(duì)標(biāo)題進(jìn)行了加粗，但后續(xù)在跟進(jìn)還原時(shí)看到的效果并不理想，特別是Android的機(jī)型上，因?yàn)槲覀兪褂玫氖窍到y(tǒng)默認(rèn)字體，android系統(tǒng)很多字體并未對(duì)系統(tǒng)進(jìn)行優(yōu)化，而是使用微軟雅黑，微軟雅黑在android系統(tǒng)上再加粗，就會(huì)顯得整個(gè)系統(tǒng)的外輪廓特別粗糙，最后我們依據(jù)不同的機(jī)型進(jìn)行了差異化的選擇。

4.圓角的規(guī)則

圓角的設(shè)定實(shí)際上沒(méi)有太多的原則問(wèn)題，只要符合整體的風(fēng)格調(diào)性即可。當(dāng)然不同的圓角也能表達(dá)出不同的質(zhì)感，大圓角表達(dá)柔和、小圓角表達(dá)硬朗。

圓角的規(guī)則設(shè)定

以卡片的圓角作為基礎(chǔ)的參考值往內(nèi)推算整體的圓角使用規(guī)范，卡片與卡內(nèi)的元素形成合理的比例規(guī)則，而非隨意根據(jù)“經(jīng)驗(yàn)”進(jìn)行設(shè)定。

圓角大小差異對(duì)比

大小的差異化呈現(xiàn)出不同的視覺(jué)感受和風(fēng)格差異，我們?cè)谠O(shè)計(jì)時(shí)更多需要考慮我們?cè)O(shè)計(jì)的產(chǎn)品風(fēng)格或氣質(zhì)是適合大圓角還是小圓角，而非依據(jù)一些設(shè)計(jì)網(wǎng)站上的流行趨勢(shì)。因此基于不同的風(fēng)格或者實(shí)際內(nèi)容場(chǎng)景下進(jìn)行設(shè)定才更為合理。

5.寬窄間距對(duì)比

卡片式設(shè)計(jì)相比拉通式設(shè)計(jì)更需要考慮設(shè)計(jì)中的透氣感。在常規(guī)的規(guī)則下，對(duì)內(nèi)容邊距及四周邊距進(jìn)行調(diào)整，讓內(nèi)容之間具有較好的空間呼吸感，從而讓設(shè)計(jì)得到留白的效果。如下圖對(duì)比案例，在基礎(chǔ)刪格不變的情況下，每個(gè)間距都在原有基礎(chǔ)上擴(kuò)大了12px（接近1.33倍），從而讓內(nèi)容具有較為舒適的寬度進(jìn)行閱讀

優(yōu)點(diǎn)分析

選擇某一種設(shè)計(jì)方式的重點(diǎn)在于我們了解這種方式的優(yōu)點(diǎn)，并且可以把這些優(yōu)點(diǎn)融合到我們的設(shè)計(jì)當(dāng)中。在項(xiàng)目設(shè)計(jì)中，我總結(jié)了幾點(diǎn)卡片式設(shè)計(jì)的優(yōu)點(diǎn)。

優(yōu)化模塊化，提升內(nèi)容區(qū)域感

模塊化的設(shè)計(jì)也是我們?nèi)粘Ｖ袝?huì)應(yīng)用到的方法，結(jié)合卡片式的設(shè)計(jì)可以讓模塊化的規(guī)則變得更加簡(jiǎn)單，增加了模塊之間的可復(fù)用性和延展性。而當(dāng)內(nèi)容較多的情況下，使用卡片式設(shè)計(jì)可以有效直接的形成區(qū)域分隔，從視覺(jué)感知上就對(duì)內(nèi)容進(jìn)行了分隔，提升用戶(hù)獲取信息的效率。

提升內(nèi)容獨(dú)立性

在組合型的內(nèi)容設(shè)計(jì)上，使用卡片式設(shè)計(jì)可以讓每個(gè)小塊內(nèi)容呈現(xiàn)相對(duì)獨(dú)立的展現(xiàn)特性，結(jié)合模塊化的設(shè)計(jì)，可以在一大片關(guān)聯(lián)的內(nèi)容中，做到既統(tǒng)一又相對(duì)獨(dú)立。

增強(qiáng)視覺(jué)空間感

卡片式的設(shè)計(jì)可以提升整體設(shè)計(jì)層次感，通過(guò)投影、前后顏色的設(shè)定，讓內(nèi)容與背景之間產(chǎn)生視覺(jué)空間感。

增強(qiáng)視覺(jué)表現(xiàn)力

在設(shè)計(jì)中我們可以對(duì)卡片進(jìn)行異形設(shè)計(jì)，用來(lái)達(dá)到我們想要的風(fēng)格表現(xiàn)。當(dāng)然在一個(gè)頁(yè)面內(nèi)盡量不要太多，盡量使用頁(yè)面中的首個(gè)卡片進(jìn)行差異化處理，讓整體表現(xiàn)出一點(diǎn)不同即可。

增強(qiáng)可點(diǎn)性

卡片式設(shè)計(jì)產(chǎn)生的空間感，讓每個(gè)模塊更加突出，相比扁平式的處理方式，卡片式從視覺(jué)感官上會(huì)較為突出，從感官上更具可點(diǎn)擊感知。

缺點(diǎn)及建議

任何一種設(shè)計(jì)方式都會(huì)有其利弊，最終選擇某一種其實(shí)不過(guò)就是當(dāng)下最適合而已，而在嘗試中我也總結(jié)了幾點(diǎn)卡片式設(shè)計(jì)存在的一些缺點(diǎn)，當(dāng)然只是個(gè)人的思考而已。

橫向空間利用率降低

卡片式設(shè)計(jì)的存在左右邊距，因此在有限的屏寬內(nèi)內(nèi)容橫向區(qū)域相比于拉通式設(shè)計(jì)有所減少，在內(nèi)容較多的情況下可以適當(dāng)調(diào)小卡片左右邊距。

避免過(guò)多的層級(jí)

從整體來(lái)說(shuō)，卡片式的設(shè)計(jì)本身就是增加了基礎(chǔ)背景的層級(jí)表現(xiàn)，其視覺(jué)層級(jí)相比拉通式更為豐富，因此不建議在卡片上再二次疊加塊狀式設(shè)計(jì)，避免造成層級(jí)復(fù)雜。在項(xiàng)目中也會(huì)遇到內(nèi)容層級(jí)需要多層級(jí)的表現(xiàn)，從中總結(jié)了2種方式：1.利用不拉通分割線；2.利用淺色背景底色。

不適合長(zhǎng)文或內(nèi)容多的表達(dá)

若在設(shè)計(jì)上使用了卡片式的設(shè)計(jì)風(fēng)格，但在一些長(zhǎng)文表現(xiàn)的界面建議去除卡片。長(zhǎng)文章的頁(yè)面更強(qiáng)調(diào)閱讀的沉浸感，用戶(hù)需要更多的專(zhuān)注于文字，這時(shí)候無(wú)邊的體驗(yàn)更適合。

把握好界面的分區(qū)，避免過(guò)于擁擠的排版

卡片設(shè)計(jì)具有獨(dú)特的視覺(jué)空間感，但卡片與卡片直接也會(huì)有分隔，因此在設(shè)計(jì)時(shí)更應(yīng)該對(duì)內(nèi)容進(jìn)行歸納，避免產(chǎn)生過(guò)多的小塊卡片而導(dǎo)致排版過(guò)于擁擠、凌亂或者內(nèi)容不夠?qū)挾日宫F(xiàn)。

最后總結(jié)

無(wú)論是卡片式或者拉通平鋪的方式，其最終的目的都是為了服務(wù)于內(nèi)容，我們?cè)谧鲈O(shè)計(jì)的過(guò)程中只是選擇適合于呈現(xiàn)我們內(nèi)容的一種方式。根據(jù)具體的內(nèi)容情況給出合理/合適的設(shè)計(jì)判斷才是我們需要不斷提升的關(guān)鍵點(diǎn)，切莫流于形式而忽略了內(nèi)容設(shè)計(jì)本身的重要性。

原文地址：IDfor（公眾號(hào)）