如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

 來源：UI中國

在現在這個信息大爆炸的時代，網頁和app所需要展示的內容越來越多。以前那種簡單堆砌式的頁面設計已經無法滿足現在用戶的需求了。用戶見的越多，也變的越來越“挑剔”。對于一款app來說，他們除了要求界面好看之外，也要易于操作，簡單易懂。那么我們如何在注重保障用戶體驗的前提下還能表現如此繁雜的內容呢？卡片式設計應運而生了。

什么是卡片式設計？

卡片式設計的“卡片”其實是交互信息的載體，通常以矩形的形式呈現。這種樣式很像我們日常生活中用到的卡片，比如名片、信用卡和球星卡等。所以我們形象的稱這種設計風格為卡片式設計。

這張球星卡正反兩面印有這名球員的基本信息。

卡片式設計理念

卡片式設計具有很強的兼容性。在新聞類網站和美食類app，你都可以看到它的身影。那么卡片式設計究竟有著什么樣的魅力讓它如此的受歡迎呢？

內容整合

卡片式設計將內容劃分到不同的卡片上，每一張卡片代表著同一邏輯類型的內容?？ㄆ木仃囆闻挪伎梢院芎玫囊龑в脩舻囊暰€。傳統的列表設計模式，我們只可以縱向的瀏覽內容，但是卡片式設計可以讓用戶沿著縱向和橫向有序的進行瀏覽。這種瀏覽方式更加的，用戶可以更快的發現他們感興趣的內容。

卡片就是一個承載信息的“容器”

簡潔明了

我曾經說過一款app或者一個網站其實就是一本書。我們設計師就是這本書的作者，我們要讓這本書為讀者(用戶)所接受，首先我們就應該讓它通俗易懂?，F在這種快節奏的生活方式，人們不愿意靜下心來讀大部頭?？ㄆ皆O計就將頁面的內容進行分割整合，用戶一眼就能看明白。

當我們說到卡片式設計的時候，簡潔這個詞應該第一個想到。Carrie Cousins說過“一張卡片一條信息”。一個卡片上可以展示多條信息，但是要做到有側重，每張卡片要突出表現一條信息或者內容。

美觀

卡片式設計中卡片其實就是帶有文字與圖像的矩形。研究表明，圖像的使用可以有效的吸引用戶的注意力。帶有圖片的頁面對于用戶來說，遠比通篇文字的新聞通稿式頁面有吸引力的多。

我們應該使用簡單的字體和易讀的配色。（文字應該是最顯眼了，選用一個足夠對比度的純色作為背景）

不要使用過多的字體。大部分情況下，一個卡片中一種字體就足夠了。

易操作

現實生活中，你接住別人遞給你的名片，你將信用卡從pos機中刷過，你將酒店房卡插進卡槽。這一切都是需要手指來完成?，F實的卡片設計的很適合手指操作，虛擬的卡片也同樣如此。我們可以點擊卡片來獲取更多信息，滑動卡片來看下一條內容，這些操作手指都很容易實現。

適合響應式設計

我們都知道你的app和網站在不同的設備下保持適配是一件很重要的工作。而卡片式設計就能很好的幫助我們來完成這一點?？ㄆ皆O計從根本上來說就是將頁面內容進行分解，然而再整合一個無法再進行分解的元素。而響應式設計要求的就是我們可以根據屏幕尺寸的大小對頁面內容就行調整?？ㄆ皆O計就可以對頁面內容進行分割重組來適應不同的屏幕。比如這個Google在手機設備上顯示一個卡片，pad端顯示兩個卡片。

而卡片本身還具有很強的伸縮性，可大可小?？ㄆ皆O計可以在不同大小的屏幕中仍保持視覺風格的統一。傳統的列表排布模式很難做到適配不同屏幕的情況下還保持視覺風格的統一。卡片的高度可以根據屏幕尺寸進行相應的調整。

卡片式設計的經典案例

Facebook

Facebook中好友的每條動態都是以一張卡片的形式展現的。用戶可以很快的完成對頁面信息的讀取。你可以不斷的往下滑查看更多的好友動態。你也可以看到多少人點贊，多少人評論與分享。這些功能誘導用戶積極參與互動，增加傳播性。

Tinder

Tinder是一款交友軟件，其頁面設計的很簡單但是很精致。主體就是一張附近用戶的照片，你如果喜歡可以就向右滑動卡片，不喜歡就想左劃，就是這么簡單。很適合拇指操作。

Trello

卡片式設計很適合任務列表類的頁面。Trello就是一個很出色的例子，在這里做了一個卡片式的任務面板，其中每張卡片代表著一個獨立的任務。

AirDrop

卡片可以用來承載內容，也可以用來表示動作。Apple的AirDrop功能，當對方想給你傳送文件的時候，你就會收到一個請求。我們可以做一個卡片式的彈出框來完成這個交互事件。

Behance

卡片式設計使頁面如此的簡單，所以用戶的注意力都放在內容上面了，內容也會更容易的引起用戶的注意力。Behance就是一個卡片式設計的網站，每張卡片代表了一個作品，里面提供了作者姓名，多少瀏覽者點擊了這張卡片，多少人轉載了它。

微軟

2010年，微軟推出了Metro UI。微軟將原本擬物化設計統統拍扁，陰影，高光，質感一律不要。這種扁平化的設計風格使整個頁面簡潔而美觀，用戶將更多的注意力放在頁面內容上。在這里卡片不僅僅是一個設計元素，還是為頁面交互打下基礎。

總結

卡片式設計不僅僅體驗在頁面外觀上，它為我們提供了一種靈活的布局方式，流暢的用戶體驗。當然以上只是我的一家之言。每個人對卡片式設計都會有自己的看法與理解。在我看來，卡片式設計依舊會流行一段時間，繼續在app與網頁設計中占有一席之地。

藍藍設計( www.li-bodun.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務