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

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

來源于日常

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

UI設計中卡片的使用場景

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

Feed流

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

實際案例-淘寶微淘

瀑布流設計

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

實際案例-Pinterest

左右滑動組合型內容

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

實際案例-QQ音樂

Tips提醒

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

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

結合手勢的單塊可互動內容

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

實際案例-探探首頁

卡券類設計

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

實際案例-京東領券中心

集合型功能入口

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

實際案例-淘寶微淘關注賬號
 

個人主頁頂部內容卡片

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

實際案例-美團外賣會員

規則探討

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

1.卡片的質感打磨

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

卡片形體

就像圖標的圖形設計一樣，不一樣的形體也能表達出不一樣的氣質，因此在設計的時候我們需要依據整體的風格進行表達。異形卡片的設計，可以讓原有方方正正的卡片表達出差異化，從造型上打破一些傳統的處理方式，再結合一些IP人物元素可以更加深入的表達出具體的內容氛圍。

投影深度

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

卡片顏色對比

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

2.邊距的設定

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

基于內容的簡單規則

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

多窄少寬

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

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

內外成比例

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

基于柵格

柵格系統解決了一些基礎的板式問題，有助于提升設計的規范性，讓設計更加有跡可循。在設定卡片式的邊距時可以適當應用刪格系統，讓邊距與內容形成固定的關系，這樣可以幫助整體的卡片設計更加具有細節和規則。

4.卡片的標題設定

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

卡片內或外的對比

在項目設計中讓我較為糾結的是：標題應該在卡片內還是卡片外？通過了一些案例的嘗試之后，我總結了一個規則（需要依據內容的形態而進行設計）：當卡片內容是獨立的模塊或模塊中只有一個大標題時可設定在卡片內；當卡片內容是以組合呈現或者具有延續性內容時設定在卡片外，形成最外層的主標題。

標題的字號設定

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

字體是否加粗

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

4.圓角的規則

圓角的設定實際上沒有太多的原則問題，只要符合整體的風格調性即可。當然不同的圓角也能表達出不同的質感，大圓角表達柔和、小圓角表達硬朗。

圓角的規則設定

以卡片的圓角作為基礎的參考值往內推算整體的圓角使用規范，卡片與卡內的元素形成合理的比例規則，而非隨意根據“經驗”進行設定。

圓角大小差異對比

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

5.寬窄間距對比

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

優點分析

選擇某一種設計方式的重點在于我們了解這種方式的優點，并且可以把這些優點融合到我們的設計當中。在項目設計中，我總結了幾點卡片式設計的優點。

優化模塊化，提升內容區域感

模塊化的設計也是我們日常中會應用到的方法，結合卡片式的設計可以讓模塊化的規則變得更加簡單，增加了模塊之間的可復用性和延展性。而當內容較多的情況下，使用卡片式設計可以有效直接的形成區域分隔，從視覺感知上就對內容進行了分隔，提升用戶獲取信息的效率。

提升內容獨立性

在組合型的內容設計上，使用卡片式設計可以讓每個小塊內容呈現相對獨立的展現特性，結合模塊化的設計，可以在一大片關聯的內容中，做到既統一又相對獨立。

增強視覺空間感

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

增強視覺表現力

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

增強可點性

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

缺點及建議

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

橫向空間利用率降低

卡片式設計的存在左右邊距，因此在有限的屏寬內內容橫向區域相比于拉通式設計有所減少，在內容較多的情況下可以適當調小卡片左右邊距。

避免過多的層級

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

不適合長文或內容多的表達

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

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

卡片設計具有獨特的視覺空間感，但卡片與卡片直接也會有分隔，因此在設計時更應該對內容進行歸納，避免產生過多的小塊卡片而導致排版過于擁擠、凌亂或者內容不夠寬度展現。

最后總結

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

原文地址：IDfor（公眾號）

一、卡片是什么？

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

1、杰出的隱喻效果

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

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

2、良好的內容組織

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

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

3、視覺上賞心悅目

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

不妨看看 Dribble——一個知名的專注于展示設計師作品的社區網站，不得不說，卡片式的設計確實是呈現這類信息的最合適的方式。

二、如何設計卡片？

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

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

從設計美學的角度來看，卡片應該具有一定的圓角和陰影。因為圓角使得卡片看起來更像是一個內容塊，而陰影則能體現出層級深度的效果。

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

另外，我們也可以利用動畫和動態設計。

三、卡片的優點

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

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

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

卡片集包含不同類型內容的卡片

2、可面向響應式的設計

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

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

3、直觀的可操作性

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

四、在哪里使用？

1、信息流

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

2、用于發現感興趣的內容

卡片允許相關的內容不言而喻，允許用戶發現他們感興趣的內容。看看 Tinder 的卡片模式：你在向左滑動或向右滑動的時候，其實就是在尋找符合你品味的人。

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

3、對話框

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

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

4、工作流

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

五、不要使用卡片的地方

1、同種（同類）內容

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

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

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

2、大的屏幕尺寸

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

3、重新設計現有的應用程序

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

六、結論

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

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

原文鏈接：jianshu

#p#副標題#e#

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

卡片式設計的定義

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

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

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

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

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

另外google +、 google play等很多谷歌產品也同樣采用了這種設計，如下圖

正是因為卡片式設計在微軟、谷歌的產品界面的大量運用，很多互聯網企業也紛紛采用這種設計，這是應用在PC端的界面，內容部分也都采用了卡片式設計，如下圖：

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

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

卡片式設計的優點

1.增強點擊感

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

而且每一塊入口都是有區域大小（下圖），從而避免造成誤點擊。

2.排版整齊

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

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

3.信息模塊化

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

4.響應式設計

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

項目實踐

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

DNSPod管理控制臺概覽頁

總結

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

原文鏈接：isux

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

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

卡片式設計基礎

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

這些可點擊的區塊，被設計成復古校園游戲卡牌的樣式，其中一塊區域包含了某種視覺信息，還有一小塊文字或按鈕。卡片風格界面的優點是，用戶能很輕易領悟它們的用法，使得它成為大量內容或電商的理想方案。而且，它們易于瀏覽、適于分享、用途廣泛。

圖片來源：Urban Ministries of Durham

圖片來源：The Clymb

要開始運用卡片設計，可以從學習卡片設計的基礎開始，請看UX Pin的《2015-2016的網頁設計趨勢手冊》。

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

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

淺色與深色卡片

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

圖片來源：Dribbble

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

圖片來源：SB Joinery

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

鮮艷的配色

卡片式設計的運用主要受Material Design的影響——好的影響。設計風格強調移動端的可用性，借扁平化設計和極簡風格之所長，遵循一套用戶日益習慣的美學風格和技巧。

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

圖片來源：Helbak

如何充分利用飽和色？

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

用于強調的顏色

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

圖片來源：Mayors Challenge 2016

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

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

總結

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

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

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