2024年-AxureRP内部培训核心教程学习课件

AxureRP内部培训核心教程_2013

12目录基础知识软件介绍工具栏流程图交互设计基础交互设计动态面板高级交互设计高级交互设计实例生成文档生成HTML生成规格说明书生成CHM文档2为什么要进行原型设计？大约66%的软件开发失败或亏损的前三大原因为：缺乏使用者的参与；需求或规格不完整；需求或规格变更；将文字性文档转变为互动性的可视画面，让客户在投入编程之前进行需求确认。是一种高效的以用户为中心的技术，是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。全球有>1000家的公司在使用AxureRP，淘宝、雅虎、腾讯、当当等也都在使用。“没有比制作prototype更易取得使用者界面与特殊功能可用性上的一致性了。rototype不只可确认需求，它更可赢得顾客的心。”

——阿伦M.戴维斯32024/5/10软件介绍AxureRPPro是美国AxureSoftwareSolution公司的旗舰产品，是一个快速的原型工具，主要是针对负责定义需求、定义规格、设计功能、设计界面的专家。AXURE改变我们的工作方式：决策层：

直观的理解系统行为，帮助决策产品经理：

提高了各岗位间的沟通效率，降低沟通成本，保证项目进程需求人员：

更加有效的与用户沟通，减少误解，保证需求质量设计开发：

更加有效的协作沟通，降低沟通成本，减少误解，避免返工用户：

更加直观的感受系统，尽早反馈用户的需求与系统的不足。42024/5/10Axure的工作环境Axure的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure可一体化生成线框图、HTML交互原型、规格说明Word文档；52024/5/10站点地图主菜单和工具栏界面控件（界面工具集）页面注释与页面交互模块区域物件注释互动设计Axure的工作环境Axure的工作环境62024/5/10主菜单和工具栏（MainMenu&Toolbar）：执行常用操作，如文件打开、保存、格式化控件、输出原型、输出规格等操作。Axure的工作环境—主菜单和工具栏72024/5/10站点地图（SitemapPane）页面的添加、删除和重命名页面组织排序打开页面进行设计Axure的工作环境—站点地图82024/5/10在绘制线框图(Wireframe)或流程图（Flow）之前，应该先思考界面框架，决定信息内容与层级。明确界面框架后，接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面，可以添加、删除及对页面层次进行重新组织。点击面板工具栏上的“AddChildPage”按钮可以添加一个页面，点击“DeletePage”按钮可以删除一个页面。右键单击选择“RenamePage”菜单项可对页面进行重命名。Axure的工作环境—站点地图92024/5/10Axure的工作环境—站点地图在页面导航面板中，通过拖拉页面或点击工具栏上的排序按钮，可以上下移动页面的位置和重新组织页面的层次。打开页面进行设计在页面导航面板中，鼠标双击页面将会在线框面板中打开页面以进行线框图设计。102024/5/10添加控件从组件中拖动一个控件到界面中，就可以添加一个控制。控件可以从一个界面中拷贝到另外一个界面中。编辑控件鼠标双击：双击控件，可以对控件最常用的属性进行编辑工具栏：点击工具栏上的按钮可以编辑控件的文本字体、背景色、边框等；右键菜单：右击控件可以选择编辑控件的一些特定属性，不同控件属性也不同。控件（WidgetsPane）Axure的工作环境—控件112024/5/10控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件，如按钮、图片、文本框等。Axure的工作环境—控件122024/5/10Axure的工作环境—控件添加控件从控件面板中拖动一个控件到线框图面板中，就可以添加一个控件；控件可以进行拷贝(Ctrl+C)和粘贴(Ctrl+V)。操作控件选中控件后，可以拖拉移动控件和改变控件的大小；可通过控件右键菜单进行组合、排序、对齐、分配和锁定控件。编辑控件风格和属性鼠标双击：鼠标双击某个控件，可以对控件的最常用属性进行编辑。工具栏：点击工具栏上的按钮，编辑控件的文本字体、背景色、边框等。右键菜单：控件右键菜单上可编辑控件的一些特定属性，不同控件这些属性也不同。

132024/5/10模块面板（MasterPane）模块是可以重复使用的特殊页面，如页首(Header)；只要修改模块，引用这个模块的所有实例也会随即全部跟着变化；模块面板可利用文件夹来组织模块，并且可以用拖拉或工具栏的方式排列模块；在页面中拖入模块后，模块对象回应淡红色遮罩，在页面中模块是不可修改的；修改模块中的内容只能在模块页面修改。Axure的工作环境—模块面板142024/5/103.Axure的工作环境—注释注释（Annotations）可以为控件添加注释，以说明控件的功能。添加注释在线框图中选择控件，然后在控件注释和交互面板中编辑字段中的值，即可为控件添加注释。面板顶部的Label字段是为控件添加一个标识符。152024/5/10Axure的工作环境—自定义字段自定义字段（Fields）通过主菜单Wireframe->CustomizeAnnotationFieldsandViews或点击面板上Annotations头部的“CustommizeFieldsandViews”，弹出的CustommizeFieldsand

Views对话框，可以添加、删除、修改、排序注释字段。162024/5/10脚注（Footnotes）在控件上添加注释后，控件的右上角会显示一个黄色方块，称为脚注。脚注号码可以增大和减小，可通过控件右键菜单或工具栏上的进行修改。Axure的工作环境—自定义字段172024/5/10管理页面备注另外，可以自定义页面备注，为不同的人提供不同的备注，以满足不同需要。比如可以新增“测试用例”“操作说明”等不同类别的页面备注。Axure的工作环境—页面备注页面备注（PageNotes）页面备注可是对页面进行描述和说明。添加页面备注在线框图下面的Pagenotes面板中可以添加页面备注内容182024/5/10Axure的工作环境—交互设计控件交互面板（InteractionsPane）用于定义线框图中控件的行为，包含定义链接、弹出、动态显示和隐藏等。所定义的交互都可以在将来生成的原型中进行操作执行。可以定义控件的（Events）、场景（Cases）和动作（Actions）：交互事件：用户操作界面时就会触发事件，如鼠标的OnClick、OnMouseEnter和OnMouseOut；场景：每个事件可以包含多个场景，场景也就是事件触发后要满足的条件；动作每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。192024/5/10目录基础知识软件介绍工具栏流程图交互设计基础交互设计动态面板高级交互设计高级交互设计实例生成文档生成HTML生成规格说明书生成CHM文档20基础交互设计通过定义控件的行为，可以在生成的原型中打开链接、弹出页面、动态显示和隐藏等。可以定义控件的（Events）、场景（Cases）和动作（Actions）：交互事件：用户操作界面时就会触发事件，如鼠标的OnClick、OnMouseEnter和OnMouseOut；场景：每个事件可以包含多个场景，场景也就是事件触发后要满足的条件；动作每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。212024/5/10AxureRP支持的事件如下：OnClick：鼠标点击

OnMouseEnter：鼠标的指针移动到对象上OnMouseOut：鼠标的指针移动出对象外OnFocus：鼠标的指针进入文字输入状态（获得焦点）OnLostFocus：鼠标的指针离开文字输入状态（失去焦点）OnPageLoad：页面或模块载入大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter与OnMouseOut，页面加载或模块被载入时则发生OnPageLoad基础交互设计—事件事件、场景和动作的关系222024/5/10基础交互设计—定义链接下列步骤说明如何在按钮控件上定义一个链接：Step1：拖拉一个按钮控件到线框图中，鼠标双击“OnClick”事件，出现“InteractionCaseProperties”对话窗，在这个对话框中可以选择要执行的动作；Step2：勾选“OpenLinkinCurrentWindow”动作。Step3：点击“Link”，在弹出的LinkProperties对话框中可以选择要链接的页面或其它网页地址。232024/5/10基础交互设计—动作除了简单的链接之外，Axure还提供了许多丰富的动作，这些动作可以在触发事件的场景中执行。242024/5/10以下是Axure所支持的动作：OpenLinkinCurrentWindow：在当前窗口打开一个页面OpenLinkinPopupWindow：在弹出的窗口中打开一个页面OpenLinkinParentWindow：在父窗口中打开一个页面CloseCurrentWindow：关闭当前窗口OpenLinkinFrame：在框架中打开一个页面SetPanelstate(s)toState(s)：为动态面板设定要显示的状态ShowPanel(s)：显示动态面板HidePanel(s)：隐藏动态面板ToggleVisibilityforPanel(s)：切换动态面板的显示状态（显示/隐藏）MovePanel(s)：根据绝对坐标或相对坐标来移动动态面板SetVariableandWidgetvalue(s)equaltoValue(s)：设定变量值或控件值OpenLinkinParentFrame：在父页面的嵌框架中打开一个页面ScrolltoImageMapRegion：滚动页面到ImageMap所在位置EnableWidget(s)：把对象状态变成可用状态DisableWidget(s)：把对象状态变成不可用状态WaitTime(s)：等待多少毫秒(ms)后再进行这个动作Other：显示动作的文字说明基础交互设计—动作252024/5/10动态面板包含多个状态，每个状态可包含一系列控件。任何时候都只有一个状态时可见的，一般都是默认第一个状态可见；动态面板的状态可以隐藏、显示和改变；将动态面板拖到界面后，可以根据需要改变面板大小、位置使用动态面板的情况：页面中存某块内容在开始不显示后来显示的情况；在开始页面加载时不显示后来显示；Tab页切换；某块内容随着事件的不同显示位置不同的情况动态面板动态面板控件可以让你的原型中实现高级的动态交互功能。262024/5/10编辑动态面板右击动态面板，选择“编辑动态面板”→“管理动态状态”在对话框中可以创建、重命名、重新排序、删除、和编辑动态面板的状态动态面板272024/5/10设置动态面板标签为“实例”，并新增三个状态：tab1、tab2、tab3，然后点击“编辑所有状态”动态面板—编辑282024/5/10在tab1页面中设置tab1、tab2、tab3三个矩形框，并且为了突出效果可以设置tab1矩形框的颜色为白色（表示选中的是tab1状态），其他两个为灰色。动态面板—编辑状态292024/5/10设置tab1、tab2、tab3三个矩形框的OnClick事件，以tab1为例说明：（1）选择tab1矩形框，点击交互中的OnClick事件，再选择“设置动态面板的状态转换”，然后选择第三步的“Panelstatetostate”；动态面板—添加事件302024/5/10（2）选择第一步中的“设置实例的状态变化”，然后点击第二部中的tab1动态面板—添加事件312024/5/10（3）选择一个动态面板tab1，点击确定完成事件注明：tab2、tab3矩形框事件如同tab1，只是选择面板状态时选择对应得状态，tab2选择tab2状态、tab3选择tab3状态动态面板—添加事件（4）按照以上步骤，完成tab2、tab3状态页面操作322024/5/10高级交互设计但如果需要更强大、更高保真度的原型，就需要逻辑条件。增加条件可以是基于原型中控件上输入的值，如复选框的选择值、文本框中的文本等。条件也可以是基于变量值。一个触发事件可以包含有多个场景，根据条件执行流程或互动。332024/5/10高级交互设计Step1：首先要在交互面板中为某个事件添加一个场景（case）。在InteractionCaseProperties对话框中的Step1中点击―AddCondition‖这个链接。342024/5/10高级交互设计Step2：这时会打开一个ConditionBuilder对话框，创建逻辑条件。在ConditionBuilder对话框中，可以添加多个逻辑条件。如果要求所有条件都需要满足，则在Satisfy下拉列表框中选择all；如果只要满足其中一个条件可选择为any。352024/5/10高级交互设计Step3：下一步需要选择当条件满足时要执行的动作。点击确定，完成交互设计362024/5/10高级交互设计实例系统登陆界面这是一个简单的登陆界面，输入用户名、密码后，点击登陆按钮进行登陆校验：1.如果未输入用户名或密码，则提示“请输入用户名和密码”，蓝色字体；2.如果用户名或密码错误，则提示“用户名或密码错误”，红色字体；3.如果用户名和密码都匹配，则提示“您好，【用户名】”，黑色字体。

372024/5/10高级交互设计实例步骤一、绘制线框图1、打开Axure软件，新建一个RP文件；2、拖动控件面板中的控件到线框图面板中，绘制登陆界面如下图：所用到的控件清单如下：控件名作用文本内容标识符其它属性Rectangle控件底色

底色：灰色TextPanel显示信息提示

logInfo

TextPanel用户名用户名：

TextPanel密码密码：

TextField输入用户名

userName

TextField输入密码

passWord

Button点击登录登陆submitButton

382024/5/10高级交互设计实例步骤二、设计控件交互1、选中登陆按钮，在控件交互和注释面板中鼠标双击onClick事件；392024/5/10高级交互设计实例2、在弹出的“交互场景属性”对话框中，点击“添加场景…”这个链接402024/5/10高级交互设计实例3、在弹出的“条件创建”对话框中，添加条件如下：412024/5/10高级交互设计实例4、回到“交互场景属性”对话框中，Step2中选择动作“SetVariableandWidgetvalueequaltoValue”，并点击Step3中的链接；422024/5/10高级交互设计实例5、在弹出的“设置变量和控件值”对话框中，设置如下：点击Edittext…链接，输入“请输入用户名或密码”，并设置为蓝色；432024/5/10高级交互设计实例6、确定和关闭所有对话框，这时控件交互和注释面板如下：以上我们实现了第一个场景：如果未输入用户名或密码，则提示“请输入用户名和密码”，蓝色字体；442024/5/10高级交互设计