下载文档原格式
Axure RP Pro 使用手册Axure RP Pro 使用手册 (1)第一章介绍 (3)第一节认识Axure RP (3)1、什么是Axure？ (3)2、Axure工作环境介绍 (3)第2节线框图及注释 (5)1. 站点地图面板 (5)2.元件面板（控件面板） (6)3. 控件注释 (9)4. 页面注释（Page Notes） (10)第3节基本交互设计 (12)1、控件的交互 (12)2、定义一个链接 (13)3、定义行为 (14)4、定义多个场景（场景说明） (15)5、页面事件: OnPageLoad （页面载入时） (16)第4节母版 (17)1、什么是母版 (17)2、添加、设计和组织母版 (17)3、页面中添加模块 (17)第5节HTML原型 (19)1、什么HTML原型 (19)2、配置和生成原型 (19)3、重新生成页面 (20)4、使用HTML原型 (20)5、发布原型 (21)第二章流程图 (22)第1节流程图和连接线 (22)1、什么是流程图 (22)2、流程控件 (23)3、流程连接线 (26)4、创建流程图 (27)5、流程图中引用页面 (27)第2节自动生成流程图 (28)第三章高级交互设计 (29)第1节动态面板 (29)1、动态面板控件 (29)2、编辑动态面板的状态 (29)3、隐藏动态面板 (30)4、动态面板的管理 (30)5、动态面板的交互行为 (31)6、动态面板的应用举例 (31)第2节翻转效果和鼠标移动事件 (33)1、OnMouseEnter（鼠标移入时）和OnMouseOut（鼠标移出时）事件 (33)2、图片翻转和按钮样式翻转 (33)第3节按下、选中、停用的效果 (34)第4节菜单 (35)1、菜单控件 (35)2、编辑菜单控件 (35)3、菜单样式翻转 (35)第四章高级功能 (36)第1节逻辑条件 (36)1、什么是逻辑条件 (36)2、创建逻辑条件 (36)第2节OnChange（选项改变时）事件 (38)1、什么是OnChange（选项改变时）事件 (38)2、在OnChange（选项改变时）事件上使用逻辑条件 (38)第3节OnKeyUp（键盘输入时）事件 (39)1、什么OnKeyUp（键盘输入时）事件 (39)2、OnKeyUp（键盘输入时）实时表单验证 (39)第4节OnFocus（获取焦点时）和OnLostFocus（失去焦点时）事件 (39)1、什么是OnFocus（获取焦点时）和OnLostFocus（失去焦点时）事件 (39)2、使用场合举例 (39)第5节变量 (40)1、什么是变量 (40)2、管理变量 (40)3、设置变量的值 (40)4、在条件中使用变量 (41)5、设置文本时使用变量 (41)第6节OnPageLoad（页面载入时）事件 (42)1、什么是OnPageLoad（页面载入时）事件 (42)2、OnPageLoad（页面载入时）事件和变量 (42)案例：登陆界面 (43)案例描述 (43)实现步骤 (43)步骤一、绘制线框图 (43)步骤二、设计控件交互 (44)步骤三、生成原型 (46)技巧和提示 (46)第一章介绍让你初步认识Axure。
Axure教程axure新手入门基础（1）名词解释：线框图：一般就是指产品原型，比如：把线框图尽快画出来和把原型尽快做出来是一个意思。
axure元件：也叫axure组件或axure部件，系统自带了一部分最基础常用的，网上也有很多别人做好的，软件使用到一定阶段可以考虑自己制作元件，以便提高产品原型的制作速度。
生成原型：是指把绘制好的原型通过axure rp生成静态的html页面，检查原型是否正确，同时，方便演示。
建议生成时选择用谷歌浏览器打开（第一次会有提示安装相关插件），ie会每次都有安全提示，不如谷歌浏览器方便。
（一）Axure rp的界面1-主菜单工具栏：大部分类似office软件，不做详细解释，鼠标移到按钮上都有对应的提示。
2-主操作界面：绘制产品原型的操作区域，所有的用到的元件都拖到该区域。
3-站点地图：所有页面文件都存放在这个位置，可以在这里增加、删除、修改、查看页面，也可以通过鼠标拖动调整页面顺序以及页面之间的关系。
4-axure元件库：或者叫axure组件库、axure部件库，所有软件自带的元件和加载的元件库都在这里，这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示全部元件或某一元件库的元件。
5-母版管理：这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素，可以绘制在母版里面，然后加载到需要显示的页面，这样在制作页面时就不用再重复这些操作。
6-页面属性：这里可以设置当前页面的样式，添加与该页面有关的注释，以及设置页面加载时触发的事件onpageload。
7-元件属性：这里可以设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件；A-交互事件:元件属性区域闪电样式的小图标代表交互事件；B-元件注释：交互事件左面的图标是用来添加元件注释的，在这里我们能够添加一些元件限定条件的注释，比如：文本框的话，可以添加注释指出输入字符长度不能超过20。
axure 教程
Axure是一种强大的原型设计工具，它可以帮助您快速创建交
互式的界面原型。
本教程旨在向您介绍Axure的基本功能和操作步骤，以帮助您快速上手。
1. 下载和安装Axure：首先，您需要从Axure官方网站下载并
安装Axure软件。
安装完成后，启动Axure并创建一个新的项目。
2. 页面布局：在Axure中，您可以通过拖拽和调整页面组件来创建页面布局。
您可以在左侧的组件库中选择所需的组件，然后在页面上拖拽到所需的位置。
您还可以通过调整组件的大小和位置来适应您的设计需求。
3. 添加交互动作：Axure的一个重要功能是添加交互动作，以
模拟用户与界面之间的交互。
您可以通过选择某个组件，然后在右侧的“交互”选项卡中选择所需的动作来设置交互。
例如，您可以设置一个按钮，当用户点击时跳转到另一个页面。
4. 创建动态面板：动态面板是Axure中一个非常有用的功能，它可以帮助您模拟一个页面的不同状态。
您可以创建多个面板，并在每个面板中设置不同的内容和样式。
然后，您可以通过添加交互动作来控制面板的切换，以模拟用户与界面的互动。
5. 展示和共享原型：在完成原型设计后，您可以使用Axure内置的功能来展示和共享您的原型。
您可以通过生成HTML文件，将原型以网页的形式展示，并通过链接或嵌入到其他网页
中共享给团队成员或客户。
以上是Axure的一些基本功能和操作步骤的简要介绍。
希望本教程能帮助您更好地了解和使用Axure进行界面原型设计。
axure 常用功能的使用手册摘要：一、引言1.Axure简介2.Axure常用功能概述二、Axure基本操作1.界面布局2.元素创建与编辑3.页面管理与切换三、交互与动画1.交互事件2.动画设置3.动态面板四、元件库与样式管理1.元件库的导入与创建2.样式设置与应用3.团队协作与共享五、原型测试与优化1.测试工具与功能2.测试结果分析与优化3.跨平台适配六、案例实战1.移动端界面设计2.Web端界面设计3.复杂交互场景实现七、总结与拓展1.Axure进阶技巧2.行业应用案例分享3.Axure相关资源推荐正文：一、引言1.Axure简介Axure是一款强大的原型设计工具，广泛应用于互联网、软件开发、设计等领域。
它可以帮助设计师快速制作高质量的原型，提高设计效率，减少开发成本。
Axure具备丰富的功能，可以满足各种设计需求。
2.Axure常用功能概述在本手册中，我们将详细介绍Axure的常用功能，帮助你更快地熟悉和掌握这款工具。
以下为Axure 常用功能概述：- 基本操作：包括界面布局、元素创建与编辑、页面管理与切换等。
- 交互与动画：涵盖交互事件、动画设置、动态面板等。
- 元件库与样式管理：涉及元件库的导入与创建、样式设置与应用、团队协作与共享等。
- 原型测试与优化：包括测试工具与功能、测试结果分析与优化、跨平台适配等。
- 案例实战：通过移动端界面设计、Web端界面设计、复杂交互场景实现等实例，让你学以致用。
- 总结与拓展：为你提供Axure进阶技巧、行业应用案例分享、Axure相关资源推荐等。
二、Axure基本操作1.界面布局在Axure中，你可以通过拖拽、复制、粘贴等操作进行界面布局。
界面布局主要包括区域划分、元素摆放等，以便于后续的原型设计。
2.元素创建与编辑Axure提供了丰富的元件库，包括基本图形、文本框、图片等。
你可以通过拖拽的方式将这些元件添加到界面上，并使用编辑工具进行调整。
3.页面管理与切换在Axure中，页面管理是必不可少的环节。
Axure 常用功能的使用手册一、安装与启动首先，您需要从 Axure 的官方网站下载适合您操作系统的安装包。
安装过程较为简单，只需按照安装向导的提示进行即可。
启动Axure 后，您将看到一个欢迎页面。
在这里，您可以创建新项目或打开已有的项目。
二、界面介绍Axure 的界面主要包括以下部分：1. **菜单栏**：包含文件、编辑、视图、窗口和帮助等选项，用于执行各种操作。
2. **工具栏**：提供各种常用的工具，如矩形、圆形、线条、文本框等。
3. **工作区**：用于显示和编辑您的项目。
4. **面板**：用于显示页面元素、动态面板、变量和交互等。
5. **状态栏**：显示当前页面和元素的信息，以及页面缩放比例。
三、创建新项目点击菜单栏的“文件”选项，选择“新建”即可创建一个新的项目。
您可以在工作区中选择需要的元素，并将其拖放到页面上。
四、添加和编辑元素在工具栏中选择需要的元素（如矩形、圆形、线条、文本框等），然后将其拖放到工作区中。
您可以通过单击并拖动元素来调整它们的位置，通过单击并拖动边缘来调整它们的大小。
要编辑元素，请双击元素或在面板中选择它。
五、页面设置和导航在 Axure 中，您可以轻松地设置页面和导航。
要添加新页面，请选择菜单栏中的“页面”选项，然后选择“新建页面”。
要设置导航，请在页面上添加按钮或链接，然后为其添加交互效果。
六、交互和动态效果Axure 提供了丰富的交互和动态效果，可以让您的页面更加生动和有趣。
要添加交互效果，请选择元素，然后在面板中选择“交互”选项卡。
在这里，您可以添加各种交互事件，如单击、双击、鼠标悬停等。
要添加动态效果，请选择元素，然后在面板中选择“动画”选项卡。
在这里，您可以添加各种动画效果，如淡入淡出、滑动等。
七、发布和导出完成项目后，您可以将其发布到网站或生成 HTML 文件。
要发布项目，请选择菜单栏中的“发布”选项，然后选择要发布的网站或目标文件夹。
要导出项目为 HTML 文件，请选择菜单栏中的“文件”选项，然后选择“导出为 HTML”。
AXURE 学习手册1、部件样式编辑器 (2)2、线渐变填充实现半透明发光阴影效果 (4)3、让AXURE直接输出页面元素的PRD（产品需求说明书） (6)4、在原型中重新生成当前页面 (10)5、使用脚本扩展制作可移动可改变大小的图像和按钮形状部件 (10)1、部件样式编辑器功能简介：“部件样式编辑器”是Axure的基本功能，主要用于统一设置和自定义部件的样式。
适用场景：“部件样式编辑器”对于保持用户体验一致性非常重要，借助该功能可以统一设置部件的字体、字号、粗体、斜体、下划线、对齐、垂直对齐、上下左右边距、行路、文字颜色、填充颜色、线条颜色、线宽和线型。
例如在一个互联网网站项目中约定了不同类型的部件，或者不同功能的部件要有指定的颜色，如果不使用“部件样式编辑器”就需要记住一大堆颜色的RGB值，如果使用“部件样式编辑器”就只需要自定义名称就可以了。
使用简介：单击“线框图”菜单->“部件样式编辑器”菜单项，打开“部件样式编辑器”对话框。
对话框包含两个选项卡：“部件默认值”和“自定义”。
在“部件默认值”选项卡中用于按部件类型设置默认值。
将影响原型中所有已有的部件和未来新创建的部件。
在“自定义”选项卡中可以创建自定义部件样式。
自定义部件样式中可以包含一个或多个选中属性，要包含一个属性需要先选中属性左侧的复选框。
应用自定义样式的部件将在部件默认值的基础上应用选中的属性。
自定义部件样式将出现在“文本格式”工具栏的“默认”下拉列表框中，选中一个部件后可以在这里选择部件的样式，如果选择默认则代表使用“部件默认值”选项卡中的设置，如果选择自定义部件样式名称则代表使用“自定义”选项卡中的设置。
2、线渐变填充实现半透明发光阴影效果功能简介：“线性渐变填充”是Axure的基本功能，针对指定部件，可以设置两个或若干个颜色，每个颜色可以放在从0%到100%的任何位置，可以设置红、绿、蓝的成分以及透明度，指定填充角度后这些颜色将按指定的位置、颜色和透明度填充指定部件。
适用场景：用于按钮形状（包括矩形，占位符），表格单元格，菜单和菜单项，树节点的背景。
本例以“半透明发光阴影效果”为例演示“线性渐变填充”功能。
完成后的效果如图所示：使用简介：首先用四个“占位符”部件，编辑按钮形状，分别调整为向上三角形、向左三角形、向下三角形、向右三角形。
如图所示。
选中其中的一个三角形，例如向右三角形，设置如图所示填充效果。
其他三个三角形的设置类似，区别在于填充的角度不同，左侧的向右三角形的填充角度为0，上侧的向下三角形的填充角度为90度，右侧的向左三角形的填充角度为180度，下侧的向上三角形的填充角度为270度。
然后设置线宽为无，并把四个三角形的顶点对接到一起，如图所示。
最后把调整到比放在前面的部件稍大一圈，就得到半透明发光阴影的效果了3、让Axure直接输出页面元素的PRD（产品需求说明书）功能简介：撰写PRD（Product Requirement Document，产品需求说明书）是产品经理的重要工作之一，由于PRD在相当大的程度上起到指导开发的作用，因此在PRD的格式上常常需要按着开发的技术，此时产品经理不仅要使用Axure制作网站原型，进行交互设计，还需要单独的撰写PRD。
实际上灵活运用Axure可以直接输出PRD。
在本例中以基于Zend Framework开发项目时撰写PRD中的格式较验为例讲解如何让Axure直接输出PRD。
生成的PRD如图所示。
使用简介：Zend Framework支持的较验规则参见：/manual/1.11/en/zend.validate.set.html这些较验规则可以分解成如下方式描述：1.必填，对应于notempty2.格式1.仅限于字母数字，对应于alnum2.仅限于字母，对应于alpha3.条形码，对应于barcode4.信用卡卡号，对应于creditcard5.日期，对应于date6.纯数字，对应于digits7.电子邮件地址，对应于emailaddress8.浮点数，对应于float9.十六进制，对应于hex10.域名，对应于hostname11.国际银行标准帐号，对应于iban12.整数，对应于int13.IP地址，对应于ip14.国际标准图书编号，对应于isbn15.邮政编码，对应于postcode16.正则表达式，对应于regex17.18.自定义，对应于callback允许空白，对应于alnum或alpha中的allowwhitespace选项大于，对应于greaterthan和between小于，对应于lessthan和between最小长度，对应于stringlength的min属性最大长度，对应于stringlength的max属性在Axure RP Pro中单击“线框图”菜单中的“自定义标注字段和视图”菜单项，打开“自定义标注字段和视图”对话框，创建“必填”，“格式”，“允许空白”，“大于”，“小于”，“最小长度”，“最大长度”标注字段，如图所示。
进入“自定义标注字段和视图”对话框的“视图”选项卡，创建“格式较验”视图，添加“必填”，“格式”，“允许空白”，“大于”，“小于”，“最小长度”，“最大长度”标注字段，如图所示。
在线框图中放置一个文本框部件，在“部件属性”边栏的“标注”选项卡中按如图所示填写。
按F6生成的规格说明书将具有如前图所示的效果。
4、在原型中重新生成当前页面适用场景：∙对页面进行小范围的修改时，希望能快速看到展示效果，特别是在使用Axure制作高度保真的页面时，需要进行大量的微调∙在撰写PRD（Product Requirement Document，产品需求文档）时，Axure直接输出的规格说明书不符合要求，就需要手工截取原型中的局部效果粘贴到文档中，由于线框图效果和浏览器的效果不完全相同，或者需要截图某个交互效果，就希望能快速在浏览器中显示正在设计中的线框图，然后截取局部效果图使用简介：1.在Axure中单击“生成”菜单中的“原型”菜单项，或者按F5快捷键。
打开“生成原型”对话框，然后生成原型，将在浏览器中打开原型2.在浏览器中保持打开原型页面3.在Axure中修改了某个页面之后，单击“生成”菜单中的“在原型中重新生成当前页面”菜单项，或者按Ctrl + F5快捷键将重新生成打开的页面。
注意：Axure并不会在浏览器中打开这个页面4.在浏览器的原型页面左侧的树形列表中，单击该页面的链接，将在窗口右侧中显示更新后的效果5、使用脚本扩展制作可移动可改变大小的图像和按钮形状部件注意∙本部件基于Axure的“脚本扩展”插件，在使用前请确认已安装“脚本扩展”插件∙关于“脚本扩展”插件的详细信息请见：/viewthread.php?tid=539∙安装“脚本扩展”插件的方式参见：/viewthread.php?tid=541∙对于“脚本扩展”插件的使用者，仅需要如同使用普通的Axure部件库一样∙对于“脚本扩展”插件的开发者，还需要掌握HTML DOM模型，JavaScript脚本，正则表达式，jQuery 库，jQuery UI库∙下面会列出本文涉及到的“脚本扩展”插件技术以及Axure原型中的HTML DOM模型和JavaScript脚本，不包含通用的知识，例如jQuery的函数说明∙本部件目前尚无保存移动后的位置和改变后的大小的功能，请在调整后自行截图用途∙基本功能：图像部件和按钮形状部件在运行“脚本扩展”后，可以在页面上自由拖动图像部件和按钮形状部件，也可以自由改变图像部件和按钮形状部件的尺寸∙适用场景：特别适用于项目前期需要和客户讨论页面布局的场合本文涉及到的“脚本扩展”插件技术1.unitId变量，用于识别当前部件在原型中的编号复制代码本文涉及到的Axure原型中的HTML DOM模型和JavaScript脚本1.var frame$ = $('#mainFrame')[0].contentWindow.$;//用于取得页面在原型中的框架的jQuery对象2.var img = frame$('#u' + unitId + '_img');//用于取得当前部件的图像元素。
仅适用于图像部件和按钮形状部件3.var container = frame$('#u' + unitId + '_container');//用于取得当前部件的显示容器。
仅适用于图像部件和按钮形状部件4.var ann = frame$('#u' + unitId + 'ann');//用于取得当前部件的标注标记5.var element = frame$('#u' + unitId);//用于取得当前部件复制代码源代码1.var frame$ = $('#mainFrame')[0].contentWindow.$;2.var img = frame$('#u' + unitId + '_img');3.var container = frame$('#u' + unitId + '_container');4.var ann = frame$('#u' + unitId + 'ann');5.var element = frame$('#u' + unitId);6.var imgsrc = img.css('background-image').match(/\/([^\/]*\/[^\/]*png)/);7.imgsrc = imgsrc[1];8.container.hide();9.ann.hide();10.element.attr('src', imgsrc).resizable().parent().draggable();复制代码下载∙请在此/viewthread.php?tid=541下载.rplib部件库，本文对应于部件库中的“可拖放可调整大小的图像部件”，“可拖放可调整大小的按钮形状部件”∙请在此/resizable/体验使用效果。
