按钮、形状和文本 | Buttons, Shaps, & Text

在默认元件库中基本元件下的各种矩形、按钮和标题元件,以及占位符、文本标签和文本段落,都是形状元件。在图标元件库中的图标,以及你用钢笔工具绘制的任何元件,都是形状元件。

1.     创建形状
1.1.   从元件库面板中拖拽

Axure RP自带了很多现成的形状,你可以在元件库面板中找到它们,使用时,直接将其拖拽到画布中即可。

1.2.   “形状”菜单

界面左上方的“形状”菜单中,包含了一些不同的形状,点击选中一个形状,然后在画布中点击并拖动鼠标,即可画出刚才所选的形状。你可以在拖动鼠标时,按住SHIFT键以保持形状的长宽比不变。

你也可以使用一下单键快捷键来绘制常用的形状:

  •  R :矩形
  •  O :圆形
  •  L :线条
  •  T :文本段落
  •  P :钢笔工具
1.3.   钢笔工具

你可以使用“插入”菜单中的钢笔工具或使用快捷键 P 来绘制自定义的矢量形状,钢笔工具的原理和其他矢量绘图软件的一样:

  • 点击画布以添加新的矢量点
  • 点击并拖动以添加弯曲点
  • 拖动时按住SHIFT可将曲线手柄自动对齐到X或Y轴
  • 拖动时按住ALT可以独立移动两个曲线手柄
  • 点击第一个点可以闭合路径,双击画布可以创建一个开放的路径
1.4.   将SVG转换为形状

你可以把导入到Axure RP中的SVG图片转换为形状,右键点击SVG图片,在右键菜单中选择“变换图片→转换SVG图片为形状”。这样可以将SVG图片转换为一个或多个形状元件,从而便于对其进行编辑。

1.5.   从SKETCH中导入

你可以直接复制SKETCH中的元素,将它们以形状的形式粘贴到Axure RP中。

  1. 下载并安装SKETCH的Axure插件;
  2. 在SKETCH中,选择要复制的元素,然后选择“Plugins→Axure→Copy Selection fo RP”(或者,你也可以使用“Copy all Artboards for RP”选项来复制所有资源);
  3. 在Axure RP中,使用“编辑→粘贴”或在画布上点击右键,将从SKETCH中的复制的元素粘贴到项目中。
1.6.   从Adobe XD中导入

你可以直接复制Adobe XD中的元素,将它们以形状的形式粘贴到Axure RP中。

  1. 下载并安装Adobe XD的Axure插件;
  2. 在XD中,选择要复制的元素,然后选择“Plugins→Axure→Copy Selection fo RP”(或者,你也可以使用“Copy all Artboards for RP”选项来复制所有资源);
  3. 在Axure RP中,使用“编辑→粘贴”或在画布上点击右键,将从XD中的复制的元素粘贴到项目中。
1.7.   从Figma中导入

你可以直接复制Figma中的元素,将它们以形状的形式粘贴到Axure RP中。

  1. 下载并安装Adobe XD的Axure插件;
  2. 在XD中,选择要复制的元素,然后选择“Plugins→Axure→Copy Selection fo RP”(或者,你也可以使用“Copy all Artboards for RP”选项来复制所有资源);
  3. 在Axure RP中,使用“编辑→粘贴”或在画布上点击右键,将从Figma中的复制的元素粘贴到项目中。
2.     添加和编辑文本

你可以通过以下任意选项,来给形状元件添加文本,或编辑形状元件上现有的文本:

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

对于“占位符”元件,你可以右键点击它,然后选择“填充乱数假文”来将其填充。

3.     图片填充

“样式”面板中,除了其他的样式选项之外,你还可以为形状元件设置背景图片。选中形状元件,然后使用“填充”选项下的“图片”选项。

4.     旋转形状

使用“样式”面板中的“旋转”字段来控制画布中选中元件的旋转角度,该字段可以录入正值或负值,最多支持两位小数,正值使形状向右旋转,负值则使形状向左旋转。

4.1.   重置文本旋转

当旋转了一个形状元件后,你可以在元件上点击右键,然后选择右键菜单中的“变换形状→重置文本到0°”,来使文本恢复旋转前的状态。

5.     编辑形状
5.1.   更改形状

要想把形状元件更改为其他不同的形状,在形状元件上点击鼠标右键,然后在右键菜单中选择“选择形状”,此时会显示Axure RP中预置的形状列表。

你可以通过这种方式更改任何形状的元件,通过此方式更改元件形状,会保留该元件的所有注释及交互。

5.2.   编辑矢量点

当你创建了一个形状,你可以通过编辑它的矢量点对其进一步调整。选择形状元件并双击其边框,或者在形状上点击右键,选择右键菜单中的“变换形状→编辑点”

拖拽一个矢量点进行移动,想要添加新的是亮点,单击边框的空白处即可;想要删除一个矢量点,选中它,然后按DELETE键或点击右键选择“删除”

要想切换一个点的连接方式(平滑连接或直线连接),双击这个点或点击右键选择“曲线”或“折线”。你也可以右键点击元件,在右键菜单中选择“变换形状→曲线连接各点/折线链接各点”来一次性设置形状元件所有矢量点的连接方式。

5.3.   形状转换

你可以在选定的一个或多个形状元件上应用形状变换,在选中的元件上点击右键,进入“变换形状”选择选项。

水平/垂直翻转:沿X轴(水平)或Y轴(垂直)翻转形状。

合并(Unite):将多个形状合并成一个。

去除(Subtract):从另一个形状去除一个或多个形状,根据“概要”面板中的形状顺序,下面的形状会被去除上面的形状的部分。

相交(Intersect):保留两个或多个形状相交的部分。

排除(Exclude):将两个或多个形状合并在一起,但去除相交的部分,每个形状的剩余部分保留为一个或多个形状。

结合(Combine):将两个或多个形状合并为一个形状,但保留各自的原始路径(与合并Unite相对)。

分开(Break Apart):将先前组合的形状分解为单独的形状。

曲线/折线连接所有点(Curve/Sharpen All Points):将所选形状中的所有矢量点进行曲线连接或折线连接。

6.     转换为图片

如果你想将占位符或其他形状转换为图片,选中元件后,点击鼠标右键,选择“变换形状→转换为图片”,则可将形状元件转换为图片元件,并且保留原形状的所有注释和交互。

7.     引用页面

如果一个元件引用了一个页面,那么元件上的文本就是页面的名称,当页面名称改变时,元件上的文本也会自动随之改变。在Web浏览器中预览是,点击元件就可跳转到其引用的页面。

想要给形状元件添加引用页面,在“交互”面板中的“显示更多”下面点击“引用页面”

8.     单选组合

针对一组包含形状,线段,图片和动态面板的元件组合,当对其应用“选中”动作时,你可以只允许组合中的一个元件被选中(类似于单选按钮组中只有一个单选按钮可以被选中)。

想要了解更多,请查看单选组合章节。

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注