下载

2下载券

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 AXURE_RP案例教程

AXURE_RP案例教程.ppt

AXURE_RP案例教程

zhangning9988
2012-07-07 0人阅读 举报 0 0 暂无简介

简介:本文档为《AXURE_RP案例教程ppt》,可适用于IT/计算机领域

AXURERP使用培训AXURERP使用培训张宁第一章介绍第一章介绍第节认识AxureRP第节线框图及其注释第节基本交互设计第节使用模块(Master)第节HTML原型第节输出规格说明第一章软件介绍第节认识AxureRPAxureRPAxure的发音是“Acksure”RP则是“RapidPrototyping”的缩写。AxureRPPro是美国AxureSoftwareSolution公司的旗舰产品是一个快速的原型工具主要是针对负责定义需求、定义规格、设计功能、设计界面的专家包括用户体验设计师、交互设计师、业务分析师、信息架构师、可用性专家和产品经理。Axure能让你快速的进行线框图和原型的设计让相关人员对你的设计进行体验和验证向用户进行演示、沟通交流以确认用户需求并能自动生成规格说明文档。另外Axure还能让团队成员进行多人协同设计并对设计进行方案版本控制管理。Axure使原型设计及和客户的交流方式发生了变革:进行更加高效的设计让你体验动态的原型更加清晰的交流想法原型的作用和好处制作Prototype(原型)是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面如此更能抓住利益相关者与使用者的注意让用户在软件开始投入编程前就确认需求。快速原型法(RapidPrototyping)是一种有效且高效的以用户为中心(UserCenteredDesign)的技术可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。目前全球有财富大的公司和重要机构在使用AxureRP国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。、Axure的工作环境Axure的工作环境可进行可视化拖拉操作可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure可一体化生成线框图、HTML交互原型、规格说明Word文档。以下是对AxureRP工作环境的简要说明:第节线框图及其注释第节线框图及其注释页面导航面板(Sitemap)在绘制线框图(Wireframe)或流程图(Flow)之前应该先思考界面框架决定信息内容与层级。明确界面框架后接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面可以添加、删除及对页面层次进行重新组织。页面的添加、删除和重命名点击面板工具栏上的“AddChildPage”按钮可以添加一个页面点击“DeletePage”按钮可以删除一个页面。右键单击选择“RenamePage”菜单项可对页面进行重命名。页面组织排序在页面导航面板中通过拖拉页面或点击工具栏上的排序按钮可以上下移动页面的位置和重新组织页面的层次。打开页面进行设计在页面导航面板中鼠标双击页面将会在线框面板中打开页面以进行线框图设计。控件控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件如按钮、图片、文本框等。添加控件从控件面板中拖动一个控件到线框图面板中就可以添加一个控件。控件可以从一个线框图中被拷贝(CtrlC)然后粘贴(CtrlV)到另外一个线框图中。操作控件添加控件后在线框图中点选该控件然后可以拖拉移动控件和改变控件的大小还可以一次同时对多个控件进行选择、移动、改变尺寸。另外还可以组合、排序、对齐、分配和锁定控件。这些操作可通过控件右键菜单中进行也可在Object工具栏上的按钮进行。编辑控件风格和属性有多种方法可以编辑控件的风格和属性:鼠标双击:鼠标双击某个控件可以对控件的最常用属性进行编辑。例如双击一个图片控件可以导入一张图片双击一个下拉列表或列表框控件可以编辑列表项。工具栏:点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。右键菜单:控件右键菜单上可编辑控件的一些特定属性不同控件这些属性也不同。注释可以为控件添加注释以说明控件的功能。添加注释在线框图中选择控件然后在控件注释和交互面板中编辑字段中的值即可为控件添加注释。面板顶部的Label(标签)字段是为控件添加一个标识符。自定义字段(Fields)通过主菜单线框图>自定义字段和视图或点击面板上注解头部的“自定义字段和视图”然后在弹出的自定义字段和视图对话框中可以添加、删除、修改、排序注释字段。脚注(Footnotes)在控件上添加注释后控件的右上角会显示一个黄色方块称为脚注。脚注号码可以增大和减小可通过控件右键菜单或工具栏上的进行修改。页面备注(PageNotes)页面备注可是对页面进行描述和说明。添加页面备注在线框图下面的Pagenotes面板中可以添加页面备注内容。管理页面备注另外可以自定义页面备注为不同的人提供不同的备注以满足不同需要。比如可以新增“测试用例”“操作说明”等不同类别的页面备注。第节基本交互设计第节基本交互设计控件的交互控件交互面板用于定义线框图中控件的行为包含定义简单的链接和复杂的RIA行为所定义的交互都可以在将来生成的原型中进行操作执行。在控件交互面板中可以定义控件的交互交互事件(Events)、场景(Cases)和动作(Actions)组成:用户操作界面时就会触发事件如鼠标的OnClick、OnMouseEnter和OnMouseOut每个事件可以包含多个场景场景也就是事件触发后要满足的条件每个场景可执行多个动作例如:打开链接、显示面板、隐藏面板、移动面板。以下是AxureRP支持的事件如下:OnClick:鼠标点击OnMouseEnter:鼠标的指针移动到对象上OnMouseOut:鼠标的指针移动出对象外OnFocus:鼠标的指针进入文字输入状态(获得焦点)OnLostFocus:鼠标的指针离开文字输入状态(失去焦点)OnPageLoad:页面或模块载入大多对象只具备常见的三种触发事件:OnClick、OnMouseEnter与OnMouseOut一些特殊的控件可触发的事件有些不同:按钮控件只有OnClick单选框和复选框则具有OnFocus、OnLostFocus文本框、文本域、下拉框、列表框则具有OnKeyUp、OnFocus、OnLostFocus页面加载或模块被载入时则发生OnPageLoad事件、场景和动作的关系、定义链接下列步骤说明如何在按钮控件上定义一个链接:首先拖拉一个按钮控件到线框图中并选择这个按钮然后控件交互面板中鼠标双击“OnClick”这个事件这时会出现“交互事件属性”对话窗在这个对话框中可以选择要执行的动作在“第二步”中勾选“在当前窗口打开链接”动作。在“第三步”中点击“Link”在弹出的链接属性对话框中可以选择要链接的页面或其它网页地址。设置动作设置动作除了简单的链接之外Axure还提供了许多丰富的动作这些动作可以在任何触发事件的场景中执行。以下是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:显示动作的文字说明多个场景(条件)多个场景(条件)一个触发事件可以包含有多个场景根据条件执行流程或互动。使用模块(Master)使用模块(Master)什么是模块模块是可以重复使用特殊页面。一些常用模块如页首(Header)、页尾(Footer)与导航(Navigation)。模块可用在页面中或是其他模块中。只要修改模块在所有页面中引用这个模块的模块实例也会随即全部跟着变化。模块的概念犹如PowerPoint中母版、Dreamveawer中模板的概念熟练掌握模块可以大大提高原型设计的效率并易于维护管理。模块的添加、设计和组织在模块面板中可进行模块的管理。要添加模块单击模块面板顶部的工具栏上的“增加模块”按钮或在面板中点鼠标右键选择“增加模块”。模块面板中可利用文件夹(Folder)来组织模块然后通过工具栏、快捷菜单或是拖拉的方式重新排列模块。在模块上双击鼠标打开模块像设计页面一样拖拉控件到线框图面板中进行模块设计。页面中使用模块只要拖拉模块面板中的模块到线框图中就可以在页面或另外模块中应用模块。拖入到线框图中后根据模块特性模块对象会有淡红或灰色的遮罩执行菜单“线框图>MaskMasters”可以移除遮罩。模块预设行为(Behavior)是“正常”可以在模块面板中的模块上点鼠标右键然后利用“行为”子菜单将它的行为修改为“作为背景”或“自定义组件”模块的行为说明如下:正常:模块可以被移动与放置在线框图中的任何地方对模块修改后所做的修改会在该模块的所有使用实例中反映出来。作为背景:模块应用在线框图中时会处于线框图的最底层并被锁定所包含控件的位置与在模块中的位置相同常用于作为模板、布局、底板。自定义组件:模块应用在线框图中时模块中的控件与模块失去关联模块中的控件可以像一般控件一样进行编辑就好像只是进行了复制。常用于创建具有自定义属性、注释和交互的自定义控件库例如:具有白色文字的蓝色按钮。HTML原型HTML原型什么是HTML原型在Axure中设计了带注释的线框图并定义了交互之后就可以产生一个可以互动的、基于浏览器的原型了。Axure原型是一些HTML和JavaScript文件可以在IE、Mozilla、Firefox浏览器中执行。配置和生成原型点击主菜单“生成>原型(F)”或工具栏上的原型按钮可以配置和生成原型在打开的配置HTML原型对话框中可以对原型进行配置。配置选项分为以下部分:常规:在“目的文件夹”位置输入HTML原型的存放位置。由于AxureHTML原型包含多个文件最好指定一个单独文件夹专门存放这个原型。注释:选择和排序想要显示在HTML原型中的页面说明。注解:选择和排序想要显示在HTML原型中的注释字段。交互:指定交互行为例如:指定是否需要总是显示场景描述(case)或是只在多个场景存在的情形才显示。分发:选择是否生成chm文件。高级:选择是否将文本转成图片这是旧版本的一个功能很少使用。配置完毕后就可以点击生成按钮生成原型。重新生成页面当Axure工程会越来越大时输出HTML原型的时间也会越来越慢。如果只是调整其中一个页面却要等待整个原型重新全部输出那就太浪费时间了。要重新生成某一个页面只打开这个页面然后选择主菜单“生成(Generate)>将当前页面重新生成为原型(RegenerateCurrentPagetoPrototype(CTRLF)”回到HTML原型中刷新就可以看到更新的页面了。浏览和操作HTML原型Axure输出的HTML原型的界面可分成三个区域:左侧:是一个页面导航列表以层级形式展示原型中页面。底部:显示当前页面的备注说明即页面备注。中间:显示线框图和流程图线框图可以按照所设计的交互进行鼠标和键盘的互动。动态面板使用案例动态面板使用案例Tab页签动态面板可用于创建一个Tab页签控件。如Tab页签控件有个tab则该tab控件被包含在拥有个状态的动态面板中每个状态代表一个tab。对每个tab都有一个交互动作当点击某个tab时就会切换到动态面板的对应状态。弹出菜单动态面板可以用于在原型中自定义弹出菜单或根据鼠标移动动态的显示和隐藏菜单这可以结合OnMouseEnter事件和动作来实现。页面动态初始化动态面板和OnPageLoad事件结合可实现根据变量值进行页面初始化。菜单菜单菜单控件菜单控件用于创建简单的弹出菜单如一般桌面应用软件中的菜单。菜单控件分为垂直菜单(VerticalMenu)和水平菜单(HorizontalMenu)可以通过控件面板中拖拉菜单控件到线框图面板中创建菜单默认情况下菜单带有个菜单项。编辑菜单控件双击菜单项可以编辑菜单文本通过工具栏可以对菜单加底色、字体和其它样式。右键单击选择编辑菜单在弹出的菜单编剧编辑器对话框中可设置边距。要增加或删除菜单项右键单击选择“添加子菜单”和“删除菜单条目”。Axure原型输出生成Axure原型输出生成在axure中设计了带注释的线框图并定义了交互之后就可以产生一个可以互动的、基于浏览器的原型。我们目前主要使用的生成模式是HTML模式功能键为:主菜单>>生成重新生成页面当Axure工程会越来越大时输出HTML原型的时间也会越来越慢。如果只是调整其中一个页面却要等待整个原型重新全部输出这将十分浪费时间。要重新生成某一个页面只打开这个页面然后选择主菜单“生成>将当前页面重新生成为原型(ctrlf)”回到HTML原型中刷新就可以看到更新的页面了。Axure使用的技巧Axure使用的技巧Groups功能是神器一定要多联系使用。Groups的升级版是Master工具。在网页设计中经常使用的px和px字体在Axure里应用的是px和px。控件也可以使用CtrlC和CtrlV按住Shift可以实现平行移动。一般最常用的页面宽度为px建议在开始设计前先拉一根长为px的水平线避免在整个画布跑火车。Slice功能可以在Axure内裁图这会节约你很多时间。Axure会有前万分之一的卡死率……所以建议你在设计完一个功能点或刚做完某个交互效果时即时Crtls。

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/39

AXURE_RP案例教程

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利