编辑导语：在很多设计页面上我们都可以看见卡片式的设计板块，比如现在电商平台首页可以看见不同板块就是不同内容的设计，便于用户查找；本文作者分享了关于卡片式的设计技巧，我们一起来了解一下。

01 卡片式设计的由来

卡片这一概念实际上源于生活，用于承载信息，最直观的形态是名片和书信，便于携带，可用于交换信息；除此之外，我们的便利贴、工牌、身份证、交通卡等等，都可以作为独立承载信息的卡片。

因为在现实生活中存在着这些“卡片”的具体参考物，所以卡片式设计的理解成本和学习成本都相对较低，同时还具备了绝佳的隐喻效果。

提到卡片式设计的发展，通常会提到以下的时间点：

• 2007 年乔布斯发布的初代 iPhone 揭开了智能手机时代的帷幕，拟物化风格兴起，数字世界和现实世界建立起映射关系；
• 2010 年微软在 Windows Phone 7 中引入 Metro UI，基于平面设计和排版的原则，采用大块面大文字的风格，类似卡片的设计风格；
• 2013 年苹果推出 iOS7 系统（同年推出 iPhone 5s 和 iPhone 5C），简洁清晰的扁平化风格大热，给卡片式设计的推广打造了良好的氛围；
• 2014年 Google 宣布 Material Design ，运用卡片式设计、层次排版、材料质感等为多平台提供间距外观和功能的设计语言。

很多人没有注意到，卡片式设计真正的源头是 Palm 的 webOS 系统。2009 年 1 月份的 CES 大会上，palm 发布了形似“鹅卵石”的初代 Plam Pre 手机，以及这台手机引人注目的系统—— webOS，该系统具备的多任务管理和卡片式窗口成为了当时的经典交互，这是卡片式设计的第一次公开亮相。

CES 大会上，设计主管 Matias Duarte 正在演示多任务管理功能

按下 home 键，所有正在运行的应用程序都以卡片的形式呈现在界面上，我们可以长按来改变运行程序之间的顺序，也可以横滑浏览，选择需要操作的程序点击进入；这在当时是非常巨大的变革，用户可以像在现实世界中进行文件收纳那样，移动卡片管理正在运行的程序，所有的操作都变得非常直观。

现在对用户来说，对程序有了多一层维度的理解，感知哪些程序正在运行，可以快速进行切换。

Pre 下方的手势触控区，对比 iPhone X 的操作是不是感觉很熟悉（图片：Tim Schofield）

当时的 iPhone 追求极简，对硬件进行了极大的改变，正面仅保留了一个物理按键，Pre 不甘落后，采用了手势触控区作为产品的亮点（同时保留了滑盖式的物理键盘）。

现在反观 iPone X 的操作，和 Pre 非常相似，都是用底部触控结合卡片式设计进行操作，这么看 Pre 的设计在当时已经非常超前，甚至有机会在 iPhone 之前去除 home 键。

02 卡片式设计的应用场景

我们整理出卡片式设计常见的几种形式，将其分为三大类，结合实例进行说明，了解在不同的应用场景下适合使用什么样的。