卡片是智能的信息容器。一旦提到均衡清晰美观和简单易用，卡片设计一般会成为默认选项。卡片设计师由Pinterest和Facebook引进的，如今广泛应用在多个领域。
正确使用卡片能够提升应用的用户体验。本文，我会讲述5个卡片设计的技巧，同时给出一些有用的例子。
1、遵循“一个卡片一个概念”的原则卡片里所有的内容应该只与一个概念相关。卡片能够容纳设计中的多个元素，但是这些元素应该具有相关性。让用户能够选择他们想要阅读或者分享的内容。
2、整个卡片可点击遵循费兹定律让用户可以点击卡片的任意区域查看详情，而不只是点击文本链接或者图片。实际上，更大的接触区域不仅能够提升触屏设备的可用性，鼠标点击设备的可用性也能得到提高。
建议：用卡片轻微的阴影展示卡片高度，这也是可点击的视觉线索。
3、保证卡片的视觉愉悦感保证卡片良好的设计感和可用性是卡片设计的关键。通过增加卡片的美观度让卡片感觉熟悉的同时具有创意性。
当设计卡片时，你需要注意下面的内容：
图像
卡片的设计跟图像有很大关系。研究证实图片提升设计，所以，增加对卡片上图片的重视程度能够提升用户吸引力。
阴影和渐变
这在使用户与卡片相关的过程中有很大的作用。但是你在使用渐变和阴影时要谨慎考虑：如果在所有角和边都添加阴影的话，那卡片就丧失了对真实事物的模拟。
字体
你们可以通过使用文本来吸引用户的注意力。关于卡片的设计应该易读易懂。着重最大程度提高可读性：
1.选择简单的字体和易于阅读的配色方案（文本是最清晰的，放在一个背景上，跟文本形成对比。）
2.试着限制文本数量。对于卡片来说，一种字体已经足够了。
建议：常规字重的无衬线体字体适合卡片复制。
、限制卡片里的内容卡片通常很精简，给出一个能够进入更多详情的点，而不是将所有的细节都展示在卡片上。当你将过多的内容放入卡片时，这时候卡片就会变得又宽又长。同时由于卡片看起来不想卡片啦，就会丧失原始的隐喻。
就像下面你能看到的基于卡片的用户界面。注意中间的卡片。问题在于过于密集的信息这也让浏览更加困难。
5.利用动画和动效如果正确使用的话，动效会对用户体验影响巨大。帮助用户基于卡片界面指导行为，同时建立每个卡片不同状态之建立视觉关系。
视觉线索帮助用户更好的理解如何跟界面交互。当您需要演示设计中的某些功能如何运行时，就使用这种类型的动画。
视觉反馈在UI设计中非常重要。因为它能够唤起用户自然已知的知识。在现实生活中，对象响应我们的交互，这就是人们期望工作的方式。对于桌面端的应用或站点，你可以通过鼠标悬停效果展示元素处于交互状态。悬停动画增加了可感知的层级，同时让用户体验更有趣。
通过悬停效果可以展示选项。在下面的悬停效果案例中，允许用户使用颜色标签、反馈、转发或者删除信息。
在之前视图和详情视图之间创建过渡动画：用户选择卡片并且立即查看相关选项的详细信息。最大的挑战是确保用户能够停留在应用中。
结论卡片是全新的具有创意的画板，不仅仅是视觉美观，更是创建丰富的内容体验的最灵活的布局格式之一。
预览时标签不可点收录于合集#个上一篇下一篇