XD 中的画板

17 Mar 2025 | 5 分钟阅读

Adobe XD 中的画板是创建整个设计的画布。 它可以是移动屏幕到 Web 应用程序屏幕的任何内容。 它代表应用程序的屏幕。 这是应用程序设计将发生的实际画布。

画板简化了设计流程,并允许我们为多种尺寸的设备指定屏幕尺寸。 创建画板是为了设计特定的应用程序。 例如,如果我们想设计一个移动应用程序,我们将为移动屏幕尺寸选择一个画板。 画板是 Adobe XD 的基础,因此要学习 Adobe XD,必须对画板有很好的掌握。

每个 XD 文件可能包含多个画板。 Adobe XD 支持用于不同 iPhone、Android 和 Web 设备的几个预定义的画板。 但是,我们可以在 XD 中拥有一个自定义画板,这意味着我们可以为画板定义一个特定的大小。

Artboards in XD

Adobe XD 允许我们在单个文件中定义不同的屏幕和不同尺寸的画布。 我们可以在同一个文件中为 Web 应用程序和移动应用程序创建 UI。 我们不需要为同一个项目创建一个单独的文件。 Adobe XD 允许我们在同一个文件中选择不同尺寸的画板。 画板允许我们通过连接两个屏幕来定义交互式原型。 我们可以通过在应用程序的两个屏幕之间进行交互来获得应用程序的实时体验。

让我们了解如何在 Adobe XD 中添加画板。

如何在 Adobe XD 中添加画板

我们可以使用画板工具在 Adobe XD 中添加多个画板。 但是,我们必须至少选择一个画板才能开始在 Adobe XD 中工作。 当我们打开 Adobe XD 时,它会要求选择一个画板。 根据您的需要选择任何画板。 要在同一个工作区中创建一个新屏幕,我们必须在现有项目中创建一个新的画板。 让我们了解如何在 Adobe XD 中添加新的画板。

以下是在 Adobe XD 中创建新画板的步骤

  • 打开或创建一个新的 Adobe XD 项目
  • 通过从工具箱中选择它或按 A 键来选择 画板工具
  • 从右侧边栏菜单中选择画板
  • 或者单击画布区域以选择可用画板尺寸的画板。

让我们详细了解这些步骤

步骤 1:创建一个新项目

要创建一个新项目,请打开 Adobe XD 并选择一个画板开始工作。 默认情况下,它会显示不同的选项,例如 iPhone X、XS、Web、Instagram 快拍和自定义,用于选择一个画板。 您可以选择任何预定义的画板,或者为自定义尺寸的画板选择自定义选项。

Artboards in XD

例如,我们选择 iPhone X、XS、11 pros,它将是 375x812 px。 它将在我们的工作区中创建一个单独的画板。

Artboards in XD

步骤 2:选择画板工具

现在,如果您想创建多个画板,请选择画板工具。 可以通过单击工具箱中的以下图标或按“A”键来激活画板工具。

Artboards in XD

选择画板工具后,我们可以为新尺寸或与现有画板相同的尺寸添加画板。

步骤 3:添加一个画板

要添加与现有画板尺寸相同的画板,请单击工作区中的任意位置。 它将添加一个与现有画板尺寸相同的新画板。

Artboards in XD

从上面的图像中,我们通过在工作区中单击两次,在现有项目中添加了两个以上的画板。 就像这样,我们可以为多个屏幕添加任意数量的画板。

现在,如果我们想为不同的屏幕尺寸添加画板,我们可以从右侧边栏中选择它。

Artboards in XD

例如,如果我们想为 iPad 添加另一个屏幕,我们可以从给定的列表中选择它。 我们还可以在将其添加到工作区后,通过从右侧边栏选项中减少或扩展画板的高度和宽度来更改画板的大小。

Artboards in XD

从上面的图片中,我们为 iPad 屏幕添加了另一个画板。 因此,我们可以在一个 XD 文件中拥有不同的应用程序。

如何在 XD 中复制画板?

我们也可以在 Adobe XD 中复制画板。 复制画板不仅是复制画布,而且还是复制画板的内容。 如果您正在设计一个类似的屏幕,这将很有用。 您可以只复制屏幕并更改其内容以创建一个新的类似屏幕。 例如,如果您设计了一个登录屏幕并想创建一个注册屏幕,请复制登录屏幕并重用字段、标签、按钮和其他内容。 这对于重用内容很有用。

要复制画板,请导航到 编辑->复制 菜单或按 Ctrl+D 键组合。 它将复制包含其内容的画板。 复制画板的另一种方法是传统的复制和粘贴方法。 选择画板,按 Ctrl+C 键组合,然后使用 Ctrl+V 键组合粘贴它。

Artboards in XD

通过按照上面讨论的步骤,我们可以创建或复制一个画板。

Adobe XD 画板非常灵活,这意味着我们可以在任何时候增加或减小其高度和宽度。 让我们了解如何在创建画板后更改其大小。

如何创建可滚动画板

我们可以在创建画板后更改其大小。 要创建可滚动画板,我们必须增加其高度。 有时页面内容太大,所以我们必须使其可滚动。

要增加画板的高度,请在右侧边栏高度部分的 height 部分手动指定高度,或从底部拉伸它。

Artboards in XD

从上面的图像中,我们可以指定画板的高度。 增加尺寸的画板将如下所示

Artboards in XD

同样,我们可以更改画板的宽度。 不建议增加画板的宽度,而是我们可以为元素进行垂直滚动。 我们将在后面的章节中讨论滚动元素。

因此,我们可以更改 Adobe XD 中画板的大小。

在这里,我们讨论了画板以及如何创建、复制和更改它们。 画板是 Adobe XD 的基础,因此要学习 Adobe XD,必须对画板有很好的掌握。

画板的实用技巧

现在,我们已经学习了 Adobe XD 中的画板; 让我们看看一些在使用画板时有用的技巧。

  • 要测量元素与画板边缘的距离,请选择该对象并按 Alt 键(在 Windows 上)或 Option 键(在 Mac OS 上)。 它将显示与画板所有侧面的距离。
  • 要将对象对齐在画板的中心,请选择该对象并按右侧边栏中的水平居中和垂直居中图标。
    Artboards in XD
  • 我们还可以通过选择画板并在属性检查器中将滚动更改为“无”来关闭画板中的滚动。
    Artboards in XD

下一个主题Adobe XD 中的图层