卡片式 UI 设计的 8 个秘诀，让你轻松打造高颜值界面

做卡片设计最重要的是什么？我将在这篇文章中分享 8 最关键的细节。在此之前，让我们一起来对付一下。 UI 梳理卡片设计的基础，总结哪些场景适合卡片设计。

卡片是 UI 其中一个组件元素可以创建一个清晰的视觉单元，使信息更具逻辑性。它通常包括：标题、描述、图片、按钮或链接。

一、一般在哪些场景中使用卡片设计？

产品目录页面：亚马逊、阿里、沃尔玛等大型电商网站 eBay 它们都使用卡片设计来呈现产品。通常，产品卡包括产品图片、标题、价格、折扣和行动按钮，您可以点击此行动按钮查看产品详细信息页面。

内容网站：新闻文章和社交媒体平台将使用卡组件的焦点设计来呈现每个内容，使用户能够快速扫描和阅读内容。

好用的卡片设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/practice?source=csdn&plan=bttcsdn01313

二、最佳实践

我相信有很多关于卡片设计的文章，但我想关注一些容易被忽视的设计细节。我希望这些要点能帮助你进一步优化卡片设计。

注意在卡片和背景之间设计合适的对比度

为了更好地区分背景中的卡片，您可以添加一个外部边缘或一个浅投影。

尽量保持字体大小，避免使用太小的字体大小

内容的可读性由所选字体和字体的大小决定。从下面的例子中可以看出，两张卡片的设计风格相似，但由于字体大小选择正确，整张卡片在视觉上变得更加平衡，对人眼更好，所以右边的卡片更容易识别。

有一些关于字体大小选择的经验可以与您分享，帮助您优化视觉水平。(彩云注:这里提到的尺寸应该指的更多。 PC 端）

标题，使用的字号将在 20px-96px 或更大，取决于卡的大小和具体内容

副标题，字号会使用小于主标题 2px-10px，这样更容易区分

正文，字号最少 16px。在某些情况下，如果使用一些字符本身比较大的字体，可以适当减少字号。

按钮，其字体大小不能小于文本字体大小。当需要显示多个选项时，主按钮需要使用更突出的字体样式（粗体） Semi-bold/Bold），二级按钮采用较弱的字体样式（一般来说，二级按钮采用较弱的字体样式） Regular/Medium）

为留白创建一个间距系统

留白是 UI 元素之间的空白区域将创建一个视觉组，以保持视觉水平。如果你想避免设计混乱，你需要确保一致性，你需要定义间距系统，这将对开发非常有效，减少代码量，更好地恢复。

对间距系统也有一些经验

选择一个基本单位，并用它作为基本单位 UI 元素间距的倍数值。一般来说，基本单位是基本单位。 4px(0.25rem)。不建议使用奇数，如奇数。这是因为设备中会有5px，这是因为设备中会有5px 1.5x 的 DPI，这个空白的缩放值会变成 7.5px 会导致像素模糊

尽可能设计与内容布局相似的加载状态

加载状态匹配即将到来的真实内容将减少用户对加载内容的不确定性。下面的例子，你可以看到右边正确的加载效果设计，这将更符合用户的心理期望。

定义卡的固定高度

在实际项目中，你需要设计一个卡元素，假设一个卡是一行内容，另一个卡是有的 4 文本内容。最好的解决办法是设计一张固定高度的卡，在内容较少的卡上使用空白，在内容较多的卡上使用文本截断。(彩云注:这样卡片效果更一致。)

使用网格作为卡片设计的基本规范

网格作为卡的布局基础，有助于内容的统一安排，这就是为什么它们在卡的设计中如此有用。当您需要时，您可以使用网格将卡的宽度扩展到所需的网格列数量。通常，您可以找到合适的卡宽度。在设计响应布局时，应为每个断点设计一个网格，并设计相应的卡尺寸。

（彩云注：有些人可能不太明白断点的含义，它指的是从 PC 切换到平板电脑，然后切换手机。屏幕大小在变化，布局也会相应变化。)

创建不同内容的卡片设计

如果您提前知道卡可能有不同长度的内容，请确保在设计中覆盖此情况。在不同的内容转换过程中，它将有助于开发以正确的方式恢复卡，以避免破坏内容对齐。

为更好的用户体验定义卡片交互

UI 通过触摸屏、鼠标或键盘设备与用户交互 UI 元素交互时的操作状态是特定用户交互中的视觉反馈。

与许多其他 UI 与元素（按钮、文本字段、下拉菜单等）相同，卡的状态应取决于上下文和定义之间的交互。对于特定的交互，卡应根据状态设置样式。最常见的卡状态列表：

默认：卡处于正常状态，无用户交互

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

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

焦点：当使用键盘或语音等输入方法时，卡片会显示得很亮。这种状态通常是蓝色的，但你可以选择自己的品牌颜色，只要你确保颜色和背景颜色至少 3:1 的对比度

选择：选择卡时的状态拖动：用户拖动卡时的状态

总结

卡片是 UI 你可以在大多数网站和移动应用程序中找到常见的组件。它太流行和实用了，所以你必须掌握卡片设计，并做很多练习。通过对这些知识点的研究，我们可以使它们在视觉上更有吸引力、更有效、更容易访问。当然，您也可以打开即时设计资源广场，上面有大量的卡片设计案例可以免费下载和使用，给您带来不同的灵感指导！还有手把手卡片设计教程哦！

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/practice?source=csdn&plan=bttcsdn01313