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

 來源：UI中國

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

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

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

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

卡片式設(shè)計(jì)理念

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

內(nèi)容整合

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

卡片就是一個(gè)承載信息的“容器”

簡潔明了

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

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

美觀

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

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

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

易操作

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

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

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

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

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

Facebook

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

Tinder

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

Trello

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

AirDrop

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

Behance

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

微軟

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

總結(jié)

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

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