Axure-RP培训教程PPT学习课件.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,AXURE RP,软件基本使用介绍,1,初识,Axure RP,Axure RP,基本操作,Axure RP,高级交互,目 录,Axure RP,生成网页原型,2,2024/11/22 周五,初识,Axure RP,Axure RP,简介,Axure RP Pro,是美国,Axure Software Solution,公司的旗舰产品，是一个快速的原型工具，主要是针对,负责定义需求、定义规格、设计功能、设计界面的专家。,AXURE,改变我们的工作方式：,决策层：直观的理解系统行为，帮助决策,产品经理：提高了各岗位间的沟通效率，降低沟通成本，保证项目进程,需求人员：更加有效的与用户沟通，减少误解，保证需求质量,设计开发：更加有效的协作沟通，降低沟通成本，减少误解，避免返工,用户：更加直观的感受系统，尽早反馈用户的需求与系统的不足,3,2024/11/22 周五,初识,Axure RP,为什么要进行原型设计？,大约,66%,的软件开发失败或亏损的前三大原因为：,缺乏使用者的参与；,需求或规格不完整；,需求或规格变更；,将文字性文档转变为互动性的可视画面，让客户在投入编程之前进行需求确认。,是一种高效的以用户为中心的技术，是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、,将外在需求风险降到最低的方法。,全球有,1000,家的公司在使用,Axure RP,，淘宝、雅虎、腾讯、当当等也都在使用,4,2024/11/22 周五,初识,Axure RP,Axure RP,功能,一、网站构架图：,Axure RP,可以快速绘制树状的网站构架图，而且可以让构架图中的每一个页面节点，直接连接到对应,网页；,二、示意图,：,Axure RP,内建了许多会经常使用到的组件，例如：按钮,(Button),、图片,(Image),、文字面板,(Text Panel),、,选择钮,(Radio Button),、下拉式菜单,(Droplist),；,三、流程图：,Axure RP,快速建立流程图就像建立线框图一样容易，流程中有设计流程图时会经常用到的形状，您可以轻,松在流程之间加入连接线并设定连接的格式；,四、交互设计,：大多数的组件可以对一个或多个事件产生动作，包括,OnClick,、,OnMouseOver,和,OnMouseLeave,等；,五、自动输出网站原型,：,Axure RP,可以线框图输出成符合,InternetExplorer,或,Firefox,等不同浏览器的,HTML,原型；,六、自动输出,word,格式规格文件,：,Axure RP,可以输出,Word,的格式的文件，规格文件包含了目录、网页清单、网页等，,规格的内容与格式也可以依据不同的阅读对象来变更。,5,2024/11/22 周五,初识,Axure RP,Axure RP,工作环境,Axure,的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。,无需编程就可以在线框图中定义简单链接和高级交互。,Axure,可一体化生成线框图、,HTML,交互原型、规格说明,Word,文档；,6,2024/11/22 周五,初识,Axure RP,站点地图,组件区域,母版区域,工作区,页面注释与交互,交互面板,动态面板管理,Axure RP,工作环境,工具栏,7,2024/11/22 周五,工具栏是页面进行编辑的一些快捷操作，主要有字体设置、大小设置、页面显示大小和,Axure RP,本身自带的一些快捷操作,Axure RP,基本操作,工具栏,8,2024/11/22 周五,站点地图是项目页面的导航面板,呈,树状结构,，以主页为根节点，可以方便我们对网站整体模块和不同栏目、功能划分有一个很清晰的了解，同时也方便我们对网站整体页面进行管理（,添加,、,删除,、,重命名,、,调整层级,、,调整顺序,、,生成流程图,）,Axure RP,基本操作,站点地图,9,2024/11/22 周五,组件面板中包括有线框图组件和流程图组件两种类型，用这些组件可以进行线框图和流程图的相应设计。,这里显示的是所有的组件，后面的一部分是流程图组件。系统默认显示的线框图类型的部件。,Axure RP,基本操作,组件区域,10,2024/11/22 周五,动态面板,线框图组件中，常用的有图片、文本块、矩形、占位符、形状按钮、图片影射区域、动态面板。其中，在完成一些交互动作时，动态面板用的最多。,使用方法：,在部门库内选中直接拖到工作区内即可。另外，还可对组件的颜色、形状、文字等进行编辑操作。,Axure RP,基本操作,组件区域,动态面板,11,2024/11/22 周五,双击,使用方法：,图片控件的操作比较简单，双击图片组件，选择一张图片打开即可。,需要重新添加图片是，在原来的图片上双击再选择。,Axure RP,基本操作,组件区域,图片控件,12,2024/11/22 周五,矩形、占位符、输入框、形状按钮、按钮,使用方法：选中某个组件后，直接拖入到工作区域使用即可。另外，可以对这些组件的尺寸、颜色、边框、文字进行编辑。,注：,矩形、占位符、形状按钮都有很多形状可以变化、彼此之间也可以相互转换。,Axure RP,基本操作,组件区域,其它控件,13,2024/11/22 周五,文字编辑,组合、顺序对齐、分布,填充、边框,文字分布,锁定控件,改变形状,右键菜单,Axure RP,基本操作,坐标、尺寸,14,2024/11/22 周五,矩形的形状变化，其中，圆角的大小是可以控制的，使用不同的形状得到一些组合形状。,Axure RP,基本操作,组件区域,矩形控件,15,2024/11/22 周五,母版（模版）区域是一种可重复利用的页面，比如页面的模板、导航栏、页首、页脚等这些类似的元素都可以通过模块来调用。,使用模块的好处是：修改模块时，原型中所有使用该模块的地方都会跟着一起修改。这样在设计时可以提高效率并且易于管理。,模块的面板和站点地图有点类似。可以添加、组织、编辑。,Axure RP,基本操作,母版（模板）区域,16,2024/11/22 周五,模块的行为包括,：标准、放在背景中、自定义组件三种类型。,标准,：普通的模版，就是一般的复用母版、是默认创建的行为，不能在页面中进行直接修改。,放在背景中,：当把模版调用到页面时会放置底层并且锁定，经常用于创建,head,、,foot,等明确定位的复用模版。,自定义组件,：这种母版类似于自创一个组件，在拖动到页面后，可以对其编辑修改，独立于母版。,Axure RP,基本操作,母版的三种行为,17,2024/11/22 周五,Axure,里的交互动作大致包括：定义链接、设置动作、多个条件场景、页面上的交互四种类型。,Axure RP,高级交互,交互类型,18,2024/11/22 周五,定义链接可以让一个组件响应一个动作时（如鼠标点击、飘过）链接到其他页面。,在,Axure,里提供了四种链接方式：,1,、链接到设计中的页面；,2,、连接到外部网址或文件；,3,、重新载入当前页面；,4,、返回上个页面。,Axure RP,高级交互,定义链接,19,2024/11/22 周五,Axure RP,高级交互,定义链接,方法一,方法二,20,2024/11/22 周五,除了定义链接之外，,Axure,里还可以设置丰富的动作，在,Axure,里，任何可以出发的事件中都可以执行这些动作。,Axure RP,高级交互,设置动作,21,2024/11/22 周五,Axure,里提供的动作在执行时是自,左向右,顺序执行的，在基本编辑器里，选择一些动作后，,Axure,会按照默认的方法生成动作的执行顺序。当这些顺序不能满足需求时，可以尝试使用高级编辑器，可以自定义添加动作、改变执行顺序。,Axure RP,高级交互,设置动作,22,2024/11/22 周五,Axure,里的动作：,Open Link in Current Window,：在当前窗口打开一个页面,Open Link in Popup Window,：在弹出的窗口中打开一个页面,Open Link in Parent Window,：在父窗口中打开一个页面,Close Current Window,：关闭当前窗口,Open Link in Frame,：在框架中打开链接,Open Link,in Parent Frame,：在父框架中打开链接,Set Panel state(s)to State(s),：设置动态面板的状态转换,Show Panel(s),：显示动态面板,Hide Panel(s),：隐藏动态面板,Toggle Visibility for Panel(s),：切换动态面板的可见属性（显示,/,隐藏）,Move Panel(s),：根据绝对坐标或相对坐标来移动动态面板,Axure RP,高级交互,23,2024/11/22 周五,Bring Panel,to Front,：将动态面板置为最前端,Set Variable and Widget value(s)equal to Value(s),：设定变量值或控件值,Open Link in Parent Frame,：在父页面的嵌框架中打开一个页面,Scroll to Image Map Region,：滚动页面到,Image Map,所在位置,Enable Widget(s),：把对象状态变成可用状态,Disable Widget(s),：把对象状态变成不可用状态,Set Focus on Widget,：设置焦点,Wait Time(s),：等待多少毫秒,(ms),后再进行这个动作,Expand Tree Node,：展开树状节点,Collapse Tree Node,：折叠树状节点,Other,：显示动作的文字说明,Axure,里的动作：,Axure RP,高级交互,24,2024/11/22 周五,Axure,还支持页面层级的触发事件，当载入一个页面时，就会触发,OnPageLoad,事件。,OnPageLoad,事件可以为我们设置页面在载入时的初始状态，并可以触发一些我们需要的场景的条件。,例如：一个导航会有一个初始状态和一个选中状态，当我们从一个入口进入到一个页面时，我们希望那个对应的导航按钮时处于选中状态，此时就需要使用,OnPageLoad,事件来设置。,Axure RP,高级交互,页面交互,25,2024/11/22 周五,Axure,中很多的交互是由动态面板来实现的。,动态面板里面可以包含多个状态，所以通过一些事件可以对动态面板的状态进行切换，以此来实现交互效果。但任何时候都是只有一个状态是可见的，或者整个动态面板是被隐藏的。,Axure RP,高级交互,动态面板,动态面板,26,2024/11/22 周五,双击动态面板的线框图，会有一个动态面板状态管理的对话框，在这里可以添加、删除、重命名、组织动态面板。,动态面板的第一个状态时它的默认状态。选择编辑之后可以对其进行设计，像画线框图一样。,动态面板的显示范围是在一个蓝色的虚线框内，这个也是动态面板对事件的响应范围。,Axure RP,高级交互,动态面板,27,2024/11/22 周五,动态面板管理面板。在这里也可以对动态面板进行添加、删除、组织等操作。双击可以对其进行编辑。,有时，动态面板较多时，在屏幕上的显示会让人觉得不方便，此时可以通过点击蓝色的方块对其取消显示（不会改变它的可见属性）。,Axure RP,高级交互,动态面板,28,2024/11/22 周五,动态面板有,7,种动作：,设置面板,状态为指定状态,显示面板,隐藏面板,切换面板可见性,移动面板,将面板置于顶层,将面板置于底层,Axure RP,高级交互,动态面板,29,2024/11/22 周五,Axure RP,生成网页原型,菜单生成法 生成,原型,弹出框,30,2024/11/22 周五,Axure RP,生成网页原型,工具栏，快速按钮生成法,31,2024/11/22 周五,Axure RP,生成网页原型,快速键生成法：直接按键盘,F5,，即可生成网页原型,1.,生成的网页原型，存放路径，可以自定义，我们再网络上下载的一些原型文件，有时候无法生成，只需要设置以下默认就可以了,2.,选择浏览器或者打不开，一般选择默认浏览器,3.,点击生成按钮，生成网页原型，如果选择了浏览器，软件会直接启动浏览器打开生成的原型页面,32,2024/11/22 周五,实例演示,33,2024/11/22 周五,谢谢,Thanks,！,34,2024/11/22 周五,