来源：Medium网站

作者：尼克巴比奇

翻译：奥创

阅读时长：10min

卡片是整洁的小容器供参考。在平衡清晰的美学和简单的可用性方面，它们几乎成为默认选项。首先由Pinterest和Facebook等服务推出，今天卡的影响力正在多个行业中蔓延。

Pinterest引入了这样的想法，即关于单个主题的所有最相关的信息可以组织到一个容器中

正确实施，卡可以改善应用程序的用户体验方面。在本文中，我将介绍5种有用的卡片技术，并提供一些有用的示例。

1.遵循“一卡一卡”的规则

卡片中的所有内容应仅与一个想法相关。卡可以在设计中包含多个元素，但每个元素应仅关注一位信息或内容。这使用户有机会选择他们想要使用或共享的内容部分。

一个块（或卡）“包含”一个用户交互块

2.使整张卡可点击

遵循Fitts定律，允许用户点击/点击卡片的任何部分，而不仅仅是文本链接或图像。更大的触摸区域大大提高了触摸屏设备和基于鼠标的设备的可用性。

提示：当卡使用轻微的阴影，以显示深度，这是一个很不错的视觉 的能指可点击。

卡片设计使用轻微的阴影作为整个卡片可点击的能指。

致谢：  nngroup

3.让卡片视觉上赏心悦目

卡的工作原理是良好的设计和出色的可用性。通过赋予卡片一点美感，您的卡片设计既熟悉又有创意。

致谢：Piper Lawson

在卡片的实际设计方面，您需要关注以下时刻：

图片

沉重的图像是基于卡片设计的强项。研究证实，图像提升了设计。因此，强调使用图像使得基于卡的设计对用户更具吸引力。

致谢：Dave Gamache

阴影和渐变

阴影和渐变在很大程度上使得用户与卡片相关联，就像他们与物理对应物一样。但要仔细考虑如何使用阴影和渐变：如果在所有角落和侧面投射阴影，那么卡片作为物理对象的错觉就会被破坏。

圆角的卡片设计在视觉上类似于扑克牌。致谢：材料设计

活版印刷

您还可以使用文本吸引用户的注意力。关于卡片设计的一切都应该易于阅读和理解。您应该设计最大可读性：

1. 选择简单的字体和易于阅读的配色方案（当放置在与文本具有足够对比度的纯色背景上时，文本最清晰）。

• 尽量限制字体的数量。对于大多数卡片项目，单一字体就足够了。

提示：正常重量的无衬线字体非常适合卡体复制。

致谢：maconprinting

4.限制卡内容

卡片通常很短，并提供了一个链接入口点以获取更多详细信息，而不是完整的详细信息。当你试图将卡片放入太多内容时，卡片开始变得太宽或太长，它就失去了原来的比喻，因为它看起来不再是卡片了。

您可以在下面看到基于卡的用户界面的示例。注意卡在中心。这里的问题是它充满了信息，这使得扫描变得困难。

致谢：Piotr Adam Kwiatkowski

5.利用动画和动作

如果使用正确，动画可以为用户体验做出巨大贡献。它可以帮助人们在基于卡的界面中定位自己，并在每张卡的不同状态之间建立视觉关系。

视觉提示

可视提示可帮助用户更好地了解如何与用户界面进行交互。当您需要演示设计中的某些功能如何运作时，将使用此类动画。

提示展示导航功能。致谢：Barthelemy Chalvet

视觉反馈

视觉反馈在UI设计中非常重要。它的工作原理是因为它吸引了用户对确认的自然渴望。在现实生活中，对象会响应我们的交互，这就是人们期望事物发挥作用的方式。对于桌面应用或网站，您可以使用悬停效果来显示该元素是交互式的。悬停动画增加了一定程度的可发现性，同时使体验更加有趣。

将悬停动画应用于卡片。致谢：  uxpin

使用悬停效果，您还可以显示选项。在下面的示例中，悬停效果允许用户进行颜色标记，回复，转发或删除消息。

致谢：Roman Shkolny

放大

此动画在预览和详细视图之间创建过渡：用户选择项目（卡片）并立即看到与该选择相关联的详细信息。这里的挑战是确保用户感觉他们留在给定的环境中。

动画可帮助您将缩略图与其详细视图相关联。致谢：查尔斯帕特森

结论

卡片是新的创意画布。它们不仅仅是一种外观，卡片是用于创建丰富内容体验的最灵活的布局格式之一。

谢谢！