设计更好卡片的提示、技巧和最佳实践。

卡片是通用的——从 Instagram 和 Facebook 等社交媒体网站到亚马逊等电子商务商店。卡片布局迅速赢得了人气。

卡片作为一个信息容器，容纳了文本、富媒体、按钮等所有元素。基于这些内容，它可以调整其大小以适应不同设备和屏幕的大小，平衡用户界面和用户体验。

什么是卡片？

卡片是一个 UI 组件，包含有关单个案例的内容和操作。卡片可以包含各种元素，但它们都应该是关于一个主题的。

                                                   卡片样式

这背后的目的是避免长文本并呈现更多可扫描的内容。尽管从设计的角度来看，用户可能不熟悉卡片的概念，但他们立即知道如何使用它们，因为它们与物理卡片相同。

为什么如此受欢迎？

卡片很受欢迎，因为它们似乎压制了内容。卡片是模块化的，因此可以将不同的内容项目堆叠在一起，而无需注意它们的差异。

卡片通过强制内容适应卡片边界和卡片视觉布局的限制来缩小内容。像卡片这样的设计师允许混合和匹配大量内容，而不必担心设计会变得混乱。

卡片可以将内容分解为可消化的部分，从而允许用户与其进行交互。通过为内容提供一个容器，卡片表明内容对用户来说是真实的和感性的。

卡片 UI 设计流行的原因有很多：

• 直观：卡片在用户界面中看起来与现实世界中的特定卡片相同。它们对用户来说似乎很常见。在卡片成为移动和网络应用程序中的流行元素之前，它们在现实生活中无处不在：名片、棒球卡、便签。卡片代表了一种有益的视觉类比，它使我们的大脑能够直观地将卡片与其所代表的内容联系起来——就像在现实生活中一样。
• 易于消化：卡片不占用太多空间，并促使设计者优先考虑其内容。不同的是，每张卡片都变成了易于访问和探索的可消化内容。卡片让用户更容易找到他们感兴趣的内容。
• 卡片有吸引力且用户友好：基于卡片的设计通常严重依赖视觉效果（尤其是图像）；就信息架构而言，任何副本通常次于视觉。强调使用图像有助于使基于卡片的设计比未排列在卡片中的相同内容对用户更具吸引力。
• 有利于响应式设计：卡片是矩形形状，可平滑调整大小以适应不同屏幕的水平和垂直正面，这意味着用户在所有设备上都能获得统一的体验。
• 可分享：卡片可以鼓励用户在社交媒体上分享内容，因为它允许用户轻松地仅分享特定的内容而不是整个页面。

什么时候使用卡片UI设计？

当您有以下情况时，通常会出现这种情况：

• 
  
• 基于搜索的界面：卡片允许适用的内容通常表明自己，使用户可以深入了解他们的兴趣。基于卡片的设计是非常适合呈现此类内容的方式。
• 浏览产品：当用户浏览信息时，卡片的兼容性更好。
• 任务管理：当您可以将流程中的单个任务作为卡片进行说明时。可以轻松组织卡片以获取任务列表。任务管理应用程序在使用卡片式界面为用户创建仪表板方面做得很好，其中每张卡片代表一个单独的任务。
• 相似物品：卡片最适合异类物品的集合（当并非所有内容都属于相同的基本类型时）。
• 分析可视化：仪表板通常在同一张表上同时显示各种内容样本。在这种情况下，卡片类比可以帮助创建更明显的物品之间的差异，其中每张卡片可以适应不同的角色。

卡片剖析

卡片布局可以支持它们包含不同的内容类别。在该品种中常见以下成分。

(1) 富媒体：卡片可以包含缩略图以显示图像、插图、头像、徽标、图标或图形。

(2) 标题：标题文本可以包含相册或文章的名称或标题等内容。

(3) 描述：支持文本包含文章摘要或简短描述等文本。

(4) 按钮：卡片可以包含操作按钮。

(5) 副标题：副标题文本可以包含文本元素，例如文章署名或标记位置。

(6) 图标：卡片可以包含操作动作的图标。

提示和最佳实践

有一些事情可以改进卡片设计。

1. 使用相关图片

形象是卡片设计的主导，你需要一个伟大的形象来吸引用户对每张卡片的关注。

不仅是图像，卡片还可以包含插图、带有浅色背景框的图标或任何其他类型的富媒体，但需要与内容相关。

2.添加视觉层次

卡片内的层次结构有助于引导用户仔细查看最重要的信息。

将主要内容放在卡片的顶部，并使用排版来宣传主要内容。使用空白和对比度来分隔需要更多样化视觉分离的内容区域。

3. 限制内容

一张卡片应该只包含重要信息，并建议一个相关的访问点来获取额外的细节，而不是完整的细节本身。

正如我们中的许多人一样，尝试将过多的内容放入卡片中，卡片可能会变得过于庞大或过于冗长，并且在扭曲中失去与卡片类比的实际联系，因为它看起来不再像卡片了。

4. 避免嵌入链接

不要包含内联链接。卡片应自行链接或提供一组有限的可用活动。

5、区分动作

包含大量动作的卡片应该在视觉上形成对比。

在下面的例子中，我通过给它一个浅色调而不是一个主要按钮样式来使连续动作不太为人所知。

6.避免以线区分组

新设计师通常会用边框来区分内容，以此来定义不同的组。这些边框会导致有损内容的不必要的视觉噪音。

美学和现代UI卡片

现代数字卡片不是纯粹的拟物化理念，但经常使用物理中使用的一致类比和原理帮助用户理解界面并分析内容中的视觉层次结构。对于卡片，您可以执行以下操作：

1.使用圆角

在姿势上与现实世界的真实卡片进行视觉比较。

圆角更有效，因为它们让我们的眼睛很容易跟随线条“因为它更适合头部和眼睛的自然运动”。

2.添加浅色边框或柔和阴影

显示深度并显示整张卡片是可点击的。阴影在界面中创造了一个鸿沟，这有助于我们区分 UI元素。

然而，在设计中添加阴影并不像听起来那么简单。有时设计师会被冲昏头脑，通过过度使用效果，他们会使原本看起来不错的设计看起来很廉价。避免使用纯黑色作为阴影。

奖励：注意字体和空白

必须给每张卡片留出空间以供查看、阅读和理解。在每个块周围添加大量空白，让用户有时间和平静地从一张卡片看另一张卡片时进行视觉重置。

并选择简单和基本的字体（例如卡片正文复制正常重量的无衬线字体），因为基本排版可最大限度地提高可读性并有助于浏览。

一些 UI 卡片示例

来看看真实的UI卡片示例

博客/帖子卡：

保持博客卡片的简单性至关重要。它们应该具有一致的、重复的结构，但使用不同的图像和字体大小来表示卡片中最重要到最不重要的元素，以使阅读它们的人更容易理解。

他们将特色图片和标题突出显示为最突出的元素。然后，他们还包括引号，这不仅可以帮助用户确定文章或发布的内容是否适合他们，还可以吸引他们点击浏览。

电子商务/产品卡：

产品卡是帮助您将访问者转化为客户的重要内容。一张优秀的产品卡应该能吸引注意力，激发获得产品的欲望，解决问题和反对意见，激励人们购买，并在搜索结果中推广您的网站。

产品的名称应该放在最显眼的地方，这样访问者会立即明白他来对地方了。

一个好的形象会告诉客户一千多个字，所以你需要一个高质量的形象来拥有完美的产品卡。

如果产品有特价，不仅要在价格块中标明促销价格，还要标明正常价格以及客户将节省多少钱。

个人资料卡：

个人资料卡已成为网站模板中的钉子用户界面小部件。由于兴趣转向在线领域，个人品牌变得比以往任何时候都更加重要，是时候摆脱那些指向您的在线页面的无聊超链接了。

就像每张卡片一样，个人资料卡片是一个 UI 组件，其中包含对其所代表的内容至关重要的信息片段。您想向您的观众（不是字面上的）销售您自己以实现您的目标。

确保仅包含必要的信息（例如，图像、姓名、职业），并让您的“关于”页面包含其余详细信息以完成您的个人资料。

这是在设计和布局方面，而卡片的内部和外部都不会损坏网站的外观和主题。层次结构是关键。

仪表板卡：

仪表板设计可以有很大不同。但是所有的仪表板都是由卡片组成的。根据仪表板的类型，每张卡片可能包括个人资料信息、通知、快速链接或导航设计元素、关键数据、图形和数据表。确保为每个元素使用正确类型的卡片。

仪表板卡允许用户决定他们想要关注哪些数据。易于理解的 UI，允许用户准确控制哪些数据需要放在仪表板的前面和中间。

至少在初始屏幕中仅包含最相关的信息和您的用户。当您拥有在一起查看时更容易理解的数据集时，请找到将它们呈现在一张卡片中的方法。但要注意不要混淆用户。

日常活动卡（看板）：

看板任务卡似乎是一件非常简单的事情——做一个便利贴，写下你需要做的事情，然后把它贴在墙上。这些卡片必须包含需要采取行动的单位数量。它们还可能包含各种其他信息，这些信息清楚地传达了必须做什么。

卡片上包含的信息包括任务的名称和重要的详细信息，例如任务的类型和所有者。看板卡位于状态类别下。最基本的状态类别是“待办事项”、“进行中”和“完成”，但状态可能因项目而异。

卡片结构最适合添加或删除任务等小改动，而不是更改总体目标等大局构想。

结论

可以通过多种方式更有效地设计卡片。通过最初的定义和观察卡片，我们更好地了解了这种设计模式在各个行业中的样子。它还允许我们对用户希望在这些卡片上进行哪些操作进行一些推测。卡片在提供许多不同类型内容摘要的环境中特别有效，而不是简单地用作内容列表的现代替代品

Powered by Froala Editor