了解如何在画板上布置适合不同设计和屏幕的设计。使用画板中的网格来定位设计元素。

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

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

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

单个 XD 文件中针对各种屏幕的多个画板
单个 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 上)。

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

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

方形网格

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

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

XD 中的方形方格
XD 中的方形方格

布局网格

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

将布局网格应用到画板后,可以使元素与其对齐(类似于方形网格)。但是,如果调整画板大小或调整网格,则固定的项目不会调整大小或重排。

XD 中的布局网格
XD 中的布局网格

显示或隐藏网格

选择一个画板,然后执行下列操作之一:

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

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

设置方形网格首选项

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

注意:

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

更改网格大小

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

将对象与方形网格对齐

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

在绘制对象时与网格对齐
在绘制对象时与网格对齐

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

设置布局网格首选项

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

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

改变画板大小时布局网格的行为
改变画板大小时布局网格的行为

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

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

更改列和间隔属性

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

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

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

如需更改列的宽度,请编辑默认的列宽度值。

在 XD 中设置布局网格
在 XD 中设置布局网格

更改边距

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

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

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

均匀编辑左右边距的大小
均匀编辑左右边距的大小
逐一编辑边距的大小
逐一编辑边距的大小

更改方形或布局网格颜色

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

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

    此时会出现拾色器。

    在网格中编辑
    在网格中编辑
  2. 您可以选择:

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

    注意:

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

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

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

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

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

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

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略