本文对卡片设计进行了梳理:从卡片设计的起源，到卡片设计的各种形式以及卡片设计的优缺点。希望这篇文章能加深你对卡片设计的理解。

01 卡片式设计的由来

卡片设计来源于人类生活中长期存在的各种实物。

比如一个显示器，一部手机，一个手指头，一封信，等等，都是卡片本身承载着信息。人们可以在不移动电影院的情况下，通过电视观看不同的内容载体。此时此刻，电视充当了内容载体的入口。手刺盒里字母的卡感更强。你可以把一封信折叠起来，方便携带，然后在需要的时候打开，进行详细阅读。

正是人类的生活早就充满了“卡片设计”，所以当我们手中的设备界面有了“卡片设计”的瞬间，人们觉得用起来很方便，很熟悉。

而我们现在使用的系统接口的卡片设计是从哪里来的？

卡片设计最早的应用不是谷歌的材质设计，也不是苹果的iOS设计，而是palm webOS。

2009年，palm公布了webOS系统的多义务管理和卡片窗口，在公布会上征服了所有观众。可惜由于各种bug和过时的代码，没有办法在市场上领先。然而，它也留下了一份优秀的遗产。

2009年消费电子展

在webOS中，传统的过程观被弱化，被卡片系统所取代。所有的义务都以卡片的形式出现。随时点击手势区，城市进入卡片视图。卡片视图显示正在运行的义务，以多窗口的形式出现。可以看到所有正在运行的义务，可以滑动切换，然后点击进入义务。这种操作方式极其奇妙。

更重要的是，webOS中多债的流动性可以得到很好的保障。可以说webOS中的多义务是世界上最好的移动系统多义务平台。

图片来自:蒂姆·施菲尔德

02 卡片式设计中的种种形态

环顾四周，其实我们使用的app或多或少都有用过的卡片式设计，最常见的形式就是首页的轮播横幅。

淘宝(左)，Appstore(右)

无论是图文内容还是视频内容，都可以用卡片来承载:

人民评论(左)，花瓣(右)

大到系统级App义务界面，小到文字项，卡片设计都有不同的形式和品种。几乎涵盖了所有能想到的设计。

03 卡片式设计的优点

还有为什么那么多设计师热衷于卡片设计？是由于许多优点:

1. 自力、聚焦

因为卡片设计会和其他内容有天然断层，会更容易形成独立的视觉焦点。

2. 轻巧天真

相比从传统列表中点击进入内容详情页，卡片可以直接点击打开浏览详情，交互体验更轻，随时可以恢复卡片模式，非常幼稚。

Appstore主页

在淘宝购物如何省钱，在淘宝购物如何省钱。

App Store首页

3. 自由组合

参考淘宝首页和appstore首页可以看到，轮播广告、门户、推荐槽、列表、文章等不同形式的内容，都可以通过卡片携带的方式自由排版组合。没有死板的排版规则，对于设计师甚至客户端工程师来说都非常方便，限制也少。

4. 多终端兼容性好

由于屏幕不同，不同的终端在设计时需要设计兼容。例如，bootstrap框架在pc端是网格兼容的。屏幕从540一直延伸到顶部，可以完美显示。这里应用的是卡片设计，内容被包装在卡片容器中。

自举卡网格

不仅设计兼容多种终端，甚至针对不同终端重新设计也是品牌或设计元素的延伸。如果我们能基本保持风格的视觉一致性，我们会削减很多学习成本。

5. 多态操作

卡片是一种可操作性很强的设计模式，可以垂直滑动，水平旋转，通过点击、拖动等方式上下拉伸。

图片来自:Behance

6. 视觉恬静感

由于卡片的上下填充(内边距)和卡片之间的边距(外间距)，卡片设计往往有足够的空空间。此外，通过光线投射形成合理的层次感，看起来自然而安静，人们自然会对贴近现实世界的设计感到熟悉和亲切。所以从视觉体验上来说，卡片设计也是完胜。

图片来自:Behance

04 卡片式设计的瑕玷

虽然优点那么多，但我始终认为，世界上没有绝对完美的设计体验。所以交互体验和美感的探索永远不会停止。而且卡片设计也有它的缺点:

虚耗空间，导致一屏展现的信息量很少

抛开卡片设计的形式不谈，单是卡片设计就比流行榜的设计占用了更多的空空间。

图片来自:我自己

卡片设计差异多的内容(视频、图文)和简单的列表差别很大，只会多占很多空。

不适用使用卡片设计的场景

由于上面提到的缺陷，有些场景不适合卡片设计。

1)具有连续上下文的内容，例如，在文章中翻页

请详细体验一下UC浏览器的阅读模式。当你向上滑动翻页时，你会马上说刷新后的下一页与上一页无缝衔接。沉醉的阅读不应该被阻碍或打断。

2)依赖于阅读文本的简单重复的内容，如文章列表和聊天列表

今日头条(左)、微信(右)

3)需要同时获取并与多个列表进行比较的内容，比如搜索效果

JD.COM(左)和淘宝(右)

在这些页面中使用卡片设计会降低阅读效率，使设计失去优势。