Axure基本使用教程+示例

Axure使用介绍文档
目录
一、Axure rp 的界面 (2)
二、Axure rp的线框图元件 (3)
三、Axure rp的元件触发事件 (4)
四、Axure rp的条件生成 (6)
五、系统函数与变量 (8)
六、动态面板的使用 (14)
七、母版的使用 (20)
八、中继器的使用 (28)
一、Axure rp 的界面
（界面显示各个区域可在主菜单工具栏-视图中找到）
1、菜单工具栏：同大部分软件类似，可选择Axure各个功能的工具区。

2、操作界面：绘制产品的操作区，所有元件、部件可拖与此区域操作。

3、站点地图：页面文件存放区域，可增加、删除、修改、查看页面；可设置页面级别。

4、元件库（部件库）：主要分为流程图和线框图；可拖动元件库里的元件到操作界面进行产品绘制；为提高效率，元件库也可自行导入已经可使用的元件。

5、母版：母版的使用主要针对于顶部导航、底部导航，多个页面中重复出现的元素，可先绘制与母版中，再拖动到需使用的页面（比起重复操作，修改扩展行也更强）。

6、页面属性：可设置当前页面的注释、交互、与样式。

7、元件交互与注释：可对操作页面中用到的元件或元件与元件之间的交互事件进行设置（如动态面板显示与隐藏、鼠标点击事件、鼠标移入移出事件等）。

8、元件属性和样式：可设置选中元件的基本样式与属性。

9、部件管理（动态面板管理）：该区域可对已设置的动态面板状态进行操作，可添加、删除、进行排序，也可双击动态面板进入编辑。

二、Axure rp的线框图元件
1、图片：图片元件拖入编辑时，可双击载入本地磁盘的图片，载入图片是Axure 会自动提示将大图进行优化，避免原型文件过大；载入的图片可以选择原图大小也可以保持元件大小。

2、文本：标题1、标题2、单行文本、多行文本都属于文本类型的元件，在网页中的名称为lable，主要用于文字描述、文本链接等功能
3、矩形：矩形可用作背景、按钮等元件使用；双击矩形可输入文本；拖入矩形时默认是直角矩形，可通过左右拖动左上角的黄色小三角来改变圆角半径；也可通过右键选择形状来改变当前形状。

4、占位符：顾名思义，主要用于替代一些没有交互或交互比较简单的区域。

5、圆角矩形：与矩形功能相似，不同的是拖动使用时，默认为圆角并且有文字说明。

6、水平线、垂直线：两种线的功能一样，主要用于区域与区域之间的划分；也可通过改变角度变成斜线。

7、图片热区：在查看页面效果时不显示，于鼠标点击或移入移出某个区域产生交互时而使用，可理解为一个有效范围。

8、动态面板：页面交互里非常重要的使用元件，在Axure中是必须要学会的，可直接拖动动态面板到页面中，也可通过自行选择需要用到交互的元件选好后，右键转为动态面板，之后再进行设置事件的交互。

9、内部框架：用于页面中嵌入其他页面的Axure元件，可双击指定要嵌入的页面，多用于网站后台原型。

10、中继器：Axure7.0开始更新的元件，中继器的功能非常复杂，主要用于表格或列表中对数据进行记录、排序、分类、分页等操作；中继器就是数据的集中池。

11、窗体部分元件：包含单行文本框、多行文本框、下拉列表框、列表选择框、复选框、单选框、HTML按钮（网页中常用到的基本元件）
12、菜单和表格部分元件：包含树、表格、经典菜单-水平、经典菜单-垂直（主要用于网站导航、多用于后台）
三、Axure rp的元件触发事件
1、OnClick（鼠标点击时）：除了动态面板外的所有元件点击时触发
2、OnMouseEnter（鼠标移入时）：鼠标进入某个元件范围时触发
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制作原型时，经常用到交互事件以达到页面的保真效果，而为保障能完成更加复杂的交互事件，就需要用到条件。

1、新增条件
（1）、要对元件或其他相关页面添加交互事件的条件，首先双击需要添加条件的事件，打开用例编辑器，在用例编辑器的第一步用例说明右方（如图数字1的位置），点击添加条件即可打开条件生成
（2）、图中数字2的位置包含全部、任意，两项可选；与字义一样，要形成完整的条件语句，不许满足全部条件，或满足任意一种条件即可。

（3）、图中数字3的区域即为实际设置条件的区域。

图中数字4里为可设置的条件，其中包括
▏值：可以是字母、数字、汉字、符号、函数、公式；可直接输入，或点击fx计入编辑。

▏变量值：Axure中默认的变量值为OnLoadVariable，可通过新建、重命名、删除来操作。

▏变量值长度：值变量值的字符个数，其中Axure中一个汉字为一个字符。

▏部件文字：元件中可编辑的文字，当然必须是可编辑文字的元件，其中不包含-动态面板、图片热区、垂直线、水平线、内部框架、下拉列表、列表框。

▏焦点部件上的文字：通过鼠标点击或Tab切换被选中的元件上的文字；如文本框获取焦点时，光标在文本框内闪动；按钮获取焦点时四周会出现虚线。

▏部件值长度：元件中字符个数；仅包含单行、多行文本框、下拉列表和列表框。

▏选中项值：选中时值为“真”，为选中时值为“假”；仅适用于单选按钮和复选框。

▏选中状态值：通过获取元件当前值来确定选择状态，仅适用于下拉列表和列表框。

▏动态面板状态：仅限动态面板使用，以动态面板状态为判断条件来激发事件。

▏部件可见性：以元件的显示隐藏作为判断条件，true为显示，false为隐藏；也包含动态面板的显示隐藏。

▏部件范围：指元件覆盖的范围，以是否触碰到指定元件为条件。

▏自适应视图：自适应视图存在继承关系，利用视图与视图之间的关系引用条件。

五、系统函数与变量
1、变量
与其他计算机语言类似包含以下变量类型
全局变量：可以在整个原型的任意位置调用和修改
局部变量：仅作用于某一事件的某一动作内
自定义变量：自行新建的全局变量
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]]；
（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。

（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 紧接着要抽取的片段的结尾的下标。

若未指定此参数，则要提取的子串包括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 ()]]
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)。

getMonthName：返回日期中的月份名称(0 ~ 11)。

getSeconds：返回日期中的秒数(0 ~ 59)。

不行了，楼老师快精尽人亡了，以下请好事者自行研究吧！
getTime：返回1970 年1 月1 日至今的毫秒数。

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

getUTCDate
getUTCDay
getUTCFullYear
getUTCHours
getUTCMilliseconds
getUTCMinutes
getUTCMonth
getUTCSeconds
toDateString
toISOString
toJSON
toLocaleDateString
toLocalTimeString
toLocaleString
toTimeString
toUTCString
valueOf
addYear
addMonth
addDay
addHour
addMinute
addSecond
addMillisecond
parse：返回1970年1月1日午夜到指定日期（字符串）的毫秒数。

UTC：根据世界时返回1970 年1 月1 日到指定日期的毫秒数。

六、动态面板的使用
动态面板控件（Dynamic Panel）可以让你实现高级的交互功能，实现原型的高保真度。

动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理解成一个独立的页面）。

任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。

结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。

像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。

简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态。

而动态面板的每一个状态都可以看作是产生的一个新的交互结果。

Axure中掌握动态面板是非常重要的一部分内容，下面通过一个例子来了解动态
面板的使用
第一步：拖动动态面板到主操作区，并设置好动态面板相应的大小，同样也可以通过拖入其他元件再右键转为动态面板实现。

（图1）
第二步：双击动态面板，打开动态面板状态管理，新建三个面板状态，并相应命名（注：平时使用Axure元件时需养成规范命名习惯，此处命名于演示方便图2）
第三步：分别双击演示状态1、2、3进入面板状态页面，并拖入相应元件（此
处以图片演示）图3、4、5
第四步：回到主操作页面，动态面板会显示最顶层的状态元件；在此页面添加三个按钮，同样转为动态面板，再为每个按钮添加如图6下方第二种状态。

第五步：分别为三个按钮添加鼠标点击时事件，设置动态面板状态。

图7、8、9
第六步：设置完交互事件后，按F5快捷键进入浏览器预览，图10为动态面板显示效果。

七、母版的使用
母版可以把项目中重复使用的部件集合起来，为了方便维护，可以将这些重复使用的部件做成母版，需要调用的时候直接从母版菜单栏拖拽过来。

当你修改母版的时候，所有调用到该母版的页面或区域都会发生相应变动，就不用一个一个页面地去修改了。

母版使用说明
1、新增母版，在母版管理面板中，点击新增母版
2、也可以选中要转为母版的元素，右键，点击转换为母版。

3、在母版面板中可以添加母版、新增文件夹、向上移动、向下移动、降级、升级、删除、搜索
4、添加母版到页面，拖拽母板到设计区域中。

5、母板可以设置三种不同的拖放行为：拖放到任何位置、锁定母板位置、从母板脱离。

要改变母板行为，右键点击母板-- 拖放行为，在弹出的子菜单中进行选择。

你可以随时修改母板行为，但是这只会影响到你当前要拖放到设计区域
的母板。

母版使用示例
1、拖动母版到设计区域（图中母版已经锁定到母版位置x=0 ,y=1184的位置）
２、双击母版进入母版元件设置，图中分为五个动态面板，每个动态面板有两种面板状态。

3、在母版外的主设计页面中，为动态面板-万事通设置五种状态（五种状态分别对应母版中五个动态面板）
4、由于动态面板-万事通属于母版外的元素，且为母版新增用例时，是不可能操做外部（母版外）元素的；所以此用例中，若要以母版的用例来操作动态面板-万事通，就需要在母版点击目标元件，增加一个触发事件。

５、首先为母版添加相应的触发事件，分别命名为EventPhone、EventContacts、EventStore、EventLnn、EventMore。

6、进入母版，分别为母版中相应的动态面板添加触发事件
7、添加过触发事件后，母版就可以控制母版外的元素了；回到主页面，点击母版在交互事件里就可以看到母版里添加的触发事件。

8、此时为已设置好的触发事件添加交互以控制母版外的元素,分别双击EventPhone、EventContacts...添加交互事件。

9、最终显示效果如下
八、中继器的使用
中继器是Axure7.0之后更新的新功能，英文名为Repeater，就如其名一样，Repeat重复数据的集合，一个数据集合的容器；在交互上通常用于实现新增行、删除行、标记行、排序、筛选等。

而官方介绍来看，可理解为带数据交互功能的表单。

中继器表单使用示例
1、拖动部件库里的中继器到操作区，下面是中继器拖入时默认状态。

2、设置中继器（Repeater）内部部件
双击拖入的中继器，进入内部，默认情况下有一个矩形部件，可删除也可按照自己需要改变成自己使用的部件；如下图设置好相应部件并命名，命名分别为“商品图”、“价格”、“商品名”、“店铺名”。

3、设置中继器的数据集
在页面下方页面属性栏的中继器数据集里添加默认的数据；其中每一列都要为其命名，命名如下“Name”，“Price”，“Store”，“Image”（注意命名必须用英文）
4、设置中继器项目交互
由于本次示例里包含文本跟图片的提交，所以需要对文本跟图片进行设置；需要注意的是，设置项目交互时必须选择每项加载时，而非载入时。

（1）、首先是设置文本
双击每项加载时进入事件编辑，点击设置文本，对中继器里的每个文本部件分别设置，将文本设置为富文本，然后点击编辑文字进入下一步
（2）、按需要设置好字体样式，再选好中继器/数据集相对应的部件名为局部变量选好对应的部件名
（3）、设置图片
图片可以本地导入，也可根据值来设定。

（4）、设置中继器页面格式，此示例中选择横向布局，每三项换行，其他设置可根据需要选择。

（5）、回到主页面既可以看到前面设置的两部分默认数据，在此页面根据需要添加几个表单部件和一个提交按钮。

（6）、为表单中的元素进行命名
（7）、为提交按钮添加鼠标单击时事件
在数据集中新增行，选中中继器后，点击新增行
在弹出下列窗口是，为中继器添加行，点击为fx添加数据（8）、新增局部变量，并选择主页面中加入的相应部件名
（9）、最终显示效果，前两个商品为默认数据的商品，第三个则是通过中继器新添加的商品。