簡單說下卡片式設計

0 評論 10779 瀏覽 2 收藏 5 分鐘

用10分鐘的時間快速說下卡片式設計。

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

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

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

4、強行套用卡片式設計導致比較糟糕的結果,比如百度貼吧的手機客戶端(用戶量無法掩蓋設計上的槽點):

 

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

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

當然Gmail等產品也沒有,可以好好想想為什么。

歸根結底,使用何種設計方式是由設計要解決什么問題、人們對信息的消費方式決定的,卡片式設計有它的適用范圍,設計產品時切忌勉強套用

來源:產品經理修養(yǎng) 豆瓣

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!