《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。,