Axure-RP教程

AxureRP基础教程基础知识·软件介绍·Axure的工作环境交互设计·基础交互设计·动态面板生成文档·生成HTML·浏览和操作HTML原型·大约66%的软件开发失败或亏损的前三大原因为：-缺乏使用者的参与-需求或规格不完整-需求或规格变更·将文字性文档转变为互动性的可视画面，让客户在投入编程之前进行需求确认。·是一种高效的以用户为中心的技术，是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。·全球有1000家的公司在使用AxureRP，淘宝、雅虎、腾讯、当当等也都在使用。·AxureRP8是美国AxureSoftwareSolution公司的旗舰产品，是一个快速的原型工具，主要是针对负责定义需求、定义规格、设计功能、设计界面的专家。·AXURE改变我们的工作方式：-决策层直观的理解系统行为，帮助决策。-产品经理提高了各岗位间的沟通效率，降低沟通成本，保证项目进程。-需求人员更加有效的与用户沟通，减少误解，保证需求质量。-设计开发更加有效的协作沟通，降低沟通成本，减少误解，避免返工。-用户更加直观的感受系统，尽早反馈用户的需求与系统的不足。·Axure的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。·无需编程就可以在线框图中定义简单链接和高级交互。·Axure可一体化生成线框图、HTML交互原型、规格说明Word文档。菜单栏和工具栏元件编辑区域元件注释交互面板元件管理面板页面导航面板元件面板母版面板·菜单栏和工具栏执行常用操作，如文件打开、保存、格式化控件、输出原型、输出规格等操作。·页面导航面板-右击进行页面的添加、删除和重命名-页面组织排序-打开页面进行设计·在绘制线框图或流程图之前，应该先思考界面框架，决定信息内容与层级。·明确界面框架后，接下来就可以利用页面导航面板来定义所要设计的页面。页面导航面板是用于管理所设计的页面，右击可以添加、删除及对页面层次进行重新组织。·在页面导航面板中，通过拖拉页面或点击工具栏上的排序按钮，可以上下移动页面的位置和重新组织页面的层次。·元件元件是用于设计线框图的用户界面元素。在元件面板中包含有常用的元件，如按钮、图片、文本框等。·添加元件-从元件面板中拖动一个元件到元件编辑区域，就可以添加一个元件；-元件可以进行拷贝（Ctrl+C）和粘贴（Ctrl+V）。·操作元件-选中元件后，可以拖拉移动元件和改变元件的大小；-可通过元件右键菜单进行组合、排序、对齐、分配等操作。·编辑元件风格和属性-工具栏：点击工具栏上的按钮，编辑元件的文本字体、背景色、边框等。-右键菜单：元件右键菜单上可编辑元件的一些特定属性，不同元件这些属性也不同。·元件·元件-形状类①②-拖动①处三角形状快速改变圆角-单击②处圆形快速改变形状-按住ctrl键，进入矩形区域，拖动角度即可改变形状角度-在③样式中可以设置具体的各项参数-其中④填充是指文字与形状边缘之间填充的空隙③④·元件-图片只有图片可以从外部导入图片。·元件-动态面板·动态面板的实质就是层，一个动态面板可以有多个状态，每个状态可包含一系列元件；正是因为动态面板的存在实现了同一区域状态的变化。·任何时候都只有一个状态时可见的，一般都是默认第一个状态可见。·动态面板的状态可以隐藏、显示和改变。·将动态面板拖到界面后，可以根据需要改变面板大小、位置。·使用动态面板的情况：-页面中存某块内容在开始不显示，后来显示的情况；-在开始页面加载时不显示，后来显示的情况；-Tab页切换；-某块内容随着事件的不同显示位置不同的情况。·元件-热区热区在生成的原型中是透明的（不可见的），如果想在设计区域中也将其设置为不可见状态，在菜单栏中，点击“视图→遮罩→取消勾选热区”即可。1.可以添加成链接（比如，增大某处的反应区域；导航的链接）2.跳转到层或区域（比如，回到顶部）3.可以添加交互（比如，在翻到此处热区时自动加载下方更多）·元件-文本文本本身没有边框，生成原型之后也没有。且文本的高度不可以改变。-文本框·添加母版-选择“添加母版”，可添加一个新的母版；·转换为母版-选中元件后，右击选择“转换为母版”，对名称等进行设置，即可将选中的元件转换为母版。·注释-可以为元件添加注释，以说明元件的名称和功能。·添加注释-选择元件，在元件注释区域，为元件添加一个名称。名称一般使用英文。-在交互面板中，选择“说明”，可编辑字段中的说明，即可为元件添加注释。·交互面板用于定义线框图中元件的行为，包含定义链接、弹出、动态显示和隐藏等。所定义的交互都可以在将来生成的原型中进行操作执行。可以定义元件的事件、场景和动作：-交互事件：用户操作界面时就会触发事件，如鼠标单击时、鼠标移入时和鼠标移出时；-场景：每个事件可以包含多个场景，场景也就是事件触发后要满足的条件；-动作每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。·元件管理面板-元件是可以重复使用的特殊页面，如页首；-只要修改元件，引用这个元件的所有概要也会随即全部跟着变化；-元件面板可利用文件夹来组织元件，并且可以用拖拉或工具栏的方式排列元件。基础知识·软件介绍·Axure的工作环境交互设计·基础交互设计·动态面板生成文档·生成HTML·浏览和操作HTML原型AxureRP支持的常用事件如下：-鼠标单击时-鼠标移入时-鼠标移出时-获得焦点时-失去焦点时事件、场景和动作的关系·事件基础交互设计Axure提供了许多丰富的动作，这些动作可以在触发事件的场景中执行。·动作下列步骤说明如何在按钮元件上定义一个链接：-Step1：拖拉一个按钮元件到线框图中，鼠标双击“鼠标单击时”事件，出现“用例编辑鼠标单击时”对话窗，在这个对话框中可以选择要执行的动作；-Step2：添加一个动作，例如“打开链接”。-Step3：在“配置动作”中选择“连接到url或文件”，填写超链接地址。①②③·定义链接·编辑动态面板双击动态面板，弹出“面板状态管理”。动态面板动态面板可以进行以下操作：添加复制上移下移编辑编辑全部状态删除动态面板控件可以让你的原型中实现高级的动态交互功能。设置动态面板标签为“实例”，新增三个状态：State1、State2、State3。在“动态面板”中增加一个“矩形1”，分别输入文字信息。动态面板·编辑切换到index页面，可以看到“State1”的动态面板，而看不到其他动态面板。双击动态面板，改变“State2”的排序在第一位，则index页面中显示“State2”中的内容。动态面板·编辑状态设置State1、State2、State3三个矩形框的事件，以State1为例说明：选择State1矩形框，点击交互中的“鼠标单击时”事件，在对话框中左侧选择“设置面板状态”，在右侧选择“Set实例”并选择状态为“State2”。动态面板①②③·添加事件基础知识·软件介绍·Axure的工作环境交互设计·基础交互设计·动态面板生成文档·生成HTML·浏览和操作HTML原型·在Axure中设计了线框图并定义了交互之后，就可以产生一个可以互动的、基于浏览器的原型了。·Axure原型是一些HTML和JavaScript文件，可以在IE6+、Mozilla、Firefox浏览器中执行。·点击主菜单“发布→预览”或工具栏上的“预览”按钮，可以配置和生成原型·在“预览选项”对话框中，可以对浏览器和工具栏进行配置。·设计完原型后，就可以输出Word格式的说明书；生成的Word说明书，Axure会自动按照线框图的文字和插图，按照顺序生成到Word文档中。HTML原型的界面可分成三个区域：-左侧:导航列表，可以选择页面（PAGES）、注释（NOTES）、控制台（CONSOL）等模块。其中，页面以层级形式展示原型中页面。控制台显示触发时间。-中间:显示线框图和流程图，线框图可以按照所设计的交互进行互动。