如何直观高效传递信息? 试一下卡片UI设计

卡片 (Card)，是我们在每个网站和每个应用程序中都会经常看到的一种组件，因为它为我们带来了简单和便利。与表格相比，卡片通常简要总结地将我们想要表达的内容传达给用户。

如今，卡片设计也经常会被应用于UI设计之中，并成为现代网站和移动应用程序UI的一项重要技术。今天，小编就来为大家分享一下卡片UI设计的相关内容。

卡片UI设计

卡片UI设计 (Card UI Design) 是一个完整的界面，主要或完全基于在卡片上为用户呈现内容。其设计逻辑就在于需要避免长文本，并使内容更易于扫描和阅读。

从设计的角度来看，即使用户可能不清楚卡片的概念，但他们在操作过程中会立即知道如何使用UI卡片。这主要是因为，在数字UI设计变得多产之前，物理卡片已经是传达特定信息块的流行方式。卡片可以传达无数不同类型的信息，成为扫描或记忆部分信息的简便方法。

也就是说，卡片UI设计是界面用户设计中的一个小标签组件，它具有文字和图片形式。在用户访问我们的设计时，卡片则成为了我们想要传达信息的第一个工具，也是用户点击查看详情的一个媒介。与传统界面设计相比，其简洁、可视化的优势可以让其用户体验更加友好。

如果我们想要获得一张漂亮而清晰的卡片，那么它首先需要看起来像物理卡片。它通常具有物理边界和方形或圆形边缘，且可以有各种形状和大小。卡片通常具有简单的UI布局，并由背景、图像和一些容器组成。这些容器装有所谓的“物品”，它们可能是图像、CTA 按钮、标题或副标题。

卡片中的存在元素

卡片上显示的内容是关于单个主题的，且必须便于用户快速浏览重要信息并随后开始操作。此外，卡片的图像文本等元素应该是分层的。每张卡片作为一个整体，都与单个主题或目的相关。其呈现的内容可以受到不同级别的强调，而这取决于其层次结构的级别。

卡片UI设计的优势

卡片UI设计由来已久，但为什么如今变得非常受欢迎，且随处可见呢？

尽管它们被广泛使用，但仍然是一种有趣且独特的信息显示方式。如果我们设计得好，它就可以改善我们的网站或移动应用程序导航，从而提升用户体验，并帮助我们以更加认知友好的方式记忆信息。尤其是在Google的Material Design大行其道的时候，卡片设计更是风靡一时。

某著名设计系统的卡片设计

此外，卡片UI设计还具备了以下优势：

▍解决导航问题

卡片UI设计可以为设计师提供一个有趣的解决方案：在视觉上呈现内容繁琐的网站上的信息。它将帮助用户浏览网站或应用程序以找到他们需要的信息作为重中之重。我们可以把UI卡片想象成一条标记良好的道路，它可以消化内容，为我们指明正确的方向，也可以成为站点地图的绝佳替代品。

与在整个UI中散布大量菜单和链接不同，卡片式UI设计反而有助于清理工作。它们简洁地在一页上保存多种不同的信息和媒体类型。

▍设计直观

根据定义，卡片UI设计是简约的。这就是当今大多数设计师的口头禅：干净、美观的UI。而极简主义网站就显得更加直观，可以减少认知负荷并增加用户对网站或移动应用程序内容的理解。

网上银行-等距离插图

©Tomáš Nožina

因此，我们创建卡片UI设计的目的是提供简化且更易于访问的Web或移动UI。那么出于这个原因，卡片永远不会包含太多信息，因为它们的创建目的是易于扫描。

▍可扫描性

这让我们了解了卡片UI设计的美妙之处：呈现简化信息的小片段，并使用户理解所提供的内容。这些片段可以通过点击或点击获得更详细的主题。我们也可以将卡片UI设计视为帮助用户浏览大量信息以找到对他们最重要的信息的一种方式。

▍响应式设计

卡片UI设计如此受欢迎的主要原因之一是它们促进了响应式UI设计，它非常适合在各种设备上响应的网站。就其性质而言，卡片可以轻松缩小到任何分辨率，因为它们的方形形状适合任何网格系统。

此外，卡片移动的方向也可以改变。例如，我们可以为移动设备启用垂直滚动，而不是水平滑动。这就使得卡片UI设计成为响应式网页设计师最好的朋友。

▍具备多种用途

卡片UI设计适用于许多网页或应用程序页面，并且具有多种用途：它们可以显示图片库、文本内容、可下载内容、音频库、视频等等。同时，它们的形状、大小和颜色也可以有很大的不同，并且可以展示UI设计的内容层次结构和组织。

▍对用户友好

卡片 UI 设计是提升UX的有效方式，因为它们对于大多数用户来说自然是直观的，这也是因为它们代表带有信息单元的物理卡片。

此外，卡片式UI设计有助于自然的眼球运动。人们倾向于在页面上从左到右以及从上到下移动他们的视线。而具有水平滚动卡片的网页或具有垂直滚动卡片的移动设备，在视觉层次上很容易让人眼前一亮。

Göz

©Kemal Sanli

如果我们的所有网站或应用程序的内容都被分解成更易消化的块，同时有助于提高可扫描性，这意味着我们的用户不太容易感到沮丧和眼睛疲劳。毕竟，快乐的用户等于快乐的设计师！

卡片UI设计的类型

如今的卡片UI设计具有以下四种常见的类型：

▍Blog posts-博客文章

博客类文章中的卡片指的是在博客页面上显示用户帖子的组件。它包括创建日期和时间、标题、内容、插图、文章类型等许多组成部分。而要创建一个漂亮的博客卡片，我们需要依赖许多因素，例如：是否布局清晰、易于理解、合理划分成分。

blog post card示例

blog post card

用户可以通过博客帖子卡片看到一些常见的组件，如媒体、主标题、简短描述和 CTA（号召性用语）。此外，用户还可以根据需要自定义设计常用组件，例如将“阅读更多”按钮更改为“保存帖子”或添加更多“分享”、“喜欢”类的按钮。

▍Product card-产品卡片

产品卡片设计广泛用于网站和电子商务应用程序。它旨在吸引买家对产品的兴趣。在设计过程中，如果使用视觉层次可以使产品卡片更有效率。通常产品图像比其他内容大，其次是产品和价格。

产品卡片的主要目的是为买家提供有关产品的初步信息，根据我们要销售的产品，可以在设计时考虑这些信息。除了产品标题、有趣的图片和 CTA 按钮（添加到购物车、立即购买）之外，产品卡还应该有简短的描述、产品参数、购买次数和评分。

product card示例

图像是一个非常重要的因素，因为它是用户在查看我们的产品时最先吸引眼球的元素，因此我们需要使图像尽可能清晰和真实。然而，我们也不应该使用太多的字体，内容也不要太多，因为有时候用户会懒惰阅读，所以大家只需要在产品卡片上描述产品最突出的特点。

▍Reviews-评论

借助评论功能，我们经常看到星级评分形式（1 到 5 星）是最受欢迎的。根据产品和服务的质量，用户会对它们进行 1 到 5 星的评分。这种评价方法非常适合用来评价产品或服务的水平。许多电子商务网站、电影评论和房间出租都在他们的系统中使用这个评级。

除此之外，我们还应该应该设计适合每种评估类型的卡片。在评论卡设计中，我们会看到很多不同的类型：汇总所有评论并计算平均星数，或者显示每个用户的评论，包括评分或喜欢不喜欢的星数，并记录有关他们对产品或服务的体验的信息。

reviews card示例

▍Dashboards card-仪表板卡

仪表板有助于将重要信息快速传达给系统。仪表板卡的主要目的是呈现当前数据和资源并显示它们的状态，帮助管理员快速主动地在他们的系统上工作。对于每个重要的信息项，都会有一张卡片来描述。根据我们要描述的信息，选择最优化的图表设计。在这里，柱形图和折线图可能是最常用的，此外，我们还可以使用饼图。

仪表板卡的常用组件包括信息项名称、当前数据、显示当前波动率的图表、百分比变化。同时，我们还可以使用视觉层次和颜色来帮助用户轻松区分。