用10分鐘的時(shí)間快速說下卡片式設(shè)計(jì)。

1、某種程度上來說，卡片式設(shè)計(jì)是在柵格的基礎(chǔ)上更進(jìn)一步，將整個(gè)頁面的內(nèi)容切割為N多個(gè)區(qū)域，不僅能給人很好的視覺一致性，而且更易于設(shè)計(jì)上的迭代。這樣的設(shè)計(jì)在處理PC和Mobile多平臺頁面一致性時(shí)有很好的效果，正面的典型例子就是Google+了。但如果你的網(wǎng)站和手機(jī)App在整體結(jié)構(gòu)、交互方式上本來差別就非常大的話，使用卡片式設(shè)計(jì)就無法充分發(fā)揮其優(yōu)勢。

2、卡片式設(shè)計(jì)的另一個(gè)典型好處是可以將不同大小、不同媒介形式的內(nèi)容單元以統(tǒng)一的方式進(jìn)行混合呈現(xiàn)。最常見的就是圖文混排，既要做到視覺上盡量一致，又要平衡文字和圖片的強(qiáng)弱，這時(shí)卡片設(shè)計(jì)經(jīng)常有奇效。2012年的豆瓣首頁為了平衡日記、相冊、圖書、電影、活動等不同內(nèi)容元的混合呈現(xiàn)所使用的設(shè)計(jì)，本質(zhì)上也是一種卡片。

3、大多數(shù)時(shí)候，卡片式設(shè)計(jì)適合應(yīng)用于流量分發(fā)的渠道型頁面，比如這樣的內(nèi)容列表：http://hi.92wy.com/nds/
還適合應(yīng)用于碎片化內(nèi)容頁，這時(shí)的內(nèi)容消費(fèi)就在內(nèi)容渠道上完成，例如大家都熟悉的微博、pinterest
如果在內(nèi)容的detail頁使用卡片式設(shè)計(jì)，那么最好內(nèi)容本身是可以切割為不同區(qū)域的，而不是幾千字的長文，例如豌豆莢的應(yīng)用詳情頁：http://www.wandoujia.com/apps/com.tencent.mm

4、強(qiáng)行套用卡片式設(shè)計(jì)導(dǎo)致比較糟糕的結(jié)果，比如百度貼吧的手機(jī)客戶端（用戶量無法掩蓋設(shè)計(jì)上的槽點(diǎn)）：

網(wǎng)頁和App的差別很大，內(nèi)容元展示頁（帖子列表）對圖文混排的依賴也不高（不是所有貼吧都適合圖文混排的，比如各種文學(xué)吧），而帖子的內(nèi)容往往又很長，在消費(fèi)帖子內(nèi)容時(shí)不僅對卡片無法感知，而且還在屏幕兩端留了實(shí)線，增加了壓迫感。

5、還有一個(gè)容易忽視的坑是，卡片式設(shè)計(jì)對頁面空間的消耗非常大，并且將內(nèi)容元和內(nèi)容元之間強(qiáng)行割裂，導(dǎo)致一屏呈現(xiàn)的信息量很小。所以當(dāng)用戶的瀏覽是需要大范圍掃視、接收大量相關(guān)性的信息然后再過濾篩選時(shí)，強(qiáng)行使用卡片式設(shè)計(jì)會讓用戶的使用效率降低，帶來不必要的麻煩。
一個(gè)常見的例子是，最推崇卡片式設(shè)計(jì)的Google，在搜索結(jié)果頁里也依然沒有采用卡片：

當(dāng)然Gmail等產(chǎn)品也沒有，可以好好想想為什么。

歸根結(jié)底，使用何種設(shè)計(jì)方式是由設(shè)計(jì)要解決什么問題、人們對信息的消費(fèi)方式?jīng)Q定的，卡片式設(shè)計(jì)有它的適用范圍，設(shè)計(jì)產(chǎn)品時(shí)切忌勉強(qiáng)套用

來源：產(chǎn)品經(jīng)理修養(yǎng) 豆瓣