单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,AXURE RP,教程,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,AXURE RP,案例教程,交互设计师、产品经理产品原型利器,AXURE RP 案例教程交互设计师、产品经理产品原型利器,入门篇,第一章 介绍以工具栏工具,(widgets),绘制示意图,(Wireframe),第二章 流程图（,Flow Diagrams,）撰写网页说明,(Page Notes),第三章 高级交互设计（,Rich Interaction,）,第四章 实例,入门篇第一章 介绍以工具栏工具(widgets)绘制示意图,第一章 介绍,第,1,节 认识,Axure RP,第,2,节 线框图及其注释,第,3,节 基本交互设计,第,4,节 使用模块（,Master,）,第,5,节,HTML,原型,第,6,节 输出规格说明,第一章 介绍第1节 认识 Axure RP,入门篇,第一章 软件介绍,第,1,节,认识,Axure RP,1.Axure RP,Axure,的发音是“,Ack-sure”,，,RP,则是“,Rapid Prototyping”,的缩写。,Axure RP Pro,是美国,Axure Software Solution,公司的旗舰产品，是一个快速的原型工具，主要是针对负,责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师、交互设,计师、业务分析师、信息架构师、可用性专家和产品经理。,入门篇第一章 软件介绍,Axure,能让你快速的进行线框图和原型的设计，让相关人员对你的设计进行体验和验证，,向用户进行演示、沟通交流以确认用户需求，并能自动生成规格说明文档。另外，,Axure,还,能让团队成员进行多人协同设计，并对设计进行方案版本控制管理。,Axure,使原型设计及和客户的交流方式发生了变革：进行更加高效的设计；让你体验动态的原型；更加清晰的交流想法；,2.,原型的作用和好处,制作,Prototype,是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。快速原型法（,Rapid Prototyping,）是一种有效且高效的以用户为中心（,User-Centered Design,）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。目前全球有财富,1000,大的公司和重要机构在使用,Axure RP,，国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。,Axure能让你快速的进行线框图和原型的设计，让相关人员对,3,、,Axure,的工作环境,Axure,的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。,无需编程就可以在线框图中定义简单链接和高级交互。,Axure,可一体化生成线框图、,HTML,交互原型、规格说明,Word,文档。以下是对,Axure RP,工作环境的简要说明：,3、Axure 的工作环境,AXURE_RP案例教程(非常适合初学者),主菜单和工具栏（,Main Menu&Toolbar,）执行常用操作，如文件打开、保存、格式化控件、输出原型、输出规格等操作。,页面导航板（,Sitemap Pane,）对所设计的页面进行添加、删除、重命名和组织。,控件面板（,Widgets Pane,）该面板中有线框图控件和流程图控件，用这些控件进行线框图和流程图的设计。,模块面板（,Masters Pane,）模块是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织。,线框图面板（,Wireframe Pane,）在线框图面板中可以进行页面线框图的设计，线框图面板也就是进行页面设计的工作区。,控件交互面板（,Interactions Pane,）定义控件的交互，如：链接、弹出、动态显示和隐藏等。,控件注释面板（,Annotations Pane,）对控件进行注释定义和对控件的功能进行说明。,页面交互和注释面板（,Pages Notes&Page Interactions Pane,）添加和管理页面的注释和交互。,主菜单和工具栏（Main Menu&Toolbar）执,第,2,节 线框图及其注释,页面导航面板（,Sitemap,）在绘制线框图,(Wireframe),或流程图（,Flow,）之前，应该先思考界面框架，决定信息内容与层级。,明确界面框架后，接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面，可以添加、删除及对页面层次进行重新组织。,页面的添加、删除和重命名,点击面板工具栏上的“,Add Child Page”,按钮可以添加一个页面，点击“,Delete Page”,按钮可以删除一个页面。,右键单击选择“,Rename Page”,菜单项可对页面进行重命名。,第2节 线框图及其注释页面导航面板（Sitemap）在绘制,页面组织排序,在页面导航面板中，通过拖拉页面或点击工具栏上的排序按钮，可以上下移动页面的位置和重新组织页面的层次。,打开页面进行设计 在页面导航面板中，鼠标双击页面将会在线框面板中打开页面以进行线框图设计。,页面组织排序,2.,控件（,Widgets,）,控件是用于设计线框图的用户界面元素。,在控件面板中包含有常用的控件，如按钮、图片、文本框等。,2.控件（Widgets）,添加控件,从控件面板中拖动一个控件到线框图面板中，就可以添加一个控件。,控件可以从一个线框图中被拷贝,(Ctrl+C),，然后粘贴,(Ctrl+V),到另外一个线框图中。,操作控件,添加控件后，在线框图中点选该控件，然后可以拖拉移动控件和改变控件的大小，还可以一次同时对多个控件进行选择、移动、改变尺寸。,另外，还可以组合、排序、对齐、分配和锁定控件。这些操作可通过控件右键菜单中进行，也可在,Object,工具栏上的按钮进行。,编辑控件风格和属性,有多种方法可以编辑控件的风格和属性：,鼠标双击：鼠标双击某个控件，可以对控件的最常用属性进行编辑。,例如，双击一 个图片控件可以导入一张图片；双击一个下拉列表或列表框控件可以编辑列表项。,工具栏：点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。,右键菜单：控件右键菜单上可编辑控件的一些特定属性，不同控件这些属性也不同。,添加控件,3.,注释（,Annotations,）,可以为控件添加注释，以说明控件的功能。,添加注释,在线框图中选择控件，然后在控件注释和交互（,Annotations and Interactions,）面板中编辑字段中的值，即可为控件添加注释。面板顶部的,Label,字段是为控件添加一个标识符,。,3.注释（Annotations）,自定义字段（,Fields,）,通过主菜单,Wireframe-Customize Annotation Fields and Views,或点击面板上,Annotations,头部的“,Custommize Fields and Views”,然后在弹出的,Custommize Fields and,，,Views,对话框中可以添加、删除、修改、排序注释字段。,自定义字段（Fields）,脚注（,Footnotes,）在控件上添加注释后，控件的右上角会显示一个黄色方块，称为脚注。脚注号码可以增大和减小，可通过控件右键菜单或工具栏上的 进行修改。,脚注（Footnotes）在控件上添加注释后，控件的右上角,4.,页面备注（,Page Notes,）,页面备注可是对页面进行描述和说明。,添加页面备注,在线框图下面的,Page notes,面板中可以添加页面备注内容。,管理页面备注,另外，可以自定义页面备注，为不同的人提供不同的备注，以满足不同需要。比如可以新增“测试用例”“操作说明”等不同类别的页面备注。,4.页面备注（Page Notes）管理页面备注,第,3,节 基本交互设计,控件的交互,控件交互面板用于定义线框图中控件的行为，包含定义简单的链接和复杂的,RIA,行为，所定义的交互都可以在将来生成的原型中进行操作执行。,在控件交互面板中可以定义控件的交互，交互事件（,Events,）、场景（,Cases,）和动作（,Actions,）组成：,用户操作界面时就会触发事件，如鼠标的,OnClick,、,OnMouseEnter,和,OnMouseOut,；,每个事件可以包含多个场景，场景也就是事件触发后要满足的条件；,每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。,第3节 基本交互设计 控件的交互 在控件交互面板中可以定义,以下是,Axure RP,支持的事件如下：,OnClick,：鼠标点击,OnMouseEnter,：鼠标的指针移动到对象上,OnMouseOut,：鼠标的指针移动出对象外,OnFocus,：鼠标的指针进入文字输入状态（获得焦点）,OnLostFocus,：鼠标的指针离开文字输入状态（失去焦点）,OnPageLoad,：页面或模块载入,大多对象只具备常见的三种触发事件：,OnClick,、,OnMouseEnter,与,OnMouseOut,，,一些特殊的控件可触发的事件有些不同：,按钮控件只有,OnClick,单选框和复选框则具有,OnFocus,、,OnLostFocus,文本框、文本域、下拉框、列表框则具有,OnKeyUp,、,OnFocus,、,OnLostFocus,页面加载或模块被载入时则发生,OnPageLoad,事件、场景和动作的关系,以下是 Axure RP支持的事件如下：事件、场景和动作的关,2,、定义链接,下列步骤说明如何在按钮控件上定义一个链接：,1.,首先，拖拉一个按钮控件到线框图中，并选择这个按钮；,2.,然后，控件交互面板中鼠标双击“,OnClick”,这个事件，这时会出现“,Interaction Case Properties”,对话窗，在这个对话框中可以选择要执行的动作；,3.,在“,Step 2”,中，勾选“,Open Link in Current Window”,动作。,4.,在“,Step 3”,中，点击“,Link”,，在弹出的,Link Properties,对话框中可以选择要链接 的页面或其它网页地址。,2、定义链接,除了上面的步骤，加入一个链接的最快的方法是单击控件交互面板顶部的“,Quick Link”,，在弹出的,Link Properties,对话框中选择要链接的页面。,除了上面的步骤，加入一个链接的最快的方法是单击控件交互面板,3.,设置动作,除了简单的链接之外，,Axure,还提供了许多丰富的动作，这些动作可以在任何触发事件的场景中执行。,3.设置动作除了简单的链接之外，Axure 还提供了许多丰,以下是,Axure,所支持的动作：,Open Link in Current Window,：在当前窗口打开一个页面,Open Link in Popup Window,：在弹出的窗口中打开一个页面,Open Link in Parent Window,：在父窗口中打开一个页面,Close Current Window,：关闭当前窗口,Open Link in Frame,：在框架中打开一个页面,Set Panel state(s)to State(s),：为动态面板设定要显示的状态,Show Panel(s),：显示动态面板,Hide Panel(s),：隐藏动态面板,Toggle Visibility for Panel(s),：切换动态面板的显示状态（显示,/,隐藏）,Move Panel(s),：根据绝对坐标或相对坐标来移动动态面