卡片式设计是一种整洁的信息容纳方式。它已成为平衡简洁审美与简单可用性的一种默认选项。在Pinterest和Facebook首次采用这种设计风格后，它的影响力逐渐扩散到各行各业。

Pinterest推出了这种将一个独立主题中相关度最高的信息组织在一起，放置在单独的信息块中的设计思路。

如果实施得当，卡片式能提高APP的UX面貌。在这篇文章中，我会介绍5种关于卡片式的实用技巧，并提供一些有用的案例。

1. 遵循“一张卡片，一个概念”的原则

卡片中的所有内容必须指向同一主题。卡片可包含多种设计元素，但每种元素都必须汇聚到一个信息点上。这样的设计可以让用户选择自己想要阅读或分享的内容。

一个区块（卡片）包含一块用户交互区

2. 整块卡片可点击

遵循菲茨定律，允许用户点击卡片的任何位置，而不仅限于文本链接或图片。更大的点击区域对于触摸屏和鼠标设备都能从总本质上提升可用性。

要点：卡片区域可适当采用轻微下沉阴影来表示深度，以此作为可点击的视觉标志物。

3. 使卡片从视觉上令人愉悦

良好的设计规范和优秀的可用性是卡片式设计脱颖而出的要点。只要在美学上稍作修饰，你的卡片式设计就能为人熟悉，同时依然具有创意。

当卡片式进入实质设计阶段，你需要关注以下几个要点：

图片

大量使用图片是基于卡片设计的一大优势。研究表明图片能提升设计品质。强调使用图片让卡片式设计更有吸引力。

阴影和斜度

阴影和斜度对使用户熟悉卡片式设计大有帮助，这样能让他们？？？？（这里不知道怎么说才通顺）。但仔细思考你该如何使用阴影和斜度：如果阴影投射到所有转角和边缘，卡片的拟物化错觉就会被打破。

圆角的卡片式设计看起来跟扑克牌非常相似。

排版

你也可以用文字的艺术来吸引用户的注意。所有卡片式设计的元素都需要保证易读易懂。你需要最大化地保证设计的可读性：

• 选择常规字体和易读的字体色系（字体在放置于有充分对比度的纯色背景上时最易读。）
• 尽量限制字体数量。多数情况下一种字体就够了。

4. 限制卡片上的内容

卡片通常是简短的，同时提供入口用来展示详情，而不是全盘展示在第一层卡片上。当在卡片式插入过多内容，卡片会变得过长或过宽，这样就失去原有的象征，不再像一张卡片了。

下面的例子为你展示给予卡片式设计的用户界面。注意中间的卡片，它的问题在于卡片内填充了过量的内容，造成了浏览上的困难。

5. 充分利用动作和动效

如果使用得当，动效能给用户体验带来极大助力。它能帮用户熟悉给予卡片式的界面，同时在每张卡片的不同状态之间建立可视化关系。

视觉提醒

视觉提醒能帮助用户更好的理解如何与用户界面进行交互。这种动效形式适用于向用户展示某个功能如何操作。

显示导航功能的提示

可视化反馈

可视化反馈是在UI设计中非常重要。它能发挥作用是因为它吸引了用户对认同的原始渴望。现实生活中，事物会对我们的互动作出回应，同时这也是人们期望事物运作的方式。在桌面应用和网页会利用悬停效果来表示元素是可互动的。

在使用悬停效果时你也可以显示选项。在下面的例子里，悬停效果允许用户使用彩色标签，答复，前进或删除消息；

放大

动效在前一级页面和详情页创造了过渡效果，：用户选中卡片，马上可以看到一个与之相关联的详细信息页。此处的挑战就是确保用户感觉他们仍停留在指定的上下文中。

结论

卡片式设计师如今创新的设计方式。卡片式不仅仅只是一种外观设计方式，它也是能最灵活创建富文本体验的图层格式之一。

Thank you!