medium | 设计更好的卡片

作者：Andrew Coyle

原文地址：https://uxdesign.cc/design-better-cards-c0d12ab581c4

总结：卡片组件是在用户了解更多细节内容前的预览。它已经成为我们当前数字范式的象征。其中的元素包括多媒体、文本、链接、图表和标题。

卡片作为用户界面组件，扮演了一个详细信息入口的角色。不同来源的信息被放在一起并以一种易于理解的方式呈现。这是我们当前媒体环境的一个反应。

在过去十年间，不同尺寸屏幕大量出现，以及html5/css3的发布使得卡片的形式逐渐成型。它完美的代表了新的web，社交媒体网站如facebook，twitter和Pinterest成为主流。相比以前更加个性化、聚集、社会化。卡片则成为他们的载体。

卡片容纳了转瞬即逝的简短信息，为观众提供了独特的想法、灵感，最重要的是呈现给用户一种比金鱼注意力还要短的图画。

卡片的形状

卡片将不同的信息碎片组合起来。提供了可以快速浏览的信息和可以进入的选项。

不同卡片之间的信息是同等重要的。这允许用户以一种类似看超市货架的方式浏览内容。用户在进一步操作前会评价每一个卡片。

卡片因其灵活性在自适应的web设计中表现良好。通过使用media queries，内容可以根据屏幕重新排布。这种延展性能够将视觉语言和用户体验在不同的设备上进行统一。

卡片解构

设计更好的卡片之前，你需要了解它有哪些组成要素。卡片可能包含标题、副标题、摘要、多媒体、图片、视频、图表、评论和操作按钮。操作按钮一般是受限制的，并且在很多情况下整个卡片是一单个链接。

卡片有多种呈现方式，例如单独呈现，时间轴的形式，画廊的形式，排列的形式或者组成仪表盘。

如果设计需要呈现的是少于几行的通知内容，就用列表。这样更有利于快速浏览。

不要使用过重的阴影和边框。这会引起视觉上的混乱。

不要在一个卡片上呈现多种想法，相反，一个想法有一个卡片就可以了。

为内容提供视觉层次能够提升卡片的可读性和清晰程度。

不要使用内链链接。一个卡片应该是有一个单一的链接，或者提供有限的操作按钮。