在本节教程中，我将展示如何使用软件来创建完全响应式的卡片设计。通过讲解，希望帮助大家能深入的了解自动布局和约束，并且熟练的在自己的设计中运用。

今天，咱们来扒一扒卡片设计，还是先来介绍一下

在页面设计中，自适应设计已成为必需品，因为现代设备种类繁多，屏幕尺寸也各不相同。通过使用自动布局，设计师和开发团队可以在所有设备上提供一致的用户体验，包括台式机、笔记本电脑、平板电脑和智能手机。卡片设计是响应式设计中常用的一种方法，用于在紧凑且易于理解的方式下呈现信息或内容。卡片通常用于移动和网页设计中，其具有定义宽度和高度、边框和投影等特征，使其具有升高和升高的外观。设计师可以通过自动布局和约束来排列卡片中的元素，以创建干净、有序的外观。

在本节教程中，我将展示如何使用软件来创建完全响应式的卡片设计。通过讲解，希望帮助大家能深入的了解自动布局和约束，并且熟练的在自己的设计中运用。

不同的软件做法基本上相同，只是名称有区别，今天的案例我使用的软件是Master GO。

响应式设计

当用户界面在各种设备和屏幕尺寸之间切换时，响应式设计手法就会动态的调整布局和样式，方便在任何设备上提供让用户最舒适的用户体验。这可以通过使用具有弹性布局实现。

响应式设计是非常必要，因为现代设备种类繁多，屏幕尺寸也各不相同。如果设计师为每种设备创建单独的设计版本是不切实际的。怕是得累死。通过使用响应式设计，可以在所有设备上提供一致的用户体验，包括台式机、笔记本电脑、平板电脑和智能手机。

通过使用自适应式设计，设计人员和开发团队可以在所有设备上提供一致的用户体验，并且大大的提高了工作效率。

自动布局和约束

自动布局和约束是主流UI设计软件（以Figma做代表）中创建响应式设计的两个关键概念。自动布局是一种设计方法，通过使用自适应间距（或称弹性布局）来调整元素在页面上的位置和大小。这种方法可以根据屏幕尺寸和分辨率的改变动态地调整设计，从而确保在各种设备上都能提供最佳用户体验。

约束是Figma中用于控制元素相对于其他元素的大小和位置的一种机制。通过设置约束，可以控制元素之间的相对位置和大小，确保它们在面对设计中的变化时能保持相对位置不变。约束可以防止设计因不同的屏幕尺寸或分辨率而变得混乱或散乱。它们可以帮助确保设计元素始终保持在预期的位置上，同时允许设计自适应并扩展以适应不同的设备。

卡片设计

UI 设计中的卡片是指包含内容和视觉元素（例如文本、图像和按钮）的容器。它们是用户界面设计中流行的设计元素，因为卡片提供了一种简单而有组织的方式来显示信息。卡片通常用于移动和网页设计，以紧凑且易于理解的方式呈现信息或内容。

在设计方面，卡片是矩形的，具有定义的宽度和高度、边框和阴影，使它们具有空间感和提升的外观。卡片中的内容通常对齐且间隔一致，营造出干净有序的外观。卡片灵活且适应性强，适用于各种模块。

上面是构成卡片的各个小组件，我们只有设置了一个自动布局和约束系统，才可以对任何大小或变化做出反应。咱们就是提供了一个卡片的样式模板，具体在产品中样式有所不同。

每个组件

做自动布局还是约束，我们都需要首先考虑屏幕尺寸和设备类型。尺寸框架的大小应该根据设计的网页或界面尺寸（以iPhone 为例）的屏幕大小来确定，以便在不同设备上呈现时都能清晰地显示。

在这里，我用master GO软件来演示一下，先随便建一个画板

1. 图片

给图片加一个蒙版，给图片加框，这样的话后期换任何图片，尺寸都是固定的。如果我想让图片根据卡片的高度和宽度进行缩放的话，就需要把水平和垂直的调整参数设置为适应。

可以看到：约束在左上方和右下方的时候，拉伸的区域是有区别的。

2. 标题和标签

带有产品标题通常会显示1行或2行文字，这里假如我设定显示最长的2行。但是如果产品名称超过2行，它会自动在末尾显示“...”，所以我将标题的调整大小设置为 省略文本。

因为宽度会根据卡片的宽度进行填充，所以我将标题的缩放设置为充满。
垂直将保持 2 行的最大高度，所以我将标题的调整大小设置为固定高度。

三、价格与标签

使用价格或者标签选项，这部分是不需要缩放尺寸，当卡片宽度增加时，价格将向左对齐，自定义数量将向右对齐。对于这样的响应式设置，在master GO 中只需要把自动布局属性的间距模式设置为自动分布式。

四、正文和说明

与产品名称类似，但是说明的文字长度较长，所以不需要硬固定2行的高度，而是会缩放容器的宽高。因此，将描述调整为宽度和高度的填充容器。此外，文本部分还有一个把大小调整为截断文本。

这样设定好以后，我们就可以做成一个组件了，应用看一下最终结果：

总结

要设计完美的响应式卡片，我们需要了解响应式设计的概念以及如何在软件中使用自动布局和约束。

通过在 软件中设置约束、调整大小和使用自动布局，就可以创建一个完美的响应卡片，这个卡片就能适应不同的屏幕尺寸和分辨率，以获得最佳用户体验。

Powered by Froala Editor