使用Axure制作系统原型课件

1、Axure原型工具培训原型实例制作小型-新一代开发部邹奕婷主要内容什么是AxureAxure实现效果展示Axure安装配置Axure基本功能介绍Axure的优缺点Axure原型实例制作讨论什么是Axure什么是AxureAxure RPAxure的发音Ack-sure。RP“Rapid Prototyping”的缩写。Axure RP Pro是美国Axure Software Solution公司的旗舰产品，是一个快速的原型工具。使用Axure可以快速地进行线框图和原型的设计，让相关人员对设计进行体验和验证，向用户进行演示、沟通交流以确认用户需求，并能自动生成规格说明文档。可以使用Axure进

2、行多人协同设计，并可以对设计进行版本控制管理。Axure实现效果展示Axure实现效果展示以进货单为例的实现效果展示进货单的单据页面及单据页面上的相关交互进货单的列表页面及列表页面上的相关交互选单流程（以进货单选择采购入库单为例）生单流程（以进货单生成采购入库单为例）以进货单为例的实现效果展示 进货单的单据页面及相关交互 单据展示。 表头日期参照、下拉/弹出参照、计算器参照的录入。 参照之间的联动：以部门、业务员联动为例。 现结金额弹出参照。 录入表体存货带出相关信息。 表体下拉参照、计算器参照的录入。 表体的增行、插行、复制行、删除行。 单据的保存、审核、弃审、删除（操作成功/失败）。 单据

3、的翻页、新增、复制、联查、打印。 工具栏菜单、状态戳、提示层、单据可编辑性、表尾 审核人/审核日期、底部按钮在不同状态下的变化。视频演示以进货单为例的实现效果展示 进货单的列表页面及相关交互 单据页面到列表页面的桥梁查询页面。 查询页面/列表页面中的高级/简单查询条件。 按照查询条件过滤列表记录。 查询条件的滤设页面。 列表中标题行复选框与记录行复选框的联动关系。 从列表页面到单据页面的跳转。 列表的批审、批弃审、批删操作： - 已勾选记录/未勾选记录； - 操作成功/失败。视频演示以进货单为例的实现效果展示 选单流程（进货单选择采购入库单） “选单选采购入库单”，打开采购入库单选单页面。 采

4、购入库单选单页面的查询条件。 选单页面中的列表默认不显示任何记录。 单击“查询”按钮后，显示出相关记录。 表头列表记录与表体列表记录的复选框联动。 列表标题行与记录行的复选框联动。 单击“确定”按钮 - 已勾选记录：将选单信息带入到进货单页面。 - 未勾选记录：给出提示。视频演示以进货单为例的实现效果展示 生单流程（进货单生成采购入库单） “操作生成采购入库单（普通采购）”，打开 由进货单流转来的采购入库单页面。 修改生成的采购入库单。 保存生成的采购入库单。 审核生成的采购入库单（状态戳：已审 已核算）。视频演示Axure安装配置Axure安装配置Axure安装安装步骤见文档：Axure安装

5、说明.docAxure配置项目信息选择“共享获取和打开共享项目”菜单。设置服务器上的共享目录。 设置本地目录的位置。关闭IE中的Active X 控件的警告信息Axure基本功能介绍窗口布局主菜单 & 工具栏设计面板页面导航面板 组件面板模块面板页面注释 & 页面交互面板注释 & 交互面板动态面板管理面板常用控件介绍动态面板文本块图片图片映射区域横向菜单Axure中的交互交互是由事件（Events）、场景（Case）和动作（Actions）组成的。用户在操作界面时会触发事件，例如：鼠标单击（OnClick）、鼠标进入（OnMouseEnter）和鼠标移出（OnMouseOut）。 每个事件可以

6、包含多个场景。场景即事件触发后要满足的条件。每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。 常用事件介绍OnPageLoad事件页面/控件在初始化时触发的事件。OnClick事件鼠标单击时触发的事件。控件的自定义事件可以给公共控件定义自定义事件。使用该公共控件的页面或控件可以看见这个自定义事件，进而可以在公共控件的基础上进行一些特殊的设置。常用菜单功能介绍关于共享工程的操作共享获取和打开共享项目共享从共享目录获取所有修改共享提交所有修改到共享目录共享全部签出/共享全部签入共享浏览共享项目历史文件将共享项目导出为文件关于生成原型的操作生成原型生成将当前页面重新生成为原型常

7、用菜单功能介绍关于对象的操作对象编辑位置和尺寸对象组合对象叠放层次对象对齐关于表格的操作表格选择行/表格选择列表格删除行/表格删除列表格在上方插入行/表格在上方插入行表格在左侧插入列/表格在右侧插入列Axure学习资料 http:/axure_tutorial /user-centered-design/axure-rapid-prototypingtutorialAxure的优缺点Axure的优点上手简单，学习费用低。目前最好的交互原型工具。Axure的缺点让人抓狂的页面调整。调整层次的顺序设置控件的位置、大小事件不够完善。缺少鼠标双击事件缺少键盘事件允许执行的动作太少。 例如：无法实现模式

8、对话框Axure的缺点无法按编程的思路去处理交互逻辑。 可以设置变量，但却只能简单调用，不能进行变量的运算。 事件的处理只能顺序执行，不支持循环等操作。 变量数有限。仅支持25个变量不支持中文页面的跳转。Axure原型实例制作原型实例制作单据页面及相关交互的制作列表页面及相关交互的制作查询页面及相关交互的制作选单流程的制作生单流程的制作联查页面的制作滤设页面的制作原型实例制作单据页面及相关交互的制作列表页面及相关交互的制作查询页面及相关交互的制作选单流程的制作生单流程的制作联查页面的制作滤设页面的制作单据页面及相关交互的制作单据工具栏菜单单据表头单据表体单据表尾单据保存、审核、弃审、删除、新增

9、、打印单据翻页单据联查单据工具栏菜单可以使用的公共控件公共控件工具栏菜单控件的两种使用模式Normal（正常模式）Custom Widget（自定义组件模式）单据工具栏菜单总体思路与设计要点将公共控件“单据页面工具栏”以自定义组件模式拖放至设计界面上。增加菜单项：从公共控件中选择合适的菜单项拖至适当的位置。删除菜单项：直接删除即可。修改菜单项：先删除要修改的菜单项控件；然后从公共控件中选择相应的菜单项以自定义组件模式拖至原来位置上；最后再进行菜单项内容的修改。对于以自定义组件模式拖拽过来的菜单项，其初始化事件会丢失，需要在使用该菜单项的页面上重新定义。公共控件“单据页面工具栏”包含4个部分：

10、1.工具栏菜单 2.状态戳 3.操作提示层 4.单据底部按钮视频演示单据表头可以使用的公共控件公共控件表头控件提供两种控件带字段标题的表头控件不带字段标题的表头控件单据表头总体思路与设计要点选择合适的表头控件拖至设计界面上。对于不带字段标题的表头控件，需要从组件面板中拖一个“文本块”控件来设置字段标题。为了避免调整层次，建议从最后一行控件开始拖起。建议将表头控件组合在一起，以方便最后整张单据的层次调整。设置参照之间的联动效果（以部门业务员参照联动为例）：在部门的OnDepartmentChanged事件中进行设置。视频演示单据表体可以使用的公共控件公共控件表体控件单据表体总体思路与设计要点将公

11、共控件表体明细控件以自定义组件模式拖放至设计界面。对表格进行增列、删列、改列的操作。移动单元格中的控件。选择合适的表体控件拖至新增加的单元格上。修改存货改变事件。修改复制行、插入行事件。视频演示单据表尾可以使用的公共控件公共控件表头控件表尾控件集合总体思路与设计要点将表尾控件集合以默认模式拖至设计界面，不需要做任何修改。整张单据的调整工作总体思路与设计要点调整层次。将公共控件“单据页面操作结果提示”拖至页面的最上方。设置单据表头、表体控件的是否必输。视频演示单据翻页总体思路与设计要点假设系统中有2张单据。为了实现翻页的效果，需要在单据页面的OnPageLoad事件中设置这2张单据的表头表体信息

12、。设置单据中的红字效果。修改上张的OnClick事件：设置VoucherCode变量和PageState变量。修改下张的OnClick事件：设置VoucherCode变量和PageState变量。单据页面的OnPageLoad事件中，进行上张、下张的可用性设置。在事件中添加Case分支时，默认都是Else If形式。视频演示单据联查定义联查菜单中子菜单项的OnClick事件以“联查进货单”为例。联查到相关单据：设置变量OperationsState的值为AssociationOK；在弹出窗口中打开进货单的联查页面。联查不到相关单据：设置变量OperationsState的值为Associati

13、onError；在弹出窗口中打开进货单的联查页面。视频演示单据页面及相关交互的制作单据页面设计总结每种单据只做一个单据页面。根据不同场景在单据页面的OnPageLoad事件中进行不同的设置，从而让单据展现出不同的状态效果。单据中的公共操作已经提取到公共控件中实现，例如保存、审核、弃审、删除、新增、打印。视频演示原型实例制作单据页面及相关交互的制作列表页面及相关交互的制作查询页面及相关交互的制作选单流程的制作生单流程的制作联查页面的制作滤设页面的制作单据列表及相关交互的制作列表工具栏菜单简单查询条件列表及相关交互列表工具栏菜单可以使用的公共控件公共控件工具栏菜单总体思路与设计要点所有列表的工具栏

14、菜单都一样，且没有可用性的变化。故直接将公共控件“列表页面工具栏”拖至设计界面即可，不需要进行任何改动。视频演示简单查询条件可以使用的公共控件公共控件查询条件总体思路与设计要点方法一：可以将公共控件“简单查询条件”以自定义组件模式拖至设计界面，再进行增、删、改操作。方法二：不使用公共控件“简单查询条件”。从“公共控件查询条件”中选择合适的控件拖放至设计界面。为了避免调整层次，建议从最后一行拖起。视频演示列表及相关交互可以使用的公共控件公共控件列表控件列表及相关交互总体思路与设计要点将列表面板以自定义形式拖放至设计界面。列表面板定义了三个层。将第1个层中的列表删除，以自定义组件模式将公共控件“默

15、认列表”拖至设计界面。增加、删除、修改列标题及列表内容。将审核人、单据状态移动到相应的位置。修改列表的序号单击事件。将第1个层中的列表复制到另外两个层中，并进行修改。视频演示原型实例制作单据页面及相关交互的制作列表页面及相关交互的制作查询页面及相关交互的制作选单流程的制作生单流程的制作联查页面的制作滤设页面的制作查找页面可以使用的公共控件公共控件查询条件总体思路与设计要点高级查询条件修改确定按钮事件修改单据页面的查找事件修改列表页面的查找事件视频演示原型实例制作单据页面及相关交互的制作列表页面及相关交互的制作查询页面及相关交互的制作选单流程的制作生单流程的制作联查页面的制作滤设页面的制作选单流

16、程总体思路与设计要点将Select PurchaseReceive页面的内容拷贝过来。修改查询条件（略）。更换两个列表的标题图片。修改进货单表头/表体列表。其中，每个列表均包含2个层。选单页面的OnPageLoad事件：设置2个列表层的切换。在采购入库单单据页面的OnPageLoad事件中，加入来自选单的表头表体信息设置。修改选单页面“确定”按钮的OnClick事件。设置菜单项“选单进货单”的OnClick事件。视频演示原型实例制作单据页面及相关交互的制作列表页面及相关交互的制作查询页面及相关交互的制作选单流程的制作生单流程的制作联查页面的制作滤设页面的制作生单流程总体思路与设计要点设置菜单项

17、“操作生成进货单（专用发票）”的OnClick事件：设置变量VoucherSource的值为FromGenerateVoucher；设置变量PageState的值为New；设置在弹出窗口中打开进货单页面。在进货单的OnPageLoad事件中设置来自选单时的表头、表体信息。即设置控件的初始值。视频演示原型实例制作单据页面及相关交互的制作列表页面及相关交互的制作查询页面及相关交互的制作选单流程的制作生单流程的制作联查页面的制作滤设页面的制作联查页面的制作需要使用的公共控件公共控件工具栏菜单联查页面工具栏公共控件列表联查列表联查页面的制作总体思路与设计要点将公共控件“联查页面工具栏”拖至设计界面，不需要做任何修改。将公共控件“联查列表”以自定义组件模式拖至设计界面。公共控件“联查列表”包含2个层。修改2个层中的列表内容。修改序号单击事件。由于公共控件“联查页面工