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

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

來源于日常

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

UI設(shè)計中卡片的使用場景

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

Feed流

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

實際案例-淘寶微淘

瀑布流設(shè)計

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

實際案例-Pinterest

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

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

實際案例-QQ音樂

Tips提醒

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

實際案例-淘票票會員提醒

結(jié)合手勢的單塊可互動內(nèi)容

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

實際案例-探探首頁

卡券類設(shè)計

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

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

集合型功能入口

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

實際案例-淘寶微淘關(guān)注賬號
 

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

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

實際案例-美團外賣會員

規(guī)則探討

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

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

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

卡片形體

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

投影深度

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

卡片顏色對比

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

2.邊距的設(shè)定

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

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

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

多窄少寬

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

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

內(nèi)外成比例

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

基于柵格

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

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

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

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

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

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

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

字體是否加粗

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

4.圓角的規(guī)則

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

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

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

圓角大小差異對比

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

5.寬窄間距對比

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

優(yōu)點分析

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

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

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

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

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

增強視覺空間感

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

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

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

增強可點性

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

缺點及建議

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

橫向空間利用率降低

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

避免過多的層級

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

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

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

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

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

最后總結(jié)

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

原文地址：IDfor（公眾號）

一、卡片是什么？

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

1、杰出的隱喻效果

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

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

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

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

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

3、視覺上賞心悅目

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

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

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

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

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

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

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

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

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

如果應(yīng)用得當(dāng)，卡片可以在一定方面提升應(yīng)用程序的用戶體驗。因為它們的功能特性和形狀，它們本身成為一種使用上更具直觀性的吸引人的界面元素。

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

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

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

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

關(guān)于卡片最重要的事情是它們幾乎是可以無限變形的。卡片式的設(shè)計在桌面電腦和移動設(shè)備都工作良好，因為它以更易于用戶消化的方式向其呈現(xiàn)內(nèi)容。正因為卡片作為一個內(nèi)容容器，能很容易的放大或縮小，所以對于響應(yīng)式的設(shè)計來說，卡片是一個非常合適的選擇。 

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

3、直觀的可操作性

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

四、在哪里使用？

1、信息流

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

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

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

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

3、對話框

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

不管你選擇哪一項，都只有一個動作

4、工作流

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

五、不要使用卡片的地方

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

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

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

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

2、大的屏幕尺寸

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

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

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

六、結(jié)論

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

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

原文鏈接：jianshu

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

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

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

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

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

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

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

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

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

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

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

卡片式設(shè)計的優(yōu)點

1.增強點擊感

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

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

2.排版整齊

如下圖，將信息、圖像歸類整合到一個方塊里，清晰直觀又避免頁面因為信息多而散亂，卡片的排列方式是按列或者行的方式進行對齊展示，視線沿著橫向或者縱向瀏覽能快速找到想要的信息，此外，這種固定大小的卡片方塊也有利于柵格化排版。

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

3.信息模塊化

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

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

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

項目實踐

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

DNSPod管理控制臺概覽頁

總結(jié)

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

原文鏈接：isux

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

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

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

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

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

圖片來源：Urban Ministries of Durham

圖片來源：The Clymb

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

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

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

淺色與深色卡片

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

圖片來源：Dribbble

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

圖片來源：SB Joinery

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

鮮艷的配色

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

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

圖片來源：Helbak

如何充分利用飽和色？

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

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

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

圖片來源：Mayors Challenge 2016

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

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

總結(jié)

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

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

譯文鏈接: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.