如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

 來源：UI中國

在現(xiàn)在這個信息大爆炸的時代，網(wǎng)頁和app所需要展示的內(nèi)容越來越多。以前那種簡單堆砌式的頁面設(shè)計已經(jīng)無法滿足現(xiàn)在用戶的需求了。用戶見的越多，也變的越來越“挑剔”。對于一款app來說，他們除了要求界面好看之外，也要易于操作，簡單易懂。那么我們?nèi)绾卧谧⒅乇Ｕ嫌脩趔w驗的前提下還能表現(xiàn)如此繁雜的內(nèi)容呢？卡片式設(shè)計應(yīng)運而生了。

什么是卡片式設(shè)計？

卡片式設(shè)計的“卡片”其實是交互信息的載體，通常以矩形的形式呈現(xiàn)。這種樣式很像我們?nèi)粘Ｉ钪杏玫降目ㄆ?，比如名片、信用卡和球星卡等。所以我們形象的稱這種設(shè)計風格為卡片式設(shè)計。

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

卡片式設(shè)計理念

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

內(nèi)容整合

卡片式設(shè)計將內(nèi)容劃分到不同的卡片上，每一張卡片代表著同一邏輯類型的內(nèi)容?？ㄆ木仃囆闻挪伎梢院芎玫囊龑?dǎo)用戶的視線。傳統(tǒng)的列表設(shè)計模式，我們只可以縱向的瀏覽內(nèi)容，但是卡片式設(shè)計可以讓用戶沿著縱向和橫向有序的進行瀏覽。這種瀏覽方式更加的，用戶可以更快的發(fā)現(xiàn)他們感興趣的內(nèi)容。

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

簡潔明了

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

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

美觀

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

我們應(yīng)該使用簡單的字體和易讀的配色。（文字應(yīng)該是最顯眼了，選用一個足夠?qū)Ρ榷鹊募兩鳛楸尘埃?/span>

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

易操作

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

適合響應(yīng)式設(shè)計

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

而卡片本身還具有很強的伸縮性，可大可小?？ㄆ皆O(shè)計可以在不同大小的屏幕中仍保持視覺風格的統(tǒng)一。傳統(tǒng)的列表排布模式很難做到適配不同屏幕的情況下還保持視覺風格的統(tǒng)一?？ㄆ母叨瓤梢愿鶕?jù)屏幕尺寸進行相應(yīng)的調(diào)整。

卡片式設(shè)計的經(jīng)典案例

Facebook

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

Tinder

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

Trello

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

AirDrop

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

Behance

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

微軟

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

總結(jié)

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

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)