《《AXURERP中文教程》PPT课件.ppt》由会员分享,可在线阅读,更多相关《《AXURERP中文教程》PPT课件.ppt(31页珍藏版)》请在金锄头文库上搜索。
1、AXURERP案例教程交互设计师、产品经理产品原型利器AXURERP教程入门篇第一章介绍以工具栏工具(widgets)绘制示意图(Wireframe)第二章流程图(FlowDiagrams)撰写网页说明(PageNotes)第三章高级交互设计(RichInteraction)第四章实例AXURERP教程第一章介绍第1节认识AxureRP第2节线框图及其注释第3节基本交互设计第4节使用模块(Master)第5节HTML原型第6节输出规格说明AXURERP教程入门篇第一章软件介绍第1节认识AxureRP1.AxureRPAxure的发音是“Ack-sure”,RP则是“RapidPrototypi
2、ng”的缩写。AxureRPPro是美国AxureSoftwareSolution公司的旗舰产品,是一个快速的原型工具,主要是针对负责定义需求、定义规格、设计功能、设计界面的专家,包括用户体验设计师、交互设计师、业务分析师、信息架构师、可用性专家和产品经理。AXURERP教程Axure能让你快速的进行线框图和原型的设计,让相关人员对你的设计进行体验和验证,向用户进行演示、沟通交流以确认用户需求,并能自动生成规格说明文档。另外,Axure还能让团队成员进行多人协同设计,并对设计进行方案版本控制管理。Axure使原型设计及和客户的交流方式发生了变革:进行更加高效的设计;让你体验动态的原型;更加清晰
3、的交流想法;2.原型的作用和好处制作Prototype是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面,如此更能抓住利益相关者与使用者的注意,让用户在软件开始投入编程前就确认需求。快速原型法(RapidPrototyping)是一种有效且高效的以用户为中心(User-CenteredDesign)的技术,可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。目前全球有财富1000大的公司和重要机构在使用AxureRP,国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。AXURERP教程3、Ax
4、ure的工作环境Axure的工作环境可进行可视化拖拉操作,可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure可一体化生成线框图、HTML交互原型、规格说明Word文档。以下是对AxureRP工作环境的简要说明:AXURERP教程AXURERP教程主菜单和工具栏(Main Menu & Toolbar) 执行常用操作,如文件打开、保存、格式化控件、输出原型、输出规格等操作。页面导航板(Sitemap Pane) 对所设计的页面进行添加、删除、重命名和组织。控件面板(Widgets Pane) 该面板中有线框图控件和流程图控件,用这些控件进行线框图和流程图
5、的设计。模块面板(Masters Pane) 模块是一种可以复用的特殊页面,在该面板中可进行模块的添加、删除、重命名和组织。线框图面板(Wireframe Pane) 在线框图面板中可以进行页面线框图的设计,线框图面板也就是进行页面设计的工作区。 控件交互面板(Interactions Pane) 定义控件的交互,如:链接、弹出、动态显示和隐藏等。控件注释面板(Annotations Pane) 对控件进行注释定义和对控件的功能进行说明。页面交互和注释面板(Pages Notes & Page Interactions Pane) 添加和管理页面的注释和交互。AXURERP教程第2节线框图及其
6、注释1.页面导航面板(Sitemap)在绘制线框图(Wireframe)或流程图(Flow)之前,应该先思考界面框架,决定信息内容与层级。明确界面框架后,接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面,可以添加、删除及对页面层次进行重新组织。页面的添加、删除和重命名点击面板工具栏上的“AddChildPage”按钮可以添加一个页面,点击“DeletePage”按钮可以删除一个页面。右键单击选择“RenamePage”菜单项可对页面进行重命名。AXURERP教程页面组织排序在页面导航面板中,通过拖拉页面或点击工具栏上的排序按钮,可以上下移动页面的位置和重新组
7、织页面的层次。打开页面进行设计在页面导航面板中,鼠标双击页面将会在线框面板中打开页面以进行线框图设计。AXURERP教程2.控件(Widgets)控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件,如按钮、图片、文本框等。AXURERP教程添加控件从控件面板中拖动一个控件到线框图面板中,就可以添加一个控件。控件可以从一个线框图中被拷贝(Ctrl+C),然后粘贴(Ctrl+V)到另外一个线框图中。操作控件添加控件后,在线框图中点选该控件,然后可以拖拉移动控件和改变控件的大小,还可以一次同时对多个控件进行选择、移动、改变尺寸。另外,还可以组合、排序、对齐、分配和锁定控件。这些操作可通
8、过控件右键菜单中进行,也可在Object工具栏上的按钮进行。编辑控件风格和属性有多种方法可以编辑控件的风格和属性:鼠标双击:鼠标双击某个控件,可以对控件的最常用属性进行编辑。例如,双击一个图片控件可以导入一张图片;双击一个下拉列表或列表框控件可以编辑列表项。工具栏:点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。右键菜单:控件右键菜单上可编辑控件的一些特定属性,不同控件这些属性也不同。AXURERP教程3.注释(Annotations)可以为控件添加注释,以说明控件的功能。添加注释在线框图中选择控件,然后在控件注释和交互(AnnotationsandInteractions)面板中编辑
9、字段中的值,即可为控件添加注释。面板顶部的Label字段是为控件添加一个标识符。AXURERP教程自定义字段(Fields)通过主菜单Wireframe-CustomizeAnnotationFieldsandViews或点击面板上Annotations头部的“CustommizeFieldsandViews”然后在弹出的CustommizeFieldsand,Views对话框中可以添加、删除、修改、排序注释字段。AXURERP教程脚注(Footnotes)在控件上添加注释后,控件的右上角会显示一个黄色方块,称为脚注。脚注号码可以增大和减小,可通过控件右键菜单或工具栏上的进行修改。AXURER
10、P教程4.页面备注(PageNotes)页面备注可是对页面进行描述和说明。添加页面备注在线框图下面的Pagenotes面板中可以添加页面备注内容。管理页面备注管理页面备注另外,可以自定义页面备注,为不同的人提供不同的备注,以满足不同需要。比如可以新增“测试用例”“操作说明”等不同类别的页面备注。AXURERP教程第3节基本交互设计1.控件的交互控件交互面板用于定义线框图中控件的行为,包含定义简单的链接和复杂的RIA行为,所定义的交互都可以在将来生成的原型中进行操作执行。在控件交互面板中可以定义控件的交互,交互事件(Events) 、场景( Cases)和动作(Actions)组成: 用户操作界
11、面时就会触发事件,如鼠标的 OnClick、OnMouseEnter 和 OnMouseOut; 每个事件可以包含多个场景,场景也就是事件触发后要满足的条件; 每个场景可执行多个动作,例如:打开链接、显示面板、隐藏面板、移动面板。AXURERP教程以下是AxureRP支持的事件如下:OnClick:鼠标点击OnMouseEnter:鼠标的指针移动到对象上OnMouseOut:鼠标的指针移动出对象外OnFocus:鼠标的指针进入文字输入状态(获得焦点)OnLostFocus:鼠标的指针离开文字输入状态(失去焦点)OnPageLoad:页面或模块载入大多对象只具备常见的三种触发事件:OnClick
12、、OnMouseEnter与OnMouseOut,一些特殊的控件可触发的事件有些不同:按钮控件只有OnClick单选框和复选框则具有OnFocus、OnLostFocus文本框、文本域、下拉框、列表框则具有OnKeyUp、OnFocus、OnLostFocus页面加载或模块被载入时则发生OnPageLoad事件、场景和动作的关系AXURERP教程2、定义链接下列步骤说明如何在按钮控件上定义一个链接:1.首先,拖拉一个按钮控件到线框图中,并选择这个按钮;2.然后,控件交互面板中鼠标双击“OnClick”这个事件,这时会出现“InteractionCaseProperties”对话窗,在这个对话框
13、中可以选择要执行的动作;3.在“Step2”中,勾选“OpenLinkinCurrentWindow”动作。4.在“Step3”中,点击“Link”,在弹出的LinkProperties对话框中可以选择要链接的页面或其它网页地址。AXURERP教程除了上面的步骤, 加入一个链接的最快的方法是单击控件交互面板顶部的“Quick Link” ,在弹出的 Link Properties 对话框中选择要链接的页面。AXURERP教程3.设置动作除了简单的链接之外,Axure还提供了许多丰富的动作,这些动作可以在任何触发事件的场景中执行。AXURERP教程以下是Axure所支持的动作:OpenLinki
14、nCurrentWindow:在当前窗口打开一个页面OpenLinkinPopupWindow:在弹出的窗口中打开一个页面OpenLinkinParentWindow:在父窗口中打开一个页面CloseCurrentWindow:关闭当前窗口OpenLinkinFrame:在框架中打开一个页面SetPanelstate(s)toState(s):为动态面板设定要显示的状态ShowPanel(s):显示动态面板HidePanel(s):隐藏动态面板ToggleVisibilityforPanel(s):切换动态面板的显示状态(显示/隐藏)MovePanel(s):根据绝对坐标或相对坐标来移动动态面
15、板SetVariableandWidgetvalue(s)equaltoValue(s):设定变量值或控件值OpenLinkinParentFrame:在父页面的嵌框架中打开一个页面ScrolltoImageMapRegion:滚动页面到ImageMap所在位置EnableWidget(s):把对象状态变成可用状态DisableWidget(s):把对象状态变成不可用状态WaitTime(s):等待多少毫秒(ms)后再进行这个动作Other:显示动作的文字说明AXURERP教程4.多个场景(条件)一个触发事件可以包含有多个场景,根据条件执行流程或互动。AXURERP教程5.页面上的事件:OnP
16、ageLoadAxure支持一个页面层级的触发事件:OnPageLoad,这个事件在原型载入页面时触发。页面 OnPageLoad 事件在页面备注面板中的 Interactions 子面板中定义, OnPageLoad 为事件添加场景的方式与控件事件相同AXURERP教程实例-打开关闭弹出层1.点击打开弹出层弹出层显示2.点击弹出层右上角的关闭,即可关闭弹出层AXURERP教程实例打开关闭层实例描述:1.打开/关闭设置切换2.设置区域显示与隐藏3.产品列表位置移动AXURERP教程实例Tab切换标签点击Tab标签进行层切换AXURERP教程实例-记住用户的输入内容并显示出来实例描述:1.不输入内容点提交会显示提示语设置区域显示与隐藏2.输入内容提交会显示输入内容AXURERP教程实例用户登录实例描述:1.用户名或密码为空,提示用户输入用户名或密码2.用户名或密码输入不匹配,提示用户名或密码输入错误3.用户名或密码输入正确点击提交转到登录成功页面(测试用户名yll密码为123456)AXURERP教程实例-轮换图点击图片右下角的数字切换不同图片AXURERP教程实例25小时商街界面原型