在 UI 卡片设计中，什么对您来说很重要？我想与您分享我收集的最佳实践。在此之前，让我们从基本的 UI 卡片概述和卡片的常用位置开始。

卡片是一个 UI 组件，它创建一组视觉上不同的逻辑相关信息。它通常由一个标题、一小段描述（总结结果页面的内容）和一个可选的图像、按钮或“号召性用语”组成。

基本卡片剖析

UI卡可以在哪里使用？

产品目录页面：亚马逊、阿里巴巴、沃尔玛和易趣等大型电子商务网站使用卡片组件来表示每个产品项目。通常，产品卡片由产品图片、标题、价格、折扣和“号召性用语”组成，点击可打开产品的商品详情页面。

亚马逊（上）和阿里巴巴（下）

亚马逊（上）和阿里巴巴（下）

eBay（上）和沃尔玛（下）

eBay（上）和沃尔玛（下）

内容网站（新闻文章、社交媒体平台）使用基于卡片的布局以类似的方式呈现每个故事，以便用户可以快速扫描、比较并选择要阅读或观看的内容。

仪表板可视化：仪表板是一个很好的例子，说明如何使用卡片以用户可以轻松比较和分析界面中数据的方式对相关信息进行分组。

收藏网站：在如此庞大的收藏中浏览和探索是一种有趣且有吸引力的体验——比如 Pinterest 和 Unsplash，因为带有大图像的基于卡片的布局很吸引用户的眼球。这就是为什么在网络和移动体验中实现卡片浏览变得如此流行的原因。

协作工具：卡片是灵活的组件——它们可以组合不同类型的信息和子组件。例如，Figma、Miro、Framer 等工具使用卡片来呈现项目和文件。这种类型的卡片简洁、交互且功能强大——通过在卡片上右键单击鼠标，可以轻松访问与文件相关的操作。

菲格玛和米罗

最佳实践

有许多指南和设计库可以为您的卡片设计提供灵感，但是，我想强调那些没有被明显考虑到的。我希望，您会发现这个合集对您有用且有趣！

1. 在卡片和背景之间形成良好的对比。为了更好地将卡片与背景区分开来，您可以通过添加边框使卡片轮廓化或通过添加阴影使卡片升高。

背景对比练习

2. 尽量保持字体大小平衡，避免使用太小的字体。内容可读性由所选字体和应用的字体大小定义。在下面的示例中，两张卡片看起来几乎相同，但更容易感知正确的卡片，因为正确选择了字体大小并且整体卡片在视觉上变得平衡且更适合人眼。

字体大小练习

一些字体大小的小技巧，可以帮助你保持视觉层次！

对于标题，使用20px 到 96px或更大的字体大小，具体取决于卡片大小和上下文。

副标题/副标题应比其主标题/标题小2px-10px，以便于区分它们。

对于正文，字体大小应至少为16px。在某些情况下，如果您使用具有较大字符的特定字体，则可以变小。例如，在Google Material Guidelines中，两种 Body 文本大小被定义为 14px 和 16px。

对于Button labels，字体大小不应小于 Body 字体大小。当您需要显示多个选项时，对于主要操作使用更突出的字体样式（半粗体/粗体），对于次要操作使用不太突出的字体样式（Regular/Medium）。

尽量限制字体大小的数量，可以使用字体缩放工具，例如 Figma 插件类型刻度 或者 用于定义字体比例的 Web 工具.

3. 为填充创建间距系统。填充 — 是 UI 元素之间的空间，它们有助于创建视觉分组并保持层次结构。如果您想避免设计中的混乱并使它们保持一致，那么您需要定义间距系统，这对于开发人员的交接也很有用。

练习间距

关于间距系统的更多提示！

选择一个基本单位，您将使用该单位来增加 UI 元素之间的间距的空间值。通常，基本单位是4px (0.25rem)。使用奇数（例如 5px）不是一个好的做法，因为在具有 1.5x DPI（每英寸点数）的设备中，间距将扩大到 7.5px，这会导致结果模糊。

通过使用基本单位作为增量或乘数来定义有限数量的间距值，例如，就像在Tailwind库中定义的那样。

Figma Pro 提示：将“Big Nudge”Shift量从 10px 更改为 8px 将允许您通过按键和箭头键将组件移动到 8px 值（这是定义的基本单位的 2 倍） 。这非常节省时间！

如果您想了解有关空间系统的更多信息，请查看这篇很棒的文章。

4. 设计一个尽可能类似于内容布局的加载状态。与应用布局风格相匹配的骨架状态将有助于减少用户对加载内容的不确定性。下面，您可以看到右侧的加载状态如何更好地传达预期的内容类型。

加载状态练习

加载 骨架状态的更多示例：

5. 为卡片定义固定高度。以防万一，您需要设计一个卡片元素，假设一张卡片可以有 4 行文本，而另一张卡片可以有 1 行文本。处理卡片设计的最佳方法是定义一个高度，为内容较少的卡片留出空白，并在卡片内容较多时截断文本。

卡片高度练习

6. 将网格用于基于卡片的布局。网格是基于卡片的布局的基础，它们有助于一致地排列内容，这就是它们在卡片设计中如此有用的原因。您可以使用网格将卡片的宽度扩展到您需要的网格列数，这样您就可以为您的卡片找到合适的宽度。当谈到响应式设计时，你应该为每个断点创建一个网格，并相应地排列你的卡片。

网格练习

(1) 台式机，(2) 平板电脑，(3) 手机

您可以在Material Guidelines或Intuit Design System上了解有关响应式网格的更多信息。

设计响应 式基于卡片的布局时要问自己的问题：

卡片内容在所有断点上看起来是否一致？（台式机、平板电脑、手机）

间隙的间距值是否一致？

你考虑互动吗？它们会影响卡片的大小和卡片之间的间距吗？

你考虑过长标题吗？它们将如何影响卡片的内容？

关于基于卡片的布局的一些 Figma 技巧：

为卡片定义约束，以确定布局中的卡片在您调整框架大小时应如何响应。

为您的卡片应用自动布局，使其根据里面的项目自动调整大小。查看Figma中的本教程。

创建 8px Grid 允许您在设计中以 8px 增量单位精确排列和调整元素大小。在这篇很棒的文章中了解有关 8pt 网格的更多信息。

7. 创建不同内容的卡片设计。如果您事先知道卡片可能有不同长度的内容，请确保在您的设计中涵盖这种情况。在交接中，这将有助于开发人员以正确的方式为卡片创建代码，并避免破坏内容对齐。

8. 定义卡片交互以获得更好的用户体验。UI 交互是当用户通过触摸屏、鼠标或键盘设备与 UI 元素交互时发生的动作。状态是出现在特定用户交互中的视觉反馈。

卡片状态练习

与许多其他 UI 元素（按钮、文本字段、下拉菜单等）一样，卡片应该根据使用上下文和定义的交互具有自己的状态。对于特定的交互，卡片应该根据应用状态进行样式设置。让我们看一下最常见的卡片状态列表：

默认值：卡片处于正常状态，没有任何用户交互。

悬停：当用户将鼠标光标（指针）放在卡片上时。

Active：如果卡片是可点击的，并且用户按下鼠标主键点击它，卡片的样式应该改变以显示组件被激活。这与按下按钮的状态相同。

Focused：当使用键盘或语音等输入法时，卡片被高亮显示。网页上一般都是用蓝色来表示这个状态，不过你可以自己选择与品牌一致的，只要保证颜色与背景色的对比度至少为3:1即可。

Selected：当通过单击选择控件（单选按钮/复选框）选择卡片时。

拖动：当用户触摸并按住卡片时，使用点击或点击等输入法。

UI 卡片是常见的组件，您可以在大多数 Web 和移动应用程序中找到它们，因此通过相互学习和分享良好实践，我们可以使它们在视觉上更具吸引力、更有效且更易于访问。