资源描述
AXURE RP 核心培训教程及案例交互设计师、产品经理产品原型利器目录目录基础知识软件介绍工具栏流程图交互设计基础交互设计动态面板高级交互设计高级交互设计实例生成文档生成HTML生成规格说明书生成CHM文档为什么要进行原型设计?为什么要进行原型设计?为什么要进行原型设计?为什么要进行原型设计?n大约66%的软件开发失败或亏损的前三大原因为:-缺乏使用者的参与;-需求或规格不完整;-需求或规格变更;n将文字性文档转变为互动性的可视画面,让客户在投入编程之前进行需求确认。n原型是一种以用户/市场为中心的技术,是个高效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的有效方法。n全球有上万家公司使用Axure RP做原型,包括淘宝、雅虎、腾讯、当当等“没有比制作prototype更易取得使用者界面与特殊功能可用性上的一致性了。prototype不只可确认需求,它更可赢得顾客的心。”阿伦M.戴维斯软件介绍软件介绍软件介绍软件介绍nAxure RP Pro是美国 Axure Software Solution公司的旗舰产品,是一个快速的原型工具,主要是针对负责定义需求、定义需求、定义规格、定义规格、设计功能、设计功能、设计界面设计界面的专家。nAXURE改变我们的工作方式:-决策层:直观的理解系统行为,帮助决策-产品经理:提高了各岗位间的沟通效率,降低沟通成本,保证项目进程-需求人员:更加有效的与用户沟通,减少误解,保证需求质量-设计开发:更加有效的协作沟通,降低沟通成本,减少误解,避免返工-用户:更加直观的感受系统,尽早反馈用户的需求与系统的不足。Axure Axure Axure Axure 工作环境工作环境工作环境工作环境 nAxure 工作环境可进行可视化拖拉操作,可轻松快速的创建带有注释的线框图。n无需编程就可以在线框图中定义简单链接和高级交互。nAxure 可一体化生成线框图、可一体化生成线框图、HTML HTML 交互原型、规格说明交互原型、规格说明 Word Word 文档文档;站点地图主菜单和工具栏界面控件(界面工具集)页面注释与页面交互模块区域物件注释互动设计Axure 7Axure 7Axure 7Axure 7的的的的工作环境工作环境工作环境工作环境 Axure 的工作环境 主菜单和工具栏(Main Menu&Toolbar):执行常用操作,如文件打开、保存、格式化控件、输出原型、输出规格等操作。Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境主菜单和工具栏主菜单和工具栏主菜单和工具栏主菜单和工具栏站点地图(Sitemap Pane)-页面的添加、删除和重命名-页面组织排序-打开页面进行设计 Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境站点地图站点地图站点地图站点地图n在绘制线框图(Wireframe)或流程图(Flow)之前,应该先思考界面框架,决定信息内容与层级。n明确界面框架后,接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面,可以添加、删除及对页面层次进行重新组织。点击面板工具栏上的“Add Child Page”按钮可以添加一个页面,点击“Delete Page”按钮可以删除一个页面。右键单击选择“Rename Page”菜单项可对页面进行重命名。Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境站点地图站点地图站点地图站点地图Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境站点地图站点地图站点地图站点地图n在页面导航面板中,通过拖拉页面或点击工具栏上的排序按钮,可以上下移动页面的位置和重新组织页面的层次。n打开页面进行设计 在页面导航面板中,鼠标双击页面将会在线框面板中打开页面以进行线框图设计。添加控件添加控件从组件中拖动一个控件到界面中,就可以添加一个控制。控件可以从一个界面中拷贝到另外一个界面中。编辑控件编辑控件鼠标双击鼠标双击:双击控件,可以对控件最常用的属性进行编辑工具栏工具栏:点击工具栏上的按钮可以编辑控件的文本字体、背景色、边框等;右键菜单右键菜单:右击控件可以选择编辑控件的一些特定属性,不同控件属性也不同。控件(Widgets PaneWidgets Pane)Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境控件控件控件控件控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件,如按钮、图片、文本框等。Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境控件控件控件控件Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境控件控件控件控件n添加添加控件控件 -从控件面板中拖动一个控件到线框图面板中,就可以添加一个控件;-控件可以进行拷贝(Ctrl+C)和粘贴(Ctrl+V)。n操作控件操作控件 -选中控件后,可以拖拉移动控件和改变控件的大小;-可通过控件右键菜单进行组合、排序、对齐、分配和锁定控件。n编辑编辑控件风格和属性控件风格和属性 -鼠标双击:鼠标双击某个控件,可以对控件的最常用属性进行编辑。-工具栏:点击工具栏上的按钮,编辑控件的文本字体、背景色、边框等。-右键菜单:控件右键菜单上可编辑控件的一些特定属性,不同控件这些属性也不同。-模块面板(Master PaneMaster Pane)-模块是可以重复使用的特殊页面,如页首(Header);-只要修改模块,引用这个模块的所有实例也会随即全部跟着变化;-模块面板可利用文件夹来组织模块,并且可以用拖拉或工具栏的方式排列模块;-在页面中拖入模块后,模块对象回应淡红色遮罩,在页面中模块是不可修改的;-修改模块中的内容只能在模块页面修改。Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境模块面板模块面板模块面板模块面板3.3.Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境注释注释注释注释n注释注释(AnnotationsAnnotations)可以为控件添加注释,以说明控件的功能。n添加注释添加注释 在线框图中选择控件,然后在控件注释和交互面板中编辑字段中的值,即可为控件添加注释。面板顶部的 Label 字段是为控件添加一个标识符。Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境自定义自定义自定义自定义字段字段字段字段n自定义字段(Fields)通过主菜单 Wireframe-Customize Annotation Fields and Views 或点击面板上 Annotations 头部的“Custommize Fields and Views”,弹出的Custommize Fields and Views 对话框,可以添加、删除、修改、排序注释字段。脚注(Footnotes)在控件上添加注释后,控件的右上角会显示一个黄色方块,称为脚注。脚注号码可以增大和减小,可通过控件右键菜单或工具栏上的 进行修改。Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境自定义自定义自定义自定义字段字段字段字段管理页面备注管理页面备注另外,可以自定义页面备注,为不同的人提供不同的备注,以满足不同需要。比如可以新增“测试用例”“操作说明”等不同类别的页面备注。Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境页面页面页面页面备注备注备注备注n页面页面备注(备注(Page NotesPage Notes)页面备注可是对页面进行描述和说明。添加页面备注添加页面备注 在线框图下面的 Page notes 面板中可以添加页面备注内容Axure Axure Axure Axure 的的的的工作环境工作环境工作环境工作环境交互设计交互设计交互设计交互设计n控件交互控件交互 面板面板(Interactions Pane)用于定义线框图中控件的行为,包含定义链接、弹出、动态显示和隐藏等。所定义的交互都可以在将来生成的原型中进行操作执行。可以定义控件的(Events)、场景(Cases)和动作(Actions):交互事件:用户操作界面时就会触发事件,如鼠标的 OnClick、OnMouseEnter 和 OnMouseOut;场景:每个事件可以包含多个场景,场景也就是事件触发后要满足的条件;动作每个场景可执行多个动作,例如:打开链接、显示面板、隐藏面板、移动面板。目录目录基础知识软件介绍工具栏流程图交互设计基础交互设计动态面板高级交互设计高级交互设计实例生成文档生成HTML生成规格说明书生成CHM文档基础交互设计基础交互设计基础交互设计基础交互设计通过定义控件的行为,可以在生成的原型中打开链接、弹出页面、动态显示和隐藏等。可以定义控件的(Events)、场景(Cases)和动作(Actions):交互事件:用户操作界面时就会触发事件,如鼠标的 OnClick、OnMouseEnter 和 OnMouseOut;场景:每个事件可以包含多个场景,场景也就是事件触发后要满足的条件;动作每个场景可执行多个动作,例如:打开链接、显示面板、隐藏面板、移动面板。Axure RP支持的事件如下:OnClick:鼠标点击 OnMouseEnter:鼠标的指针移动到对象上 OnMouseOut:鼠标的指针移动出对象外 OnFocus:鼠标的指针进入文字输入状态(获得焦点)OnLostFocus:鼠标的指针离开文字输入状态(失去焦点)OnPageLoad:页面或模块载入 大多对象只具备常见的三种触发事件:OnClick、OnMouseEnter 与 OnMouseOut,页面加载或模块被载入时则发生 OnPageLoad基础交互设计基础交互设计基础交互设计基础交互设计事件事件事件事件事件、场景和动作的关系基础交互设计基础交互设计基础交互设计基础交互设计定义链接定义链接定义链接定义链接下列步骤说明如何在按钮控件上定义一个链接:Step1:拖拉一个按钮控件到线框图中,鼠标双击“OnClick”事件,出现“Interaction Case Properties”对话窗,在这个对话框中可以选择要执行的动作;Step 2:勾选“Open Link in Current Window”动作。Step 3:点击“Link”,在弹出的 Link Properties 对话框中可以选择要链接 的页面或其它网页地址。基础交互设计动作除了简单的链接之外,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):根据绝对坐标或相对坐标来移动动态面板 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:显示动作的文字说明基础交互设计动作,Axure 所支持的动作:动态面板包含多个状态,每个状态可包含一系列控件。任何时候都只有一个状态时可见的,一般都是默认第一个状态可见;动态面板的状态可以隐藏、显示和改变;将动态面板拖到界面后,可以根据需要改变面板大小、位置使用动态面板的情况:页面中存某块内容在开始不显示后来显示的情况;在开始页面加载时不显示后来显示;Tab页切换;某块内容随着事件的不同显示位置不同的情况动态面板动态面板动态面板动态面板动态面板控件可以让你的原型中实现高级的动态交互功能。编辑动态面板右击动态面板,选择“编辑动态面板”“管理动态状态”在对话框中可以创建、重命名、重新排序、删除、和编辑动态面板的状态动态面板动态面板动态面板动态面板设置动态面板标签为“实例”,并新增三个状态:tab1、tab2、tab3,然后点击“编辑所有状态”动态面动态面动态面动态面板板板板编辑编辑编辑编辑在tab1页面中设置tab1、tab2、tab3三个矩形框,并且为了突出效果可以设置tab1矩形框的颜色为白色(表示选中的是tab1状态),其他两个为灰色。动态面动态面动态面动态面板板板板编辑状态编辑状态编辑状态编辑状态设置tab1、tab2、tab3三个矩形框的OnClick事件,以tab1为例说明:(1)选择tab1矩形框,点击交互中的OnClick事件,再选择“设置动态面板的状态转换”,然后选择第三步的“Panel state to state”;动态面板动态面板动态面板动态面板添加事件添加事件添加事件添加事件(2)选择第一步中的“设置 实例 的状态变化”,然后点击第二部中的tab1动态面板动态面板动态面板动态面板添加事件添加事件添加事件添加事件(3)选择一个动态面板tab1,点击确定完成事件注明:tab2、tab3矩形框事件如同tab1,只是选择面板状态时选择对应得状态,tab2选择tab2状态、tab3选择tab3状态动态面板动态面板动态面板动态面板添加事件添加事件添加事件添加事件(4)按照以上步骤,完成tab2、tab3状态页面操作高级交互设计n但如果需要更强大、更高保真度的原型,就需要逻辑条件。n增加条件可以是基于原型中控件上输入的值,如复选框的选择值、文本框中的文本等。n条件也可以是基于变量值。一个触发事件可以包含有多个场景,根据条件执行流程或互动。高级交互设计nStep1:首先要在交互面板中为某个事件添加一个场景(case)。在Interaction Case Properties对话框中的Step 1中点击Add Condition这个链接。高级交互设计nStep2:这时会打开一个Condition Builder对话框,创建逻辑条件。n在Condition Builder对话框中,可以添加多个逻辑条件。n 如果要求所有条件都需要满足,则在Satisfy下拉列表框中选择all;如果只要满足其中一个条件可选择为any。高级交互设计nStep3:下一步需要选择当条件满足时要执行的动作。n点击确定,完成交互设计高级交互设计实例系统登陆界面这是一个简单的登陆界面,输入用户名、密码后,点击登陆按钮进行登陆校验:1.如果未输入用户名或密码,则提示“请输入用户名和密码”,蓝色字体;2.如果用户名或密码错误,则提示“用户名或密码错误”,红色字体;3.如果用户名和密码都匹配,则提示“您好,【用户名】”,黑色字体。高级交互设计实例步骤一、绘制线框图1、打开Axure软件,新建一个RP文件;2、拖动控件面板中的控件到线框图面板中,绘制登陆界面如下图:所用到的控件清单如下:控件名作用文本内容标识符其它属性Rectangle控件底色底色:灰色TextPanel显示信息提示logInfoTextPanel用户名用户名:TextPanel密码密码:TextField输入用户名userNameTextField输入密码passWordButton点击登录登陆submitButton高级交互设计实例步骤二、设计控件交互 1、选中登陆按钮,在控件交互和注释面板中鼠标双击onClick事件;高级交互设计实例2、在弹出的“交互场景属性”对话框中,点击“添加场景”这个链接高级交互设计实例3、在弹出的“条件创建”对话框中,添加条件如下:高级交互设计实例4、回到“交互场景属性”对话框中,Step 2中选择动作“Set Variable and Widget value equal to Value”,并点击Step 3中的链接;高级交互设计实例5、在弹出的“设置变量和控件值”对话框中,设置如下:点击Edit text链接,输入“请输入用户名或密码”,并设置为蓝色;高级交互设计实例6、确定和关闭所有对话框,这时控件交互和注释面板如下:以上我们实现了第一个场景:如果未输入用户名或密码,则提示“请输入用户名和密码”,蓝色字体;高级交互设计实例仿照场景1的操作,实现第2、3个场景,最终控件面板上的场景、条件、动作如下:完成以上操作,即实现了系统登录的设置。目录目录基础知识软件介绍工具栏流程图交互设计基础交互设计动态面板高级交互设计高级交互设计实例生成文档生成HTML生成规格说明书生成CHM文档在Axure中设计了线框图并定义了交互之后,就可以产生一个可以互动的、基于浏览器的原型了。Axure原型是一些HTML和JavaScript文件,可以在IE、Chrome、Mozilla、Firefox浏览器中执行。点击主菜单“Generate-Prototype”或工具栏上的Prototype按钮,可以配置和生成原型,在打开的 Configure HTML Prototype对话框中,可以对原型进行配置。生成生成生成生成HTMLHTMLHTMLHTMLnHTML原型的界面可分成三个区域:-左侧:是一个页面导航列表,以层级形式展示原型中页面。-中间:显示线框图和流程图,线框图可以按照所设计的交互进行互动。-底部:显示当前页面的备注说明,即页面备注。浏览浏览浏览浏览和操作和操作和操作和操作HTMLHTMLHTMLHTML原型原型原型原型设计完原型后,就可以输出Word格式的规格说明书;生成的规格说明书,Axure会自动按照线框图的文字和插图,按照顺序生成到 Word文档中。生成规格说明书生成规格说明书生成规格说明书生成规格说明书浏览规格说明书浏览规格说明书浏览规格说明书浏览规格说明书CHM文件通常表示帮助文档,现在网络上很多电子书籍都被制作成 CHM 格式。生成生成生成生成CHMCHMCHMCHM文档文档文档文档在生成HTML原型文件的过程中,点击“发布”选项,并选中“创建HTML帮助文件”复选框,即可生成CHM文档。谢谢!入门篇入门篇第一章 介绍以工具栏工具(widgets)绘制示意图(Wireframe)第二章 流程图(Flow Diagrams)撰写网页说明(Page Notes)第三章 高级交互设计(Rich Interaction)第四章 实例第一章第一章 介绍介绍第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公司的旗舰产品,是一个快速的原型工具,主要是针对负责定义需求、定义规格、设计功能、设计界面的专家,包括用户体验设计师、交互设计师、业务分析师、信息架构师、可用性专家和产品经理。Axure使原型设计及和客户的交流方式发生了变革:进行更加高效的设计;让你体验动态的原型;更加清晰的交流想法;Axure能让你快速的进行线框图和原型的设计快速的进行线框图和原型的设计,让相关人员对你的设计进行体验和验证设计进行体验和验证,向用户进行演示、演示、沟通交流沟通交流以确认用户需求确认用户需求,并能自动生成规格说明文档能自动生成规格说明文档。另外,Axure还能让团队成员进行多人协同设计协同设计,并对设计进行方案版本控制版本控制管理。2.原型的作用和好处 制作 Prototype 是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面,如此更能抓住利益相关者与使用者的注意,让用户在软件开始投入编程前就确认需求。快速原型法(Rapid Prototyping)是一种有效且高效的以用户为中心(User-Centered Design)的技术,可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。目前全球有财富 1000 大的公司和重要机构在使用 Axure RP,国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。3、Axure 的工作环境 Axure 的工作环境可进行可视化拖拉操作,可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure 可一体化生成线框图、HTML 交互原型、规格说明 Word 文档。以下是对 Axure RP 工作环境的简要说明:主菜单和工具栏(Main Menu&Toolbar)执行常用操作,如文件打开、保存、格式化控件、输出原型、输出规格等操作。页面导航板(Sitemap Pane)对所设计的页面进行添加、删除、重命名和组织。控件面板(Widgets Pane)该面板中有线框图控件和流程图控件,用这些控件进行线框图和流程图的设计。模块面板(Masters Pane)模块是一种可以复用的特殊页面,在该面板中可进行模块的添加、删除、重命名和组织。线框图面板(Wireframe Pane)在线框图面板中可以进行页面线框图的设计,线框图面板也就是进行页面设计的工作区。控件交互面板(Interactions Pane)定义控件的交互,如:链接、弹出、动态显示和隐藏等。控件注释面板(Annotations Pane)对控件进行注释定义和对控件的功能进行说明。页面交互和注释面板(Pages Notes&Page Interactions Pane)添加和管理页面的注释和交互。第第2 2节节 线框图及其注释线框图及其注释1.页面导航面板(Sitemap)在绘制线框图(Wireframe)或流程图(Flow)之前,应该先思考界面框架,决定信息内容与层级。明确界面框架后,接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面,可以添加、删除及对页面层次进行重新组织。页面的添加、删除和重命名页面的添加、删除和重命名 点击面板工具栏上的“Add Child Page”按钮可以添加一个页面,点击“Delete Page”按钮可以删除一个页面。右键单击选择“Rename Page”菜单项可对页面进行重命名。页面组织排序页面组织排序 在页面导航面板中,通过拖拉页面或点击工具栏上的排序按钮,可以上下移动页面的位置和重新组织页面的层次。打开页面进行设计 在页面导航面板中,鼠标双击页面将会在线框面板中打开页面以进行线框图设计。2.控件(控件(WidgetsWidgets)控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件,如按钮、图片、文本框等。添加控件添加控件 从控件面板中拖动一个控件到线框图面板中,就可以添加一个控件。控件可以从一个线框图中被拷贝(Ctrl+C),然后粘贴(Ctrl+V)到另外一个线框图中。操作控件操作控件 添加控件后,在线框图中点选该控件,然后可以拖拉移动控件和改变控件的大小,还可以一次同时对多个控件进行选择、移动、改变尺寸。另外,还可以组合、排序、对齐、分配和锁定控件。这些操作可通过控件右键菜单中进行,也可在 Object 工具栏上的按钮进行。编辑控件风格和属性编辑控件风格和属性 有多种方法可以编辑控件的风格和属性:鼠标双击:鼠标双击某个控件,可以对控件的最常用属性进行编辑。例如,双击一 个图片控件可以导入一张图片;双击一个下拉列表或列表框控件可以编辑列表项。工具栏:点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。右键菜单:控件右键菜单上可编辑控件的一些特定属性,不同控件这些属性也不同。3.3.注释(注释(AnnotationsAnnotations)可以为控件添加注释,以说明控件的功能。添加注释添加注释 在线框图中选择控件,然后在控件注释和交互(Annotations and Interactions)面板中编辑字段中的值,即可为控件添加注释。面板顶部的 Label 字段是为控件添加一个标识符。自定义字段(自定义字段(FieldsFields)通过主菜单 Wireframe-Customize Annotation Fields and Views 或点击面板上 Annotations 头部的“Custommize Fields and Views”然后在弹出的 Custommize Fields and,Views 对话框中可以添加、删除、修改、排序注释字段。脚注(Footnotes)在控件上添加注释后,控件的右上角会显示一个黄色方块,称为脚注。脚注号码可以增大和减小,可通过控件右键菜单或工具栏上的 进行修改。4.4.页面备注(页面备注(Page NotesPage Notes)页面备注可是对页面进行描述和说明。添加页面备注添加页面备注 在线框图下面的 Page notes 面板中可以添加页面备注内容。管理页面备注管理页面备注另外,可以自定义页面备注,为不同的人提供不同的备注,以满足不同需要。比如可以新增“测试用例”“操作说明”等不同类别的页面备注。第第第第3 3 3 3节节节节 基本交互设计基本交互设计基本交互设计基本交互设计1.1.控件的交互控件的交互 控件交互面板用于定义线框图中控件的行为,包含定义简单的链接和复杂的 RIA 行为,所定义的交互都可以在将来生成的原型中进行操作执行。在控件交互面板中可以定义控件的交互,交互事件(Events)、场景(Cases)和动作(Actions)组成:用户操作界面时就会触发事件,如鼠标的 OnClick、OnMouseEnter 和 OnMouseOut;每个事件可以包含多个场景,场景也就是事件触发后要满足的条件;每个场景可执行多个动作,例如:打开链接、显示面板、隐藏面板、移动面板。以下是 Axure RP支持的事件如下:OnClick:鼠标点击 OnMouseEnter:鼠标的指针移动到对象上 OnMouseOut:鼠标的指针移动出对象外 OnFocus:鼠标的指针进入文字输入状态(获得焦点)OnLostFocus:鼠标的指针离开文字输入状态(失去焦点)OnPageLoad:页面或模块载入 大多对象只具备常见的三种触发事件:OnClick、OnMouseEnter 与 OnMouseOut,一些特殊的控件可触发的事件有些不同:按钮控件只有 OnClick 单选框和复选框则具有 OnFocus、OnLostFocus 文本框、文本域、下拉框、列表框则具有 OnKeyUp、OnFocus、OnLostFocus 页面加载或模块被载入时则发生 OnPageLoad事件、场景和动作的关系2、定义链接下列步骤说明如何在按钮控件上定义一个链接:1.首先,拖拉一个按钮控件到线框图中,并选择这个按钮;2.然后,控件交互面板中鼠标双击“OnClick”这个事件,这时会出现“Interaction Case Properties”对话窗,在这个对话框中可以选择要执行的动作;3.在“Step 2”中,勾选“Open Link in Current Window”动作。4.在“Step 3”中,点击“Link”,在弹出的 Link Properties 对话框中可以选择要链接 的页面或其它网页地址。除了上面的步骤,加入一个链接的最快的方法是单击控件交互面板顶部的“QuickLink”,在弹出的LinkProperties对话框中选择要链接的页面。3.3.3.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):根据绝对坐标或相对坐标来移动动态面板 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:显示动作的文字说明4.4.多个场景(条件)多个场景(条件)一个触发事件可以包含有多个场景,根据条件执行流程或互动。5.5.页面上的事件页面上的事件:OnPageLoad:OnPageLoadAxure 支持一个页面层级的触发事件:OnPageLoad,这个事件在原型载入页面时触发。页面 OnPageLoad 事件在页面备注面板中的 Interactions 子面板中定义,OnPageLoad 为事件添加场景的方式与控件事件相同实例实例-打开关闭弹出层打开关闭弹出层1.点击打开弹出层弹出层显示2.点击弹出层右上角的关闭,即可关闭弹出层实例实例打开关闭层打开关闭层实例描述:1.打开/关闭设置 切换2.设置区域显示与隐藏3.产品列表位置移动实例实例TabTab切换标签切换标签点击Tab标签进行层切换实例实例-记住用户的输入内容并显示出来记住用户的输入内容并显示出来实例描述:1.不输入内容点提交会显示提示语设置区域显示与隐藏2.输入内容提交会显示输入内容实例实例用户登录用户登录实例描述:1.用户名或密码为空,提示用户输入用户名或密码2.用户名或密码输入不匹配,提示用户名或密码输入错误3.用户名或密码输入正确点击提交转到登录成功页面(测试用户名yll密码为123456)实例实例-轮换图轮换图点击图片右下角的数字切换不同图片实例实例2525小时商街界面原型小时商街界面原型
展开阅读全文