Axure基本使用教程+示例

1、Axure使用介绍文档目录一、Axure rp 的界面 2二、Axure rp的线框图元件3三、Axure rp的元件触发事件4四、Axure rp的条件生成6五、系统函数与变量8六、动态面板的使用14七、母版的使用20八、中继器的使用28一、Axure rp 的界面（界面显示各个区域可在主菜单工具栏-视图中找到）1、菜单工具栏：同大部分软件类似，可选择Axure各个功能的工具区。2、操作界面：绘制产品的操作区，所有元件、部件可拖与此区域操作。3、站点地图：页面文件存放区域，可增加、删除、修改、查看页面；可设置页面级别。4、元件库（部件库）：主要分为流程图和线框图；可拖动元件库里的元件到操作界

2、面进行产品绘制；为提高效率，元件库也可自行导入已经可使用的元件。5、母版：母版的使用主要针对于顶部导航、底部导航，多个页面中重复出现的元素，可先绘制与母版中，再拖动到需使用的页面（比起重复操作，修改扩展行也更强）。6、页面属性：可设置当前页面的注释、交互、与样式。7、元件交互与注释：可对操作页面中用到的元件或元件与元件之间的交互事件进行设置（如动态面板显示与隐藏、鼠标点击事件、鼠标移入移出事件等）。8、元件属性和样式：可设置选中元件的基本样式与属性。9、部件管理（动态面板管理）：该区域可对已设置的动态面板状态进行操作，可添加、删除、进行排序，也可双击动态面板进入编辑。二、Axure rp的线框

3、图元件1、图片：图片元件拖入编辑时，可双击载入本地磁盘的图片，载入图片是Axure会自动提示将大图进行优化，避免原型文件过大；载入的图片可以选择原图大小也可以保持元件大小。2、文本：标题1、标题2、单行文本、多行文本都属于文本类型的元件，在网页中的名称为lable，主要用于文字描述、文本链接等功能3、矩形：矩形可用作背景、按钮等元件使用；双击矩形可输入文本；拖入矩形时默认是直角矩形，可通过左右拖动左上角的黄色小三角来改变圆角半径；也可通过右键选择形状来改变当前形状。4、占位符：顾名思义，主要用于替代一些没有交互或交互比较简单的区域。5、圆角矩形：与矩形功能相似，不同的是拖动使用时，默认为圆角并

4、且有文字说明。6、水平线、垂直线：两种线的功能一样，主要用于区域与区域之间的划分；也可通过改变角度变成斜线。7、图片热区：在查看页面效果时不显示，于鼠标点击或移入移出某个区域产生交互时而使用，可理解为一个有效范围。8、动态面板：页面交互里非常重要的使用元件，在Axure中是必须要学会的，可直接拖动动态面板到页面中，也可通过自行选择需要用到交互的元件选好后，右键转为动态面板，之后再进行设置事件的交互。9、内部框架：用于页面中嵌入其他页面的Axure元件，可双击指定要嵌入的页面，多用于网站后台原型。10、中继器：Axure7.0开始更新的元件，中继器的功能非常复杂，主要用于表格或列表中对数据进行记

5、录、排序、分类、分页等操作；中继器就是数据的集中池。11、窗体部分元件：包含单行文本框、多行文本框、下拉列表框、列表选择框、复选框、单选框、HTML按钮（网页中常用到的基本元件）12、菜单和表格部分元件：包含树、表格、经典菜单-水平、经典菜单-垂直（主要用于网站导航、多用于后台）三、Axure rp的元件触发事件1、OnClick（鼠标点击时）：除了动态面板外的所有元件点击时触发2、OnMouseEnter（鼠标移入时）：鼠标进入某个元件范围时触发3、OnMouseOut（鼠标移出时）：鼠标移出某个元件范围时触发4、OnKeyUp（按键弹起时）：文本框（单行与多行）编辑时，键盘按下某一个按键松

6、开时触发5、OnFocus（获取焦点时）：一个元件点击或切换获取焦点时触发6、OnLostFocus（失去焦点时）：一个组件失去焦点时触发7、OnChange（选中项改变时）：8、OnMove（移动时）9、The OnShow and OnHide events（显示或隐藏时）10、OnPanelStateChange（状态改变时）11、OnDragStart: Occurs when the drag begins（开始拖动面板时）12、OnDrag: Occurs as the panel is dragged（面板拖动时）13、OnDragDrop: Occurs when the pa

7、nel is dropped（面板拖动结束时）四、Axure rp的条件生成用Axure制作原型时，经常用到交互事件以达到页面的保真效果，而为保障能完成更加复杂的交互事件，就需要用到条件。1、新增条件（1）、要对元件或其他相关页面添加交互事件的条件，首先双击需要添加条件的事件，打开用例编辑器，在用例编辑器的第一步用例说明右方（如图数字1的位置），点击添加条件即可打开条件生成（2）、图中数字2的位置包含全部、任意，两项可选；与字义一样，要形成完整的条件语句，不许满足全部条件，或满足任意一种条件即可。（3）、图中数字3的区域即为实际设置条件的区域。图中数字4里为可设置的条件，其中包括值：可以是字母

8、、数字、汉字、符号、函数、公式；可直接输入，或点击fx计入编辑。变量值：Axure中默认的变量值为OnLoadVariable，可通过新建、重命名、删除来操作。变量值长度：值变量值的字符个数，其中Axure中一个汉字为一个字符。部件文字：元件中可编辑的文字，当然必须是可编辑文字的元件，其中不包含-动态面板、图片热区、垂直线、水平线、内部框架、下拉列表、列表框。焦点部件上的文字：通过鼠标点击或Tab切换被选中的元件上的文字；如文本框获取焦点时，光标在文本框内闪动；按钮获取焦点时四周会出现虚线。部件值长度：元件中字符个数；仅包含单行、多行文本框、下拉列表和列表框。选中项值：选中时值为“真”，为选中

9、时值为“假”；仅适用于单选按钮和复选框。选中状态值：通过获取元件当前值来确定选择状态，仅适用于下拉列表和列表框。动态面板状态：仅限动态面板使用，以动态面板状态为判断条件来激发事件。部件可见性：以元件的显示隐藏作为判断条件，true为显示，false为隐藏；也包含动态面板的显示隐藏。部件范围：指元件覆盖的范围，以是否触碰到指定元件为条件。自适应视图：自适应视图存在继承关系，利用视图与视图之间的关系引用条件。五、系统函数与变量1、变量与其他计算机语言类似包含以下变量类型全局变量：可以在整个原型的任意位置调用和修改局部变量：仅作用于某一事件的某一动作内自定义变量：自行新建的全局变量2、系统函数（1）

10、、元件函数Widget.Width：获取元件的宽度，使用方法：通过局部变量获取LVAR. Width；Widget.Height：获取元件的高度，使用方法：通过局部变量获取LVAR. Height；Widget.X：获取元件左上顶点X坐标值，使用方法：通过局部变量获取LVAR. X；Widget.Y：获取元件左上顶点Y坐标值，使用方法：通过局部变量获取LVAR. Y；Widget. Left：获取元件左边界X坐标值，使用方法：通过局部变量获取LVAR. Left；Widget. Top：获取元件顶部边界Y坐标值，使用方法：通过局部变量获取LVAR. Top；Widget. Right：获取元件

11、等右边界X坐标值，使用方法：通过局部变量获取LVAR. Right；Widget. Bottom：获取元件底部边界Y坐标值，使用方法：通过局部变量获取LVAR. Bottom；（2）、窗口函数Window.ScrollX：获取窗口横向滚动的当前坐标值；使用方法：Window. ScrollXWindow.ScrollY：获取窗口纵向滚动的当前坐标值；使用方法：Window. ScrollYWindow.width：获取窗口的宽度，使用方法：Window.widthWindow.height：获取窗口的高度，使用方法：Window. height（3）、鼠标函数Cursor.X：获取鼠标X轴坐标

12、值，使用方法：Cursor.X；Cursor.Y：获取鼠标Y轴坐标值，使用方法：Cursor.Y。（4）、数字函数toFixed：指定数字的小数点位数，使用方法：如果n=1.232，n.toFixed(2)返回值1.23；toExponential  ：把对象的值转换为指数计数法，使用方法：n. toExponential (参数)；toPrecision：  把数字格式化为指定的长度：如果n=1, n. toPrecision (6)返回值1.00000。（5）、字符串函数的介绍charAt：返回指定位置的字符。使用方法： LVAR. charAt(位数)charCode

13、At：返回指定位置字符的 Unicode 编码。使用方法：LVAR. charCodeAt (位数)Concat：连接字符串。（暂未发现无实际用途）fromCharCode：从字符编码创建一个字符串。（未测试成功）indexOf：检索字符串。使用方法：LVAR. indexOf (字符串)lastIndexOf：从后向前搜索字符串。使用方法：LVAR. lastIndexOf (字符串)Slice：提取字符串的片断，并在新的字符串中返回被提取的部分。使用方法：LVAR. Split(start,end)Slice参数介绍：start 要抽取的片断的起始下标。如果是负数，则该参数规定的

14、是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。end 紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。Split：把字符串分割为字符串数组。使用方法1：LVAR1.Split('') 如果：LVAR1等于asdfg，则返回a,s,d,f,g使用方法2：LVAR1.Split(' ') 如果：LVAR1等于asd fg，则返回asd,fgSubstr：从起始索引号提取字符串中指定

15、数目的字符。使用方法：LVAR. Substr (start,stop)Substring：提取字符串中两个指定的索引号之间的字符。使用方法：LVAR. Substring (start,stop)Substring参数介绍：start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。LVAR. Substring (start)toLowerCase：把字符串转换为小写。使用

16、方法：LVAR. toLowerCase ()toString：返回字符串。（暂未发现无实际用途）toUpperCase：把字符串转换为大写。使用方法：LVAR. toUpperCase ()trim：去除字符串两端空格。使用方法：LVAR. trim ()（6）、日期函数的介绍getDate：返回一个月中的某一天 (1 31)。使用方法：LVAR. getDate ()，LVAR格式为标准日期格式，如YYYY/MM/DD,YYYY-MM-DD等。getDay：返回一周中的某一天 (0 6)。使用方法：LVAR. getDay ()getDayOfWeek：返回一周中的某一天的英文名称。使用方

17、法：LVAR. getDayOfWeek ()getFullYear：返回日期中四位数字的年。使用方法：LVAR. getFullYear ()getHours：返回日期中的小时 (0 23)。getMilliseconds：返回毫秒数(0 999)。getMinutes：返回日期中的分钟 (0 59)。getMonth：返回日期中的月份 (0 11)。getMonthName：返回日期中的月份名称 (0 11)。getSeconds：返回日期中的秒数(0 59)。不行了，楼老师快精尽人亡了，以下请好事者自行研究吧！getTime：返回 1970 年 1 月 1 日至今的毫秒数。getTime

18、zaneOffset：返回本地时间与格林威治标准时间 (GMT) 的分钟差。getUTCDategetUTCDaygetUTCFullYeargetUTCHoursgetUTCMillisecondsgetUTCMinutesgetUTCMonthgetUTCSecondstoDateStringtoISOStringtoJSONtoLocaleDateStringtoLocalTimeStringtoLocaleStringtoTimeStringtoUTCStringvalueOfaddYearaddMonthaddDayaddHouraddMinuteaddSecondaddMillis

19、econdparse：返回1970年1月1日午夜到指定日期（字符串）的毫秒数。UTC：根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。六、动态面板的使用动态面板控件（Dynamic Panel）可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理 解成一个独立的页面）。任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。 像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。简单的说，动态面板就是展示在页面不跳转的情况

20、下所能实现的交互状态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。Axure中掌握动态面板是非常重要的一部分内容，下面通过一个例子来了解动态面板的使用第一步：拖动动态面板到主操作区，并设置好动态面板相应的大小，同样也可以通过拖入其他元件再右键转为动态面板实现。（图1）第二步：双击动态面板，打开动态面板状态管理，新建三个面板状态，并相应命名（注：平时使用Axure元件时需养成规范命名习惯，此处命名于演示方便图2）第三步：分别双击演示状态1、2、3进入面板状态页面，并拖入相应元件（此处以图片演示）图3、4、5第四步：回到主操作页面，动态面板会显示最顶层的状态元件；在此页面添加三个按钮

21、，同样转为动态面板，再为每个按钮添加如图6下方第二种状态。第五步：分别为三个按钮添加鼠标点击时事件，设置动态面板状态。图7、8、9第六步：设置完交互事件后，按F5快捷键进入浏览器预览，图10为动态面板显示效果。七、母版的使用母版可以把项目中重复使用的部件集合起来，为了方便维护，可以将这些重复使用的部件做成母版，需要调用的时候直接从母版菜单栏拖拽过来。当你修改母版的时候，所有调用到该母版的页面或区域都会发生相应变动，就不用一个一个页面地去修改了。母版使用说明1、新增母版，在母版管理面板中，点击新增母版2、也可以选中要转为母版的元素，右键，点击转换为母版。3、在母版面板中可以添加母版、新增文件夹、

22、向上移动、向下移动、降级、升级、删除、搜索4、添加母版到页面，拖拽母板到设计区域中。5、母板可以设置三种不同的拖放行为：拖放到任何位置、锁定母板位置、从母板脱离。 要改变母板行为，右键点击母板 - 拖放行为，在弹出的子菜单中进行选择。你可以随时修改母板行为，但是这只会影响到你当前要拖放到设计区域的母板。母版使用示例1、拖动母版到设计区域（图中母版已经锁定到母版位置x=0 ,y=1184的位置）、双击母版进入母版元件设置，图中分为五个动态面板，每个动态面板有两种面板状态。3、在母版外的主设计页面中，为动态面板-万事通设置五种状态（五种状态分别对应母版中五个动态面板）4、由于动态面板-万事通属于母

23、版外的元素，且为母版新增用例时，是不可能操做外部（母版外）元素的；所以此用例中，若要以母版的用例来操作动态面板-万事通，就需要在母版点击目标元件，增加一个触发事件。、首先为母版添加相应的触发事件，分别命名为EventPhone、EventContacts、EventStore、EventLnn、EventMore。6、进入母版，分别为母版中相应的动态面板添加触发事件7、添加过触发事件后，母版就可以控制母版外的元素了；回到主页面，点击母版在交互事件里就可以看到母版里添加的触发事件。8、此时为已设置好的触发事件添加交互以控制母版外的元素,分别双击EventPhone、EventContacts.添加交互事件。9、最终显示效果如下八、中继器的使用中继器是Axure7.0之后更新的新功能，英文名为Repeater，就如其名一样，Repeat重