Axure RP8网站与App原型设计经典实例教程
上QQ阅读APP看书,第一时间看更新

2.2 工具栏

2.2.1 选择、连接和画笔

见图2-2,包括选择方式、连接线、画笔工具、图片操作、流程操作和格式设置。

选择工具:使用时分两种形式,一种是选中部分元件,另一种是选中全部元件,如图2-3所示。

图2-2

图2-3

连接工具:常在绘制流程图的时候使用,使用目的是连接两个元件,如图2-4所示。

画笔工具:“画笔工具”是Axure RP8中新增的一个工具,使用它可以自由绘制矢量图,并且可以调节节点。使用“画笔工具”绘制原型时分两种方式,一种是连续单击绘制“直线”,另一种是单击后持续按住鼠标左键拖动“画贝尔曲线”,同时在用右键单击“连接点”后弹出的菜单中可以将“曲线”和“直线”做来回切换,如图2-5所示。

图2-4

图2-5

边界点:用来显示绘制的曲线的连接点。

切割和剪裁工具:用来处理图片。

连接点:用来显示流程图元件上哪些点可以进行连接。

格式刷:用来设置默认的元件样式。

2.2.2 排列顺序

在Axure操作过程中免不了要不断地添加元件,为了让元件有规律地进行排列,需要设置元件的显示顺序。设置时可以先选中指定元件,然后单击鼠标右键,选择“顺序”选项,并按照需求选择排列方式,如图2-6所示。

图2-6

2.2.3 编组与打散

编组元件是为了在操作时便于选择,如当界面上已经有十多个元件了,如果想整体移动它们,避免逐个选择后才能移动所带来的麻烦,可以把这些元件都选中,并编到一个组里,然后整体选择后再移动。

同时,将所有元件都编好组之后,还可以单独选中该组中的“子元件”进行二次编组,编组时除需要编组的元件之外,其他元件部分都将处于“灰色”状态,如图2-7所示。

除此之外,我们还可以对编组元件设置共同样式,避免逐个设置所带来的麻烦。编组之后的元件可以再次打散,同时,打散后的元件不能通过单击来做整体选择。

提示

“编组”快捷键:Ctrl+G。

“打散”快捷键:Ctrl+Shift+G。

图2-7

2.2.4 对齐与分布

“对齐与分布”功能在对界面没有特别要求的情况下很少使用,一般在具体操作时只需要手工拖动元件,并肉眼观察一下即可。其中偶尔会用到的是“垂直分布”或“平均分布”功能,当在选择3个或3个以上相似形状和大小的元件进行上下排列时,会让它们都“垂直对齐”后,再“平均分布”。

以下面演示为例,图2-8所示为4个大小一样的“占位符”,在这里我们希望将它们顶部对齐后,再水平方向做“平均分布”处理。

在具体操作时,首先选中所有的“占位符”,然后选择工具栏中的“顶部对齐”选项,效果如图2-9所示。

图2-8

图2-9

当确定所有“占位符”都处于同一高度之后,在工具栏中选择“水平分布”选项,完成操作,效果如图2-10所示。

提示

利用以上操作方式,仅两步就可以将元件排列整齐,因此特别适用于相同元件的快速排列。

图2-10

2.2.5 锁定与解锁

针对界面上已设计好的元件,如果不想因为在进行其他元件设计与操作时影响到它们,可以选择将这些元件锁定(快捷键Ctrl+K),锁定的元件边框以“红色虚线”显示,锁定之后则不能再对其进行其他操作。锁定后边框为“红色虚线”的表示为已锁定的元件,边框为“绿色虚线”的表示为未锁定且可操作的元件,如图2-11所示。

图2-11

锁定后如果想要再次操作它们,可以对它们进行解锁(快捷键:Ctrl+Shift+K)操作。

2.2.6 样式工具栏

Axure样式工具栏中的功能几乎和Word(全称Microsoft Office Word)中的功能完全一样,包括字体选择、字体大小、粗体、斜体、下画线、文本对齐以及背景填充等。

其中值得一提的是里面有一个关于“元件宽度和高度”的设置功能,即“保持宽高比例”的功能,如图2-12所示。

当单击宽度和高度之间的[]图标之后,界面中会保持元件默认的宽高比样式,此时如果修改元件的宽度值,系统会自动根据元件现有的宽高做比例调整,如图2-13所示。

图2-12

图2-13

例如,一个宽度为200,高度为100的矩形,当锁定其宽高比之后,将宽度值修改为300,则高度值会自动变为150。

提示

当利用“锁定”功能将指定元件锁定后,不能直接在界面中通过直接拖动元件的大小来改变其大小,只能在工具栏的对应输入框中输入指定的值数来进行改变。