在本文中，作者对卡片式设计举行了梳理：从卡片式设计的由来、到卡片式设计的种种形态和卡片式设计的优瑕玷，希望通过此文能够加深你对卡片式设计的熟悉。

01 卡片式设计的由来

卡片设计来源于早已存在于人类生涯的种种现实物品。

举个例子，显示器、手机、手刺，一封信、等等，都是自力承载信息的一个个卡片。人们不用把电影院搬走就可以通过电视观看到差别的内容载体，这时刻电视充当的是内容载体的入口。而手刺盒书信这种卡片感就更强了，你可以把一封信折叠起来，利便携带，等到需要的时刻再舒睁开来，举行详细阅读。

正是人类生涯早已充斥着“卡片设计”，以是当我们手中的装备界面有了“卡片式设计”的时刻，人们反而以为使用起来很利便和有熟悉感。

而我们现在用的系统界面的卡片式设计来自那里呢？

最早应用卡片式设计并不是google 的Material Design 也不是苹果的iOS Design，而是palm webOS。

2009年palm公布的webOS系统的多义务管理和卡片式窗口征服了公布会现场的所有观众。惋惜由于种种BUG和代码的陈旧导致没有办法在市场占好先机。然则却也留下了很优异的遗产。

2009年CES公布会

webOS中，传统意义上的程序观点被弱化，取而代之的是卡片系统。所有的义务均以卡片的形式泛起。任何时刻点击手势区，都市进入卡片视图。卡片视图中展现出正在运行的义务，这些义务以多窗口的形式出现。你可以看到正在运行的所有义务，可以通过滑动举行切换，点击后进入义务，这样一种操作方式，是极其美妙的。

更为重要的是webOS 中的多义务的流通度可以获得很好的保证，可以说webOS的多义务是天下上最好的移动系统多义务平台。

图片来自：Tim Schofield

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

放眼望去，实在我们使用的app或多或少都有用到卡片式的设计，最常见的一种形态则是首页的轮播Banner

淘宝（左）、Appstore（右）

不论是图文内容照样视频内容都可以通过卡片举行承载：

民众点评（左）、花瓣（右）

大至系统级的App义务界面，小至一个文本条目，卡片式设计的形态各异，多种多样。险些涵盖了所有能想到的设计。

03 卡片式设计的优点

而为什么那么多设计师热衷于卡片式设计呢？固然是由于优点极多：

1. 自力、聚焦

卡片设计由于会跟其他内容有自然的断层，以是会更容易形成自力的视觉焦点。

2. 轻巧天真

相比于从传统列表点击进内容详情页，卡片可以直接点击睁开直接浏览详情，交互体验更轻，而且随时可以恢复卡片模式，十分天真。

Appstore首页

在淘宝购物如何省钱，淘宝买东西省钱的方法

Appstore首页

3. 自由组合

参考淘宝首页和appstore首页可以看出，差别形态的内容例如轮播广告、入口、推荐位、列表、文章通过承载于卡片之中，可以举行自由排版组合。没有了死板的排版规则，对于设计师甚至客户端工程师来说，都是十分的利便，少了林林总总的限制。

4. 多终端兼容性好

差别终端由于屏幕的差别，导致做设计的时刻需要做设计兼容。好比bootstrap框架在pc端的栅格兼容。屏幕从540一直往上扩展，都能完善显示。这里应用的正是卡片式设计，用卡片容器包着内容。

Bootstrap card grid

不仅仅是一设计兼容多终端的情形适用，即便是针对差别终端重新做设计也是需要做品牌或者设计元素的延伸。如果能保持样式的视觉基本一致，会削减许多的学习成本。

5. 多态操作

卡片是可操作性十分强的设计模式，可以纵向滑动，可以横向转动，可以点击举行上下舒展，还可以长按拖动等等。

图片来自：Behance

6. 视觉恬静感

卡片设计由于卡片自己的上下Padding（内边距）和卡片间的Margin（外间距），往往带有很足够的空间留白。加上通过轻投影形成合理的层次感，看上去既自然又恬静，而且对于靠近真实天下的设计，人会自然而然发生熟悉感和亲切感。以是从视觉体验上，卡片式设计也是完胜。

图片来自：Behance

04 卡片式设计的瑕玷

只管有这么多的优点，然则我一直都以为天下上是没有绝对完善的设计体验。以是人类对交互体验和美感的探索脚步才会从没有停过。而卡片式设计也有它的瑕玷：

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

抛开卡片设计形态不说，单单是卡片设计自己就比通俗列表的设计需要占用更多的空间。

图片来自：我自己

加上许多卡片设计差别的内容（视频、图文）都市跟单纯的列表有很大的差别，以是需要占用的空间会只多不少。

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

由于有上面提到的瑕玷，以是有些场景就不适适用卡片式设计了。

1）上下文具有连续性的内容，例如：文章翻页

详细请体验下UC浏览器的阅读模式，上滑翻页的时刻，会马上讲刷新出来的下一页文字无缝连接上一页的文字，沉醉式阅读是不应该发生阻碍或者断层的。

2）依赖于文本举行阅读的，简朴的，重复的内容，例如：文章列表、谈天列表

今日头条（左）、微信（右）

3）需要同时获取而且对照多条列表举行对照的内容，例如：搜索效果

京东（左）、淘宝（右）

上述这些页面使用了卡片式设计会导致阅读效率降低，使设计失去优势。