卡片式設(shè)計(jì)對(duì)于我們來說并不陌生，從設(shè)計(jì)類網(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í)希望自己通過本次的總結(jié)進(jìn)行知識(shí)沉淀，以及跟大家一起探討下卡片式的設(shè)計(jì)。

來源于日常

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

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

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

Feed流

卡片式的feed流設(shè)計(jì)是一種非常常見的設(shè)計(jì)，早在前幾年Facebook、Google+等產(chǎn)品就使用了這一方式，F(xiàn)eed流作為一種長內(nèi)容的媒介，用戶需要長時(shí)間的滑動(dòng)看內(nèi)容并篩選有效信息，卡片式設(shè)計(jì)很好的解決了內(nèi)容與內(nèi)容的區(qū)塊分隔，讓用戶在長屏幕滑動(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音樂

Tips提醒

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

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

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

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

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

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

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

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

集合型功能入口

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

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

個(gè)人主頁頂部內(nèi)容卡片

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

實(shí)際案例-美團(tuán)外賣會(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ì)，不同的人做出來的感受可能會(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)容氛圍。

投影深度

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

卡片顏色對(duì)比

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

2.邊距的設(shè)定

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

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

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

多窄少寬

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

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

內(nèi)外成比例

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

基于柵格

柵格系統(tǒng)解決了一些基礎(chǔ)的板式問題，有助于提升設(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)還是卡片外？通過了一些案例的嘗試之后，我總結(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ù)性內(nèi)容時(shí)設(shè)定在卡片外，形成最外層的主標(biāo)題。

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

標(biāo)題主要作用為2點(diǎn)：1.簡短說明每個(gè)模塊的內(nèi)容；2.讓用戶在長頁面瀏覽中起到引導(dǎo)、定位的作用。通過一些嘗試發(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)容中，讓用戶在瀏覽的過程中難以發(fā)現(xiàn)，而導(dǎo)致信息獲取缺失；3.標(biāo)題應(yīng)該與正文字號(hào)大小差異建議在6-10px，這樣可以更好的拉開差異，讓標(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í)際上沒有太多的原則問題，只要符合整體的風(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)出不同的視覺感受和風(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ī)則變得更加簡單，增加了模塊之間的可復(fù)用性和延展性。而當(dāng)內(nèi)容較多的情況下，使用卡片式設(shè)計(jì)可以有效直接的形成區(qū)域分隔，從視覺感知上就對(duì)內(nèi)容進(jìn)行了分隔，提升用戶獲取信息的效率。

提升內(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)視覺空間感

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

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

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

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

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

缺點(diǎn)及建議

任何一種設(shè)計(jì)方式都會(huì)有其利弊，最終選擇某一種其實(shí)不過就是當(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)小卡片左右邊距。

避免過多的層級(jí)

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

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

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

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

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

最后總結(jié)

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

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

一、卡片是什么？

卡片通常是指那些包含一定圖片和文本信息在內(nèi)的一個(gè)長方形，作為指向更多詳細(xì)信息的一個(gè)入口?，F(xiàn)如今，在保證界面具有優(yōu)秀可用性的同時(shí)，卡片式的設(shè)計(jì)甚至成為了平衡界面美學(xué)的默認(rèn)做法。因?yàn)榭ㄆ芊奖愕娘@示出界面中的內(nèi)容由不同的元素組成的。

1、杰出的隱喻效果

因?yàn)榭雌饋砣缤鎸?shí)世界中的卡片一樣，在界面設(shè)計(jì)中的卡片具有非常棒的隱喻效果。其實(shí)，在移動(dòng)設(shè)備出現(xiàn)之前，卡片已經(jīng)遍布我們周身——商業(yè)名片、棒球卡片、撲克牌等等，它已然成為一個(gè)應(yīng)用及其廣泛的實(shí)體性質(zhì)的交互模型。因此，對(duì)于用戶來講，他們能更直觀地意識(shí)到界面設(shè)計(jì)中的這些卡片如同實(shí)體卡片一樣都代表一定的信息。

在快速的傳遞信息時(shí)，卡片是一個(gè)優(yōu)秀的工具。拿棒球卡片來講，你需要了解的棒球運(yùn)動(dòng)員的基本信息就包含在一張小卡片的正反兩面。

2、良好的內(nèi)容組織

卡片在占用較少屏幕空間的情況下將信息有組織的劃分到不同的區(qū)域中。類似于文本段落是對(duì)語句的組織結(jié)果，卡片聚集多樣的信息形成一個(gè)連貫的內(nèi)容體。

Facebook 充分利用卡片式的設(shè)計(jì)將每個(gè)事件的概要信息打包到卡片中。卡片式的布局設(shè)計(jì)正是在諸如 Facebook 這樣的巨頭的引領(lǐng)下變得流行開來。

3、視覺上賞心悅目

基于卡片式的設(shè)計(jì)通常都嚴(yán)重依賴于其視覺效果。而卡片本身又對(duì)圖片有很強(qiáng)的依賴性。多項(xiàng)研究都已經(jīng)指出圖片確實(shí)能夠提升網(wǎng)站或應(yīng)用程序的設(shè)計(jì)效果和瀏覽體驗(yàn)，因?yàn)閳D片能夠快速有效地吸引用戶的注意力。因此，在卡片中如果能突出使用圖片，那自然會(huì)對(duì)用戶產(chǎn)生更強(qiáng)的吸引力。

不妨看看 Dribble——一個(gè)知名的專注于展示設(shè)計(jì)師作品的社區(qū)網(wǎng)站，不得不說，卡片式的設(shè)計(jì)確實(shí)是呈現(xiàn)這類信息的最合適的方式。

二、如何設(shè)計(jì)卡片？

在相同的布局下，卡片應(yīng)該保持寬度不變，但高度可以不同。其最大高度受限于所在平臺(tái)中可用空間的最大高度，不過這個(gè)高度也可臨時(shí)擴(kuò)展（比如，擴(kuò)展顯示出評(píng)論區(qū)）。

卡片可以是固定高度或可變高度

從設(shè)計(jì)美學(xué)的角度來看，卡片應(yīng)該具有一定的圓角和陰影。因?yàn)閳A角使得卡片看起來更像是一個(gè)內(nèi)容塊，而陰影則能體現(xiàn)出層級(jí)深度的效果。

這些元素在不分散用戶注意力的前提下為設(shè)計(jì)增添了一些光彩，它們也使得卡片跟頁面間看起來有層次感。

另外，我們也可以利用動(dòng)畫和動(dòng)態(tài)設(shè)計(jì)。

三、卡片的優(yōu)點(diǎn)

如果應(yīng)用得當(dāng)，卡片可以在一定方面提升應(yīng)用程序的用戶體驗(yàn)。因?yàn)樗鼈兊墓δ芴匦院托螤睿鼈儽旧沓蔀橐环N使用上更具直觀性的吸引人的界面元素。

1、摘要性的格式易于消化

你應(yīng)該已經(jīng)知道現(xiàn)如今是一個(gè)內(nèi)容為王的時(shí)代，而卡片幾乎可以被用來容納任何形式的信息，其摘要性的信息屬性也易于用戶快速消化。 就這一點(diǎn)而言，用戶通過卡片可以很容易地訪問到他們感興趣的內(nèi)容。進(jìn)而讓用戶愿意參與到對(duì)卡片的瀏覽和操作中來。

卡片集包含不同類型內(nèi)容的卡片

2、可面向響應(yīng)式的設(shè)計(jì)

關(guān)于卡片最重要的事情是它們幾乎是可以無限變形的。卡片式的設(shè)計(jì)在桌面電腦和移動(dòng)設(shè)備都工作良好，因?yàn)樗愿子谟脩粝姆绞较蚱涑尸F(xiàn)內(nèi)容。正因?yàn)榭ㄆ鳛橐粋€(gè)內(nèi)容容器，能很容易的放大或縮小，所以對(duì)于響應(yīng)式的設(shè)計(jì)來說，卡片是一個(gè)非常合適的選擇。 

最后但同樣重要的一點(diǎn)是，卡片在多設(shè)備間能創(chuàng)造出一個(gè)一致獨(dú)立的美學(xué)效果，這就是為什么它能在不同的設(shè)備間如此容易的創(chuàng)建出一致的體驗(yàn)的原因。

3、直觀的可操作性

卡片的動(dòng)作應(yīng)該是面向手指的。對(duì)于移動(dòng)端的應(yīng)用程序來說，這是卡片之所以流行起來的一個(gè)關(guān)鍵原因。這些卡片跟實(shí)體的卡片按照相同的方式起作用，讓用戶感受到很舒服的體驗(yàn)過程。用戶不需要再去思考究竟該如何操作卡片。 他們喜歡卡片的這種簡潔性，并能夠直觀的理解出翻閱一張卡片就是查看更多信息，滑動(dòng)則是切換不同的卡片。

四、在哪里使用？

1、信息流

卡片出現(xiàn)在一個(gè)信息流中時(shí)，便能夠創(chuàng)建出一系列符合自然時(shí)間軸的事件。想想看 Facebook 在新的信息流中是如何使用卡片來描述一個(gè)事件概述的。雖然總的信息流是無底限的，但是每一個(gè)卡片都是互相獨(dú)立，且包含了一定的可供操作的內(nèi)容。

2、用于發(fā)現(xiàn)感興趣的內(nèi)容

卡片允許相關(guān)的內(nèi)容不言而喻，允許用戶發(fā)現(xiàn)他們感興趣的內(nèi)容?？纯?Tinder 的卡片模式：你在向左滑動(dòng)或向右滑動(dòng)的時(shí)候，其實(shí)就是在尋找符合你品味的人。

Pinterest 在信息的動(dòng)態(tài)中使用到大頭針（用戶找到自己感興趣的內(nèi)容可以收藏），吸引用戶在不停的瀏覽中上癮。

3、對(duì)話框

既然卡片就是一個(gè)內(nèi)容容器，那么它們也可以很好的代表動(dòng)作。一個(gè)卡片里面的基本動(dòng)作就是卡片本身。 想想看 Apple 設(shè)備上的 AirDrop ，當(dāng)你收到一個(gè)數(shù)據(jù)傳輸請(qǐng)求的時(shí)候，一個(gè)卡片會(huì)彈出來提示你是同意還是拒絕。

不管你選擇哪一項(xiàng)，都只有一個(gè)動(dòng)作

4、工作流

卡片很容易將一定范圍的任務(wù)進(jìn)行歸類。拿 Trello 來舉例說明再適合不過，從 Kanban 里面看，所有的管理項(xiàng)都是完全基于卡片的，每一個(gè)板子了都填充著卡片，而每個(gè)卡片都代表一個(gè)單獨(dú)的任務(wù)。 

五、不要使用卡片的地方

1、同種（同類）內(nèi)容

對(duì)于那些沒有太多動(dòng)作的同種（同類）內(nèi)容而言，相比于卡片式的設(shè)計(jì)，使用列表（網(wǎng)格）的展現(xiàn)形式是更合適的方法。

左：在這里使用卡片分散了用戶快速瀏覽的注意力

在圖片庫中使用卡片也是不必要的，此時(shí)采用網(wǎng)格這種干凈輕量的方式會(huì)是更好的選擇，如下例中：

2、大的屏幕尺寸

卡片式的信息展現(xiàn)形式可能在小屏幕上會(huì)非常不錯(cuò)，在大屏上的話單就其視覺效果來講，也還是很棒，不過對(duì)于用戶的閱讀理解速度就會(huì)帶來很糟糕的影響了。比如大屏上的 Pinterest ：

3、重新設(shè)計(jì)現(xiàn)有的應(yīng)用程序

如果按著文中這個(gè)新的視覺角度來看，那些原本覺得你的應(yīng)用程序還挺易用的用戶可能就不會(huì)買你的賬了。 你應(yīng)該嘗試從用戶那里獲得反饋，搞清楚他們想看到的東西。有了反饋后，你可以進(jìn)行設(shè)計(jì)修改甚至重新設(shè)計(jì)，然后看看在用戶那里帶來的變化。

六、結(jié)論

我希望通過本文，你能夠理解到為何卡片式的設(shè)計(jì)會(huì)越來越流行開來。而且我相信這一趨勢(shì)在短期內(nèi)不會(huì)消亡。因?yàn)榭ㄆ还鉃g覽起來不費(fèi)力，它們更是在創(chuàng)建一致的用戶體驗(yàn)時(shí)最為靈活的布局方式之一?，F(xiàn)如今，人們?cè)趦?nèi)容消費(fèi)面前更注重快速的找到滿意的內(nèi)容，而卡片既然能很好的起到作用，且不受設(shè)備影響，難道不是很好的選擇嗎？

譯自：https://uxplanet.org/using-card-based-design-to-enhance-ux-51f965ab70cb#.2uys07u81

原文鏈接：jianshu

上面所說的形式功能的組織與呈現(xiàn)其實(shí)講的是設(shè)計(jì)排版上的問題，當(dāng)然對(duì)設(shè)計(jì)師排版功力也有相當(dāng)?shù)囊?。這種排版優(yōu)化的方法有很多種，我這里主要圍繞卡片式設(shè)計(jì)的理論進(jìn)行深入探討，相信大家對(duì)卡片式設(shè)計(jì)已非常熟悉，雖然已流行了好多年，但是設(shè)計(jì)形式并不是隨著使用年齡的增長而消失，芝加哥學(xué)派路易斯.H.沙利文提出過：“形式追隨功能”就能說明這一點(diǎn)。最近筆者在項(xiàng)目改版中也運(yùn)用了相關(guān)卡片方法，發(fā)現(xiàn)效果不錯(cuò)，所以希望借在項(xiàng)目里的思考與嘗試，拋出引子，供大家參考。

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

在生活中，我們經(jīng)常接觸到各式各樣的類似右圖中的卡片，比如撲克牌、名片、機(jī)場(chǎng)和地鐵的指示牌等等。

如上圖，大家可以看出，他們普遍具有以下特點(diǎn)：

一清晰直觀，二簡單易懂，三信息模塊化。

比如撲克牌我們可以看出雖然只有一個(gè)圖案，一組文字，但很清晰傳達(dá)出這張牌所代表的含義；又比如機(jī)場(chǎng)和地鐵的指示牌，采用了圖標(biāo)、字體元素，很清晰直觀地引導(dǎo)乘客方向，這種由文字或圖案組成的方塊樣式叫做“卡片式設(shè)計(jì)”。這種輕巧、簡潔的實(shí)物設(shè)計(jì)也被慢慢應(yīng)用到虛擬設(shè)計(jì)當(dāng)中。

如上圖，現(xiàn)在卡片式設(shè)計(jì)的應(yīng)用場(chǎng)景非常廣泛，最有代表性的是微軟Win8、Win Phone 7的metro風(fēng)格，他們也是采用了大量的卡片式設(shè)計(jì)，據(jù)說這種Metro的設(shè)計(jì)靈感也來自于機(jī)場(chǎng)、地鐵指示牌。

另外google +、 google play等很多谷歌產(chǎn)品也同樣采用了這種設(shè)計(jì)，如下圖

正是因?yàn)榭ㄆ皆O(shè)計(jì)在微軟、谷歌的產(chǎn)品界面的大量運(yùn)用，很多互聯(lián)網(wǎng)企業(yè)也紛紛采用這種設(shè)計(jì)，這是應(yīng)用在PC端的界面，內(nèi)容部分也都采用了卡片式設(shè)計(jì)，如下圖：

下圖中的移動(dòng)端的界面，模塊中可點(diǎn)擊部分也采用了卡片風(fēng)格。

這是印刷類的雜志界面，如下圖雜志里的部分展示信息，也采用了這種卡片式風(fēng)格。

卡片式設(shè)計(jì)的優(yōu)點(diǎn)

1.增強(qiáng)點(diǎn)擊感

這是諾基亞手機(jī)的win phone系統(tǒng)（下圖），系統(tǒng)桌面的所有內(nèi)容都是一個(gè)個(gè)小方塊展示，類似一個(gè)塊狀類的按鈕，讓人聯(lián)想到是可以點(diǎn)擊的操作入口，

而且每一塊入口都是有區(qū)域大?。ㄏ聢D），從而避免造成誤點(diǎn)擊。

2.排版整齊

如下圖，將信息、圖像歸類整合到一個(gè)方塊里，清晰直觀又避免頁面因?yàn)樾畔⒍喽y，卡片的排列方式是按列或者行的方式進(jìn)行對(duì)齊展示，視線沿著橫向或者縱向?yàn)g覽能快速找到想要的信息，此外，這種固定大小的卡片方塊也有利于柵格化排版。

比如下圖，頁面按5個(gè)單元進(jìn)行柵格，利用卡片方塊的展示，很輕松地計(jì)算并調(diào)整它的大小進(jìn)行柵格布局

3.信息模塊化

如下圖，這是google now的一個(gè)界面，將信息、圖像按維度分類整合到一個(gè)卡片里，能有效地避免信息散亂、同時(shí)避免信息分類不明確像這種模塊化展示有效地減少用戶思考的時(shí)間，能快速找到自己所需的信息。

4.響應(yīng)式設(shè)計(jì)

卡片方塊的高度和寬度的大小都是可以調(diào)整的，正是因?yàn)檫@種特性很適合用在響應(yīng)式設(shè)計(jì)里，卡片在不同的平臺(tái)展示，由于分辨率不同，卡片能自適應(yīng)地展示，以上是卡片設(shè)計(jì)的優(yōu)點(diǎn)。

項(xiàng)目實(shí)踐

去年做了DNSPod的項(xiàng)目改版，嘗試新的風(fēng)格探索。如官網(wǎng)和控制臺(tái)改版中，為了能讓信息更好的整合、更好地發(fā)揮不同信息的作用、發(fā)揮不同信息的功能，這次DNSPod官網(wǎng)改版中，banner、快捷入口，業(yè)務(wù)信息以及售賣模塊，也運(yùn)用了卡片式設(shè)計(jì)的方法。

DNSPod管理控制臺(tái)概覽頁

總結(jié)

在信息量大的頁面中除了重視內(nèi)容質(zhì)量外，形式功能的組織與呈現(xiàn)也是同等重要，對(duì)提高用戶獲取有效信息的效率有著非常大的幫助，這時(shí)應(yīng)用卡片式的設(shè)計(jì)方式是不錯(cuò)的選擇。

原文鏈接：isux

得益于Material Design日益增長的人氣，卡片式界面已經(jīng)隨處可見了。這種時(shí)尚且注重功能的美學(xué)，運(yùn)用塊狀的設(shè)計(jì)元素承載多種多樣的信息。如果想要利用這種多才多藝的手法，你的卡片設(shè)計(jì)必須別具一格。

色彩就是方法之一。優(yōu)美的色彩選用、令人振奮的色彩搭配、和有趣的結(jié)合，能創(chuàng)造重點(diǎn)、提升易用性，并且吸引用戶深入你的設(shè)計(jì)項(xiàng)目。

卡片式設(shè)計(jì)基礎(chǔ)

要運(yùn)用卡片來設(shè)計(jì)，有許多要注意，這些卡片會(huì)突出不同類型的數(shù)據(jù)（例如圖片、文字、按鈕、鏈接、評(píng)論、或視頻），這些數(shù)據(jù)都關(guān)聯(lián)到同一則信息。

這些可點(diǎn)擊的區(qū)塊，被設(shè)計(jì)成復(fù)古校園游戲卡牌的樣式，其中一塊區(qū)域包含了某種視覺信息，還有一小塊文字或按鈕?？ㄆL(fēng)格界面的優(yōu)點(diǎn)是，用戶能很輕易領(lǐng)悟它們的用法，使得它成為大量內(nèi)容或電商的理想方案。而且，它們易于瀏覽、適于分享、用途廣泛。

圖片來源：Urban Ministries of Durham

圖片來源：The Clymb

要開始運(yùn)用卡片設(shè)計(jì)，可以從學(xué)習(xí)卡片設(shè)計(jì)的基礎(chǔ)開始，請(qǐng)看UX Pin的《2015-2016的網(wǎng)頁設(shè)計(jì)趨勢(shì)手冊(cè)》。

你還得遵循《有效的卡片式設(shè)計(jì)完全指南》中的這7條最佳用法：

• 留白。運(yùn)用足夠的邊界和邊距來避免雜亂。
• 一張卡片一件事?？ㄆ芎喕愕木W(wǎng)站結(jié)構(gòu)。不要讓每張卡片過于復(fù)雜，破壞了這層基礎(chǔ)。
• 合適的圖片?？ㄆ械膱D總是比較小，要確保圖片清晰、裁剪得當(dāng)，適合相應(yīng)的場(chǎng)景。
• 簡潔的字體。由于文字也很小，簡潔的字體最易辨識(shí)。選用簡潔優(yōu)美的字體，避免使用裝飾性字體。
• 發(fā)揮創(chuàng)意。付出額外的努力讓它別具一格，使用諸如動(dòng)畫效果、視頻、圓角、或新穎的配色。
• 使用開放的柵格。標(biāo)準(zhǔn)的柵格有助于保持間距一致，同時(shí)包容各種尺寸和斷點(diǎn)。
• 貫徹菲茲定律。正如我們?cè)?a tabindex="-1" target="_blank">《交互設(shè)計(jì)最佳實(shí)踐》中所描述的，菲茲定律（同樣適用于卡片）建議整個(gè)卡片都可以點(diǎn)擊——而不僅僅是上面的文字或圖片。這使得用戶操作更輕松。

淺色與深色卡片

首先要面臨的抉擇，是使用淺色還是深色的配色。兩種各有利弊；白色或淺色的配色最普遍，但深色在移動(dòng)應(yīng)用上正在變得流行。

圖片來源：Dribbble

Dribbble的卡片很容易分辨、排列、和點(diǎn)擊，讓人了解某個(gè)項(xiàng)目的詳細(xì)信息。它的設(shè)計(jì)在淺色背景上使用了白色的卡片，每張圖片下方有個(gè)內(nèi)容區(qū)域顯示作品。淺色在桌面端表現(xiàn)尤其優(yōu)秀，對(duì)于眼睛很友好。

圖片來源：SB Joinery

SB Joinery則選用了深色的配色——在深色背景上使用反白文字——并在圖片上疊加了顏色，讓視覺重心停留在文字和幽靈按鈕上。彈出菜單同樣使用了深色主題。得益于粗字體和高對(duì)比度的色彩，深色風(fēng)格的卡片易讀性強(qiáng)，極其實(shí)用。

鮮艷的配色

卡片式設(shè)計(jì)的運(yùn)用主要受Material Design的影響——好的影響。設(shè)計(jì)風(fēng)格強(qiáng)調(diào)移動(dòng)端的可用性，借扁平化設(shè)計(jì)和極簡風(fēng)格之所長，遵循一套用戶日益習(xí)慣的美學(xué)風(fēng)格和技巧。

這種風(fēng)格吸收了鮮艷、高飽和的配色，從藍(lán)色到綠色、紅色。雖然不是一定要遵循這些色彩建議，但這是個(gè)好主意。加入大膽、明亮的配色，能夠創(chuàng)造重點(diǎn)和順暢的體驗(yàn)。

圖片來源：Helbak

如何充分利用飽和色？

• 用在頁頭、按鈕和行動(dòng)指令元素上。
• 作為一種有含義的背景元素使用——例如不同類型的卡片使用不同顏色。（就像Helbak.的案例）請(qǐng)注意，即使是柔和色和淺色也能美妙地套用這種方式。
• 將色彩用于主要的文字元素，提升可讀性。
• 用鮮艷的色彩疊加在圖片上，或使用雙色漸變的技巧來引導(dǎo)用戶瀏覽卡片。

用于強(qiáng)調(diào)的顏色

最后，大膽的顏色選擇，是一種強(qiáng)調(diào)特定元素的手段。例如，彩色元素能打破視覺單一，促進(jìn)交互行為。

圖片來源：Mayors Challenge 2016

The Mayors Challenge的設(shè)計(jì)充分運(yùn)用了material design的概念，卻沒有做出Google產(chǎn)品的感覺。顏色鮮艷而明亮，同時(shí)卡片在某種程度上卻非常簡單和“不明確”。圖標(biāo)、文字和鏈接中都有鮮艷色彩，所有這些暗示，都在引導(dǎo)用戶在網(wǎng)站上進(jìn)行操作。

關(guān)于卡片式界面設(shè)計(jì)有一種批判的聲音，它使各種元素看起來過于相似了——所以需要揮灑創(chuàng)意、打破陳規(guī)。

總結(jié)

色彩正是讓卡片式設(shè)計(jì)獨(dú)具一格的因素。選擇所用技巧時(shí)，要考慮色彩如何最好地與品牌相結(jié)合，并為用戶服務(wù)。

要產(chǎn)生最佳效果，就要帶著特定目的運(yùn)用色彩，通過設(shè)計(jì)吸引用戶，促使他們采取行動(dòng)。無論是使用淺色還是深色，或者是鮮艷色彩和流行混搭，色彩都能影響用戶對(duì)于設(shè)計(jì)的感知和操作方式。

譯文鏈接:http://colachan.com/post/3491

原文鏈接：https://studio.uxpin.com/blog/use-color-to-up-the-ante-on-your-ui-cards/

作者信息：
Carrie Cousins
Carrie Cousins has more than 10 years experience in the media industry, including design, editing, and writing for print and online publications. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.