Axure使用向导

Axure使用向导--FloxyYe介绍•介绍如何使用Axure创建框架、生成交互原型和说明书。–如何使用组件；–如何使用master；–如何生成原型、说明书；–如何通过动态面板创建动态的接口–如何演示有条件的流程界面介绍•MainMenu&Toolbar:普遍的操作，如打开、保存文件，格式化原型的组件•SitemapPane:添加，移除，重命名，组织设计页面•WidgetsPane:拖放常用的组件（按钮、图片、输入框等）到设计页面•MastersPane:添加，移除，重命名，组织可重用的通用Master•WireframePane:设计页面的原型面板•InteractionsPane:定义组件的交互，如链接、弹出、动态显示、隐藏组件等等•AnnotationsPane:添加、自定义组件的描述•PagesNotes&PageInteractionsPane:添加页面描述和页面交互开始：启动AxureRP，在File-Open打开QuickStart.rp文件。Homepage打开在WireframePane中。设计框架•添加页面标注(PageNotes)–可以设置标注的类型，并添加文字到相应的类型–打开文件时，Homepage显示在Wireframepane。在PageNotespane添加描述“ThisistheHomepagewhereuserscansearchforlightsorlogintotheiraccount.”•添加组件(Widgets)–从组件框中拖放组件到框架图(wireframe)。–在Widgetspane中找到ButtonShape组件。拖放ButtonShape组件到AccountLogin部分。设计框架•编辑组件–双击组件可以编辑组件的公共属性–右键组件会显示菜单，可以编辑组件的特殊属性–双击ButtonShape，输入“Login”，编辑组件的显示文字。–右键ButtonShape，选择EditButtonShape-Rectangle修改组件的形状。•设计组件–设计组件的风格，通过wireframepane上方的工具栏可以修改文字大学、线条颜色、填充颜色和文字颜色–设计ButtonShape的文字为粗体、用灰色填充、使用加粗的线条可以通过下方工具实现：设计框架•添加注解Annotations–选择组件，在Annotations&Interactionspane输入组件名称可以为组件添加注解。点击Customize链接可以自定义注解字段。–选择ButtonShape组件，在Labelfield输入“LoginButton”。在Speciicationfield中输入“ThisbuttontakestheusertotheMyAccountpage.”•添加基本链接–基本链接可以在Interactionspane中，通过QuickLinks捷径进行添加–选择LoginButton，在Interactionspane中点击QuickLink。然后选择MyAccount页面，点击OK。完成后，在Interactionspane中添加了OnClick事件的case。设计框架•更多的动作Actions–可以添加更多的case到OnClickEvent。例如，你制作：点击一个按钮在当前窗口打开一个新的页面并同时弹出新窗口。–在OnClickevent下方双击Case1可以看到其他可用的动作。选择后，点击OK。使用master•添加master–master收集了多个组件，你通过调用master，可以把这些组件应用到整个设计中。一些常用的master包括页眉、页脚、导航栏。master被改变就会映射到任何使用master的地方。–在masterspane的工具栏点击Addmasterbutton添加master。右键master，选择重命名，命名为”Footer”。双击Footermaster，打开master进行设计。•编辑master–master与页面的设计方式相同。–添加HorizontalLine组件和TextPanel组件到master。在wireframefane选择TextPanel组件，输入文字”Copyright,2008”使用master•嵌套master–master可以被放置在其他页面上，从Masterpane拖放到页面。–添加另外一个master，命名为”Template”。双击Template打开页面，进行设计。从Masterspane中拖动Header到Templatemaster的顶端。然后，拖动Footer到Templatemaster的底端。•master状态–默认的master设置为Normal状态，此时，master可以被放置在wireframe的任何地方。当master的状态设置为PlaceinBackground，添加master时，master将定位在创建master时设置的位置。master设置为CustomWidget状态，将失去master的关联关系，master被添加到页面后，还可以像其他组件一样被修改。–在Masterspane右键Template，选择Behavior-PlaceinBackground.使用master•把master添加到页面–从Masterspane拖放master到wireframepane中，就能把master添加到页面。–从Masterspane拖放Templatemaster到Wireframepane，就把master添加到Homepage。–双击Sitemappane打开MyAccount页面，添加Templatemaster到页面。•做全部变化–更改master会映射到任何使用master的地方。–打开Headermaster，双击图标，从你的电脑中导入一张图片，或者，用Logomaster替换image组件。然后，打开Home和MyAccount页面，改动被应用到页面。生成原型•生成原型–生成原型时，有若干选项包含在目标文件夹，包括pagenotes和annotions。–按F5或者在主菜单选择Generate-Prototype.点击Generate按钮生成原型。当你被询问是否创建目标文件夹室，点击Yes。•查看原型–AxureRP原型是HTML,javascripte和image文件，可以通过Web浏览器浏览。–从Web浏览器打开原型。你可以使用左边的Sitemappane定位页面。Pagenotes显示在底端的框架。点击Login按钮旁边的黄色便条，查看注解。点击Login按钮，链接到MyAccount页面。在浏览器打开页面，收到ActiveX提示时，点击允许。生成说明书•生成说明书–生成说明书时，有若干选项包含在目标文件夹，包括页面、master、pagenotes和annotations。你还可以自定义模板，比如添加titlepage，编辑页眉、页脚。–返回到AxureRP。按F6或者从主菜单选择Generate-Specification。点击Generate按钮生成说明书。•查看Word说明书–AxureRP说明书生成未Word格式，具有截图、注解、互动信息。–产生一个MicrosoftWord2007(.docx)文件。Office文件格式兼容包安装在AxureRP中，允许你使用较早的Word版本查看或编辑这些文件。–滚动查看文档。每个页面都包括pagenote,页面截图，和包含页面annotations和interactions的表格。添加动态接口和条件流程•使用动态面板(Dynamicpanels)–动态面板组件允许你在原型中显示动态的功能。动态面板包含一个或多个状态(states)。可在动态面板进行隐藏、显示、更改状态操作。–返回AxureRP。在HomePage，拖放Dynamicpanels组件到AccountLogin部分的Email框上方。双击动态面板打开动态面板状态管理。在DynamicPanelLabel框标记面板为”ErrorPanel”，点击EditAllStates按钮。•编辑动态面板–打开面板状态，可以像页面和masters一样从Widgetspane拖放组件来设计面板状态。框架中的蓝色虚线表示动态面板的边界。–添加一个TextPanel组件，输入文字“Loginfailed.Pleasetryagain.”添加动态接口和条件流程•隐藏动态面板–动态面板可以设置默认为隐藏。面板隐藏后，可以使用interactions动态地显示。–返回Homepage。右键动态面板，选择EditDynamicPanel-SetHidden。•创建多个Cases–可以添加多个Cases到一个事件的条件流程。–选择LoginButton，在InteractionsPane的OnClick事件中，双击Case1。在Step1:Description中输入”IfLoginSucceeds”，点击OK。–然后，选择Onclick事件，点击AddCase添加第二个case。在Step1:Description中输入”IfLoginFails”，在Step2:SelectActions选择”ShowPanel(s)”。在Step3下方点击蓝色链接，选择”ErrorPanel”。添加动态接口和条件流程•生成原型–按F5生成原型，点击Generate按钮。–点击Login按钮，你在浏览器会看到2个case的描述。点击IfLoginFails将显示errormessage，点击IfLoginSucceeds将链接到MyAccount页面。