搜索
AXURERP软件基本使用介绍@吴春杨初识AxureRPAxureRP基本操作AxureRP高级交互目录初识AxureRPAxureRP简介Axure的正确发音是“Ack-Sure”，RP则是”RapidPrototyping”快速原型的缩写。AxureRPPro是美国AxureSoftwareSolution公司的旗舰产品，是一款快速原型设计工具，主要针对负责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师、交互设计师、信息架构师、业务分析师、可用性专家和产品经理。AxureRPPro能快速帮助设计者设计出快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。1站点地图初识AxureRP组件面板模块面板工作区页面注释与交互交互面板动态面板管理2初识AxureRPAxureRP功能一、网站构架图：AxureRP可以快速绘制树状的网站构架图，而且可以让构架图中的每一个页面节点，直接连接到对应网页；二、示意图：AxureRP内建了许多会经常使用到的组件，例如：按钮(Button)、图片(Image)、文字面板(TextPanel)、选择钮(RadioButton)、下拉式菜单(Droplist)；三、流程图：AxureRP快速建立流程图就像建立线框图一样容易，流程中有设计流程图时会经常用到的形状，您可以轻松在流程之间加入连接线并设定连接的格式；四、交互设计：大多数的组件可以对一个或多个事件产生动作，包括OnClick、OnMouseOver和OnMouseLeave等；五、自动输出网站原型：AxureRP可以线框图输出成符合InternetExplorer或Firefox等不同浏览器的HTML原型；六、自动输出word格式规格文件：AxureRP可以输出Word的格式的文件，规格文件包含了目录、网页清单、网页等，规格的内容与格式也可以依据不同的阅读对象来变更。3站点地图是项目页面的导航面板,在这里面可以对所有设计的页面进行添加、删除、重命名和组织等。AxureRP基本操作站点地图4组件面板中包括有线框图组件和流程图组件两种类型，用这些组件可以进行线框图和流程图的相应设计。这里显示的是所有的组件，后面的一部分是流程图组件。系统默认显示的线框图类型的部件。AxureRP基本操作组件面板5动态面板线框图组件中，常用的有图片、文本块、矩形、占位符、形状按钮、图片影射区域、动态面板。其中，在完成一些交互动作时，动态面板用的最多。使用方法：在部门库内选中直接拖到工作区内即可。另外，还可对组件的颜色、形状、文字等进行编辑操作。AxureRP基本操作动态面板6双击使用方法：图片控件的操作比较简单，双击图片组件，选择一张图片打开即可。需要重新添加图片是，在原来的图片上双击再选择。AxureRP基本操作图片控件7矩形、占位符、输入框、形状按钮、按钮使用方法：选中某个组件后，直接拖入到工作区域使用即可。另外，可以对这些组件的尺寸、颜色、边框、文字进行编辑。注：矩形、占位符、形状按钮都有很多形状可以变化、彼此之间也可以相互转换。AxureRP基本操作其它控件8文字编辑组合、顺序对齐、分布填充、边框文字分布锁定控件改变形状右键菜单AxureRP基本操作9矩形的形状变化，其中，圆角的大小是可以控制的，使用不同的形状得到一些组合形状。AxureRP基本操作矩形控件10模块是一种可重复利用的页面，比如页面的模板、导航栏、页首、页脚等这些类似的元素都可以通过模块来调用。使用模块的好处是：修改模块时，原型中所有使用该模块的地方都会跟着一起修改。这样在设计时可以提高效率并且易于管理。模块的面板和站点地图有点类似。可以添加、组织、编辑。AxureRP基本操作模块面板11模块的行为包括：正常、作为背景、自定义组件三种类型。正常：这是默认状态，就是修改模块时，引用到页面的模块会跟着一起修改。作为背景：当把模块调用到页面时会放置底层并且锁定。自定义：这种模块可以在页面中进行修改而不会引起其他模块变化，类似于复制。根据不同版本不一定有这个行为AxureRP基本操作模块面板12Axure里的交互动作大致包括：定义链接、设置动作、多个条件场景、页面上的交互四种类型。AxureRP高级交互交互类型13事件场景1场景2动作1动作2动作3动作1动作3动作2AxureRP高级交互事件、场景、动作14定义链接可以让一个组件响应一个动作时（如鼠标点击、飘过）链接到其他页面。在Axure里提供了四种链接方式：1、链接到设计中的页面；2、连接到外部网址或文件；3、重新载入当前页面；4、返回上个页面。AxureRP高级交互定义链接15AxureRP高级交互定义链接方法一方法二16除了定义链接之外，Axure里还可以设置丰富的动作，在Axure里，任何可以出发的事件中都可以执行这些动作。AxureRP高级交互设置动作17Axure里提供的动作在执行时是自左向右顺序执行的，在基本编辑器里，选择一些动作后，Axure会按照默认的方法生成动作的执行顺序。当这些顺序不能满足需求时，可以尝试使用高级编辑器，可以自定义添加动作、改变执行顺序。AxureRP高级交互设置动作18Axure里的动作：OpenLinkinCurrentWindow：在当前窗口打开一个页面OpenLinkinPopupWindow：在弹出的窗口中打开一个页面OpenLinkinParentWindow：在父窗口中打开一个页面CloseCurrentWindow：关闭当前窗口OpenLinkinFrame：在框架中打开链接OpenLinkinParentFrame：在父框架中打开链接SetPanelstate(s)toState(s)：设置动态面板的状态转换ShowPanel(s)：显示动态面板HidePanel(s)：隐藏动态面板ToggleVisibilityforPanel(s)：切换动态面板的可见属性（显示/隐藏）MovePanel(s)：根据绝对坐标或相对坐标来移动动态面板AxureRP高级交互19BringPaneltoFront：将动态面板置为最前端SetVariableandWidgetvalue(s)equaltoValue(s)：设定变量值或控件值OpenLinkinParentFrame：在父页面的嵌框架中打开一个页面ScrolltoImageMapRegion：滚动页面到ImageMap所在位置EnableWidget(s)：把对象状态变成可用状态DisableWidget(s)：把对象状态变成不可用状态SetFocusonWidget：设置焦点WaitTime(s)：等待多少毫秒(ms)后再进行这个动作ExpandTreeNode：展开树状节点CollapseTreeNode：折叠树状节点Other：显示动作的文字说明Axure里的动作：AxureRP高级交互20一个事件的发生在不同的场景中产生的结果是不一样的，比如发送信息，发送失败和发送成功返回的结果是不一样的。在Axure里，这样的多个场景的事件，可以通过条件设置来编辑，不同的条件会触发不同的场景。AxureRP高级交互设置场景21删除添加在发送信息时，有“发送成功”和“发送失败”两个场景：对于“发送成功”来说，有这样的一连串事件：显示“正在发送”、输入框变为空白、等待一段时间后、显示“发送成功”。类似的，发送失败时也有这样一串动作。而判断消息发送是否成功则是根据实际应用中发送的情况而定。AxureRP高级交互设置场景22Axure还支持页面层级的触发事件，当载入一个页面时，就会触发OnPageLoad事件。OnPageLoad事件可以为我们设置页面在载入时的初始状态，并可以触发一些我们需要的场景的条件。例如：一个导航会有一个初始状态和一个选中状态，当我们从一个入口进入到一个页面时，我们希望那个对应的导航按钮时处于选中状态，此时就需要使用OnPageLoad事件来设置。AxureRP高级交互23页面交互Axure中很多的交互是由动态面板来实现的。动态面板里面可以包含多个状态，所以通过一些事件可以对动态面板的状态进行切换，以此来实现交互效果。但任何时候都是只有一个状态是可见的，或者整个动态面板是被隐藏的。AxureRP高级交互24动态面板动态面板双击动态面板的线框图，会有一个动态面板状态管理的对话框，在这里可以添加、删除、重命名、组织动态面板。动态面板的第一个状态时它的默认状态。选择编辑之后可以对其进行设计，像画线框图一样。动态面板的显示范围是在一个蓝色的虚线框内，这个也是动态面板对事件的响应范围。AxureRP高级交互25动态面板动态面板管理面板。在这里也可以对动态面板进行添加、删除、组织等操作。双击可以对其进行编辑。有时，动态面板较多时，在屏幕上的显示会让人觉得不方便，此时可以通过点击蓝色的方块对其取消显示（不会改变它的可见属性）。AxureRP高级交互26动态面板动态面板有7种动作：1.设置面板状态为指定状态2.显示面板3.隐藏面板4.切换面板可见性5.移动面板6.将面板置于顶层7.将面板置于底层AxureRP高级交互27动态面板实例演示28谢谢Thanks！新浪微博：腾讯微博：