高级设计师总结的10条卡片设计黄金法则

编者按：卡片是现如今 UI 控件当中自由度最高，兼顾灵活度、优雅和体验的实用控件，它的适用范围广泛，但是相应的，具体的设计要求也相当具体。这篇文章出自资深设计师 Saadia Minhas 之手，她结合自己丰富的工作经验总结了卡片控件的设计法则。

卡片是重要的 UI 组件，可以以清晰、用户友好的格式组织和呈现信息。

由于其灵活和模块化的布局，卡片可以在各种应用程序中使用，帮助用户快速与不同的内容互动。

设计卡片需要始终如一地应用 UX 原则以确保其有效地实现其功能。

本文介绍了设计卡片的最佳实践，你可以将这篇文章视作为卡片设计的用户体验指南。在后面的部分中，我们将探讨可在各种情况下使用的不同类型的卡片。

为什么卡片控件很重要

• UI 卡片控件是一种多功能容器，可以直观地将特定主题相关的信息和操作分组呈现。
• 它们有助于将复杂的数据分解为易于理解的部分，使用户更容易浏览和理解内容。
• 卡片可以让用户有效地与内容交互，从而显著提高参与度。

卡片式用户体验设计最佳实践：

1、卡片的结构

这是基本的卡片结构。可以根据需求添加其他可选元素。

卡片的构造

标题：通常包含描述卡片内容的标题和图像。

图片：图片可以为内容提供背景信息。添加相关图片可让你的卡片更具视觉效果（如产品卡片）。

内容区域：这个部分包含主要文本，例如简短描述、标题或其他关键信息。内容应简洁且结构良好。

• 标题
• 副标题
• 描述：卡片内容的简单描述。它可以包含一些图标、标签等来支撑内容。
• 图像：内容区域内包含可选的图像。

操作：添加用户可以执行的主要和次要操作（如按钮），例如「添加到购物车」或「阅读更多」。将操作清楚地放置在卡片边界内。

2、结构和布局

视觉层次

确保卡片元素的视觉层次清晰，使用标题、图标和字体变化，来优先显示重要信息。

在卡片设计中添加清晰的视觉层次。

间距和边距

保持卡片内部填充均匀（垂直和水平方向均如此）。避免过于拥挤，并在边缘和内容之间留出足够的空间。

在卡片的两侧使用相等的边距。

对齐方式

根据设计风格，对文本和图标使用左对齐或居中对齐，以保持卡片的一致性。

将卡片内容统一对齐方式。

3、格式和大小

固定长宽比

对卡片使用固定的纵横比（例如 4:3 或 16:9），尤其是当卡片包含图像时，以确保整个 UI 的视觉一致性。

响应式尺寸

设计卡片可以适应不同的屏幕尺寸，特别是在移动设备上，垂直布局通常效果最好。

比例大小

确保卡片相对于屏幕和其他 UI 元素不会太大或太小；过大的卡片可能会让布局失衡，而过小的卡片可能会降低可读性。

卡片的水平和垂直布局

4、版式和字体

字体层次结构

使用不同的字体大小和粗细来建立清晰的视觉层次。通常，标题使用较大的字体，正文使用较小的字体。

改变字体大小来强化信息的层次。

可读性

选择清晰的字体，尤其是小卡片尺寸，并确保文本和背景之间有足够大的对比度。

使用更易于阅读和理解的字体。

限制文本数量

尽量减少文本量。仅包含可以快速扫读且不会让用户感到不知所措的必要信息。

不要在卡片上显示太多信息。

5、一卡一概念

每张卡片只提供一个概念，以免让用户感到不知所措。每张卡片应传达一条信息或操作，例如产品、个人资料、文章或数据点。在一张卡片上显示多个概念或者主题，会使其变得杂乱无章且令人困惑。

一张卡片应该代表一个主要主题或概念。

6、操作

主要交互

添加一两个主要交互以避免混乱。使用按钮执行主要操作，使用图标执行次要功能（如书签）。

可点击区域

如果整个卡片都可以点击，请使卡片在视觉上显而易见。否则，请将可点击区域限制为特定元素，以避免意外点击。

仅当卡片有某种用途时才允许点击整个卡片，例如导航到新的页面。否则，请将点击区域限制为特定按钮。

反馈

当用户与卡片交互时提供视觉反馈（例如，悬停效果、微妙的动画和颜色变化）。

顶部：不要在一张卡片中显示多个主要操作。底部：你可以将整个卡片设置为可点击，而无需主要操作按钮。当用户与卡片交互时，显示悬停效果。

7、分隔线

使用细边框或分隔线来分隔卡片内的各个部分，尤其是包含多个元素的复杂卡片。

不要在卡片上使用不必要的分隔线。

8、颜色对比

确保文本和背景颜色符合可读性对比度标准。使用易于阅读的字体，并在文本和背景之间设置适当的对比度，使卡片保持可读性。

设计卡片时使用清晰但不突兀的颜色对比。

9、菜单图标

将菜单图标放在用户习惯的常用位置，方便用户轻松找到。通常，卡片的右上角是菜单图标的首选位置，因为它是许多应用和网站上，用户熟悉的位置。

卡片间菜单图标的一致定位有助于打造更清晰、更可预测的界面。

在卡片上的适当位置显示菜单图标。

10、留白

在卡片中留出合理的空白，让卡片看起来整洁有序。在文本、图片和图标等元素周围留出足够的空白有助于在视觉上区分各个组件，防止卡片看起来杂乱无章。

在卡片设计中使用合理的空白。

卡片类型

你可以在设计中包含多种类型的 UI 卡片控件。

1、个人资料卡片

显示有关个人或实体的信息，例如其姓名、照片、头衔和个人简介。它通常用于团队页面、社交媒体个人资料或用户帐号信息。

常见元素包括个人资料图片、姓名、职位、联系信息和社交媒体链接等。

Fiverr 个人资料卡

Oladoc 个人资料卡

2、产品卡片

展示产品的基本信息，例如名称、价格、描述以及「添加到购物车」或「立即购买」等操作。它通常用于电子商务平台，或者在产品目录当中呈现。

常见元素包括产品图片、标题、价格、简短描述、评级和主要操作。

亚马逊产品卡片

Ebay 产品卡片

3、数据可视化卡片

这种卡片通常用来显示各种不同指标，通常用于仪表盘界面。这些卡片以紧凑的样式提供快速、可视化的数据走向或 KPI（关键绩效指标）。

常见元素包括数据值、图标或图像、趋势指标和相关的标签。

电子商务仪表盘显示销售分析的数据卡片

YouTube Analytics 的数据卡片

4、多媒体卡片

它可显示多媒体内容，例如照片、视频或音频。它非常适合图库、视频库和流媒体平台。

常见元素包括多媒体缩略图、标题、播放按钮、持续时间和少量描述。

Dribbble的多媒体卡片

Google 的多媒体卡片

5、服务型卡片

服务型卡片概括了商家、产品或网站提供的服务或功能。它经常用于 SaaS 平台和服务网站，以呈现各种选项。

常见元素包括图标或图像、服务名称、简短描述和操作链接。

Fiverr 的服务卡

其他一些卡类型包括：

• 文章或新闻卡片
• 事件卡片
• 菜谱卡片
• 联系卡片
• 推荐卡片
• 天气卡片
• 任务或待办事项卡片
• 位置或地图卡片
• 职位发布卡片
• 定价卡片

结论

卡片控件是 UI 设计的一个强大组件，将视觉吸引力与功能结合在一起。UX 设计师可以遵循给定的最佳实践来创建一个引人入胜的界面。请记住，精心设计的卡片最终有助于提供更好的用户体验。