使用 Adobe XD 中的画板和网格。

画板通常代表您想要设计为移动应用程序或网站一部分的每个屏幕。

一个 Adobe XD 文件中可以包含多个画板。例如，您可以选择在单个文件中为基于移动设备、平板电脑和桌面的网络体验定义画板。或者，也可以选择在一个文件中针对单个平台为一个用户流程设计多个屏幕。

开始处理项目时，您可以从“开始”屏幕为画板选择预设大小。如果不想使用可用预设，则可以用自定义大小来创建画板。一旦创建了具有选定画板大小的新文件，就可以使用“画板”工具添加任意多个画板。

如需查看项目中的所有画板，请打开“图层”面板（单击工具栏中的 ）。

创建画板

首次创建项目或文件时，您可以通过主页屏幕上的一项预设来选择画板大小。如需指定自定义大小，请选择“自定义”并指定以像素为单位的大小。

如需将更多画板添加到现有文件中，请单击“画板”工具。然后，单击右侧面板上的预设之一，然后单击要放置画板的位置。

如需定义自定义大小的画板，请选择画板工具并直接在粘贴板区域绘制所需的画板。

创建可滚动的画板

您可以创建可通过垂直滚动条滚动的画板。

注意:此版本的 Adobe XD 不支持水平滚动。

制作可滚动画板：

使用预设大小创建的画板：如果内容继续超出画板的指定长度，请将画板底部拖动到所需的长度并继续设计。画板上的虚线表示可滚动内容的起始位置。

如需禁用滚动功能，请选择画板，然后在“属性检查器”的“滚动”部分中选择“无”。

自定义大小的画板：如需制作可滚动的自定义画板，请选择该画板，然后在“属性检查器”的“滚动”部分中选择“垂直”。

另外，请指定一个视口高度，即用于查看画板的窗口的大小。视口高度必须小于画板高度以便滚动显示。您还可以通过将画布上虚线头移到所需的位置来指定视口高度。

如需禁用滚动功能，请在“属性检查器”的“滚动”部分中选择“无”。

选择画板

如需选择画板，请单击选择工具并执行以下操作之一：

• 单击画板标题，或
• 双击画板的背景

复制画板和调整画板大小

在 Mac 上，按住 Option 键并拖动一个画板来进行复制。在 Windows 上，按住 Alt 键并拖动一个画板。

或者，在“图层”面板中右键单击画板名称，选择“复制”。然后，再次右键单击并选择“粘贴”。

如需调整画板的大小，请单击该画板并使用出现在边缘上的圆形手柄。

重新排列画板

单击画板标题并将其拖至新的位置。 

注意:您可以通过拖动图层面板中的画板来改变画板列表中画板的顺序。但是，这样做仅会改变画板的堆叠顺序，并不会改变它们的位置（X 和 Y 坐标）。

重命名画板

默认情况下会根据您选择的预设来对画板命名，并按顺序给画板编号。如需为画板指定自定义名称，请双击画板标题并输入新的名称。

您也可以在“图层”面板中重命名画板。双击或右键单击画板标题并选择“重命名”。

对齐和分布画板

框选多个画板并单击“属性检查器”中的“对齐和分布”选项。

在画板间复制和移动元素

您可以将一个画板上的任何元素自由移动到另一个画板上。只需拖动元素并将其放到所需的画板上即可。

如需复制元素，请使用 Command + C（在 Mac 上）或 Ctrl + C（在 Windows 上）。单击要在其中粘贴元素的画板，然后单击 Command + V（在 Mac 上）或 Ctrl + V（在 Windows 上）。

您也可以通过在按住 Option 键（在 Mac 上）或 Alt 键（在 Windows 上）的同时拖动元素来复制元素。

您也可以使用固定位置来固定滚动画板上的元素（如页眉和页脚）的位置或浮动固定的元素。在原型模式下，图钉图标表示固定元素，并且您可以将它们分层放置在其他设计对象的上方或下方。

注意:如果有一批对象在粘贴时不适合画板，则它们全都会粘贴到目标画板的中心。

您可以将画板周围的灰色区域作为粘贴板。您可以将任何元素放置在粘贴板中，并在需要时将其复制或移动到画板。 

注意:当您导出所有画板时，不会导出不属于任何画板的粘贴板中的元素。如果一个元素只有一部分被放置在画板上，那么只有位于画板上的元素部分才会被导出。

同时剪切、复制、移动，调整大小、缩放和删除多个画板

框选多个画板以同时编辑它们。 

使用选择工具，围绕您要选择的画板绘制选框。

当选择多个画板时，请确保完全选择这些画板。如果一个画板被部分覆盖，则会选择该画板内的对象而不是画板本身。

所选画板周围会出现一个定界框。 

调整大小

拖动定界框上的手柄可调整选定画板的大小。

剪切、复制和粘贴

按住 Ctrl 并单击（在 Mac 上）或右键单击（在 Windows 上）即可打开上下文菜单，使用该菜单，您可以剪切、复制并粘贴所有选定的画板。

删除

按键盘上的 Delete 键，或者按 Ctrl 并单击（在 Mac 上）或右键单击（在 Windows 上）打开菜单，然后即可删除选定的画板。或者，您可以在“图层”面板中选择一个或多个画板，右键单击，然后选择“删除”。

缩放 单击工具栏中的“缩放”图标或按键盘上的 Z 键可进入“缩放”模式。进入“缩放”模式后，您就可以：

• 放大：单击 XD 画布中的任意位置，或单击所需的画板。或者框选一个区域进行放大。
• 缩小：按 Option 并单击（在 Mac 上）或按 Alt 并单击（在 Windows 上）。

如需在不实际进入“缩放”模式的情况下快速缩放，您可以暂时激活“缩放”模式：

• 放大：按空格 + Cmd（在 Mac 上），或按空格 + Ctrl（在 Windows 上），然后单击或框选画板上的一个区域。
• 缩小：按空格 + Cmd + Opt。

如需放大画板上的特定对象，请选择这些对象，然后选择“视图”>“缩放至选区”或 ⌘ 3（在 Mac 上），或使用 Ctrl + 3 键盘快捷键（在 Windows 上）。

使用自定义画板参考线

“自定义画板参考线”可在多个画板上将对象轻松对齐到参考线，从而帮助您在画布上精确定位和布局对象。您可以创建参考线、调整其位置、在多个画板之间复制粘贴参考线、删除参考线、锁定或隐藏其可见性。

创建参考线：要创建垂直参考线，可将鼠标悬停在画板左侧边框上，在此处将出现一个双向箭头。将箭头图标拖放到画板上以创建参考线，然后释放以将参考线放在画板上。要创建水平参考线，可拖放画板顶部边框的箭头图标。在创建参考线时，参考线与画板边缘或其他参考线之间的距离以及画布上的绝对参考线位置会显示出来。

在创建过程中，参考线会与画布上的选定对象或顶级对象对齐。要暂时禁用对齐行为，可按 Cmd（在 Mac 上）或 Ctrl（在 Windows 上）。

在创建参考线过程中按住 Shift 键，可在画布上以 10px 为增量定位参考线。

复制粘贴参考线：要从画板复制参考线，可选择画板，然后在顶部菜单栏中单击“视图”选项。从下拉列表中单击“参考线”选项，然后选择“复制参考线”。将复制所选画板中的所有参考线。

要粘贴参考线，可选择要粘贴参考线的画板。单击 Cmd + V（在 Mac 上）或 Ctrl + V（在 Windows 上），以粘贴参考线。或者，在顶部菜单栏中单击“视图”选项（在 Mac 上），或右键单击画板（在 Windows 上），从下拉列表中选择“参考线”选项，然后单击“粘贴参考线”。

复制画板也会复制在该画板上创建的参考线。

清除参考线：要删除参考线，可单击参考线并将其拖出画板。要删除画板上的所有参考线，可选择画板并在顶部菜单中单击“视图”选项（在 Mac 上），或右键单击画板（在 Windows 上）。从下拉列表中单击“参考线”选项，然后选择“清除参考线”。

隐藏参考线：“隐藏所有参考线”选项可关闭所有画板中参考线的可见性，并禁用参考线创建功能。选择画板并单击 Cmd + ;（在 Mac 上）或 Ctrl + ;（在 Windows 上）以隐藏参考线。或者，可以在顶部菜单栏中单击“视图”选项（在 Mac 上），或右键单击画板（在 Windows 上），从下拉列表中选择“参考线”选项，然后单击“隐藏所有参考线”。

锁定参考线：“锁定所有参考线”选项可让您锁定所有画板上的参考线。如果锁定参考线，则您可以创建参考线并将对象对齐到参考线，但您无法更改参考线在画布上的位置。要锁定参考线，可按 Shift + Cmd + ;（在 Mac 上）或 Shift + Ctrl + ;（在 Windows 上）。或者，可以在顶部菜单栏中单击“视图”选项（在 Mac 上），或右键单击画板（在 Windows 上），从下拉列表中选择“参考线”选项，然后单击“锁定所有参考线”。

使用网格在画板上定位元素

XD 提供了两种网格选项：方形网格和布局网格。 

方形网格

方形网格提供可使对象和文本与之对齐的参考线。在进行绘制时，如果对象的边缘位于网格的对齐区域中，则对象会自动与网格对齐。

方形网格还可以帮助您在画板上布置对象或文本时快速了解测量情况。 

布局网格

您可以用布局网格，在 XD 中定义列。布局网格可帮助您定义设计的基础结构以及其中的每个组件如何响应不同的断点（用于响应式设计）。

将布局网格应用于画板后，可以使元素与网格对齐。但是，如果调整画板大小或调整网格，则固定的项目不会调整大小或重排。

显示或隐藏网格

选择一个画板，然后执行下列操作之一：

• 在 Mac 上：选择“视图”>“显示布局网格”，或“视图”>“显示方形网格”。
  
• 在 Mac 或 Windows 上：在“属性检查器”中，从“网格”下拉列表中选择一种网格类型并选中它旁边的复选框。
• 键盘快捷键: 
  • 显示方形网格：
    • 在 Mac 上 — ⌘ '  
    • 在 Windows 上 — Ctrl + '
  • 显示布局网格：
    • 在 Mac 上 — ⇧ ⌘ '
    • 在 Windows 上 — Ctrl + Tab

如需隐藏网格，请取消选中“网格”复选框。

设置方形网格首选项

您可以使用方形网格选项更改网格的间距及其颜色。您可以将一组网格选项保存为默认值，以便将来快速利用它们。如需更多信息，请参阅默认的方形或布局网格首选项。

注意:XD 会为其大部分测量值和字体大小或 iOS 中的测量值使用虚拟像素（与 CSS 像素相同的测量单位）。虚拟像素大致等于 72-dpi 显示器上的一个物理像素。目前无法在 XD 中更改测量单位。

更改网格大小

如需更改网格的大小，请在“属性检查器”中编辑间距值。间距值越小，网格越密集。 

将对象与方形网格对齐

如需将对象与网格对齐，请将对象拖向网格，直到对象的边缘之一位于网格的对齐区域内。

如需避免与网格对齐，请在按住 Cmd 键（在 Mac 上）或 Ctrl 键（在 Windows 上）的同时拖动鼠标并绘制对象。

设置布局网格首选项

当您启用布局网格时，XD 会智能地显示适合画板特性的列。例如，手机画板默认布局网格的列会比平板电脑画板的更少也更窄。

如果调整画板大小，则布局网格中列的宽度将相应改变以适应新的画板大小。画板上的对象会保持不变，而其与列的关系不会保持不变。

您可以在“属性检查器”中设置列数、列宽、列颜色、间隔宽度和边距大小等首选项。

更改布局网格后，可以将更改设置为默认设置，或者恢复为 XD 中的默认布局网格。如需更多信息，请参阅默认的方形或布局网格首选项。

更改列和间隔属性

您可以根据需要更改布局列属性。

如需设置布局网格中的列数，请在“属性检查器”中编辑列值。当您更改列数时，XD 会自动重新计算列的宽度。

画板上列之间的空间称为间隔宽度。通过编辑默认“间隔宽度”值来定义间隔的宽度。

如需更改列的宽度，请编辑默认的“列宽度”值。

更改边距

您可以在设置布局网格时更改边距的大小。 

要均匀地调整左右边距，请单击链接的左/右边距图标并编辑边距的值。

要单独调整所有四个边的边距，请单击每个边图标的不同边距，然后编辑每个边距的值。

更改方形或布局网格颜色

更改方形或布局网格颜色：

1. 对于方形网格，单击“方形大小”旁边的框，对于布局网格，则单击“列”旁边的框。

   此时会出现拾色器。

   在网格中编辑
2. 您可以选择：
   • 如果您知道确切的值，请在 HSBA 或十六进制字段中指定 HSBA 或十六进制值。
   • 使用颜色字段和颜色滑块调整颜色。执行此操作时，HSBA 和十六进制的数字值会相应地进行调整。  
   • 使用颜色滑块或通过输入一个百分比值来设置填充的不透明度。如果将 alpha 设置为 0，布局网格会切换为概要视图。
   • 使用滴管从画板中选择颜色。

   注意:Adobe XD 还支持十六进制代码的简略形式。例如，如果输入 0 并按 Return 键，则 XD 将自动显示代码为 #000000 的颜色。同样，您可以通过输入 0A 表示 #0A0A0A，通过输入 0AF 表示 #00AAFF。

   您会看到，当您修改“颜色”对话框中的选项时，网格颜色会发生变化。

3. 在您决定使用某个颜色后，请通过单击拾色器底部的 + 图标保存该颜色，以供轻松访问。

默认的方形或布局网格首选项

在“属性检查器”的“网格”部分单击“使用默认值”，可恢复为默认的方形或布局网格外观。

通过单击“设为默认值”将自定义网格首选项设置为默认值。此选项将为您的帐户设置默认网格选项。您用 XD 打开的任何新文件都会具备这一新默认值。

更多此类内容

• 教程：粘贴到多个画板