版权：Hanna Jung

卡片是一个小的信息容器。在平衡美学和保证清楚简单的可用性下，它几乎成为了一个默认的选择。最开始是Pinterest和Facebook等在使用，而今天卡片式正在蔓延并影响多个行业。

            Pinterest对所有相关主题的信息组成一个容器

这种实现方式是很正确的，卡片式可以改善应用程序的用户体验。在这篇文章中，我将描述5种有用的卡片式技术，并提供一些例子。

1.遵循一个规则“一个卡片，一个主题”

卡片内的内容应该与只有一个主题。卡片内可以包含多个元素的设计，但是每个卡片应该只专注于一个的信息或内容。这让用户可以选择他们想要的内容进行阅读或分享。

                    每一个块(或卡片)只包含一个用户交互

2.让整个卡片都是可点击的

根据Fitts定律，不应仅仅是文字链接或图像，应该允许用户单击卡片的任何部分。更大的接触区可以提高触摸屏和鼠标的可用性。
提示：卡片使用少量的阴影来表示深度这是很好的，是一个视觉可点击的效果。

  卡片设计以少量的阴影表明整个卡是可点击的。版权：nngroup

3.让卡片视觉上是令人赏心悦目的

怎样让卡片是一个好的设计而且可以有效的工作。通过给卡片增加设计感，使卡片看上去很普通但是有创造性的。

                    版权：Piper Lawson

当涉及到实际的卡片设计时，你需要关注以下几点:

图片
图片是卡片式设计的重心。研究表明图片可以提升设计感。因此，卡片式设计中使用图片对用户会更有吸引力。

                    版权：Dave Gamache

阴影和渐变
阴影和渐变可以使用户感觉是符合物理常识的。但需要仔细考虑如何使用阴影和渐变：如果阴影投在了各个角落，那么卡片就不符合一个物理现象了。

        卡片式设计的圆角视觉上类似于扑克牌。版权：Material Design

排版
你可以使用文本来吸引用户的注意力。所有的卡片式设计应该是易于阅读和理解的。你的设计应该保持最大的可读性：
    选择简单的字体和容易阅读的配色方案（文本最清晰的方案是放置在一个纯色背景上）和足够的对比度。
    限制使用字体的数量。对于大多数卡片式设计中一个字体就足够了。
提示：卡片式内部建议使用无衬线字体与正常的字重。

                    版权：maconprinting

4.限制卡片的内容
卡片通常是很短的，它只是提供了一个入口点然后可以进入下一页，而不是展示的全部细节。当你试图在一张卡片内放太多的内容时，会使卡片变得太宽或太长，它就失去了原来的作用了，因为它看起来不再是卡片了。
下面的例子你会看到一个用户的界面。注意一下卡片的中心。它存在的问题是：展示了全部的信息，使得用户难以阅读。

                    版权：Piotr Adam Kwiatkowski

5.利用动画和动效
恰当的使用动画，可以提高用户体验。它可以帮助人们理解每个卡的不同状态之间的关系。

视觉提示
视觉提示帮助用户更好地理解如何进行用户界面交互。当你需要演示如何操作某些功能时可以使用这种动画。

                    导航功能的提示。版权：Barthelemy Chalvet

视觉反馈
在UI设计中视觉反馈是非常重要的。因为它可以吸引用户使用的欲望。在现实生活中，对象会与我们进行交互，这是人们所期望的。而桌面应用程序或网站可以使用悬停效果，表示与元素进行交互。悬停动画增加了页面的可发现性，同时使用户体验更多的乐趣。

卡片式设计应用悬停动画。版权：uxpin

隐藏选项也可以使用悬停效果。下面的例子中悬停效果允许用户可以使颜色进行标记，回复、转发或删除信息。

                    版权：Roman Shkolny

放大
在动画预览和详细视图之间创建一个转换：用户选择一个对象(卡片)，并马上看到了一个与选择相关的详细信息。这里的难处是要确保用户感觉给定的上下文是相关联的。

            动画可以帮助你把缩略图和它的详细视图连接起来。版权：Charles Patterson

总结
卡片式是有创造性的新设计。它不只是仅供一看的，是一种可以创建丰富内容的用户体验的灵活布局模式。
谢谢！

原文地址：https://uxplanet.org/best-practices-for-cards-fa45e3ad94dd#.1zj8zisqf

作者地址：https://uxplanet.org/@101