默认元件库的“常用”部分中的各种矩形,按钮和标题都是形状元件,以及占位符,标签和段落。图标元件库中可用的图标也是形状,您用钢笔工具绘制的任何元件也都是形状。
形状元件 - 图1 形状元件 - 图2 形状元件 - 图3 形状元件 - 图4 形状元件 - 图5 形状元件 - 图6 形状元件 - 图7 形状元件 - 图8

创建形状

从“库”窗格中拖动

Axure RP带有各种现成的形状,您可以在“库”窗格中访问它们。要将其添加到设计中,请将其从窗格中拖放到画布上。

插入菜单

界面左上角的“插入”菜单包含可以添加到设计中的许多其他形状。选择一个形状,然后在画布上单击并拖动以绘制它。您可以在拖动时按住SHIFT以限制其长宽保持一致。
形状元件 - 图9
也可以使用以下单键快捷方式绘制最常用的形状:

  • R-矩形
  • O-椭圆形
  • L-线条
  • T-文本段落
  • P-钢笔工具

钢笔工具

形状元件 - 图10
您可以使用钢笔工具绘制自己的矢量形状,该工具可在“插入”菜单中或按P来使用。钢笔工具的工作原理与其他矢量绘图应用程序中的等效工具类似:

  • 单击画布以添加新的矢量点
  • 单击并拖动以添加弯曲点
  • 拖动时按住SHIFT以自动将曲线手柄与X或Y轴对齐
  • 拖动时按住ALT以相互独立地拖动手柄
  • 单击第一个点以关闭路径,或双击画布以创建一个开放的路径

将SVG转换为形状

右键单击并选择“转换图像”→“将SVG转换为形状”,可以编辑已导入到Axure RP中的SVG矢量图。这样将用一个或多个形状元件替换SVG图像,然后您就可以像编辑其他形状元件一样对其进行编辑。

从Sketch导入

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

  1. 下载并安装适用于Sketch的Axure插件
  1. 在Sketch中,选择要复制的元素,然后转到Plugins→Axure→Copy Selection for RP。(或者,您可以使用“为RP复制所有画板”选项复制所有元素。)
  1. 在Axure RP中,使用“编辑”→“粘贴”或右键单击画布以将“Sketch”元素粘贴到项目中。

添加和编辑文本

您可以通过以下任意选项将文本添加到形状元件或编辑其当前文本:

  • 双击形状以进入文本编辑模式
  • 选择形状,然后按ENTER进入文本编辑模式
  • 右键单击形状,然后在上下文菜单中选择“编辑文本”
  • 选中形状并开始输入。(仅当您禁用了单键快捷方式时,此选项才可用)

您也可以通过右键单击形状元件并选择“用Lorem Ipsum填充”来自动用占位符文本填充形状元件。

图像填充

形状元件 - 图11
除了“样式”窗格中可用的其他样式选项之外,还可以为形状元件提供背景图像。要给形状提供背景图像,请选择它并使用“样式”窗格中“填充”下的“图像”按钮。

旋转形状

形状元件 - 图12
使用“样式”窗格顶部的“旋转”字段来旋转画布上的选定形状。该字段接受正和负的度值,最多两个小数位。正值将形状向右旋转,负值将形状向左旋转。

重置文字旋转

旋转形状元件后,可以通过右键单击改变形状→重置文本为0°将其文字转换为0°。
形状元件 - 图13

编辑形状

改变形状

要将形状元件更改为其他形状,请右键单击并在上下文菜单中选择“选择形状”。这时会显示一个可供选择的Axure RP预配置形状列表。
您可以通过这种方式更改任何形状的元件。这样的好处是当您要更改形状时,执行此操作而不是创建新的形状元件,就能保留该元件的所有注释和交互。

编辑向量点

创建形状后,可以通过编辑其矢量点进一步对其进行调整。首先,选择元件并双击其边框,或右键单击并在上下文菜单中选择“编辑点”。
拖动一个矢量点将其移动。要添加新点,请单击边框上的空白点。要删除一个点,请选择它,然后按DELETE或右键单击并在上下文菜单中选择“删除”。
要在曲线和锐化之间切换一个点,请双击它或右键单击并在上下文菜单中选择“曲线”或“锐化”。您还可以通过右键单击元件并选择“改变形状”下的任一选项来一次弯曲或锐化所有点。
形状元件 - 图14

形状转换

您可以将多个变换应用于一个或多个选定的形状元件。右键单击您的选择,然后点击“改变形状”以访问这些选项。
水平/垂直翻转:沿y轴(水平)或x轴(垂直)翻转形状
合并:将多个形状合并为一条路径的形状
形状元件 - 图15
去除:在选中的所有形状中,以最底部的形状减去位于上层的所有形状
形状元件 - 图16
相交:仅保留两个或更多形状的相交部分
形状元件 - 图17
排除:将两个或多个形状连接在一起,但不包括任何重叠的线段。消除了重叠区域,并将每种形状的其余部分保留为一条路径
形状元件 - 图18
结合:将两个或多个形状合并为一个形状,并保留每个原始路径(与合并相对)
分开:将先前组合的形状分解为单独的形状
弯曲/锐化所有点:弯曲或锐化选定形状中的所有矢量点

转换成图片

如果您想将占位符或其他形状替换为真实图像,则可以在保留其所有注释和交互的同时,将形状元件转换为图像元件。只需右键单击形状元件,然后在上下文菜单中选择“转换为图像”。

引用页面

将引用页分配给形状可以完成三件事:

  • 形状上的文本设置为页面名称。
  • 如果页面被重命名,则形状的文本会自动更新。
  • 在网络浏览器中单击该形状将打开页面。

要将引用页分配给形状元件,请在“交互”窗格的“形状属性”部分中单击“显示全部”,然后单击“引用页”。
形状元件 - 图19
形状元件 - 图20

选项组

您可以在一组形状,线条,图像和/或动态面板元件之间创建同组选项关系,这样一来通过“设置选中”操作,一次只能将一个元件设置为选中状态。(类似于单选按钮组中单选按钮之间的关系。)
要了解更多信息,请查看“选项组”文章。


—— 作者:Axure工坊,智新信息科技(广州)有限公司旗下的原创软件与互联网原型作品、素材、模板的共享交易平台,提供PC、APP、小程序、WEB等各端及电商、O2O、门户网、大数据等各行业的原型设计资源。
—— 官网:www.axured.cn
—— Axure交流群:681760590
—— 作品中心:原型作品及元件库下载