AXURERP案例教程.ppt

《AXURERP案例教程.ppt》由会员分享，可在线阅读，更多相关《AXURERP案例教程.ppt（39页珍藏版）》请在三一办公上搜索。

1、AXURE RP 使用培训,-张宁,第一章 介绍,第1节 认识 Axure RP第2节 线框图及其注释第3节 基本交互设计第4节 使用模块（Master）第5节 HTML 原型第6节 输出规格说明,第一章 软件介绍第1节 认识Axure RP1.Axure RP Axure 的发音是“Ack-sure”，RP 则是“Rapid Prototyping”的缩写。Axure RP Pro是美国 Axure Software Solution公司的旗舰产品，是一个快速的原型工具，主要是针对负责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师、交互设计师、业务分析师、信息架构师、可用性

2、专家和产品经理。,Axure能让你快速的进行线框图和原型的设计，让相关人员对你的设计进行体验和验证，向用户进行演示、沟通交流以确认用户需求，并能自动生成规格说明文档。另外，Axure还能让团队成员进行多人协同设计，并对设计进行方案版本控制管理。Axure使原型设计及和客户的交流方式发生了变革：进行更加高效的设计；让你体验动态的原型；更加清晰的交流想法；2.原型的作用和好处 制作 Prototype（原型）是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始

3、投入编程前就确认需求。快速原型法（Rapid Prototyping）是一种有效且高效的以用户为中心（User-Centered Design）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。目前全球有财富 1000 大的公司和重要机构在使用 Axure RP，国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。,3、Axure 的工作环境 Axure 的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure 可一体化生成线框图、HTML 交互原型、规格说明 Word 文档。以下是对 Axure RP

4、 工作环境的简要说明：,第2节 线框图及其注释,页面导航面板（Sitemap）在绘制线框图(Wireframe)或流程图（Flow）之前，应该先思考界面框架，决定信息内容与层级。明确界面框架后，接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面，可以添加、删除及对页面层次进行重新组织。页面的添加、删除和重命名 点击面板工具栏上的“Add Child Page”按钮可以添加一个页面，点击“Delete Page”按钮可以删除一个页面。右键单击选择“Rename Page”菜单项可对页面进行重命名。,页面组织排序 在页面导航面板中，通过拖拉页面或点击工具栏上的排序

5、按钮，可以上下移动页面的位置和重新组织页面的层次。打开页面进行设计 在页面导航面板中，鼠标双击页面将会在线框面板中打开页面以进行线框图设计。,2.控件控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件，如按钮、图片、文本框等。,添加控件 从控件面板中拖动一个控件到线框图面板中，就可以添加一个控件。控件可以从一个线框图中被拷贝(Ctrl+C)，然后粘贴(Ctrl+V)到另外一个线框图中。操作控件 添加控件后，在线框图中点选该控件，然后可以拖拉移动控件和改变控件的大小，还可以一次同时对多个控件进行选择、移动、改变尺寸。另外，还可以组合、排序、对齐、分配和锁定控件。这些操作可通过控件右

6、键菜单中进行，也可在 Object 工具栏上的按钮进行。编辑控件风格和属性 有多种方法可以编辑控件的风格和属性：鼠标双击：鼠标双击某个控件，可以对控件的最常用属性进行编辑。例如，双击一 个图片控件可以导入一张图片；双击一个下拉列表或列表框控件可以编辑列表项。工具栏：点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。右键菜单：控件右键菜单上可编辑控件的一些特定属性，不同控件这些属性也不同。,3.注释可以为控件添加注释，以说明控件的功能。添加注释 在线框图中选择控件，然后在控件注释和交互面板中编辑字段中的值，即可为控件添加注释。面板顶部的 Label(标签)字段是为控件添加一个标识符。,自定

7、义字段（Fields）通过主菜单 线框图-自定义字段和视图或点击面板上 注解 头部的“自定义字段和视图”然后在弹出的自定义字段和视图对话框中可以添加、删除、修改、排序注释字段。,脚注（Footnotes）在控件上添加注释后，控件的右上角会显示一个黄色方块，称为脚注。脚注号码可以增大和减小，可通过控件右键菜单或工具栏上的 进行修改。,4.页面备注（Page Notes）页面备注可是对页面进行描述和说明。添加页面备注 在线框图下面的 Page notes 面板中可以添加页面备注内容。,管理页面备注另外，可以自定义页面备注，为不同的人提供不同的备注，以满足不同需要。比如可以新增“测试用例”“操作说明

8、”等不同类别的页面备注。,第3节 基本交互设计,控件的交互 控件交互面板用于定义线框图中控件的行为，包含定义简单的链接和复杂的 RIA 行为，所定义的交互都可以在将来生成的原型中进行操作执行。,在控件交互面板中可以定义控件的交互，交互事件（Events）、场景（Cases）和动作（Actions）组成：用户操作界面时就会触发事件，如鼠标的 OnClick、OnMouseEnter 和 OnMouseOut；每个事件可以包含多个场景，场景也就是事件触发后要满足的条件；每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。,以下是 Axure RP支持的事件如下：OnClick：鼠

9、标点击 OnMouseEnter：鼠标的指针移动到对象上 OnMouseOut：鼠标的指针移动出对象外 OnFocus：鼠标的指针进入文字输入状态（获得焦点）OnLostFocus：鼠标的指针离开文字输入状态（失去焦点）OnPageLoad：页面或模块载入 大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter 与 OnMouseOut，一些特殊的控件可触发的事件有些不同：按钮控件只有 OnClick 单选框和复选框则具有 OnFocus、OnLostFocus 文本框、文本域、下拉框、列表框则具有 OnKeyUp、OnFocus、OnLostFocus 页面加载或模块被载

10、入时则发生 OnPageLoad,事件、场景和动作的关系,2、定义链接下列步骤说明如何在按钮控件上定义一个链接：1.首先，拖拉一个按钮控件到线框图中，并选择这个按钮；2.然后，控件交互面板中鼠标双击“OnClick”这个事件，这时会出现“交互事件属性”对话窗，在这个对话框中可以选择要执行的动作；3.在“第二步”中，勾选“在当前窗口打开链接”动作。4.在“第三步”中，点击“Link”，在弹出的 链接属性 对话框中可以选择要链接 的页面或其它网页地址。,3.设置动作,除了简单的链接之外，Axure 还提供了许多丰富的动作，这些动作可以在任何触发事件的场景中执行。,以下是 Axure 所支持的动作：

11、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)：切换动态面板

12、的显示状态（显示/隐藏）Move Panel(s)：根据绝对坐标或相对坐标来移动动态面板 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)：把对象状态变成不可用状态 Wait Time(s)：等待多少毫秒(ms)后再进行这个动作 Other：显示动作的文字说

13、明,4.多个场景（条件）,一个触发事件可以包含有多个场景，根据条件执行流程或互动。,6.使用模块（Master）,1.什么是模块 模块是可以重复使用特殊页面。一些常用模块如页首(Header)、页尾(Footer)与导航(Navigation)。模块可用在页面中或是其他模块中。只要修改模块，在所有页面中引用这个模块的模块实例也会随即全部跟着变化。模块的概念犹如PowerPoint中母版、Dreamveawer中模板的概念，熟练掌握模块可以大大提高原型设计的效率，并易于维护管理。,2.模块的添加、设计和组织 在模块面板中可进行模块的管理。要添加模块，单击模块面板顶部的工具栏上的“增加模块”按钮；

14、或在面板中点鼠标右键，选择“增加模块”。模块面板中可利用文件夹(Folder)来组织模块，然后通过工具栏、快捷菜单或是拖拉的方式重新排列模块。在模块上双击鼠标打开模块，像设计页面一样拖拉控件到线框图面板中进行模块设计。,3.页面中使用模块 只要拖拉模块面板中的模块到线框图中，就可以在页面或另外模块中应用模块。拖入到线框图中后，根据模块特性，模块对象会有淡红或灰色的遮罩，执行菜单“线框图-Mask Masters”可以移除遮罩。模块预设行为（Behavior）是“正常”，可以在模块面板中的模块上点鼠标右键，然后利用“行为”子菜单将它的行为修改为“作为背景”或“自定义组件”,模块的行为说明如下：正

15、常:模块可以被移动与放置在线框图中的任何地方，对模块修改后，所做的修改会在该模块的所有使用实例中反映出来。作为背景:模块应用在线框图中时，会处于线框图的最底层并被锁定，所包含控件的位置与在模块中的位置相同，常用于作为模板、布局、底板。自定义组件:模块应用在线框图中时，模块中的控件与模块失去关联，模块中的控件可以像一般控件一样进行编辑，就好像只是进行了复制。常用于创建具有自定义属性、注释和交互的自定义控件库，例如：具有白色文字的蓝色按钮。,7.HTML原型,1.什么是HTML原型 在Axure中设计了带注释的线框图并定义了交互之后，就可以产生一个可以互动的、基于浏览器的原型了。Axure原型是一

16、些HTML和JavaScript文件，可以在IE6+、Mozilla、Firefox浏览器中执行。,2.配置和生成原型 点击主菜单“生成-原型(F5)”或工具栏上的原型按钮，可以配置和生成原型，在打开的 配置 HTML 原型对话框中，可以对原型进行配置。,配置选项分为以下部分：常规：在“目的文件夹”位置输入HTML原型的存放位置。由于Axure HTML原型包含多个文件，最好指定一个单独文件夹专门存放这个原型。注释：选择和排序想要显示在HTML原型中的页面说明。注解：选择和排序想要显示在HTML原型中的注释字段。交互：指定交互行为，例如：指定是否需要总是显示场景描述(case)，或是只在多个场

17、景存在的情形才显示。分发：选择是否生成chm文件。高级：选择是否将文本转成图片，这是旧版本的一个功能，很少使用。,配置完毕后，就可以点击 生成 按钮生成原型。,3.重新生成页面 当Axure工程会越来越大时，输出HTML原型的时间也会越来越慢。如果只是调整其中一个页面，却要等待整个原型重新全部输出，那就太浪费时间了。要重新生成某一个页面，只打开这个页面，然后选择主菜单“生成（Generate）将当前页面重新生成为原型（Regenerate Current Page to Prototype(CTRL+F5)”，回到HTML原型中刷新就可以看到更新的页面了。,4.浏览和操作HTML原型 Axur

18、e输出的HTML原型的界面可分成三个区域：左侧:是一个页面导航列表，以层级形式展示原型中页面。底部:显示当前页面的备注说明，即页面备注。中间:显示线框图和流程图，线框图可以按照所设计的交互进行鼠标和键盘的互动。,动态面板使用案例,Tab页签 动态面板可用于创建一个Tab页签控件。如Tab页签控件有3个tab，则该tab控件被包含在拥有3个状态的动态面板中，每个状态代表一个tab。对每个tab都有一个交互动作，当点击某个tab时，就会切换到动态面板的对应状态。,弹出菜单 动态面板可以用于在原型中自定义弹出菜单，或根据鼠标移动动态的显示和隐藏菜单，这可以结合OnMouseEnter事件和动作来实现

19、。页面动态初始化动态面板和OnPageLoad事件结合，可实现根据变量值进行页面初始化。,菜单,1.菜单控件 菜单控件用于创建简单的弹出菜单，如一般桌面应用软件中的菜单。菜单控件分为垂直菜单（Vertical Menu）和水平菜单（Horizontal Menu），可以通过控件面板中拖拉菜单控件到线框图面板中创建菜单，默认情况下菜单带有3个菜单项。,2.编辑菜单控件 双击菜单项可以编辑菜单文本，通过工具栏可以对菜单加底色、字体和其它样式。右键单击选择编辑菜单，在弹出的菜单编剧编辑器对话框中可设置边距。,要增加或删除菜单项，右键单击选择“添加子菜单”和“删除菜单条目”。,Axure原型输出/生成

20、,在axure中设计了带注释的线框图并定义了交互之后，就可以产生一个可以互动的、基于浏览器的原型。我们目前主要使用的生成模式是HTML模式，功能键为：主菜单生成重新生成页面当Axure工程会越来越大时，输出HTML原型的时间也会越来越慢。如果只是调整其中一个页面，却要等待整个原型重新全部输出，这将十分浪费时间。要重新生成某一个页面，只打开这个页面，然后选择主菜单“生成-将当前页面重新生成为原型(ctrl+f5)”，回到HTML原型中刷新就可以看到更新的页面了。,Axure 使用的技巧,1.Groups功能是神器，一定要多联系使用。2.Groups的升级版是Master工具。3.在网页设计中经常使用的12px和14px字体，在Axure里应用的是10px和10.5px。4.控件也可以使用Ctrl+C和Ctrl+V，按住Shift可以实现平行移动。5.一般最常用的页面宽度为970px，建议在开始设计前，先拉一根长为970px的水平线，避免在整个画布跑火车。6.Slice功能可以在Axure内裁图，这会节约你很多时间。7.Axure会有前万分之一的卡死率.所以建议你在设计完一个功能点或刚做完某个交互效果时，即时Crtl+s。,