组织 Widgets(元件) #

添加和移动 Widgets(元件) #

要在画布上添加一个 Widgets(元件),从 libraries(元件库) 面板中将元件拖到画布上即可。你也可以通过工具栏左边的的选项中插入更多类型的元件。

要移动一个 Widgets(元件),可以直接把它拖到合适的位置,或选中使用方向键移动它。你也可以使用顶部工具栏中的 XY 字段或在 Style(样式) 面板中定义精确的画布坐标。

当你在画布上拖动Widgets(元件)时,它们会与画布网格、你所设置的任何参考线以及附近的其他Widgets(元件)吸附。你可以在画布网格、参考线和吸附 (opens new window) 这篇文章中了解更多。

批量操作多个Widgets(元件) #

当你在画布上选择了多个Widgets(元件)时,你可以选择将它们作为一个整体来移动和更改样式,或者在选择中重新定位每个单独的 Widgets(元件)。

  • 要重新定位整个选区,请使用顶部工具栏中的 XY 字段。这将把选择的元件作为一个整体移动到画布上的目标坐标,而每个元件将保持它与目标坐标的相对距离。

  • 要重新定位每个单独的 Widgets(元件),使用样式面板中的 XY 字段。这将把选择中的每个元件移动到画布上的目标坐标。

注意

当选定的 Widgets(元件)位于画布上的不同位置时,样式面板中 XY 中的字段将是空白。

调整 Widgets(元件)的大小 #

要调整一个 Widgets(元件)的大小,在画布上选择它并拖动它的大小手柄。你可以在拖动的同时按住 SHIFT 键来保持Widgets(元件)的长宽比。

你也可以使用顶部工具栏中的 WH 字段或在 Style(样式) 面板中为一个 Widgets(元件)选择精确的尺寸。要保持 Widgets(元件)的长宽比,点击 WH 字段之间的 保持长宽比 图标。或者你可以在其中一个字段中输入一个新值后按下 SHIFT + 回车。

一次性调整多个 Widgets(元件)的大小 #

当你在画布上选择了多个元件时,你可以选择将整个选区按比例调整为一个整体,或者调整选区中每个单独的元件的大小。

  • 要调整整个选区的大小,请使用顶部工具栏中的 WH 字段。这将设置选区本身的宽度和高度,然后按比例调整所选元件的大小和位置,以适应所选尺寸。

  • 要调整每个单独的 Widgets(元件)的大小,使用样式面板中 WH 字段。这将把选择的尺寸应用于选择中的每个元件,例如,把每个元件的宽度设置为 150px。

注意

当选定的元件有不同的尺寸时,样式面板中 WH 字段将是空白。

距离参考线 #

当你在画布上移动一个Widgets(元件)时,会出现红色的参考线,向你显示该 Widgets(元件)和附近其它 Widgets(元件)之间的距离。这些参考线也会在 Widgets(元件)沿着边缘或中点对齐时提示你。

你也可以查看 Widgets(元件)之间的距离参线,而不需要移动它们:

  1. 选择一个 Widgets(元件)。

  2. 在按住 ALT 键的同时,将光标悬停在第二个Widgets(元件)上。

命名 Widgets(元件) #

在默认情况下,Widgets(元件)是没有被命名的。在 Outline(大纲) 面板中或其它需要显示Widgets(元件)名称的位置中,未命名的 Widgets(元件)由其 Widgets(元件)类型来标识。 (Rectangle), (Image), 等等。

如果你在Widgets(元件)上输入文字 (opens new window),它会被文本的前几个字所识别。例如,默认的段落 Widgets(元件)在 Outline(大纲) 面板中显示 Lorem ipsum dolor si

要给一个Widgets(元件)一个名字,在Outline(大纲) 面板中缓慢地双击它。或者,你可以选择它并 在Style(样式)Interactions(交互) 、或 Notes(笔记) 面板的顶部输入一个名字。

打组 Widgets(元件) #

你可以把Widgets(元件)分到不同组中 (opens new window) ,以便把它们作为一个整体来命名、定位和交互。要做到这一点,选择两个或更多的Widgets(元件),然后点击顶部工具栏的 Group 。要拆开一组 Widgets(元件),选择该组并点击 Ungroup

你可以在Widgets(元件)组 (opens new window) 这篇文章中了解更多。

图层顺序 #

当两个或多个Widgets(元件)相互重叠时,它们的图层顺序决定了哪个Widgets(元件)出现在前面。图层顺序较高的元件将出现在前面,而较低的元件将出现在后面。

图层顺序,或 “z-index”,也决定了可以在浏览器中用 TAB 键导航的Widgets(元件)的标签顺序,比如像文本字段 (opens new window)droplists (opens new window) 的表格Widgets(元件)。TAB 键首先关注最后面的Widgets(元件),然后逐步向前移动。

你可以在 Outline(大纲) 面板中查看一个Widgets(元件)的具体深度/z-index 位置。默认情况下,面板是从前到后排序的,所以面板顶部的Widgets(元件)在前面,底部的Widgets(元件)在后面。(如果需要,你可以通过点击 Outline(大纲) 面板右上方的 排序和过滤 图标来改变排序方向)。

重新排序 Widgets(元件) #

要改变一个元件的深度/z-index 位置,在 Outline(大纲) 面板中上下拖动它。

在顶部的工具栏中也有这方面的按钮。使用 Front 按钮将选定的元件移到图的前面,使用Back 按钮将其移到后面。

折叠和展开 Widgets(元件) #

要在 Outline(大纲) 面板中折叠或展开Widgets(元件)(或具有嵌套结构的Widgets(元件),请点击 Widgets(元件)或小组名称旁边的箭头。

你也可以点击Outline(大纲) 面板右上方的 排序和过滤 图标,并选择 Collapse/Expand All(折叠/展开全部) ,同时折叠或展开所有组。

对齐和分配 Widgets(元件) #

顶部工具栏中的Align(对齐)Distribute(分配) 工具可以用来组织选择的Widgets(元件)。

对齐工具可以将两个或更多选定的Widgets(元件)在水平方向的左边、中间或右边对齐,或在垂直方向的上面、中间或下面对齐。

分布工具可以在水平或垂直方向上均匀地分布三个或更多选定的Widgets(元件)的位置。

锁定 Widgets(元件) #

当你锁定一个元件时,你不能通过在画布上拖动它来改变其大小和位置;相反,你必须使用顶部工具栏或Style(样式) 面板中的字段。这有助于防止被锁定的 Widgets(元件)被意外地移动或调整大小。

要锁定或解锁一个Widgets(元件),请右键单击它,并在上下文菜单中选择 Locking(锁定) 下的适当选项。

提示

被锁定的元件在画布上被选中时有一个红色的边框。如果你无法拖动或调整一个特定的 Widgets(元件),请检查它的边框颜色,看看它是否被锁定。

隐藏 Widgets(元件) #

你可以在画布上隐藏 Widgets(元件),这样它们就不会在浏览器中被看到。

要隐藏一个Widgets(元件),选择它并点击顶部工具栏或 Style(样式) 面板中的 Hidden 图标。

隐藏的元件在画布上显示为黄色的蒙版。