如何更好地做卡片式设计 UIMAX译文

本文编译自国外Medium媒体平台作者Andrew Coyle的文章,希望能给大家带来帮助。

卡片，作为通往详情页面的一个用户界面组件，将各种不同的信息汇集在一起，以用户更易理解的方式来呈现内容。

由于不同屏幕尺寸的扩散以及在这十年时间里HTML5/CSS3的推出使得了卡片设计得以成型。它是新一代网站的完美代表，像Facebook、Twitter和Pinterest等社交媒体网站都进入了主流之中。这种网站形式比以往任何时候都能够看到更大的个性化、聚集性和社会化，而卡片就是它的的容器。

• 卡片形状 •

卡片设计以组的形式呈现多样化的内容片段。用户可以快速浏览信息，并且可以选择性查看整体信息。

卡片之间的信息具有相等的层级关系。这允许用户以类似于查看商店货架的方式浏览内容。用户在执行操作前会对每个卡片进行评估。

卡片的灵活性很适合用于响应式设计。通过使用媒体查询，内容可以重新排序以适应任何屏幕。这种延展性使得卡片能建立跨设备的统一视觉语言和用户体验。

• 解构卡片设计 •

想做出更好的卡片设计就必须了解其中所包含的元素。卡片包括标题，副标题，摘要文本，多媒体，图像，视频，图表，评论和操作。操作上通常是有限的，因为很多情况下整个卡片可作为一个单独的链接。 

卡片可以以多种方式呈现，包括单独呈现、时间线、图库、相邻或者仪表板的形式。

• 卡片设计的最佳实践方法 •

如果设计上展示的是同质化且简短的内容，可以采用列表的形式，这样有利于快速浏览。

避免使用过多的边框和沉重的阴影，这个会导致分散视觉焦点。

不要在一张卡片上呈现多个想法。相反，将每一个想法都以独立的卡片展示。

为内容提供可视化的层次结构，以增加卡片的焦点和易读性。

不要包含内嵌链接。卡片应该是一个单一的链接或提供一组有限的操作。

小结

任何表现形式都应该是为了更好的呈现功能及内容。卡片不仅仅在视觉上容易被用户接受，它也是一种能够创造一致体验的最灵活的布局方式，对提高用户获取有效信息的效率有着非常大的帮助。所以，优秀的用户体验一定是以人为本的。