UI 卡片设计就这么简单，卡片式 UI 设计的 8 个细节

UI卡片设计中对您来说最重要的是什么？在这里面我想与您分享我收集的一些最佳实践。在此之前，我们先来了解一下基本的 UI 卡概述以及卡的常用情况。

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

UI 卡片主要用于哪些场景？

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

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

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

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

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

UI 卡片设计最佳实践

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

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

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

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

• 对于标题，请使用20px – 96px或更大的字体大小，具体取决于卡片大小和上下文。
• 副标题/副标题应比主标题/标题小2px-10px，以便于区分它们。
• 对于正文文本，字体大小应至少为14px。在某些情况下，如果您使用具有较大字符的特定字体，则可以变小。
• 对于按钮标签，字体大小不应小于正文字体大小。当您需要显示多个选项时，对于主要操作，请使用更突出的字体样式（半粗体/粗体），对于次要操作，请使用不太突出的字体样式（常规/中等）。
• 尝试限制字体大小的数量，您可以使用字体缩放工具，例如 Figma 插件字体缩放或用于定义字体缩放的 Web 工具。

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

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

• 选择一个基本单位，用于增加 UI 元素之间的间距值。通常，基本单位为4px (0.25rem)。使用奇数（例如 5px）并不是一个好的做法，因为在具有 1.5x DPI（每英寸点数）的设备中，间距将扩大到 7.5px，这会导致结果模糊。
• 例如，通过使用基本单位作为增量或乘数来定义有限数量的间距值，就像Tailwind库中定义的那样。
• Figma Pro 提示：将“大微调”量从 10 像素更改为 8 像素，您可以通过按 Shift 键和箭头键将组件移动到 8 像素值（这比定义的基本单位大 2 倍）。这非常节省时间！

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

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

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

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

• 卡片内容在所有断点上看起来是否一致？ （台式机、平板电脑、移动设备）
• 间隙的间距值是否一致？
• 你考虑互动吗？它们会影响卡片的尺寸和卡片之间的间距吗？
• 您考虑过长标题吗？它们将如何影响卡片的内容？

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

• 定义卡片的约束，以确定布局中的卡片在您调整其框架大小时应如何响应。
• 为您的卡片应用自动布局，使其根据内部项目自动调整大小。
• 创建 8px 网格允许您在设计中以 8px 增量单位精确排列和调整元素大小。

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

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

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

• 默认：卡处于正常状态，没有任何用户交互。
• 悬停：当用户将鼠标光标（指针）放在卡片上时。
• Active：如果卡是可单击的，并且用户按下鼠标主按钮来单击它，则应更改卡的样式以显示该组件已激活。这与按下的按钮的状态相同。
• 聚焦：当使用键盘或语音等输入方法时，卡片会突出显示。通常，在网络上，这种状态使用蓝色，但您可以选择与品牌一致的自己的颜色，只需确保颜色与背景颜色的对比度至少为 3:1即可。
• 已选择：通过单击选择控件（单选按钮/复选框）来选择卡时。
• 拖动：当用户使用点击或单击等输入方法触摸并按住卡片时。

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