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

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

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

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

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

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

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

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

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

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