Axure RP Pro 5 简易操作指南

AxureRPPro5简易操作指南文件版次：V1.0编写人签字/日期：彭青波/2010.8.17审核人签字/日期：批准人签字/日期：北京中电普华信息技术有限公司发布操作指南1目录1.编写目的......................................................................................................................................22.AXURERPPRO5安装...............................................................................................................23.AXURERP-PRO操作..................................................................................................................33.1.认识AxureRP-Pro操作界面.......................................43.2.AxureRP-ProDEMO制作过程.......................................74.生成演示文档............................................................................................................................115.Q&A............................................................................................................................................12操作指南21.编写目的为了更好的支持“营销稽查监控平台业务需求设计”工作的开展，做好需求验证工作，顺利的进行UE（展现界面）实现验证，特对AxureRPPro5UE工具安装、操作进行简要的介绍。2.AxureRPPro5安装运行AxureRP-Pro-Setup5.6.exe安装文件。点击，进入AxureRP-ProLicenseAgreement页面。操作指南3勾选页面中，然后点击，进入SelectDestination页面。确定安装目录，然后点击，进入ProgramShortcuts页面。默认，然后点击，进入下一页面。点击，进行安装。点击，完成AxureRP-Pro的安装。3.AxureRP-Pro操作运行AxureRP，最好进行注册，下面是一个注册版启动示意图：操作指南43.1.认识AxureRP-Pro操作界面1下图是AxureRP环境与介面中各区块的简单描述主选单/工具列：在主选单与工具列中，可以执行常用的动作指令，例如：开启与储存档案、输出Prototype或Spec文件。操作指南5Sitemap窗格：Sitemap窗格将您所设计的网页以树状结构的方式呈现，您可以在这里新增、移除、重新命名和组织设计的网页。1、增加一个子页面：为所选择的页面创建一个子页面。2、页面上移：同等级的页面中，将所选页面的上下排列次序，上移一个位置。3、页面下移：同等级的页面中，将所选页面的上下排列次序，下移一个位置。4、页面降序：将所选页面等级降序，作为原等级中，排列在所选页面上方之页面的子页面。5、页面升序：将所选页面等级升序，将所选页面的页面等级，升序为父页面的同等级页面。6、删除页面：将所选页面删除，同时删除其子页面。7、编辑页面：在工作区打开所选择页面，进行编辑。Widgets窗格：包含一系列常用的使用者介面对象，例如：按钮、影像、TextPanel与矩形，您可以直接透过拖拉的方式来设计网页。在Widgets窗格中可以显示其它类型的元素及装载系统外的元素。操作指南6Masters窗格：在这里您可以新增、移除、重新命名和组织设计好的Master。Master是一种可以容纳多项界面元素的集合样板(Temlate)，您可以将常用的共享区块设计成Master，未来在设计Wireframe时重复使用Master（通过拖放的方式可以直接放到设计的Wireframe页面），来提高规划的效率。工具栏的操作与Sitemap窗格工具栏基本相同。Wireframe窗格：您可以在这个窗格中设计网页信息元素，编排内容，设计介面，设计交互特性等等。未来可以将这些设计好的页面，输出成Prototype或Spec文件。交互设计(Interaction)窗格：交互的范围很广，从最基本的超级链接、pop-ups，一直到动态显示和隐藏widget。您可以在这个窗格中定义Widget的交互。物件批注(Annotation)窗格：您可以为Widget加上批注来指定功能，您可以在这个窗格中增加和自订Widget的批注。网页说明及交互(PagesNotes&Interactions)窗格：您可以在这个窗格中加入网页层级的说明与交互效果到设计中。操作指南73.2.AxureRP-ProDEMO制作过程为了便于UE设计工作的快速的开展，设计工作可以在“营销稽查监控平台UE模板”上进行，模板中存在一个DEMO设计。下面将重现DEMO的设计过程。编辑过程中注意随时保存。增加“AWR报告DEMO”页面.双击“AWR报告DEMO”打开页面。将Masters窗格中的top（元素集合模）板拖放到Wireframe窗格中，居左置顶设置“AWR报告DEMO”工具栏，将widgets中table组件拖放到WireFrame中，设置2行一列。操作指南8适当调整table的大小，更改背景颜色（#99CCCC）。分别将TextPanel、Droplist、TextField、Button按照“AWR报告”页面上的位置进行拖放及编辑。双击Droplist编辑下拉框内容，编辑后点击拖放ButtonShape到WireFrame页面，输入内容，然后将它编辑成TAB按钮。（如果该元素不能输入文字，可以以txt文本为中介拷贝）拖放DynamicPanel到WireFrame页面,双击进行编辑，然后点击，然后根据需求调整DynamicPanel大小双击WireFrame页面中的DynamicPanel，弹出DynamicPanelStateManager，点击，生成两个编辑页面，然后分别进行编辑。操作指南9编辑awr_txt(AWR报告DEMO)页面，在页面中拖入TextArea,调整大小，在TextArea中输入相应的内容。然后编辑awr_txt_g(AWR报告DEMO)页面分别编辑“AWR报告DEMO”页面中的【查看】按钮、“单实例AWR_TXT报告”TAB钮、“全实例AWR_TXT报告】钮交互动作。选中“查看”按钮在网页说明及交互(PagesNotes&Interactions)窗格中编辑它的交互动作，使它能够跳转到awr_txt(AWR报告DEMO)页面。依次编辑单实例AWR_TXT报告”TAB钮、“全实例AWR_TXT报告”钮交互动作，分别对应“awr_txt(AWR报告DEMO)页面”、“awr_txt_g(AWR报告DEMO)页面”。选中“查看”按钮在网页说明及交互(PagesNotes&Interactions)窗格点击设置SetPanelstatetoState“单实例AWR_TXT报告”TAB钮交互动作“全实例AWR_TXT报告”TAB钮交互动作在AWR报告DEMO页面增加一个子页面，为【保存】提供页面支持在report_save.jsp中编辑相应元素，这里不在一一介绍了，将dbtable_report_save.jsp中的元素拷贝到report_save.jsp中。编辑“AWR报告DEMO”页面中的【保存】按钮交互动作。先设置Link,操作指南10然后在设置Popup。设置Popup属性在编辑页面元素过程中可以对该元素进行简单的描述操作指南114.生成演示文档点击主选单/工具列中也可以直接按F5按键生成演示文档点击生成目录中的index.html便可以查看演示文档。演示文档操作指南125.Q&A谢谢大家！工作愉快！！！