Axure使用介绍文档
目录
一、Axure rp 的界面 2
二、Axure rp的线框图元件3
三、Axure rp的元件触发事件4
四、Axure rp的条件生成6
五、系统函数与变量8
六、动态面板的使用14
七、母版的使用20
八、中继器的使用28
一、Axure rp 的界面
〔界面显示各个区域可在主菜单工具栏-视图中找到〕
1、菜单工具栏：同大局部软件类似，可选择Axure各个功能的工具区。
第 1 页
2、操作界面：绘制产品的操作区，所有元件、部件可拖与此区域操作。
3、站点地图：页面文件存放区域，可增加、删除、修改、查看页面；可设置页面级别。
4、元件库〔部件库〕：主要分为流程图与线框图；可拖动元件库里的元件到操作界面进展产品绘制；为提高效率，元件库也可自行导入已经可使用的元件。
5、母版：母版的使用主要针对于顶部导航、底部导航，多个页面中重复出现的元素，可先绘制与母版中，再拖动到需使用的页面〔比起重复操作，修改扩展行也更强〕。
6、页面属性：可设置当前页面的注释、交互、与样式。
7、元件交互与注释：可对操作页面中用到的元件或元件与元件之间的交互事件进展设置〔如动态面板显示与隐藏、鼠标点击事件、鼠标移入移出事件等〕。
8、元件属性与样式：可设置选中元件的根本样式与属性。
9、部件管理〔动态面板管理〕：该区域可对已设置的动态面板状态进展操作，可添加、删除、进展排序，也可双击动态面板进入编辑。
二、Axure rp的线框图元件
第 2 页
1、图片：图片
元件拖入编辑时，可双击载入本地磁盘的图片，载入图片是Axure会自动提示将大图进展优化，防止原型文件过大；载入的图片可以选择原图大小也可以保持元件大小。
2、文本：标题1、标题2、单行文本、多行文本都属于文本类型的元件，在网页中的名称为lable，主要用于文字描述、文本链接等功能
3、矩形：矩形可用作背景、按钮等元件使用；双击矩形可输入文本；拖入矩形时默认是直角矩形，可通过左右拖动左上角的黄色小三角来改变圆角半径；也可通过右键选择形状来改变当前形状。
4、占位符：顾名思义，主要用于替代一些没有交互或交互比拟简单的区域。
5、圆角矩形：与矩形功能相似，不同的是拖动使用时，默认为圆角并且有文字说明。
6、水平线、垂直线：两种线的功能一样，主要用于区域与区域之间的划分；也可通过
第 3 页
改变角度变成斜线。
7、图片热区：在查看页面效果时不显示，于鼠标点击或移入移出某个区域产生交互时而使用，可理解为一个有效范围。
8、动态面板：页面交互里非常重要的使用元件，在Axure中是必须要学会的，可直接拖动动态面板到页面中，也可通过自行选择需要用到交互的元件选好后，右键转为动态面板，之后再进展设置事件的交互。
9、内部框架：用于页面中嵌入其他页面的Axure元件，可双击指定要嵌入的页面，多用于网站后台原型。
10、中继器：Axure7.0开场更新的元件，中继器的功能非常复杂，主要用于表格或列表中对数据进展记录、排序、分类、分页等操作；中继器就是数据的集中池。
11、窗体局部元件：包含单行文本框、多行文本框、下拉列表框、列表选择框、复选框、单项选择框、HTML按钮〔网页中常用到的根本元件〕
12、菜单与表格局部元件：包含树、表格、经典菜单-水平、经典菜单-垂直〔主要用于网站导航、多用于后台〕
三、Axure rp的元件触发事件
1、OnClick〔鼠标点击时〕：除了动态面板外的所有元件点击时触发
2、OnMouseEnter〔鼠标移入时〕：鼠标进入某个元件范围时触发
第 4 页
3、OnMouseOut〔鼠标移出时〕：鼠标移出某个元件范围时触发
4、OnKeyUp〔按键弹起时〕：文本框〔单行与多行〕编辑时，键盘按下某一个按键松开时触发
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 panel is dropped〔面板拖动完毕时〕
四、Axure rp的条件生成
用Axure制作原型时，经常用到交互事件以到达页面的保真效果，而为保障能完成更
第 5 页
加复杂的交互事件，就需要用到条件。
1、新增条件
〔1〕、要对元件或其他相关页面添加交互事件的条件，首先双击需要添加条件的事件，翻开用例编辑器，在用例编辑器的第一步用例说明右方〔如图数字1的位置〕，点击添加条件即可翻开条件生成
〔2〕、图中数字2的位置包含全部、任意，两项可选；与字义一样，要形成完整的条件语句，不许满足全部条件，或满足任意一种条件即可。
〔3〕、图中数字3的区域即为实际设置条件的区域。图中数字4里为可设置的条件，其中包括
▏值：可以是字母、数字、汉字、符号、函数、公式；可直接输入，或点击fx计入编辑。
▏变量值：Axure中默认的变量值为OnLoadVariable，可通过新建、重命名、删除来操作。
▏变量值长度：值变量值的字符个数，其中Axure中一个汉字为一个字符。
▏部件文字：元件中可编辑的文字，当然必须是可编辑文字的元件，其中不包含-动态面板、图片热区、垂直线、水平线、内部框架、下拉列表、列表框。
▏焦点部件上的文字：通过鼠标点击或Tab切换被选中的元件上的文字；如文本框获
第 6 页
取焦点时，光标在文本框内闪动；按钮获取焦点时四周会出现虚线。
▏部件值长度：元件中字符个数；仅包含单行、多行文本框、下拉列表与列表框。
▏选中项值：选中时值为“真〞，为选中时值为“假〞；仅适用于单项选择按钮与复选框。
▏选中状态值：通过获取元件当前值来确定选择状态，仅适用于下拉列表与列表框。
▏动态面板状态：仅限动态面板使用，以动态面板状态为判断条件来激发事件。
▏部件可见性：以元件的显示隐藏作为判断条件，true为显示，false为隐藏；也包含动态面板的显示隐藏。
▏部件范围：指元件覆盖的范围，以是否触碰到指定元件为条件。
▏自适应视图：自适应视图存在继承关系，利用视图与视图之间的关系引用条件。
五、系统函数与变量
1、变量
与其他计算机语言类似包含以下变量类型
全局变量：可以在整个原型的任意位置调用与修改
第 7 页
局部变量：仅作用于某一事件的某一动作内
自定义变量：自行新建的全局变量
2、系统函数
〔1〕、元件函数
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：获取元件等右边界X坐标值，使用方法：通过局部变量获取[[LVAR. Right]]；
Widget. Bottom：获取元件底部边界Y坐标值，使用方法：通过局部变量获取[[LVAR. Bottom]]；
第 8 页
〔2〕、窗口函数
Window.ScrollX：获取窗口横向滚动的当前坐标值；使用方法：[[Window. ScrollX]]
Window.ScrollY：获取窗口纵向滚动的当前坐标值；使用方法：[[Window. ScrollY]]
Window.width：获取窗口的宽度，使用方法：[[Window.width]]
Window.height：获取窗口的高度，使用方法：[[Window. height]]
〔3〕、鼠标函数
Cursor.X：获取鼠标X轴坐标值，使用方法：[[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。
第 9 页
〔5〕、字符串函数的介绍
charAt：返回指定位置的字符。使用方法： [[LVAR. charAt(位数)]]
charCodeAt：返回指定位置字符的 Unicode 编码。使用方法：[[LVAR. charCodeAt (位数)]]
Concat：连接字符串。〔暂未发现无实际用途〕
fromCharCode：从字符编码创立一个字符串。〔未测试成功〕
indexOf：检索字符串。使用方法：[[LVAR. indexOf (‘字符串’)]]
lastIndexOf：从后向前搜索字符串。使用方法：[[LVAR. lastIndexOf (‘字符串’)]]
Slice：提取字符串的片断，并在新的字符串中返回被提取的局部。使用方法：[[LVAR. Split(start,end)]]
Slice参数介绍：
start 要抽取的片断的起始下标。如果是负数，那么该参数规定的是从字符串的尾部开场算起的位置。也就是说，
-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
end 紧接着要抽取的片段的结尾的下标。假设未指定此参数，那么要提取的子串包括
第 10 页
start 到原字符串结尾的字
符串。如果该参数是负数，那么它规定的是从字符串的尾部开场算起的位置。
Split：把字符串分割为字符串数组。
使用方法1：[[LVAR1.Split('')]] 如果：LVAR1等于asdfg，那么返回a,s,d,f,g
使用方法2：[[LVAR1.Split(' ')]] 如果：LVAR1等于asd fg，那么返回asd,fg
Substr：从起始索引号提取字符串中指定数目的字符。使用方法：[[LVAR. Substr (start,stop)]]
Substring：提取字符串中两个指定的索引号之间的字符。使用方法：[[LVAR. Substring (start,stop)]]
Substring参数介绍：
start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。[[LVAR. Substring (start)]]
toLowerCase：把字符串转换为小写。使用方法：[[LVAR. toLowerCase ()]]
第 11 页
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：返回一周中的某一天的英文名称。使用方法：[[LVAR. getDayOfWeek ()]]
getFullYear：返回日期中四位数字的年。使用方法：[[LVAR. getFullYear ()]]
getHours：返回日期中的小时 (0 ~ 23)。
getMilliseconds：返回毫秒数(0 ~ 999)。
getMinutes：返回日期中的分钟 (0 ~ 59)。
getMonth：返回日期中的月份 (0 ~ 11)。
第 12 页
getMonthName：返回日期中的月份名称 (0 ~ 11)。
getSeconds：返回日期中的秒数(0 ~ 59)。
不行了，楼教师快精尽人亡了，以下请好事者自行研究吧！
getTime：返回 1970 年 1 月 1 日至今的毫秒数。
getTimezaneOffset：返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate
getUTCDay
getUTCFullYear
getUTCHours
getUTCMilliseconds
getUTCMinutes
getUTCMonth
getUTCSeconds
第 13 页
toDateString
toISOString
toJSON
toLocaleDateStringtoLocalTimeString
toLocaleString
toTimeString
toUTCString
valueOf
addYear
addMonth
addDay
addHour
第 14 页
addMinute
addSecond
addMillisecond
parse：返回1970年1月1日午夜到指定日期〔字符串〕的毫秒数。
UTC：根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
六、动态面板的使用
动态面板控件〔Dynamic Panel〕可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态〔states〕，每个状态可包含一系列控件〔你可以把一个状态理 解成一个的页面〕。任何时候都只有一个状态〔页面〕是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进展隐藏、显示与改变。 像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。
简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。
Axure中掌握动态面板是非常重要的一局部内容，下面通过一个例子来了解动态面板的使用
第一步：拖动动态面板到主操作区，并设置好动态面板相应的大小，同样也可以通过拖入其他元件再右键转为动态面板实现。〔图1〕
第 15 页
第二步：双击动态面板，翻开动态面板状态管理，新建三个面板状态，并相应命名〔注：平时使用Axure元件时需养成标准命名习惯，此处命名于演示方便图2〕
第三步：分别双击演示状态1、2、3进入面板状态页面，并拖入相应元件〔此处以图片演示〕图3、4、5
第四步：回到主操作页面，动态面板会显示最顶层的状态元件；在此页面添加三个按钮，同样转为动态面板，再为每个按钮添加如图6下方第二种状态。
第五步：分别为三个按钮添加鼠标点击时事件，设置动态面板状态。图7、8、9
第六步：设置完交互事件后，按F5快捷键进入浏览器预览，图10为动态面板显示效果。
七、母版的使用
母版可以把工程中重复使用的部件集合起来，为了方便维护，可以将这些重复使用的
第 16 页
部件做成母版，需要调用的时候直接从母版菜单栏拖拽过来。当你修改母版的时候，所有调用到该母版的页面或区域都会发生相应变动，就不用一个一个页面地去修改了。
母版使用说明
1、新增母版，在母版管理面板中，点击新增母版
2、也可以选中要转为母版的元素，右键，点击转换为母版。
3、在母版面板中可以添加母版、新增文件夹、向上移动、向下移动、降级、升级、删除、搜索
4、添加母版到页面，拖拽母板到设计区域中。
5、母板可以设置三种不同的拖放行为：拖放到任何位置、锁定母板位置、从母板脱离。 要改变母板行为，右键点击母板 -- 拖放行为，在弹出的子菜单中进展选择。你可以随时修改母板行为，但是这只会影响到你当前要拖放到设计区域的母板。
第 17 页
母版使用例如
1、拖动母版到设计区域〔图中母版已经锁定到母版位置x=0 ,y=1184的位置〕
２、双击母版进入母版元件设置，图中分为五个动态面板，每个动态面板有两种面板状态。
3、在母版外的主设计页面中，为动态面板-万事通设置五种状态〔五种状态分别对应母版中五个动态面板〕
4、由于动态面板-万事通属于母版外的元素，且为母版新增用例时，是不可能操做外部〔母版外〕元素的；所以此用例中，假设要以母版的用例来操作动态面板-万事通，就需要在母版点击目标元件，增加一个触发事件。
５、首先为母版添加相应的触发事件，分别命名为EventPhone、EventContacts、EventStore、EventLnn、EventMore。
6、进入母版，分别为母版中相应的动态面板添加触发事件
7、添加过触发事件后，母版就可以控制母版外的元素了；回到主页面，点击母版在交互事件里就可以看到母版里添加的触发事件。
第 18 页
8、此时为已设置好的触发事件添加交互以控制母版外的元素,分别双击EventPhone、EventContacts...添加交互事件。
9、最终显示效果如下
八、中继器的使用
中继器是Axure7.0之后更新的新功能，英文名为Repeater，就如其名一样，Repeat重复数据的集合，一个数据集合的容器；在交互上通常用于实现新增行、删除行、标记行、排序、筛选等。而官方介绍来看，可理解为带数据交互功能的表单。
中继器表单使用例如
1、拖动部件库里的中继器到操作区，下面是中继器拖入时默认状态。
2、设置中继器〔Repeater〕内部部件
第 19 页
双击拖入的中继器，进入内部，默认情况下有一个矩形部件，可删除也可按照自己需要改变成自己使用的部件；如以下图设置好相应部件并命名，命名分别为“商品图〞、“价格〞、“商品名〞、“店铺名〞。
3、设置中继器的数据集
在页面下方页面属性栏的中继器数据集里添加默认的数据；其中每一列都要为其命名，命名如下“Name〞，“Price〞，“Store〞，“Image〞〔注意命名必须用英文〕
4、设置中继器工程交互
由于本次例如里包含文本跟图片的提交，所以需要对文本跟图片进展设置；
需要注意的是，设置工程交互时必须选择每项加载时，而非载入时。
〔1〕、首先是设置文本
双击每项加载时进入事件编辑，点击设置文本，对中继器里的每个文本部件分别设置，将文本设置为富文本，然后点击编辑文字进入下一步
〔2〕、按需要设置好字体样式，再选好中继器/数据集相对应的部件名
为局部变量选好对应的部件名
〔3〕、设置图片
第 20 页
图片可以本地导入，也可根据值来设定。
〔4〕、设置中继器页面格式，此例如中选择横向布局，每三项换行，其他设置可根据需要选择。
〔5〕、回到主页面既可以看到前面设置的两局部默认数据，在此页面根据需要添加几个表单部件与一个提交按钮。
〔6〕、为表单中的元素进展命名
〔7〕、为提交按钮添加鼠标单击时事件
在数据集中新增行，选中中继器后，点击新增行
在弹出以下窗口是，为中继器添加行，点击为fx添加数据
〔8〕、新增局部变量，并选择主页面中参加的相应部件名
〔9〕、最终显示效果，前两个商品为默认数据的商品，第三个那么是通过中继器新添加的商品。
第 21 页