medium | 设计更好的卡片

作者:Andrew Coyle

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

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

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

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

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

卡片的形状

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

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

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

卡片解构

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

medium | 设计更好的卡片_第1张图片

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

medium | 设计更好的卡片_第2张图片
如果设计需要呈现的是少于几行的通知内容,就用列表。这样更有利于快速浏览。


medium | 设计更好的卡片_第3张图片
不要使用过重的阴影和边框。这会引起视觉上的混乱。


medium | 设计更好的卡片_第4张图片
不要在一个卡片上呈现多种想法,相反,一个想法有一个卡片就可以了。


medium | 设计更好的卡片_第5张图片
为内容提供视觉层次能够提升卡片的可读性和清晰程度。


medium | 设计更好的卡片_第6张图片
不要使用内链链接。一个卡片应该是有一个单一的链接,或者提供有限的操作按钮。

你可能感兴趣的:(medium | 设计更好的卡片)