卡片设计最佳方案

卡片是智能的信息容器。一旦提到均衡清晰美观和简单易用，卡片设计一般会成为默认选项。卡片设计师由Pinterest和Facebook引进的，如今广泛应用在多个领域。

Pinterest将所有相关内容组织在同一个卡片里

正确使用卡片能够提升应用的用户体验。本文，我会讲述5个卡片设计的技巧，同时给出一些有用的例子。

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

卡片里所有的内容应该只与一个概念相关。卡片能够容纳设计中的多个元素，但是这些元素应该具有相关性。让用户能够选择他们想要阅读或者分享的内容。

2.整个卡片可点击

遵循费兹定律让用户可以点击卡片的任意区域查看详情，而不只是点击文本链接或者图片。实际上，更大的接触区域不仅能够提升触屏设备的可用性，鼠标点击设备的可用性也能得到提高。

建议：

用卡片轻微的阴影展示卡片高度，这也是可点击的视觉线索。

3.保证卡片的视觉愉悦感

保证卡片良好的设计感和可用性是卡片设计的关键。通过增加卡片的美观度让卡片感觉熟悉的同时具有创意性。

当设计卡片时，你需要注意下面的内容：

图像

卡片的设计跟图像有很大关系。研究证实图片提升设计，所以，增加对卡片上图片的重视程度能够提升用户吸引力。

阴影和渐变

阴影和渐变在使用户与卡片相关的过程中有很大的作用。但是你在使用渐变和阴影时要谨慎考虑：如果在所有角和边都添加阴影的话，那卡片就丧失了对真实事物的模拟。

字体

你们可以通过使用文本来吸引用户的注意力。关于卡片的设计应该易读易懂。着重最大程度提高可读性：

1.选择简单的字体和易于阅读的配色方案（文本是最清晰的，放在一个背景上，跟文本形成对比。）

2.试着限制文本数量。对于卡片来说，一种字体已经足够了。

建议：

常规字重的无衬线体字体适合卡片复制。

4.限制卡片里的内容

卡片通常很精简，给出一个能够进入更多详情的点，而不是将所有的细节都展示在卡片上。当你将过多的内容放入卡片时，这时候卡片就会变得又宽又长。同时由于卡片看起来不想卡片啦，就会丧失原始的隐喻。

就像下面你能看到的基于卡片的用户界面。注意中间的卡片。问题在于过于密集的信息这也让浏览更加困难。

5.利用动画和动效

如果正确使用的话，动效会对用户体验影响巨大。帮助用户基于卡片界面指导行为，同时建立每个卡片不同状态之建立视觉关系。

视觉线索

视觉线索帮助用户更好的理解如何跟界面交互。当您需要演示设计中的某些功能如何运行时，就使用这种类型的动画。

视觉反馈

视觉反馈在UI设计中非常重要。因为它能够唤起用户自然已知的知识。在现实生活中，对象响应我们的交互，这就是人们期望工作的方式。对于桌面端的应用或站点，你可以通过鼠标悬停效果展示元素处于交互状态。悬停动画增加了可感知的层级，同时让用户体验更有趣。

通过悬停效果可以展示选项。在下面的悬停效果案例中，允许用户使用颜色标签、反馈、转发或者删除信息。

放缩

在之前视图和详情视图之间创建过渡动画：用户选择卡片并且立即查看相关选项的详细信息。最大的挑战是确保用户能够停留在应用中。

结论

卡片是全新的具有创意的画板。卡片不仅仅是视觉美观，更是创建丰富的内容体验的最灵活的布局格式之一。

---

原文链接