形状元件 #

默认元件库的各种矩形、按钮和标题都是形状元件，还有占位符、标签和段落。Icons w元件库中的图标也是形状，你用钢笔绘制的任何 widget 也是形状元件。

创建形状 #

从元件库中拖出 #

Axure RP 提供了各种现成的形状，你可以在 libraries（元件库） 面板中访问。要在你的设计图中添加一个形状，从面板中直接把它拖到画布上即可。

插入菜单 #

界面左上方的插入菜单包含一些额外的形状，你可以将其添加到你的设计中。选择一个形状，在画布上点击并拖动以绘制它。你可以在拖动时按住 SHIFT 键来限制其比例。

最常用的形状也可以用快捷键切换到对应工具

  • R 矩形
  • O 椭圆形
  • L 线路
  • T 文本
  • P 钢笔工具

钢笔工具 #

你可以使用钢笔工具绘制你自己的矢量图形，该工具在 Insert 菜单中可用，或者按 P 键调出。钢笔工具的工作原理与其他矢量绘图应用程序中的同类工具类似。

  • 点击画布，添加一个新的矢量点

  • 点击并拖动以添加一个弯曲的点

  • 拖动时按住 SHIFT 键，可以将曲线手柄自动吸附到 X 或 Y 轴。

  • 拖动时按住 ALT 键，可以独立移动拖动手柄。

  • 点击第一个点来关闭路径，或者双击画布来创建一个开放路径

将 SVG 转换为形状 #

你可以通过右击并选择 Transform Image → Convert SVG to Shapes 来编辑你已经导入 Axure RP 中的 SVG 资产。这将用一个或多个形状元件替换 SVG 图像，然后你可以像编辑其他形状元件一样编辑这些元件。

从 Sketch 中导入 #

你可以直接从 Sketch 复制资产，并将其作为形状元件粘贴到 Axure RP 中。

  1. 下载并安装 the Axure plugin for Sketch (opens new window) 。

  2. 在 Sketch 中，选择你想复制的元素，然后进入 Plugins → Axure → Copy Selection for RP 。（或者你可以用 Copy All Artboards for RP 复制所有资产。）

  3. 在 Axure RP 中，使用 Edit → Paste 或右键单击画布粘贴，将 Sketch 元素粘贴到项目中。

从 Adobe XD 导入 #

你可以直接从 Adobe XD 复制资产，并将其作为形状元件粘贴到 Axure RP 中。

  1. 下载并安装 the Axure plugin for Adobe XD (opens new window) 。

  2. 在 XD 中，选择你想复制的元素，然后进入 Plugins → Axure → Copy Selection for RP 。（或者，你可以用 Copy All Artboards for RP 选项复制所有资产。）

  3. 在 Axure RP 中，使用 Edit → Paste 或右键单击画布粘贴，将 XD 元素粘贴到项目中。

从 Figma 导入 #

你可以直接从 Figma 复制资产，并将其作为形状元件粘贴到 Axure RP 中。

  1. Install the Axure plugin for Figma (opens new window).

  2. 在 Figma 中，选择你要复制的元素，然后转到 Plugins → Axure → Copy Selection for RP 。（或者，你可以用 Copy All Frames for RP 选项复制所有资产）。

  3. 在 Axure RP 中，使用 Edit → Paste 或右键单击画布粘贴，将 Figma 元素粘贴到项目中。

添加和编辑文本 #

你可以通过以下任何一个选项向一个形状元件添加文本或编辑其当前文本。

  • 双击形状，进入文本编辑模式
  • 选择形状并按回车键，进入文本编辑模式
  • 右键单击该形状，在上下文菜单中选择 Edit Text
  • 选择形状并开始输入

你也可以通过右键单击形状元件并选择 Fill with Lorem Ipsum ，用占位符文本自动填充该元件。

图像填充 #

形状元件也可以填充背景图像。要给一个形状一个背景图像，选择它并使用 Style 面板中 Fill 下的 Image 按钮。

旋转形状 #

使用 Style 面板顶部的 Rotation 字段来旋转画布上的选定图形。这个字段接受正负度的数值，最多有两位小数。正值将形状向右旋转，负值将形状向左旋转。

重置文本旋转 #

在旋转形状元件后，你可以通过右键单击形状的文本并选择 Transform Shape → Reset Text to 0° ，将其旋转回 0°。

编辑形状 #

改变形状 #

要将一个形状元件改为不同的形状，请右键单击并在上下文菜单中选择 Select Shape 。这将弹出 Axure RP 的预设形状列表，你可以从中选择。

你可以用这种方式改变任何形状的 Widgets（元件）。当你想改变形状时，这样做而不是创建一个新的形状 Widgets（元件），可以保留 Widgets（元件）的所有注释和交互。

编辑矢量点 #

在你创建了一个形状之后，你可以通过编辑它的矢量点来进一步调整它。要想开始，选择Widgets（元件）并双击其边界，或者右击并在上下文菜单中选择 Edit Points 。

拖动一个矢量点来移动它。要添加一个新的点，点击边界上的一个空白处。要删除一个点，选择它并按下 DELETE，或者右击并在上下文菜单中选择 Delete 。

要在曲线和锐化之间切换一个点，可以双击它或者右击并在上下文菜单中选择 Curve 或 Sharpen 。你也可以通过右键单击 Widgets（元件）并在 Transform Shape 下选择任何一个选项来一次对所有的点进行弯曲或锐化。

形状转换 #

你可以对一个或多个选定的形状元件应用一些转换。右键形状，然后进入 Transform Shape ，以访问这些选项。

Flip Horizontal/Vertical: 在 Y 轴（水平方向）或 X 轴（垂直方向）上翻转形状。

Unite 联集: 将多个形状合并为一个路径

Subtract 减去顶层: 将一个或多个形状从另一个形状中减去。前面的形状将从最后面的形状中减去。

Intersect 交集: 只保留两个或多个图形的相交部分

Exclude 差集: 将两个或多个形状连接在一起，排除任何重叠的部分。重叠的区域被消除，每个形状的剩余部分被保留在一个可能有多个路径的形状中。

Combine 合并: 将两个或多个形状合并成一个形状，并保留每个原始路径（与 Unite 相反）。

Break Apart 分解: 将以前组合的形状分解成独立的形状

Curve/Sharpen All Points 弯曲/锐化所有点: 弯曲或锐化所选形状的所有矢量点。

转换为图像 #

如果你想把一个占位符或其他形状换成一个真正的图像，你可以把你的形状元件转换成一个图像元件，同时保留它的所有注释和交互。只需右键单击形状元件并在上下文菜单中选择 Convert to Image 。

参考页 #

将参考页分配给形状可以做三件事:

  • 形状上的文字被设置为该页的名称。
  • 如果页面被重新命名，该形状的文本会自动更新。
  • 在浏览器中点击该形状就可以打开该页面。

要将参考页分配给形状元件，在 Interaction 面板的 Shape Properties 部分点击 Show All ，然后点击 Reference Page 。

可选组 #

您可以在一组形状、线条、图像和/或动态面板小部件之间创建一种关系，在该关系中，一次只能将一个小部件设置为其所选状态，并设置为 “已选择” 状态。(这类似于单选按钮组中元素之间的关系。)

要了解更多，请查看 可选组 (opens new window) 文章。

复选框元件