Axure RP 8 交互原型第6章.pptx

Axure RP 8 交互原型设计案例教程（微课版）第6章流程图微课版流程图6.1 使用流程图元件6.1.1 认识流程图元件在【元件库】面板中，可以找到流程图元件库，如图6-1 所示。图 6-1 流程图元件库Axure RP 8 交互原型设计案例教程（微课版）第6章流程图6.1 使用流程图元件6.1.1 认识流程图元件凡事都有规可循，为便于识别，流程图也有一套约定成俗的标准图形。Axure RP 中主要流程图元件的含义如表6-1 所示。表6-1 流程图图标含义Axure RP 8 交互原型设计案例教程（微课版）第6章流程图6.1 使用流程图元件6.1.1 认识流程图元件快照引用页面有3 种方法。1. 双击页面中的快照元件在打开的【引用页面】对话框中选择要引用的页面，如图6-2所示。2. 右击页面中的快照元件右击页面中的快照元件，从弹出的快捷菜单中执行【引用页面或者母版】命令。图 6-2 选择引用的页面Axure RP 8 交互原型设计案例教程（微课版）第6章流程图6.1 使用流程图元件6.1.1 认识流程图元件3. 通过【属性】子面板添加引用页面选择页面上的快照元件后，在【检视】→【属性】子面板的“快照”参数栏中单击“添加引用页面”。快照引用的页面不可以是快照所在的页面。当快照引用了一个页面后，引用页面的内容如果发生了改变，则快照也会实时发生改变。默认状态下，快照引用页面后，会自动调整引用页面的大小比例，以适合快照元件的大小。Axure RP 8 交互原型设计案例教程（微课版）第6章流程图6.1 使用流程图元件6.1.1 认识流程图元件当然也可以在【属性】子面板中设置引用页面在快照元件中的大小和偏移，例如，将引用页面向右偏移20 像素，向下偏移50 像素，并且将引用页面整体大小缩放到原来的一半，如图6-3 所示。图 6-3 设置引用页面在快照中的偏移量和大小Axure RP 8 交互原型设计案例教程（微课版）第6章流程图6.1 使用流程图元件6.1.1 认识流程图元件无论是否选择“适应比例”，都可以设置引用页面在快照中的边距，默认状态下，引用页面在快照元件4 条边的边距都是5 像素，如图6-4 所示。图 6-4 快照周围4 条边的边距Axure RP 8 交互原型设计案例教程（微课版）第6章流程图6.1 使用流程图元件6.1.2 连接流程图元件使用主工具栏的【连接模式】工具（【Ctrl+3】）可以将流程图元件连接起来。首先在页面创建相应的流程图元件，然后使用【连接模式】工具将各个元件连接起来。使用该工具连接元件时，会在元件周围出现×标志，该标志就是元件中可以连接的点，按下鼠标左键并将鼠标指针拖到另一个元件（目标元件），此时另一个元件也会出现×标志。将鼠标指针对准要连接的×标志时，该标志处出现一个红色的小圆圈，释放鼠标左键即可连接起来。Axure RP 8 交互原型设计案例教程（微课版）第6章流程图6.1 使用流程图元件6.1.3 编辑流程图的连接线流程图之间是用连接线连接的，可以使用【连接模式】工具编辑连接线连接的位置，也可以设置连接的颜色、宽度、类型以及是否添加箭头等操作，如图6-5 所示。图 6-5 编辑后的连接线Axure RP 8 交互原型设计案例教程（微课版）第6章流程图6.1 使用流程图元件6.1.4 编辑元件的连接锚点编辑元件的连接锚点主要包括移动、添加和删除三项操作。1. 移动连接锚点位置默认状态下，一个元件上通常会有4 个连接锚点。如果要添加、删除或者移动连接的锚点，可以使用主工具栏上的【连接锚点】工具（【Ctrl+8】）。首先要选择页面上的元件，然后选择【连接锚点】工具，此时元件周围出现4 个小圆圈，如图6-6 所示。图 6-6 【连接锚点】工具Axure RP 8 交互原型设计案例教程（微课版）第6章流程图6.1 使用流程图元件6.1.4 编辑元件的连接锚点使用【连接锚点】工具拖动某个小圆圈即可改变连接锚点的位置，如图6-7 所示。图 6-7 改变连接锚点的位置Axure RP 8 交互原型设计案例教程（微课版）第6章流程图6.1 使用流程图元件6.1.4 编辑元件的连接锚点2. 添加连接锚点使用【连接锚点】工具直接在原件上单击即可添加更多的连接锚点。3. 删除连接锚点使用【连接锚点】工具选择要删除的连接锚点并按【Delete】键，即可删除多余的连接锚点，或者使用【连接锚点】工具右击要删除的连接锚点，从弹出的快捷菜单中执行【删除】命令，也可以删除多余的连接锚点。Axure RP 8 交互原型设计案例教程（微课版）第6章流程图6.2 使用页面生成流程图6.2.1 页面类型默认状态下，启动Axure RP 时自动生成的4 个页面都是普通的页面，可以使用鼠标右击某个页面，在弹出的快捷菜单中执行【页面类型】中的两